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

by

前回のおさらい

  • 世界のWebの43%がWordPressで運用されている
  • 国内CMSシェア84%
  • CMS＝コンテンツ・マネジメント・システム
  • 最初はブログから始まり、今ではCMSとしてWebサイト/ECサイト/アプリ開発にも使われる
  • ユーザーが多いから、関連書籍やネットの情報や商品、サービスも多い
  • 無料で使える＝オープンソース・ソフトウェアでありボランティアで開発されている
  • 「テーマ」と「プラグイン」、２つの機能により自由に拡張できる

IPアドレスとは

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

153.126.167.125

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

インターネット歴史年表
https://www.nic.ad.jp/timeline/

自分のスマホに割り当てられたIPアドレスを知る方法（スマホでアクセスしてみよう）https://www.cman.jp/network/support/go_access.cgi

Wi-Fiがオンの状態でアクセスWi-Fiがオフ
コアカレッジのIPアドレスが表示4Gに接続している手元のスマホのIPアドレスが表示

インターネット10分講座：IPv4アドレス｜JPNIC
https://www.nic.ad.jp/ja/newsletter/No26/090.html

ドメイン名とは

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

https://www.core.ac.jp/iida/

  • 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. ブラウザのアドレスバーにwww.core.ac.jp/iida/と入力してenterキー
  2. www.core.ac.jp/iida/というドメインをプロバイダのDNSサーバーに（ルーターを経由で）投げる
  3. プロバイダのDNSサーバーがルートサーバーに.jpのDNSサーバーのIPアドレスを尋ねる→接続
  4. 同、.jpのDNSサーバーにwww.core.ac.jp/iida/のDNSサーバーのIPアドレスを問い合わせる→接続
  5. ブラウザは、core.ac.jpのDNSサーバーに/iida/index.htmlのページデータを要求→接続
  6. トップページのファイルindex.html（なければindex.php、default.htmlなど）をブラウザに送り返す
  7. ブラウザは受け取った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の評価（検索エンジンの順位）はドメインに紐づく
  • 検索エンジンの順位が高いとアクセスが多く、成果（問い合わせUP、売上UP）に繋がりやすい
  • だから、ドメインは財産でもある
  • 覚えやすいキャッチーなドメインは高値売買も行われている

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

Webよもやま話

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

出典：だえうワードプレス https://daeuwordpress.com/wordpress-system/

HTMLの場合（WordPressを使用しない場合）

  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. 複雑だが、HTMLファイルを直接触らずにブラウザから更新できたり、様々な条件に応じて表示をコントロールできる。

それぞれの特徴

使用しない場合WordPressを使用する場合
仕組みはシンプル、表示が早い仕組みは複雑、表示が遅くなる可能性もある
更新が大変更新がラク
技術・専用ソフトウェアが必要技術が不要、必要ならコードも書ける

シンプルなHTMLの利用が想定される場面

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

WordPressの公式サイト

https://ja.wordpress.org/

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

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

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

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

Web制作の現場でよく出てくるキーワード

  • IPアドレス/ドメイン名（ドメイン、独自ドメイン）
    • 説明済みのため省略
  • ドメイン管理会社
    • 大抵はドメインを取得したドメイン取得サービス、レンタルサーバー会社。
    • ドメイン管理会社はどこ？　→　「お名前.com」です。
  • ドメインの移管
    • ドメイン管理会社を変えること。承認手続きと10日ぐらいかかり、結構面倒。
    • 例）「お名前.com」から「エックスサーバー」に移管してサーバーとドメインを一元管理する
  • ネームサーバー/DNS
    • 例）〇〇.co.jpのネームサーバーってどこ？　→　「エックスサーバー」ですね。
  • ネームサーバーの変更
    • ドメイン管理会社はそのままで、ネームサーバーを変えることはある。
    • 例）「お名前.com」でドメインを取得し、「エックスサーバー」のネームサーバーで管理。
    • ドメインの移管と混同しないように。ややこしい。
  • FQDN
    • ドメイン名にホスト名まで含めたアドレス全体。
    • 例）コアカレッジのFQDN教えて　→　iida.core-gakuen.com です。
  • URL/URI
    • Webサイトのアドレス。Uniform Resouce Locator/Identifierの略。
  • ディレクトリ/サブディレクトリ
  • 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. サイト名とユーザー名、パスワードを設定、インストール

以上

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x