schedule2022.11.8

WEBサイトの仕組み

WEBサイトを制作するに当たってWEBサイトがどのようにして表示されているのか基本的な事を知っているとWEBサイト完成までの道のりが想像しやすくなります。なるべくわかりやすく簡潔にWEBサイトの仕組みを書きたいと思います。

【注意】
厳密には違うことでも分かりやすい例えに言い換えていたりします。実際の事はWEBサイトを沢山作っていけば理解することが多いと思うのでだいたいそんな感じなんだと思っていてください。

ブラウザと呼ばれるWEBサイト閲覧用アプリで
サーバーと呼ばれる機械に保存されたファイルを表示している

パソコン、スマートフォン、ゲーム機と様々なデバイスでWEBサイトを表示することができますよね。そのWEBサイトを見ているデバイスは必ずブラウザと呼ばれるWEBサイト閲覧アプリを使ってページを見ています。

デバイスで何か検索すると検索エンジン(ほぼGoogle)で情報を調べます。この検索エンジンが表示する検索結果もサーバーと呼ばれるネット専用の機械に保存されたファイルなのです。

NetflixやYouTubeなど動画配信サービスが当たり前のように簡単に利用できますが、これらの動画サービスもサーバーに動画ファイルが置かれていて、それをネット回線でダウンロードしながらデバイスに表示させています。

ブラウザでWEBページを表示させていると言いましたが、Netflixなどは専用アプリがあります。専用アプリの場合はブラウザではなくアプリ自体のプログラムが表示させています。しかし、その表示される動画などはやはりサーバーに置かれています。

つまりサーバーにファイルを置けばWEBページを作れる

サーバーとはネット回線を利用して遠くからアクセスできるハードディスクです。ほぼパソコンと同じようなもので、現実的ではないですが自宅のパソコンをサーバーとして利用することも可能です。Googleドライブのようなネット上にファイルを保存できるサービスがありますが、これもサーバーに繋がっています。Googleドライブを使ってWEBページを公開しようと思えば出来てしまいます。

何も知らないとWEBサイトを作ることが難しく感じるかもしれませんが、所詮は誰でもアクセスできるサーバーに書類ファイルを置いて公開しているだけです。難しいのはその公開方法や書類ファイルを複雑に作り上げることです。

WEBサイトを公開するのに必要なサービス

サーバーWEBページを保存する場所
ドメインWEBページを保存した場所の名前付け

WEBサイトを公開するのに必要なサービスはサーバードメインの2つだけです。自前で準備することは出来ますが難易度が高いので有料サービスを利用しましょう。有料といっても月に1,500円程度になります。格安なら月500円で済ませることも可能です。

サーバーは借りることができる

安ければ月額ワンコインでサーバーを借りることができます。サーバーを貸し出している企業は数多くあり、サーバーの種類もあるため自分の目的にあったレンタルサーバーを探す必要があります。

始めてWEBサイトを作る場合は「共用サーバー」と呼ばれるサーバーを借りましょう。共用サーバーで検索するとたくさん出てくると思います。安さで選ぶのもいいですが無料でドメインを貰えるレンタルサーバーがオススメです。また、金額は1,000〜2,000円の間なら通信が安定していて色々試せるのでオススメです。

当然ですが料金を支払っている間だけサーバーを利用できます。そして別のサーバーを借りて引っ越すことも可能です。

ドメインは有料で作ってくれる

サーバーは場所を借りますが、ドメインは有料で作ってもらい管理してもらうことができます。ドメインというのはhttps://○○○.○○/○○○.○○の部分です。このサイトならドメインはwebpad.workになります。

ドメイン名好きに名付けられる
トップレベルドメイン特定の団体が管理している固定の名前

ドメインは2つの名前が組み合わさって出来ています。ドメイン名が一般ユーザーが好きに名付けられる部分です。そしてトップレベルドメインは特定の団体が管理しているユニークな名前になります。

ドメインを作る時に決めるのはドメイン名の命名と、どのトップレベルドメインを利用するかです。

各トップレベルドメイン、例えばこのサイトで使用している.workwebpadというドメイン名は1つしか存在できません。webpad.workはすでに僕が取得してしまっているので他の誰にも使うことはできません。もしwebpadというドメイン名を使いたいなら.work以外のトップレベルドメインを利用する必要があります。

ドメインの料金ですが、トップレベルドメイン毎に金額が違います。支払いは年間単位になり有名な.comなら年間1,300円くらいです。.co.jpなら年間10,000円くらいとかなり差があります。.co.jpが高いのは日本企業である証明を保証してくれるから高くなっています。.comなんかは世界の誰でも取得できるので安い反面、皆が使うのでドメイン名の空きが少ないです。

マイナーなトップレベルドメインは突然廃止されることがあるので注意!

ドメインとサーバーを紐付ける必要がある

ドメインとサーバーはそれぞれ異なるサービスで取得できます。そこで必要なのがドメインとサーバーの紐付けです。webpad.workとブラウザに入力したら特定のサーバーのファイルを見に行けるようにしなければなりません。これはドメイン側とサーバー側の両方で設定する必要があります。

実際に僕が利用しているドメインとサーバーの例を紹介します。

ドメイン・お名前ドットコムで発行
・ネームサーバーにns1.xserver.jpを設定
サーバー・エックスサーバーの共用サーバー
・ドメイン設定に○○○.comを登録

やることはこれだけです。ドメインサービスにネームサーバーを登録し、サーバーに使用するドメインを登録します。これで1日前後待てば実際にドメイン名でアクセスが出来るようになります。

ドメインとサーバーを異なるサービスで取得した例を紹介しましたが、サーバーサービス内でドメインを取得すれば勝手にやってくれます。レンタルサーバーでは1ドメイン無料サービスをよくやっています。おまけドメイン活用すれば簡単にWEBサイトをすぐに公開できるサーバーを準備できるということになります。

データベースもWEBサイト制作に欠かせない要素

サーバーにはデータベースというものが付いてきます。主にMySqlと呼ばれるものが多いですがこれはPHPなどのWEB用のプログラムを利用してアクセスできるエクセルデータのようなものです。ただのHTMLファイルからデータベースにアクセスすることはできませんが、世界のWEBサイトの4割を占めるWordPressはこのデータベースを利用して動いています。

エクセルやスプレットシートを触ったことがある人なら想像しやすいのですが、1クラスの名簿を表作成アプリで作ったとします。その名簿から出席番号10を見れば人物の名前と性別が分かるのですが、データベースに登録していればPHPなどのプログラムでWEB上に引用することができます。もし全員の体重もテーブルに書かれていればクラス全員の平均体重を一瞬で計算して表示させることも可能です。

このようにデータベースとは特定の値をエクセルのように好きに登録しておける保存場所です。その値をプログラムで自由に入出力してECサイトの会員登録や商品カートを作ることができます。

WEBサイトの中身はHTMLと呼ばれる書類データ

WEBページの作成方法は色々ありますが、最終的に出力されるのはHTMLと呼ばれるファイルです。PHPで作ってもJavaで作ってもJavaScriptで作ってもブラウザに表示させるにはHTMLとして出力されています。

HTMLは動的な動きを付けることができず、言ってしまえばただの文字です。そこにCSSと呼ばれる装飾に特化した設定ファイルを加えることでリッチな見た目の書類ファイルを作ることができます。

何が言いたいか…それはWEBページというのはただそれっぽく見た目を良くしただけのWordで作ったような書類ファイルだということです。それっぽいページをリンクと呼ばれるクリックすれば別ページに移動できる仕組みで繋げまくったものがWEBサイトになります。

HTMLについては下記のページに記載していますので参照してください。

最後に

まとめるとドメインで指定したサーバに保存されたHTMLファイルを普段見ているということです。WEBサイトを作りたいのならドメイン名を取得し、サーバーを借りてそこへHTMLファイルを置けるようにならなければなりません。

その一つ一つが面倒ではありますが、1度経験すればほとんど理解できる簡単な作業です。もちろん深く知ろうと思えば相当な勉強が必要になりますが、普通のコーポレートサイトを作るだけならば専門的な知識は必要ありません。