WWW のおはなし
神戸大学理学部惑星学科４回生

岡田 陸

神戸大学理学部惑星学科４回生

半田 大樹(流体地球物理学教育分野)

要旨/目的• WWW (World Wide Web) について、その登場と変遷について知る.
• その構成と WWW サーバについて基礎的なことを理解する.

目次⚫ WWWとは➢ WWW➢ WWW の歴史

⚫ WWWの特徴➢ Web ブラウザ
➢ ハイパーリンク➢ HTML➢ HTTP, HTTPS➢ URL⚫ 前半のまとめ⚫ WWWサーバ➢ Apache➢ Hiki➢ CGI⚫ 後半のまとめWWWとは

WWWとは• WWW(World Wide Web)
– インターネットで提供されるハイパーテキストシステム• ハイパーリンクでドキュメント間をつなぐ• それぞれの文書が必ず住所 (URL) をもつ– 直訳すると「世界中に広がった蜘蛛の巣」

WWWの歴史① ハイパーテキストの歩み• ヴァネヴァー・ブッシュ：「Memex」の概念(1945)– 従来の図書館的な情報の検索システム(目録)では、現代の情報量の爆発的増加に追いつかなくなってしまうという危機を予測– 上記の問題に対処するべく考えられた架空の装置が「Memex (Memory Extenderの略)」– 図書館と電気的に接続されていて, 所蔵する本やフィルムを表示し, さらにその資料同士が相互にリンクしていて, 自動的に相互参照を辿って他の作品を表示するというデバイス

WWWの歴史① ハイパーテキストの歩み• テッド・ネルソン：Project Xanaduの立ち上げ(1960)– コンピュータネットワーク上にハイパーテキストをベースにしたシステムを構築しようと計画– 「ハイパーテキスト」という用語は, 1965年にネルソンが初めて使用• ダグラス・エンゲルバート ：NLSシステムの開発(1965)– 世界で初めてGUIを備え, ハイパーテキストリンクをコンピュータ上で実現したシステム– マウス, ラスタースキャン型ディスプレイ, プレゼンテーションソフトウェアなどを実用化• ビル・アトキンソン：Hyper Cardの開発 (1987)– カードとカードをリンクするボタンを配置することでハイパーリンクを作成することが可能

WWWの歴史②

ティム・バーナーズ＝リーの功績―WWW の登場―• ENQUIRE プロジェクト(1980)• スイスの欧州原子核研究機構(CERN)において多くの研究者に効率良く情報を行き渡らせることが重要な課題• WWW の根本的なアイディアを多く含んでいた• 広く公開はされなかった• World Wide Webの開発 (1990)•••

世界初の Web サーバ httpd と, 世界初のWebブラウザ
WWW クライアントを開発・発表
World Wide Web は, http, URL, HTMLなど現在のWWWの基幹となる仕組みを全て備えた
1993年に, CERN は WorldWideWeb を無料で誰にでも開放することを発表

WWWの歴史③ 普及と規格化• ブラウザ戦争の勃発(1994〜)– 様々な Web ブラウザの開発• NCSA Mosaic (1993〜1997)– 画像の表示できるWebブラウザで大人気に• Netscape Navigator (1994〜2008)• Internet Explorer (1995〜2013)– ブラウザごとに独自の機能やタグを導入し始める→標準化の必要性

WWWの歴史③ 普及と規格化• World Wide Web Consortium(W3C)の設立(1994)– CSS, CGI, HTMLなどの規格を標準化– 中心組織は, MIT/CSAIL(MIT Computer
Science and Artificial Intelligence Laboratory),ERCIM(the European Research Consortium forInformatics and Mathematics), 慶應義塾大学

WWWの特徴

WWWの特徴• Web ページの閲覧には Web ブラウザを使用• ハイパーリンクによって複数の文書がインターネット上で結びついている• ドキュメント記述言語に HTML を使用• プロトコルには HTTP, HTTPS を使用• それぞれの文書が URL をもつ

Webブラウザ• Web ページを閲覧するためのアプリケーションソフトのこと• 単にブラウザと呼ばれることもある• 例: Internet Explorer, Mozilla Firefox,
Google Chrome, Safari, Opera,
Microsoft Edge など

Web ブラウザのシェア: statcounter

引用元： Browser Market Share Worldwide
https://gs.statcounter.com/January, 2009 to October, 2022

Web ブラウザが数多く存在する理由
ブラウザ戦争などの歴史から考えられること・セキュリティ問題
例: 1998 年～ 2006 年 第二次ブラウザ戦争
IE のセキュリティ問題が解決されずにいた頃, 新機能を搭載し, かつ IE のセキュリティ問題の原因を持たない Firefox や Opera などが登場
Windows の標準ブラウザーが IE から MicrosoftEdgeに変更 (2015 年, Windows 10から実装)
・新機能
・描画速度

ハイパーリンク• ハイパーリンク– 文章内に埋め込まれた, 他の文書や画像などの位置情報– 単に「リンク」とも呼ぶ– リンクをクリックするだけで次の文書へ飛ぶことができる• ハイパーテキスト– 文章の中にハイパーリンクを埋め込み, 複数の文書を相互に結びつける仕組みのこと

HTML• HTML (Hyper Text Markup Language)• Web ページを記述するためのマークアップ言語• 文章の構造 (段落など) に関する指定を記述する– 見栄え (フォントサイズなど) に関する指定は CSS(Cascading Style Sheets) が担う• 他の情報資源の位置情報 (ハイパーリンク) を文章内に書き入れることができる• W3C (World Wide Web Consortium) が管理

HTTP, HTTPS• HTTP (Hyper Text Transfer Protocol)– ハイパーテキスト (HTML) 文書などをやりとりするための通信規約– 通常は 80 番ポートを使う• HTTPS (Hyper Text Transfer Protocol overSSL)– HTTP に SSL によるデータの暗号化機能を付加した通信規約– 通常は 443 番ポートを使う

HTTPでの通信
Web ブラウザ

WWW サーバー②HTML ファイルを要求

HTML ファイル③HTML ファイルを送信⑥画像ファイルを要求

画像ファイル⑦画像ファイルを送信

HTTP による通信①URL の指定 or リンクをクリック④HTML ファイル
を得る

⑤HTML ファイルを解析
⑧画像ファイルを得る⑨描画

HTTP, HTTPS• SSL/TLS (Secure SocketLayer/Transport Layer Security)– セキュリティーを要求される通信のためのプロトコル– 暗号化された安全な通信を提供– 機密性の高い情報を安全にやりとりできるようにするために開発

SSL/TLS の仕組み…の前に• 公開鍵認証– 秘密鍵と公開鍵のペアとして鍵を生成• 公開鍵で暗号化されたものはペアの秘密鍵でしか復号できない• 公開鍵をWeb 上に置く or 相手に送信し, それを用いて暗号化してもらい, 秘密鍵で復号する• 電子署名（デジタル署名）– メッセージを書いた人がその人自身であることを証明するためのもの– ハッシュ関数の計算結果(ダイジェスト)を比較し,一致していればその署名が正しいことも保証SSL/TLS の仕組み…の前に• 電子証明書– 送信者が確実に存在することを保証してくれるもの• 信用できるWebサーバであるかどうかを証明しているのではない– 第三者機関（認証局＝CA:Certificate Authority）が公開鍵に対して電子署名を行うことにより、公開鍵の所有者の身元を保証– 電子証明書の中身は、認証を依頼した本人の公開鍵、暗号化手法や登録者情報など

SSL/TLSの仕組み

画像元:
http://www.ibm.com/developerworks/jp/websphere/library/web/web_security/pdf/2_6.pdf

URL• URL (Uniform Resource Locator)• 情報資源の場所を示している記述方式• 「通信方法」と「住所」を指定している
http://

通信方法

itpass.scitec.kobe-u.ac.jp

サーバ名

exp/fy2012

vow.html

ディレクトリ名

ファイル名

HTTP/2• HTTP/2 (Hyper Text Transfer Protocol
version 2)– 2015 年に正式に承認され, 公開された HTTPの新しいバージョン– 従来の HTTP の効率化と速度向上を目指して開発された– 一度に複数のリクエストを同時に処理することが出来るため, 通信速度が向上した– 以前まで使われていた HTTP と完全な後方互換性がある

HTTP/2での通信
Web ブラウザ

WWW サーバー②HTML ファイル, 画像ファイルを要求①URL の指定 or リンクをクリック

HTML ファイル③HTML ファイル, 画像ファイルを送信④HTML ファイル, 画像ファイルを得る

画像ファイルHTTP/2 による通信⑤描画

HTTP/2 の注意点
• SSL/TLS による暗号化が行われた HTTPSの通信上でしか HTTP/2 を使えないブラウ
ザもある• 全てのサイトが HTTP/2 で高速化されるわ
けではない– 例えば, もともとコンテンツが少ないサイ
トやコンテンツを複数ドメインに分散して保存しているウェブページなど

前半のまとめ（WWWの特徴）• Web ページの閲覧には Web ブラウザを使用• ハイパーリンクによって複数の文書がインターネット上で結びついている• ドキュメント記述言語に HTML を使用• プロトコルには HTTP, HTTPS を使用• それぞれの文書が URL をもつ

WWWサーバWWWサーバの仕事• 様々な情報資源を格納, 配信– HTML ファイル, 画像ファイルなど• クライアントの要求に応じてファイルを配信
静的処理– プログラム• クライアントの要求に応じてサーバ側でプログラムを実行し, その結果を配信
動的処理• WWWサーバソフトウェアをインストールすることでWWWサーバとして機能する

WWWサーバソフトウェア• Apache (Apache HTTP Server)– 2021 年 5 月まで世界中で最も使われていたサーバソフトウェア– オープンソースソフトウェア– カスタマイズが容易• 最低限の機能: Apache コア, ApacheAPI• 付加的な機能: Apache モジュール– 多彩な動作環境• Linux, Windows, Macなどで動く• nginx– オープンソースソフトウェア– 最近シェアを伸ばし,世界中で最も使われているサーバソフトウェアとなった・ 特にアクセス数の多いサイトでのシェアが高い

WWWサーバソフトウェアのシェア

引用元： W3 Techs.com
Usage of web servers for websites
https://w3techs.com/technologies/history_overview/web_server

Hiki• Ruby で書かれた Wiki クローンの一種– Wikiクローン：
オリジナルの Wiki (WikiWikiWeb)から派生したソフトウェア• Web ブラウザを用いて文書の作成・編集が可能• アクセス制限が可能• プラグインによる機能拡張– プラグイン：
ソフトウェアに追加され, その機能を拡張するようなプロ
グラム• CSS を使ったテーマ機能– CSS（Cascading Style Sheet）：HTMLの「見栄え」を定義する– tDiary用の豊富なテーマがある• CGI を利用し WWW サーバと連携して動く

CGI(Common Gateway Interface)• 動的処理のサービスを提供する際使われる手法のひとつ
1. ブラウザからの要求を受けたサーバが対応するプログ
ラムを起動
2. プログラムの実行結果をブラウザ側に返す• プログラムはRuby, Perl, Java, C言語などでよく作成されている

CGI(Common Gateway Interface)
サーバー
保存ボタンがプログラムにリンク

CGIプログ
ラム
実行

保存結果(HTML)
実行結果をブラウザに返す後半のまとめ（WWWサーバ）• WWWサーバは, 情報資源の格納, 配信を行う• ITPASS サーバでは, WWWサーバソフトウェアとして Apache を使う• Hiki ではウェブ上で文書の作成・編集が可能• CGI を使うことでサーバの動的処理が可能になっている

参考資料
••
•

2021 年度 ITPASS セミナー 「WWWのおはなし」伊藤旭人, 入場柚太
－ https://itpass.scitec.kobe-u.ac.jp/seminar/lecture/fy2021/211015/pub/www_211015.pdf
IT 用語辞典 e-Words－ http://e-words.jp/
ブラウザのシェアを、3つの情報源で比較してみる。
–•

2021年5月のWebサーバ利用シェア、「Nginx」が「Apache」を初めて上回る–•

https://language-andengineering.hatenablog.jp/entry/20140530/BrowserShareStatCounterVsNetApplications
https://atmarkit.itmedia.co.jp/ait/articles/2105/17/news053.html

Apacheとnginxどちらを採用すべきかメリット・デメリット比較–

https://qiita.com/pink/items/7709218310b5cf11eabe