バックエンド

パソコンでホームページをつくる5つの方法とサーバー4種類をまとめてみました【初心者向け】

子供向け無料プログラミング寺子屋『CoderDojo熊本』第1回のアンケートに、こんなメッセージがありました。

ニンジャ
ウェブサイトというのをやってみたいです。
ニンジャママ
ホームページをつくってみたいです。
アオキ
ホームページですか、むむむ。

ホームページとウェブサイトの違いというのも曖昧なところではあるのですが、

正直なところ、一般的な普通のホームページとなるとあまりプログラミングの出番はないというか、

どちらかというと見た目優先、デザイン優先だよなぁと思っていたりしました。

一方、これからますます重視されると言われている『STEM教育』

(サイエンス(科学)、テクノロジー(技術)、エンジニアリング(工学)、マスマティックス(数学))

の分野で考えると、ホームページ、パソコンやサーバーというのは『テクノロジー(技術)』の分野ではあるなぁとも思い、

小学生や中学生でもわかってもらえるように、できるだけ簡単に、まとめてみることにしました。

Sponsored link

パソコンとホームページとサーバーの関係

今ではかなり多くの人がパソコンやスマホを使ってホームページを見ていると思います。

例えばヤフーやアマゾン、楽天などなど。

スポーツが好きならスポーツナビを見るだろうし、

小学生でもYoutubeを見るだろうし、

熊本市の情報が知りたいなと思ったら、熊本市のホームページなどを見ると思います。

スマホの電波が届いていれば、もしくはWifiが届いていれば、日本中いろんなところでヤフーやアマゾンやYoutubeのホームページが見れます。

その仕組みはというと、イメージ的にはこんな感じです。
(ややこしいところは省略しています。)

地球の外からアクセスしてるのはご愛嬌。

日本中、世界中あらゆるところから、パソコンやスマホでブラウザを開いて、

ブラウザ・・インターネットを見る道具。iPhoneならSafari(サファリ)、Androidならグーグルクロムなど。

例えば『ヤフー』と検索すると、世界のどこかのサーバーにつながって、ヤフーのホームページが表示されます。

世界のどこかというのは文字通り、東京の大手町の地下のサーバーだったり、どこかの大学の中のサーバーだったり、アメリカだったりアラスカだったりアイルランドだったり熊本だったり、

それこそ本当に世界中いろんなところにサーバーが保管されています。

サーバーというのは「データを提供する」という意味で、大きなパソコンと思ってもらって大丈夫です。

なんせ世界中いろんな人が、24時間いろんな時間帯でアクセスしてくるので、電源つけっぱなしにしておく必要があります。

電源つけっぱなしでパソコン動きっぱなしなのでもちろん熱くなってくるので、クーラーガンガンに効かせていたりします。

しかも万が一地震などの災害がおこっても大丈夫なように、

東京の大手町と大阪のなんばの地下でデータをやりとりして、

片方が倒れてももう一方が大丈夫だからアクセスできる、なんてこともやっていたりします。

実際に、自宅のパソコンをサーバーとして使ってるという人もいたりしますが、

  • 電源つけっぱなし
  • クーラーつけっぱなし
  • バックアップとって
  • ブレーカー落ちてもいいように緊急用のバッテリー用意したり

となにかと大変なので、よっぽど物好きでない限りは、自宅でサーバーをつくるのはやらない方がいいかなと思います。

ではどうやって、パソコンやスマホで見れるようなホームページをつくるかというと、サーバーを借りちゃうといいわけです。

最近の言葉でいうと『シェア』ですかね。

ここからは、まずはパソコンでホームページを作る方法を整理して、その後に、いろんなシェアなサーバーを紹介してみようと思います。

ちなみに、、、

『ヤフー』のホームページを開くと、ブラウザの上の方に、

https://www.yahoo.co.jp/

という文字が表示されると思います。

これはアドレスと読んだり、URL(ユーアールエル)と読んだり、 yahoo.co.jp の部分は『ドメイン』と読んだりしまが、

『ドメイン』はざっくりいうと住所みたいなもので、世界中でたったひとつの文字である必要があります。

好きな文字を入れれるけど、先客がいたら変えないとダメですね。

『ドメイン』を買わなくてもホームページは作れるんですが、

自分で好きな『ドメイン』をつけてホームページを作ろうと思ったら『ドメイン』も必要になるかなと思います。

※ドメインは、安ければ年間1000円くらい、高ければうん十万円いきます。

ではあらためて、ホームページを作る方法と、いろんなシェアなサーバーを紹介してみようと思います。

Sponsored link

パソコンでホームページをつくる5つの方法

ホームページを作る方法というのは、ざっくりいうと5つくらいあるかなと思っています。

1. wixなどの無料/有料ホームページ作成サービスを使う
2. ホームページ用のツールを使う(ホームページビルダーなど)
3. HTML+CSS+JavaScriptで直書きする
4. サーバー側のプログラム言語も使う(PHP、ワードプレスなど)
5. がっつりウェブアプリをつくる

1 から 5の順で プログラム寄りになっていきます。

ホームページを作る方法その1. wix

1番目はとにかくさくっとホームページがつくりたい人向けで、

wix(ウィックス)などを使えばとても綺麗なサイトが簡単につくれちゃうので、

すでに仕事をしていて宣伝用にホームページをつくりたいという場合はこれでいいんじゃないかなと思います。

wix(ウィックス) なら、wix(ウィックス) が用意しているサーバーも無料で使えるので、ややこしいことを考えずにとにかくホームページ欲しいという人ならベストじゃないかなと思います。

※気のきいた事をやろうとすると有料になるので注意。

ホームページを作る方法その2 ホームページビルダーなどのツール

ホームページ作りたい人
wixはキレイはキレイなんだけど、なんか面白くないんだよね・・オリジナリティがないというか、似たり寄ったりな気がして。

という人に人気なのが、『ホームページビルダー』や『Bind(バインド)』というホームページ用のツール。

専門的なプログラムを書くことなく、パーツを組み合わせてホームページがつくれるようになっています。

最近は自動でスマホ対応もやってくれたりして、とにかく使いやすい。

有料なソフトが多いですが、プログラミングはやんなくていいよという人は、wix(ウィックス)かホームページビルダー系のどちらかでいいんじゃないかなと思います。

また、ホームページを作るときは自分のパソコンでつくればOKなのですが、他の人にも見てもらいたいとなったら、シェアなサーバーを用意する必要がでてきます。

記事後半で説明します。

ホームページを作る方法その3 HTML+CSS+JavaScript

ホームページ作りたい人
パーツを組み合わせるのは楽っちゃあ楽なんだけど、それでもオリジナリティがないんだよね、他の会社でも同じデザインになるっていうか

確かに、wix(ウィックス)もホームページビルダーも、他の人が同じようなサイトを作ることだって可能なので、

よりオリジナリティというか、自分だけのホームページということになると、

しっかりと作り込む必要がでてくるのかなと思います。

パソコンで本格的にホームページをつくるとなると、

  • HTML( エイチティーエムエル)
  • CSS( シーエスエス)
  • JavaScript(ジャバスクリプト)

が必要になります。

家に例えると、

  • HTML( エイチティーエムエル)は骨格で、
  • CSS(シーエスエス)で色や見た目を決めて、
  • JavaScript(ジャバスクリプト)で動きを決める感じです。

最近では『CSS(シーエスエス)』を調整することでスマホ対応できたりしています。

『HTML(エイチティーエムエル)』と『CSS(シーエスエス)』はプログラムというよりは、

並べ方や写真の使い方、スペースの取り方などが大事になってきて、『デザインセンス』の成せるワザなので、

デザインが好きという人は、ここを極めるというのもありだと思います。

また、実際のところ、『JavaScript(ジャバスクリプト)』はなくてもホームページはつくれちゃうんですが、

例えば

  • スライドショーや
  • 写真をクリックしたら大きく表示させる、

といった動きをつけたいときは、

『JavaScript(ジャバスクリプト)』や、『JavaScript(ジャバスクリプト)』をホームページ向けに簡単に使えるようにした『jQuery(ジェイクエリー)』などを使うことになるかなと思います。

パソコンで、『HTML+CSS+JavaScript』をつくったあとに、それらのファイルをサーバーに移すことで、世界中どんな人でも見ることができるホームページができあがります。

参考記事

ホームページを作る方法その4 サーバー側のプログラム言語も使う(PHP、ワードプレスなど)

先ほど紹介した3つの言語は、ある特徴があります。

  • HTML( エイチティーエムエル)
  • CSS( シーエスエス)
  • JavaScript(ジャバスクリプト)

それは、ブラウザ側で動くということ。

例えばiPhoneならサファリ、Androidならグーグルクロムで『ヤフー』にアクセスした時に、

サーバーから返ってきた情報を、サファリやグーグルクロムが頑張って表示してくれています。

なので、どんなサーバーを使っていても、この3つの言語は使うことができるし、使う必要もでてきます。

専門用語だと、『クライアントサイド』と呼んだりします。

一方、この3つの言語ではできない事もあったりします。

例えば、

  • お問い合わせフォーム
  • コメント機能

などです。

ブログを書いて、コメントをもらったり、仕事でメールを受け取ったり。

最近ならフェイスブックやツイッターなども、コメント書いたりシェアできたりできますが、

こういう仕組みはブラウザ側ではなくて、サーバー側で作り込む必要がでてきます

サーバー側で使える言語を専門用語では『サーバーサイド』と呼んだりします。

サーバー側で使える言語というのはたくさんあるんですが、有名なところだと、

  • PHP (ピーエイチピー)
  • Ruby (ルビー)
  • Python (パイソン)

かなと思い、特に『PHP(ピーエイチピー)』はホームページ用につくられているので、

ほとんどのレンタルサーバーで使えるプログラム言語になります。

世界中のホームページで一番使われているのが、『Wordpress(ワードプレス)』というツールなのですが、

『Wordpress(ワードプレス)』は、『PHP(ピーエイチピー)』と『Mysql(マイエスキューエル)』というデータベースでつくられています。

  • 人気記事のランキングや、
  • Facebook自動投稿など、

とにかくたくさんの便利機能がオプションとして追加でき、

『HTML+CSS+JavaScript』でつくられたたくさんのデザインの中から好きなものを選ぶこともできるし、

HTMLやCSSを自分でいじって、自分なりのデザインのホームページにすることもできちゃいます。

ホームページをこだわりたい、自分のブログをつくりたいと思ったら、ワードプレスを試す価値はあるのかなと思います。

また、

  • Ruby (ルビー)
  • Python (パイソン)

に関しては、後述しますが一般的なレンタルサーバーでは使えない(またはちょっと難しいことをやろうとするとできない)事が多いので、サーバーを選ぶ必要がでてきます。

Sponsored link

ホームページを作る方法その5 がっつりウェブアプリを作る

ホームページを作る方法の最後は、

ホームページとして表示させるだけじゃなくて、もっとややこしい機能をもたせたい時の選択肢になります。

例えば

  • インスタグラム風の写真アップ機能
  • フェイスブックみたいなSNS
  • 定期的に楽天トラベルの情報を集めたい
  • 株価やテレビ欄の情報を定期的に集めてまとめたい
  • 観光局の情報をまとめて統計をとりたい

などなど。

こういう機能をもたせようとすると途端にプログラミングの割合が増えてきます。

参考記事

パソコンでホームページを作る方法1番から4番までを、

デザインとプログラミングの割合が 8 対 2 くらいだとすると、

がっつりウェブアプリは、デザインとプログラミングの割合が 2 対 8 くらいに逆転する感じです。

とにかくプログラミングを山ほどやることになり、

どんどん難しいというかややこしいプログラミングが増えていきます。

また、プログラミングの量が増えるほど、ホームページ/ウェブサイトというよりはウェブアプリという呼び名に変わってくる印象です。

サーバーもしっかり選ぶ必要がでてきます。

ここまでで、ホームページやウェブアプリの種類をざっくり5つに分けて紹介してきました。

簡単にホームページをつくりたいなら1番か2番の方法でいいと思いますし、

よりオリジナルというか、自分らしいホームページを作るほど難しくなっていって、

最後のウェブアプリはホームページ(ウェブサイト)とは違うプログラミングのスキルが必要になるかなというイメージを持ってもらえたらと思います。

Sponsored link

ホームページを公開するサーバーの種類4つ

自宅でサーバーをたてるというだいぶもの好きな人以外は、世界のどこかにあるサーバーをシェアして使うことになります。

サーバーをシェアする方法はざっくり4つかなと思います。

1. レンタルサーバー
2. Heroku(ヘロク)
3. VPS(ブイピーエス)
4. AWS( アマゾンウェブサービス)

ホームページ用サーバーその1 レンタルサーバー

レンタルサーバーというと、有名なところでは、

といったところが挙げられるかなと思います。

いずれも『PHP(ピーエイチピー)』が動いて、『Wordpress(ワードプレス)』も動くし、月額500円〜と安いので、

普通のホームページやブログなら、レンタルサーバーでいいかと思います。

(このブログもエックスサーバーを使っています。)

ホームページ用サーバーその2 Heroku(ヘロク)

レンタルサーバーの欠点は、Python(パイソン)やRuby(ルビー)などが自由に使えないことです。

ちょっとややこしいことをしようと思ったら途端に制限がきつくなります。

そんな時の選択肢が、『Heroku(ヘロク)』というサービスで、

レンタルサーバーに比べればちょっと難しくはなりますが、Python(パイソン)やRuby(ルビー)も使えるサービスです。

無料版だと、1日につき6時間くらいサーバーにアクセスできない時間帯がでてきちゃうのですが、

新しいウェブアプリをさくっとつくって試しに公開、という場合には一番いい選択肢じゃないかなと思います。

いろんな機能を追加できるのですが、途中からはお金がかかってくるようなので、

本格的に使おうとするなら注意が必要かなと思います。

ホームページ用サーバーその3 VPS(ブイピーエス)

ホームページ作りたい人
Herokuはさくっとつくれるのはいいんだけど、もっと細かい設定したいんだよね・・

という人の選択肢が、VPS(ブイピーエス、バーチャルプライベートサーバー)というサービスで、

世界中どこかの電源つけっぱなしのパソコンを丸ごと借りる、というようなサービスになります。

日本だと有名なところが、

  • さくらのVPS

かなと思います。

世界中どこかのパソコンを丸ごとかりて自由に設定できる反面、

プログラミングだけではなく、サーバー周りの知識も必要になってきます。

Python(パイソン)やRuby(ルビー)でホームページやウェブサイト・ウェブアプリをつくろうと思ったら、Heroku(ヘロク)かVPS(ブイピーエス)が選択肢になるかなと思います。

月額は安いと月800円くらいからあります。

ホームページ用サーバーその4 AWS(アマゾンウェブサービス)

最後のトリは、AWS(アマゾンウェブサービス)。

アマゾンというと通販サイトと思う人が圧倒的に多いと思いますが、

実は通販と同じかそれ以上に、サーバーをシェアするビジネスでがっちり稼いでいます。

最近は『クラウド』と呼ばれたりしますが、

とにかくいろんな種類のサーバーを自由に組み合わせて使う事ができて、大企業が好んで使うサービスです。

弱点は、従量課金ということ。

アクセス数ややりたい事が増えれば増えるほど金額も増えるという仕組みなので、

(場合によっては月額うん十万・・)

個人で使うことはあまりないんじゃないかなと思います。

まとめ

思っていた以上に長くなってしまいましたが、まとめると、

– とにかくホームページ欲しいならwix(ウィックス)かホームページビルダー
– デザイン凝りたいならHTML+CSS
– おしゃれブログ作るならwordpress(ワードプレス)
– しっかりウェブアプリのようなサービスつくりたいならPython(パイソン)やRuby(ルビー)など

で、シェアなサーバーは、

– 普通のホームページならレンタルサーバー
– プログラム練習やお試しならHeroku(ヘロク)
– サーバー設定ごと調整したいならVPS(ブイピーエス)
– とにかく大掛かりな仕組みを使うならAWS(アマゾン)

といった形でしょうか。

できるだけわかりやすくなるよう、ややこしいところはだいぶはしょってますが、

なんとなくの雰囲気でもつかんでもらえたら幸いです。

『web初心者』『HTML/CSS関連』ではこんな記事も読まれています。

1. 【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】

2. ホームページつくり方を3ステップでわかりやすくまとめてみた【初心者向け】

3. 【セマンティックウェブ】HTML5をわかりやすくまとめてみる【初心者向け】

4. 【CSS】の書き方をまとめてみた 『レスポンシブ対応』※随時更新中

5. プログラミング入門おすすめの言語はJavaScriptで決まり〜分かりやすさ第一で説明してみる〜

6. 【P5.js】遊ぶようにプログラミングできるクリエイティブコーディング〜はじめのいっぽ〜(1)

7. 【無料】パソコンのキーボード練習の4つのステップ【これだけでOK】

8. レスポンシブサイトの作り方をめっちゃわかりやすく書いてみた【Bootstrap4】【初心者向け】

9. 【初心者向け】パソコンでホームページをつくる5つの方法とサーバー4種類をまとめてみました

関連記事

  1. バックエンド

    【Vue.js/Laravel】Webアプリ実践記 37歳おっさんが独学でVue.js+Larave…

    本業Webマーケッターと育児をしながら独学でwebアプリをつくってみる…

  2. バックエンド

    【Webアプリ実践記】JSすら怪しい37歳おっさんが独学でVue.js+Laravelでwebアプリ…

    本業Webマーケッターと育児をしながら独学でwebアプリをつくってみる…

  3. フロントエンド

    楽天トラベルのカスタマイズページをできるだけ簡単に手早くつくる方法をまとめてみた

    楽天トラベルのカスタマイズページを作ってみたいと思ってはいるんだけど、…

  4. バックエンド

    【Vue.js/Laravel】Webアプリ実践記 37歳おっさんが独学でVue.js+Larave…

    webアプリ実践記 0日目~10日目webアプリ実践記 11…

  5. バックエンド

    ワードプレスでクリック数を知りたい!というご相談をいただいたので対応方法をメモしておきます

    どーも、アオキです。最近ようやく赤ちゃんが寝返り返りしてくれて感極…

Sponsored link

最近の記事

  1. IoT関連

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラミングの覚え方
  2. 数学

    【微分】とは わかりやすくまとめてみた〜めっちゃすごいわり算【初心者向け】
  3. バックエンド

    【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】
  4. バックエンド

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
  5. バックエンド

    【検索システム】をつくってみた【実際にログインしてさわれます】
PAGE TOP
//記事ページのみに構造化データを出力 //サムネイルを取得 //ここから構造化データの記述