VOL02WEBサイトに必要なもの

WEBサイトの公開に必要なもの

自分が作ったWEBサイトをインターネット上に公開して多くの人に見てもらえるようにするには、以下の4つのものを揃える必要があります。

• HTMLファイル
• サーバー
• ドメイン
• ブラウザ

それ以外に「絶対に必要ではないけどあったら良いもの」がSSL証明書（https）です。

これらについて、1つずつどんなものかを解説していきます。

HTMLファイル

まずは「HTML」。
これがないとWEBサイトを表示することはできません。

HTMLは「Hyper Text Markup Language」の略で、WEBサイトの内容を書くためのマークアップ言語と呼ばれます。
JavaScript、PHP、Pythonのようなプログラミング言語の仲間のようで、正確には異なります。
ただし、HTMLはJavaScripitと連携してアニメーションのような動きをつけることが多いため、プログラミング言語のような性質を持ち合わせています。

HTMLは「.html」という拡張子がついたテキストファイルに書きます。

WEBサイトで一番最初に表示されるトップページは「index.html」となりますが、それ以外のページは内容に合わせて自由に命名します。
例えば、会社案内のページであれば「about.html」、アクセスは「access.html」、お問い合わせは「contact.html」などです。

HTMLファイルの作成や書き方については次回解説します。

スタイルシート（CSS）

スタイルシート（CSS）はHTMLの表示を整える役割で使用します。
必須ではありませんが、ほぼ全てのサイトで使用していると言っても過言ではないほど無くてはならないものです。
スタイルシートの書き方についても、HTMLの後に解説をします。

サーバー

続いて「サーバー」です。
より厳密には「WEBサーバー」が必要となります。

サーバーはインターネット上における土地のようなもので、ここにWEBサイトのファイルを置いておくことで、世界中どこからでもアクセスできるようになります。
自前でサーバーを用意すると専門的な知識が必要となるため大変ですが、レンタルサーバーを利用すると簡単に用意することができます。

レンタルサーバーはたくさん種類がありますが、有名なものにロリポップ、さくらインターネット、お名前.com、Xサーバーなどがあります。
サーバーの性能や機能、料金が異なりますが、サーバーの選び方はワークショップの後半で詳細に解説していきます。

ドメイン

WEBサイトを特定するために必要となるのが「ドメイン」です。
サーバーがインターネット上の土地であるとすると、ドメインは土地の場所を特定するための住所になり、サーバーと結び付けて使用します。

ブラウザなどで上の方に表示される「URL」を目にしたことがあると思いますが、このURLのうち「https://」より後ろがドメインです。
例えば、「https://gray-code.com」なら「gray-code.com」の部分がドメインに該当します。

このドメインがあることで、インターネット上に無数にあるWEBサイトの中から見たいものを特定することができるようになります。

ドメインはお名前.comやムームードメインなどの「レジストラ」に申請して取得します。
ドメインの取得は早い者勝ちになるため、もし使いたいドメインがある場合は早めに取得して抑えておいた方が安心です。

ブラウザ

WEBサイトをサーバーに置いてドメインも結び付けると、作成したWEBサイトは誰でも見られるようになります。
ただし、WEBサイトを見るには「ブラウザ」というWEBサイトを表示するためのアプリケーションが必要です。

ブラウザはEdge、Chrome、Firefox、Safari、Opera、Internet Exploereなどがあり、パソコンやスマホ、タブレットなどに標準で入っていることが多いので特別に用意する必要はありません。

このブラウザがサーバーと通信をしてWEBサイトを取得し、表示してくれることではじめてWEBサイトを見ることができます。
サーバーと通信するにはURLを打ち込んだり、Googleで検索して探す方法などがあります。

以上がWEBサイトに必要なものでした。
続いてもう1つ、絶対ではないのですが「できればあった方が良いもの」を紹介します。

SSL証明書（https）

この「SSL（Secure Socket Layer）証明書」は、URLでよく見かける「https://」を使うためのものになります。
SSL証明書がないWEBサイトのURLは「http://」、ある場合だと「https://」と「s」が付く形なり、URLの隣りに鍵のアイコンが表示されます。

SSL証明書を使っているWEBサイトは、ブラウザとサーバーの通信を暗号化して盗聴を防ぐことができます。
一方、使っていない場合は通信が暗号化されないため、通信の途中で盗聴されてしまった場合は情報が筒抜けになってしまうリスクがあります。

インターネットでは以前からセキュリティ向上の動きがあり、SSL証明書を使っていないWEBサイトを表示しようとすると警告が表示されてしまうこともあります。
Googleの検索においても、SSL証明書を使っているWEBサイトを優遇するようになっているため、SEOの観点からも「ほぼ必須」となっています。

「証明書」と一見堅苦しい印象ですが、ドメインを取得していれば簡単に発行してもうらことができます。
こちらの発行方法についてもワークショップの後半で解説していきます。
なお、ドメインとは異なり早い者勝ちではないため急ぐ必要はなく、使う直前に用意すれば大丈夫です。

より高機能なWEBサイトを作るためには

ここまでで、WEBサイトに最低限必要なものは全て紹介してきました。
最後に、あったらより便利なものをいくつか紹介します。

JavaScript

JavaScriptはWEBサイトに動きを付けたいときに使用します。
画像のスライドショーやコンテンツの表示／非表示の切り替え、サーバーとのリアルタイム通信などを実現することができ、スタイルシートと並んで無くてはならないものになっています。
このワークショップでは扱いませんが、もしプログラミングに興味があったら挑戦してみてください。

CMS

CMS（Contents Management System）はWEBサイトの管理を便利にするツールです。

代表的なものにはWordPress、MovableTypeなどがあり、聞いたことがある方も多いかもしれません。
特にWordPressはオープンソースで開発されていることと柔軟なカスタマイズができることから、世界的に最も多く使われているCMSになっています。

PHP、Python、Ruby

サーバー上で動くプログラミング言語を使うと、WEBサイトをより柔軟に表示することができるようになります。
先述したWordPressもPHPで書かれているため、もしPHPのコードを書けるとWordPressのテーマやプラグインを必要に応じて開発できるようになり、使い方の幅がグッと広がります。
ここではあまり詳しくは解説しませんが、もし興味があったら挑戦してみてください。

今回はここまでとなります。
次回からはHTMLを書くための「index.html」を作成し、実際にHTMLを書いていきます。