1. 情報編集 (web)
WWW概論、これからのWWW
2013年4月9日
東京藝術大学 芸術情報センター
担当：田所淳

2. 今日の内容
‣ WWWの歴史を駆け足で
‣ インターネット ≠ WWW
‣ インターネットの簡単な歴史
‣ WWWへ至る道
‣ WWWの仕組み
‣ ハイパーテキスト
‣ マークアップ
‣ WWWを支える3つの仕組み(URI、HTTP、HTML)
‣ WWWのこれから
‣ HTML5とは何か?

3. WWW概論

4. WWWの歴史
‣ 「インターネット = WWW」ではない
‣ WWWは、インターネット上の一機能でしかない
‣ WWW以前のインターネットの主要機能
‣ telnet：遠隔にあるサーバを端末から操作
‣ ftp：ホスト間のファイル転送
‣ email：メール
‣ UUCP：ネットニュース
‣ archie：ファイル検索
‣ WWW以前にもインターネットには長い歴史がある

5. インターネットの歴史
‣ インターネットの簡単な歴史
‣ 1957：ARPA創設
‣ 1962：J.C.R. Licklider、地球規模のコンピュータネットワークの
アイデア発表「銀河間コンピュータネットワーク」
‣ 1969：ARPANET始動、UCLAとスタンフォード大
‣ 1971：初のemailを送受信
‣ 1979：USENET開始
‣ 1983：TCP/IPの採用
‣ 1990：ARPANET終了
‣ 1991：Tim Berners-Lee、WWW発表
‣ 1993：Mosaic発表 (後のNetscape)
‣ 1995：Yahoo! 設立
‣ 1998：Google設立
‣ 2004：Facebook設立

6. WWWに至る道
‣ WWWの成立に貢献した発明
‣ インターネットの技術の他にもう一つ重要な発明
‣ ハイパーテキスト(hypertext)
‣ 複数の文書を相互に関連付け、結び付ける仕組み
‣ ハイパーリンク：テキスト間を結びつける参照のこと

7. WWWに至る道
‣ ヴァネバー・ブッシュ (Vannevar Bush)
‣ 論文 “As We may think (我々が考えるように)” (1945)
‣ 図書館的な情報検索システムは情報の増加に追いつかない
‣ 連想の網の中で多くの知識を格納する → ハイパーテキスト

8. WWWに至る道
‣ memex (1945)
‣ ヴァネバー・ブッシュが"As We May Think" で発表した
コンピュータシステムの概念
‣ 一種の図書館と電気的に接続され、その図書館の本やフィ
ルムを表示でき、自動的に相互参照をたどって他の作品
（本やフイルム）を表示するデバイス

9. WWWに至る道
‣ テッド・ネルソン(Theodor Holm Nelson)
‣ Project Xanadu：コンピュータネットワーク上にハイパー
テキストを実現する計画 (1960)
‣ 「ハイパーテキスト」という用語を初めて使用 (1965)
‣ 後のWWWに多大な影響

10. WWWに至る道
‣ ダグラス・エンゲルバート(Douglas Carl Engelbart)
‣ NLSシステム(1968)
‣ ハイパーテキストインタフェース（と初の実用的なGUI）の
デモを公衆の前で初めておこなう
‣ "The Mother of All Demos"「すべてのデモの母」

11. WWWに至る道
‣ アスペン・ムービーマップ (1977)
‣ 初のハイパーメディアアプリケーション
‣ アスペンの街をバーチャル旅行することができる
‣ コマ撮りされた大量の写真がリンクされている

12. WWWに至る道
‣ HyperCard (1987)
‣ Apple Compuerのビル・アトキンソン(Bill Atkinson)
‣ ハイパーテキストを実現した初の商用ソフトウェア
‣ リンクで結合されたカードの集積をスタックとして扱う
‣ ネットワークには未対応

13. WWWに至る道
‣ HyperCardカードのスタックの例
‣ “The Manhole” (1989)
‣ ハイパースペース上でのインタラクティブ小説

14. WWWの誕生
‣ ティム・バーナーズ＝リー（Timothy John Berners-Lee)
‣ WWWの生みの親

15. WWWの誕生
‣ ティム・バーナーズ＝リーの ”World Wide Web”
‣ WWW開発の動機
‣ 欧州原子核研究機構（CERN）で数千人の研究者同士の情
報を行きわたらせるためのシステム構築を命じられる
‣ CERN - スイスのジュネーヴ郊外にある、世界最大規模の
素粒子物理学の研究所

16. WWWの誕生
‣ ティム・バーナーズ＝リーの ”World Wide Web”
‣ 各国に散らばっている実験者が瞬時に情報にアクセスしたい
‣ 同時に多くのコンピュータ間で同じ情報を共有したい
‣ 1990年、初のWWWブラウザ “WorldWideWeb” を発表
‣ http://www.w3.org/People/Berners-Lee/
WorldWideWeb.html

17. WWWの誕生
‣ ”World Wide Web スクリーンショット - 1

18. WWWの誕生
‣ ”World Wide Web スクリーンショット - 2

19. WWWの誕生
‣ ティム・バーナーズ＝リーの ”World Wide Web”
‣ 開発にはNeXTコンピュータを使用
‣ Appleを追放されたスティーブ・ジョブスが設立した
‣ 先進的で洗練されたGUIと開発環境

20. Webブラウザの発展
‣ VioliaWWW (1991)

21. Webブラウザの発展
‣ NCSA Mosaic (1993)

22. Webブラウザの発展
‣ Netscape Navigator (1994)

23. Webブラウザの発展
‣ Internet Explorer (1995)

24. Webブラウザの発展
‣ Opera (1996)

25. Webブラウザの発展
‣ Mozilla (2002)

26. Webブラウザの発展
‣ Firefox (2002)

27. Webブラウザの発展
‣ Safari (2003)

28. Webブラウザの発展
‣ Google Crhome (2008)

29. Webブラウザの発展
‣ 参考: The Evolution of Web - Webの進化
‣ http://www.evolutionoftheweb.com/

30. HTMLを支える3つの仕組み
URL, HTML, HTTP

31. WWWのしくみ
‣ 自分のPCでWebページを見ているとき、何が起っているのか
‣ 閲覧したいWebページのアドレスを入力
‣ 例：http://amc.geidai.ac.jp/guide/about

32. WWWのしくみ
‣ 自分のPCでWebページを見ているとき、何が起っているのか
1. Webブラウザは、アドレスからサーバの場所を探しだす
‣ “http://amc.geidai.ac.jp” の部分がこれに相当
http://amc.geidai.ac.jp

33. WWWのしくみ
‣ 自分のPCでWebページを見ているとき、何が起っているのか
‣ アドレスの残りの部分から、サーバ内の該当データを特定
‣ “/guide/about” の部分がこれに相当
/guide/about

34. WWWのしくみ
‣ 自分のPCでWebページを見ているとき、何が起っているのか
‣ Webページのデータをサーバから手元のPCに送信

35. WWWのしくみ
‣ 自分のPCでWebページを見ているとき、何が起っているのか
4. PC側で受信した情報から、Webページを生成し表示

36. WWWを支える3つの仕組み
‣ URI (もしくは URL)
‣ Uniform Resource Identifier
‣ ネットワーク上の情報を一意に特定するアドレス指定方法
‣ HTTP
‣ HyperText Transfer Protocol
‣ コンピュータ同士が情報をやりとりするルール
‣ HTML
‣ HyperText Markup Language
‣ 環境にかかわりなくWWWを記述するための文書記述言語

37. WWWのしくみ
‣ 先ほどの例でいうと
‣ 3つのしくみ(URI, HTTP, HTML) について理解する
URI
HTTP
HTTP
HTML

38. 「HTML5」とは何か?

39. HTML5とは何か?
‣ HTMLの新バージョン、HTML5とは何なのか?

40. HTML5とは何か?
‣ HTMLのテクノロジの変遷
‣ 1991 - HTML
‣ 1994 - HTML2
‣ 1996 - CSS1 + JavaScript
‣ 1997 - HTML4
‣ 1998 - CSS2
‣ 2000 - XHTML1
‣ 2005 - Ajax (Asynchronous JavaScript + XML)
‣ 2009 - HTML5

41. HTML5とは何か?
‣ 参考：HTML5までに至るバージョンの変遷

42. HTML5とは何か?
‣ 最大の変化をひとことで言うと…
‣ Web「文書」から「アプリケーションへ」
メーラー、地図、
文書 ムービープレーヤー、
スケジューラー など

43. HTML5とは何か?
‣ 例：Google+

44. HTML5とは何か?
‣ 例：ブラウザやウェブについて知っておきたい20のこと
‣ http://www.20thingsilearned.com/ja-JP

45. HTML5とは何か?
‣ The Evolution of Web - Webの進化
‣ http://www.evolutionoftheweb.com/

46. HTML5とは何か?
‣ 厳密に定義は、いろいろな意見が…
‣ 参考：どこまでがHTML5なの？
‣ http://www.publickey1.jp/blog/10/html5_9.html

47. 広義のHTML5と狭義のHTML5
広義のHTML5
狭義のHTML5
‣ この授業では「広義のHTML5」をHTML5として解説します
‣ Webアプリケーションを実現するための技術全般として

48. HTML5による表現
‣ 参考サイト：Chrome Experiments
‣ http://www.chromeexperiments.com/

49. 1学期、楽しくやっていきましょう!
最後にアンケート