情報編集(web) 130409

情報編集 (web)WWW概論、これからのWWW

2013年4月9日東京藝術大学 芸術情報センター担当：田所淳

今日の内容‣ WWWの歴史を駆け足で‣ インターネット ≠ WWW‣ インターネットの簡単な歴史‣ WWWへ至る道

‣ WWWの仕組み‣ ハイパーテキスト‣ マークアップ‣ WWWを支える3つの仕組み(URI、HTTP、HTML)

‣ WWWのこれから‣ HTML5とは何か?

WWW概論

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

‣ WWW以前にもインターネットには長い歴史がある

インターネットの歴史‣ インターネットの簡単な歴史

‣ 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設立

WWWに至る道‣ WWWの成立に貢献した発明‣ インターネットの技術の他にもう一つ重要な発明

‣ ハイパーテキスト(hypertext)‣ 複数の文書を相互に関連付け、結び付ける仕組み‣ ハイパーリンク：テキスト間を結びつける参照のこと

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

WWWに至る道‣ memex (1945)‣ ヴァネバー・ブッシュが"As We May Think" で発表したコンピュータシステムの概念

‣ 一種の図書館と電気的に接続され、その図書館の本やフィルムを表示でき、自動的に相互参照をたどって他の作品（本やフイルム）を表示するデバイス

WWWに至る道‣ テッド・ネルソン(Theodor Holm Nelson)‣ Project Xanadu：コンピュータネットワーク上にハイパーテキストを実現する計画 (1960)

‣ 「ハイパーテキスト」という用語を初めて使用 (1965)‣ 後のWWWに多大な影響

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

‣ "The Mother of All Demos"「すべてのデモの母」

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

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

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

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

WWWの誕生‣ ティム・バーナーズ＝リーの ”World Wide Web”‣ WWW開発の動機‣ 欧州原子核研究機構（CERN）で数千人の研究者同士の情報を行きわたらせるためのシステム構築を命じられる

‣ CERN - スイスのジュネーヴ郊外にある、世界最大規模の素粒子物理学の研究所

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

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

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

WWWの誕生‣ ティム・バーナーズ＝リーの ”World Wide Web”

‣ 開発にはNeXTコンピュータを使用‣ Appleを追放されたスティーブ・ジョブスが設立した‣ 先進的で洗練されたGUIと開発環境

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

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

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

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

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

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

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

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

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

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

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

‣ 自分のPCでWebページを見ているとき、何が起っているのか

‣ 閲覧したいWebページのアドレスを入力‣ 例：http://amc.geidai.ac.jp/guide/about

WWWのしくみ

‣ 自分のPCでWebページを見ているとき、何が起っているのか

1. Webブラウザは、アドレスからサーバの場所を探しだす‣ “http://amc.geidai.ac.jp” の部分がこれに相当

WWWのしくみ

http://amc.geidai.ac.jp

‣ 自分のPCでWebページを見ているとき、何が起っているのか

‣ アドレスの残りの部分から、サーバ内の該当データを特定‣ “/guide/about” の部分がこれに相当

WWWのしくみ

/guide/about

WWWのしくみ‣ 自分のPCでWebページを見ているとき、何が起っているのか

‣ Webページのデータをサーバから手元のPCに送信

WWWのしくみ‣ 自分のPCでWebページを見ているとき、何が起っているのか

4. PC側で受信した情報から、Webページを生成し表示

WWWを支える3つの仕組み‣ URI (もしくは URL)‣ Uniform Resource Identifier‣ ネットワーク上の情報を一意に特定するアドレス指定方法

‣ HTTP‣ HyperText Transfer Protocol‣ コンピュータ同士が情報をやりとりするルール

‣ HTML‣ HyperText Markup Language‣ 環境にかかわりなくWWWを記述するための文書記述言語

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

HTTP

HTTP

HTML

URI

「HTML5」とは何か?

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

HTML5とは何か?‣ HTMLのテクノロジの変遷

‣ 1991 - HTML‣ 1994 - HTML2‣ 1996 - CSS1 + JavaScript‣ 1997 - HTML4‣ 1998 - CSS2‣ 2000 - XHTML1 ‣ 2005 - Ajax (Asynchronous JavaScript + XML)‣ 2009 - HTML5

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

‣ 最大の変化をひとことで言うと…‣ Web「文書」から「アプリケーションへ」

HTML5とは何か?

文書メーラー、地図、ムービープレーヤー、スケジューラー など

HTML5とは何か?‣ 例：Google+

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

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

HTML5とは何か?‣ 厳密に定義は、いろいろな意見が…

‣ 参考：どこまでがHTML5なの？‣ http://www.publickey1.jp/blog/10/html5_9.html

広義のHTML5と狭義のHTML5

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

広義のHTML5

狭義のHTML5

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

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