第2回 そもそもWebサイトってどんな仕組み？CMSとは

IPアドレスとは

飯田コアカレッジのWebサーバーのIPアドレス：

157.7.44.216

• インターネット上の住所のようななもの 
• インターネットに接続しているすべての機器には個別のIPアドレスが割り当てられる
  • その瞬間に同じIPアドレスは世界に２つとない
• IPアドレスは1〜3桁の数字（0〜255）をドットで4組繋いだもの
  • 0.0.0.0 〜 255.255.255.255
• 256×256×256×256=約43億とおりのIPアドレスを表現可能！膨大！　…だが。。
  • 2011年に枯渇（すべて払い出してしまった）
• IPv6の登場（上記のものはIPv4）
  • 「v」は“バージョン”の意味
  • 記述例）2001:0db8:1234:5678:90ab:cdef:0000:0000
  • 3.4 x 10の38乗 = 約304澗（億、兆、京、垓、秭、穣、溝、澗…）
  • IoT（Internet of Things モノのインターネット）時代にも十分に対応できる

自分のIPアドレスを知る方法（スマホでアクセスしてみよう）

https://www.cman.jp/network/support/go_access.cgi

Wi-Fiがオンの状態でアクセス→接続しているルーター＝コアカレッジのIPアドレスが表示

Wi-Fiがオフ→4Gに接続している手元のスマホのIPアドレスが表示

■参考

インターネット10分講座：IPv4アドレス｜JPNIC

https://www.nic.ad.jp/ja/newsletter/No26/090.html

ドメイン名とは

飯田コアカレッジのWebサイトのドメイン名：

https://iida.core-gakuen.com

• IPアドレスは人間には覚えにくいので、ドメイン名が考案された
• 2018年時点で約342億ものドメインが発行されている
• IPアドレスとドメイン名を紐付けた対照表のようなものが管轄ごとに分散管理
  • 電話帳 or 住所録のようなもの
• ドメイン名でアクセスすると、”対照表”を参照してIPアドレスを割り出す
• このようなドメイン名からIPアドレスを割り出すシステムを
  DNS（Domain Name System）という
• DNSを構成しているサーバーをDNSサーバー、あるいはネームサーバーと呼ぶ

出典：ドメイン名とDNSの関係 | 第3回 – Web担当者Forum | Impress

https://webtan.impress.co.jp/e/2011/11/25/11551

ブラウザで「飯田コアカレッジ」のWebサイトを開くときに何が起きているか

1. ブラウザのアドレスバーにiida.core-gakuen.comと入力してenterキー
2. iida.core-gakuen.comというドメインをプロバイダのDNSサーバーに（ルーターを経由で）投げる
3. プロバイダのDNSサーバーがルートサーバーに.comのDNSサーバーのIPアドレスを尋ねる→接続
4. 同、.comのDNSサーバーに.core-gakuenのDNSサーバーのIPアドレスを問い合わせる→接続
5. 同、.core-gakuenのDNSサーバーにiidaというホスト/端末のIPアドレスを問い合わせる→接続
6. iidaというホストにトップページのファイルをリクエスト
7. トップページのファイルindex.htmlをブラウザに送る
8. ブラウザは受け取ったHTMLファイルを描画して表示

ドメインの種類

.com　.net　.info　.org

gTLD（ジェネリックトップレベルドメイン）…だれでも取得できる。

.jp　.uk　.us　.it　.to　.tv　など

ccTLD（国別コードトップレベルドメイン）…制限されているものもある。

.jpドメインは日本在住者でないと取得できない

ドメインの取得

「お名前.com」https://onamae.com などドメイン管理会社にドメイン取得料（使用料）を、年間数千円〜数万円払って取得する。レンタルサーバー会社が取り扱っていることも多い。取得後、ネームサーバーで自分が契約しているWebサーバーに紐付ける。設定後、数時間〜最大で48時間かかるとされている（DNSサーバーが分散管理されているため、世界中に浸透するのに時間がかかる）。

ドメインよもやま話…

• 太平洋に浮かぶ小国「ツヴァル」は、GDP（国内総生産）の約1/2が「.tv」使用料
• 世界で２番めに小さい国（人口１万人足らず）で、漁業と観光業がメイン
• 国別ドメイン（ccTLD）の「.tv」を持つ
• 「.tv」が”テレビ”を想起させることから、動画関連サービスに人気
• 「.tv」ドメインの10年間の使用料をアメリカの会社に約50億円で売却
• その利益で2000年に国連加盟を果たす

• SEOの評価（検索エンジンの順位）はドメインに紐づく
• だから、ドメインは財産でもある
• ドメインの高値売買も行われている

次回以降に…。

ドメインに割り当てられたIPアドレスやその他情報を調べる｜MX TOOLBOX®

https://mxtoolbox.com/

Webよもやま話…

世界初のウェブサイトは、1991年8月6日公開。

http://info.cern.ch/hypertext/WWW/TheProject.html ※現在でも見れる

参考記事）

https://wired.jp/2011/08/09/%E3%80%8C%E4%B8%96%E7%95%8C%E5%88%9D%E3%81%AE%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%80%8D%EF%BC%9Awww20%E5%91%A8%E5%B9%B4/

WebサーバーとWordPress（CMS）の関係

出典：だえうワードプレス

https://daeuwordpress.com/wordpress-system/

非WordPress（WordPressなどのCMSを使用しないWebページ）の場合

1. ブラウザからページをリクエスト（拡張子はindex.html）
2. WebサーバーはリクエストされたHTMLファイルをブラウザに送る
3. ブラウザがHTMLを描画して表示
4. 以上！シンプル！

WordPressの場合

1. ブラウザからページをリクエスト（拡張子はindex.php）
2. PHPによりWordPressが起動、一連の処理が実行される
   1. URLから表示すべきページを特定
   2. ページのコンテンツをDB（MySQL）から取得
   3. 適切なテンプレートを呼び出し、コンテンツを流し込んでHTMLを生成
3. WebサーバーはリクエストされたHTMLファイルをブラウザに送る
4. ブラウザがHTMLを描画して表示
5. 以上！複雑！

非WordPressの特徴

• シンプル、表示も早い
• 大量にページがある場合、更新が大変
• HTML/CSS/JavaScriptなどを手打ちしなければならない
  • 知識が必要、ミスも起きやすい、専用ソフトウェアが必要、他

WordPressの特徴

• 処理はHTMLに比べて複雑、表示に時間がかかる（ただし軽減方法あり）
• 大量のページの更新もラク
• HTMLなど手打ちしなくてもいい。必要ならコードも書ける
  • 知識がなくても使える、JavaScriptなど高度なプログラムも簡単に使える、専用ソフトウェアがなくてもとりあえず始められる

非WordPressが利用される場面

• 更新がほとんどないページ/サイト
• ページ数が少ないサイト
• 将来的に拡張が予想されるサイト

WordPressの公式サイト

ホーム

注）WordPress.com というサイトもある。WordPressを使用したサービスの１つ。

WordPressに必要なもの（サーバー側の要件）

※公式サイトより

• PHP
• MySQL/MariaDB（データベース）
• 大抵のレンタルサーバーは対応しているが、プラン（安価なプラン）によっては対応していないので注意
• コントロールパネル（管理画面）から簡単にインストールできる機能をもっているところが多い
• 例１）さくらのレンタルサーバ https://www.sakura.ne.jp/
• 例２）エックスサーバーhttps://www.xserver.ne.jp/functions/ 

WordPressを使う上で持っていたほうがよいもの（ローカル側の要件）

• HTMLエディタ/FTP/統合開発環境（IDE）
  • (Win) Visual Studio Code / Atom / Sublime Text / 他　※いずれも無料https://azure.microsoft.com/ja-jp/products/visual-studio-code/
  • (Mac) Coda / Nova / 他　※有料
• パソコン内にWordPress環境をつくる（ローカルサーバー）
  • (Mac/Win/Linux) Local　※無料
    https://localwp.com/ 

現場でよく出てくるキーワード

IPアドレス/ドメイン名

説明済みのため省略

ドメイン管理会社

大抵はドメインを取得したドメイン取得サービス、レンタルサーバー会社。

ドメイン管理会社はどこ？　→　お名前.comです。

ドメインの移管

ドメイン管理会社を変えること。承認手続きと10日ぐらいかかり、結構面倒。

例）お名前.comからさくらに移管してサーバーとドメインを一元管理する

ネームサーバー/DNS

〇〇.co.jpのネームサーバーってどこ？　→　”さくら”ですね。

ネームサーバーの変更

ドメイン管理会社はそのままで、ネームサーバーを変えることはある。

例）お名前.comでドメインを取得し、さくらのネームサーバーで管理。

ドメインの移管と混同しないように。ややこしい。

FQDN

ドメイン名にホスト名まで含めたアドレス全体。

コアカレッジのFQDN教えて　→　iida.core-gakuen.com です。

URL/URI

Webサイトのアドレス。Uniform Resouce Locator/Identifierの略。

ディレクトリ/サブディレクトリ

スラッシュで区切られた階層。パソコンのフォルダに該当するもの。ディレクトリと表現する。

https://iida.core-gakuen.com/ ←トップディレクトリ

https://iida.core-gakuen.com/opencampus/ ←サブディレクトリ

DB

でぃーびー。「データベース」の略

MySQL

マイエスキューエルと読む。WordPressの他、幅広く使われるデータベースシステム。基本、無料。多くのレンタルサーバーで、PHPとセットで用意されていることが多い。

エディタ

エディタ何使ってるの？　→ Visual Studio Codeです。

SSL化/https対応

http:// ではなくhttps:// でアクセスできるようにすること。セキュリティ向上。Googleが原則としてhttpsに対応していないものは検索順位に影響すると発表したため、ほぼ必須。レンタルサーバーのコントロールパネルから無料で対応できる（有料サービスもある）。

CMS（Contents Management System）

WordPressが有名。無料から有料まで様々。WordPress以外で有名なものは、Drupal、MovableType、Concrete5、Joomla!、NOREN、Squarespace、Shopify

※最後の２つは近年、海外ですごくシェアを伸ばしている。

FTP/SSH

専用ソフトでサーバーのディレクトリに直接アクセスし、ファイルを操作するためのしくみ。Web制作者であればほぼ100%使うことになる。IDE/エディタに機能が付いていることも多い。

WordPressをインストールしてみよう！

1. あらかじめレンタルサーバーのコントロールパネルでMySQLのデータベースを作成しておく（既存のデータベースに追加することもできる）。データベースの接続情報（ユーザー名、パスワード等）をメモしておく（情報漏えい注意！）
2. 公式サイトからWordPress最新版をダウンロード（zipファイル）
   https://ja.wordpress.org/ 右上の「WordPressを入手」から
3. FTPソフトウェアでWebサーバーに接続
4. WordPressをインストールするディレクトリを開き、解凍したzipファイルの中身をアップロード
   — ここまで近藤先生が用意してくれました！感謝！ —
5. ブラウザを立ち上げ、アップロードされたディレクトリにアクセスする
6. WordPressのインストーラーが表示される
7. メモしておいたデータベースの接続情報を入力
8. 「送信」ボタンをクリック。問題なければ接続され、インストール準備完了。
9. サイト名とユーザー名、パスワードを設定、インストール

以上

---