WWWとブラウザの過去，現在，未来

Size: px

Start display at page:

Download "WWWとブラウザの過去，現在，未来"

いつやはまもり
6 years ago
Views:

1 WWW とブラウザの変遷

2 図書館のカード目録

メメックスは一種の机であり離れたところからも操作できるが基本的にはユーザーがそこで作業する家具といえる机の上には傾けた透明のスクリーンがあり

3 MEMEX( メメックス ) MEMory Extension ヴァネバーブッシュのハイパーメディアメメックスとは人間がそのすべての蔵書記録通信を収納しておく装置で素早く柔軟に参照できるように機械化されているこれはいわば所有者の個人的な記憶の詳細かつ大がかりな補遺のようなものといえるメメックスは一種の机であり離れたところからも操作できるが基本的にはユーザーがそこで作業する家具といえる机の上には傾けた透明のスクリーンがありいつでも読めるようにここにデータが投影されるキーボードと一群のボタンやレバーもある以上の点を除けば外見上は普通の机に見えるだろう (1945.7) コンピュータの無い時代に発表

4 ハイパーテキスト複数の文書 ( テキスト ) を相互に関連付けてリンクする仕組み ( ダグラスエンゲルバートが考案 ). テキストを超えるという意味から hyper- (~ を超えた ) text ( 文書 ) と命名. テキスト間を結びつける参照のことをハイパーリンクと言う. ディスプレー上で複数の文献を検索し, それらを一つながりのものとして連結するハイパーテキストのような処理が可能な機械を開発し,1968 年のデモンストレーションとなったダグラスエンゲルバートは, マウス, ワードプロセッサ, マルチウインドウシステムなどの発明者.

5 WWW とインターネット World Wide Web(WWW, ワールドワイドウェブ )or Web( ウェブ ) インターネット等で提供されるハイパーテキストシステムインターネットコンピュータネットワーク日常語的には,WWW= インターネットとして使用されている.

世界最初の WWW ブラウザー (1990 年クリスマス ) Tim Berners Lee: Information Management: A Proposal (1989) I wrote in 1990 the first GUI browser, and called it "WorldWideWeb". It ran on the NeXT computer. http://www.

6 世界最初の WWW ブラウザー (1990 年クリスマス ) Tim Berners Lee: Information Management: A Proposal (1989) I wrote in 1990 the first GUI browser, and called it "WorldWideWeb". It ran on the NeXT computer. ハイパーテキストの概念をネットワーク上で展開. CERN( 欧州原子力研究所 ) における文書の流通他のコンピューターにアクセスして他人の文書を見ることができる. さらに, ハイパーリンクを使って, また別の文書にも移動できる WWW を使って WWW を見る!

1993 年 4 月 TBL の決断 :Web と CERN で開発されたソースコードを公開.

0 をリリース. マークアントリューセンが開発担当. 従来, 画像は別ウィンドウで表示.

7 1993 年 4 月 TBL の決断 :Web と CERN で開発されたソースコードを公開.CERN の Web 技術ライセンスの主張放棄.Web が世界中に普及する原点年 6 月 16 日にエリザベス女王よりナイトの称号の授与だれる. NCSA( イリノイ大学, スーパーコンピュータ応用研究所 ) がブラウザ Mosaic1.0 をリリース. マークアントリューセンが開発担当. 従来, 画像は別ウィンドウで表示. Mosaic では Web ページ内に表示. メニューもボタンもアドレスバーあり, 現在のブラウザーの原型となる. ただ, 画像ダウンロードでは残り時間が表示されず使いにくかった.

8 Web Browser ( ブラウザ ) の機能 Browse 本の文書の拾い読み Web の膨大な情報から拾い読みテレビとブラウザの機能比較テレビブラウザ通信方式リアルタイムオンデマンド通信手段ストリーム通信データ走査線パーツパケット ( ストリーミングは模様 ) ブラウザ実行環境 : クライアント ( 情報要求側 ) サーバ ( 情報提供側 ) システムブラウザの 3 大機能 : 1 ユーザエージェント :URL と HTTP によりサーバから情報取得 2 構文解析 ( パージング ):HTML 構文規則に従って段落画像. の認識 3 レンダリング : 表示要素を Web ページとして配列し表示

9 第一次ブラウザ戦争 1994:Netscape Navigator : インターネット元年 IE 1.0 (=Mosaic) in Windows95(TCP/IP 内部実装 )<<NN :IE2.0, IE3.0 << NN ~: ブラウザ戦争 IE4.0 ( 間違った HTML の表示補正 )>= NC4.0(Java Script 脆弱性 ) MS が OS と IE の抱き合わせによる販売を展開. 独占禁止法違反として提訴 OS に HTML 表示機能 NOS(Network Operating Systems) が含まれるのは当然 IE のシェアが急速に拡大 1998 年 :AOL が Netscape を買収 (AOL と MS は良好な関係 ) 2000 年 :IE がブラウザシェアを独占第一次ブラウザ戦争の終結

10 IE の技術停滞とセキュリティ問題年 2001 年の IE 6.0 以降バージョンアップなし. IE 技術革新が停滞 (Blue-e). ActiveX(SW 部品合成 ) を狙ったウィルス多数登場 2004 年 6 月 24 日 ~: ウィルス ( トロイの木馬 ) が蔓延キーロガー ( 個人情報を外部にもらす ) 発生他のブラウザなら問題なし US-CERT( 米国コンピュータ非常事態対策チーム ) が IE を使うな. 他のブラウザを使えと警告

11 次世代ブラウザと第二次ブラウザ戦争 ActiveX を採用せずタブブラウジング, フィードリーダー (RSS) などの新機能を搭載した次世代ブラウザの登場 Mozilla Firefox(Moziila 財団 ) Opera(Opera SW 現在開発中止 ) Safari(Apple) Chrome (Google) 第二次ブラウザ戦争 :IE v.s. 次世代ブラウザ Windows 8 の不評から IE のシェア下降 Chrome ( レンダリングと JavaScript 実行速度が最速など ) のシェア上昇

12 StatCounter Global Stats Top Browsers Per Country, May

13 2013 年 :Chrome がブラウザトップシェア

14 WWW の 3 技術要素 URI(Uniform Resource Identifier): 例えば ISBN URL(Uniform Resource Locator) : ネットの住所に相当情報資源を一意に決定する方法 HTML Web ページ記述方法 HTTP HTML 文書をインターンネットを通して異なるコンピュータ間で送受信する規約

15 URI(URL) と IP アドレス http: HTTP プロトコル // ホスト記述の開始を表す ( ルート ) ホスト ( サーバ ) www Web サーバ名 kantei.go.jp ドメイン名 ( 取得組織名. 機関. 国 ) /index.html パス (path) の IP(internet Protocol) アドレス ( でアクセスすると,DNS(Domain Name Server) でアドレス名 (URI) を IP アドレスに変換し,Web サイトにアクセスする )

16 URL (Uniform Resource Locator) 山口研究室のWebページ意味は同じ http :// / index.html 通信プロトコルサーバ名 html ファイル HTTP という通信規約 ( プロトコル ) を使ってという Web サーバにある index.html というファイルを取得する

17 HTML HyperText Markup Language ( ハイパーテキストマークアップランゲージ ) ハイパーテキストを利用した, 相互間文書参照のフレームワーク Web 上のドキュメントを記述するためのマークアップ言語テキスト文を要素 =< 要素名 ( 開始タグ )> 内容 </ 要素名 ( 終了タグ )> で括って意味付けし, 文書を組上げたり, 他の Web ページ上の文書を参照づける.

18 HTML の変遷 1990 年 HTML 0 文字のみ 1993 年 HTML 1.0 文字 + 画像 1995 年 HTML 2.0 表示に関するタグが多数開発, ブラウザ戦争, ブラウザ互換性問題 1997 年 HTML 3.2 フレーム表示, 音声機能, ブラウザ表示機能統一 1998 年 HTML 4.01, スタイルシート対応, 多言語対応,W3C 勧告 2008 年 ~ 現在 : ブラウザで HTML5 処理可能 (2014 年正式運用目指す )

19 HTML 文書の基本構造 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> 文書のヘッダ情報 </head> <body> 文書本体 </body> </html>

20 DTD Document Type Definition: 文書型定義 3 種類の DTD 1Strict DTD ( 最終的には 1 のみになる ) 2Transitional DTD HTML 3.2 からの移行過渡期 3Frameset DTD フレーム = ブラウザで表示される 1 つのウィンドウを分割して複数の HTML 文書を表示する機能

21 HTML 文書の例 1 <html> <head> <title> HTML 初級編 </title> </head> <body> <h1> HTML とは何か?</h1> <p> HTML とは, ハイパーテキストを利用した相互間文書参照のフレームワークである.</p> </body> </html>

22 HTML 文書の例 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <HTML lang="ja"> <HEAD> <META http-equiv="content-type" content="text/html; charset=utf-8"> <LINK rev="made" href="mailto:mail@example.com"> <TITLE> HyperText Markup Language - Wikipedia</TITLE> </HEAD> <BODY> <DIV> <H1> HyperText Markup Language </H1> <P> HTML は <A href= >SGML</A> アプリケーションの一つでハイパーテキストを利用してワールドワイドウェブ上で情報を発信するために作られワールドワイドウェブの <STRONG> 基幹的役割 </STRONG> をなしている情報を発信するための文書構造を定義するために使われある程度機械が理解可能な言語で写真の埋め込みやフォームの作成ハイパーテキストによる HTML 間の連携が可能である </P> </DIV> </BODY> </HTML>

23 基本的なHTML タグレイアウトタグ文字タグリストタグ表リンク

24 ( ページ ) レイアウトタグ見出しタグ <h1> 見出し </h1> 大見出しから小見出しにそって,<h1>,<h2>, <h3>, <h4>, <h5>, <h6> を使い分ける ( フォントサイズも変化する ) 段落タグ <p> 段落内容 </p> 改行タグ <br> 横罫線タグ <hr color= 色, size= 太さ, width= 長さ, align= 配置 (left/right/center) > 属性 = 値を指定することにより多様な扱いが可能となる

25 文字タグ文字の大きさ, 色, フォント <font size = 大きさ, color= 色, face= フォント > ~ </font> 太文字, 斜体, 取消線, 下線, 強調 <b> --- </b>,<i> --- </i>, <s>---</s>, <u>---</u>, <em>---</em>

26 リストタグ列挙型リスト (Unordered List) <ul> <li>~</li> <li>~</li> </ul> 順序付リスト (Ordered List) <ol> <li>~</li> <li>~</li> </ol>

27 テーブルタグテーブル ( 表 ) 全体 : 枠なし <table>--- </table> 枠付き <table border>--- </table> <caption> 表題名 </caption> <tr> ---- </tr>:table row テーブルの 1 行を表す <th>----</th>:table head 横見出し ( 項目名 ) を表す縦見出しの時は各 <tr> の先頭に <th> が記載される <tr> ---- </tr>:table row テーブルの 1 行を表す <td>----</td>:table data テーブルのセル値

28 リンク ( アンカー要素 ) HTML のハイパーリンクでは, 始点と終点のノードをアンカー (anchor: いかり ) と呼ぶ a(anchor) 要素により始点アンカーをマークアップし,href(hypertext reference) 属性により終点アンカーを記述する <p>html 標準は <a href= によって勧告されている </p>

29 HTML 記述例 1 ex1.html <h1> 授業内容 </h1> <hr /> <ul> <li> 復習 </li> <ul> <li>http</li> <li>html</li> </ul> <li>dhtml</li> <li>css</li> </ul> ブラウザ上での表示 HTML ファイル (body の中のみ )

30 HTML 記述例 2 ex2.html <h1> 授業内容 </h1> <hr color=blue > <ul type= square > <li> 復習 </li> <ul> <li>http</li> <li>html</li> </ul> <li>dhtml</li> <li>css</li> </ul>

31 HTML 記述例 3 <table> <tr><th> 名称 </th><th> 場所 </th><th> 学会予定日 </th><th> 申し込み日程 </th></tr> <tr><td><a href=" 旭川 </td><td>6/11-13</td><td>1/21( 月 ) 午後 2 時まで申込み,4 月原稿 </td></tr> <tr><td><a href=" ギリシャ </td><td>8/25-28</td><td>2/29</td></tr> <tr><td><a href=" 慶應 </td><td>11 月 </td><td>4 月 </td></tr> <tr><td><a href=" カールスルーエ </td><td>10/26-30</td><td>5 月 </td></tr> <tr><td><a href=""> 情報システム学会 </a></td><td> 慶應日吉 </td><td>12 月 </td><td>9 月 </td></tr> <tr><td><a href=" タイ </td><td>12 月 </td><td>--- </td></tr> </table>

32 画像ファイルの表示画像ファイルの表示 <img src= 画像ファイル名 width= 横幅 height= 縦幅 > ( 例 ) グーグルバナーの表示 <a href=" <img src = </a> border="0" alt="google" align="middle" width="128" height="53">

33 CSS (Cascading Style Sheet)

34 CSS 利用の背景元来 HTML は文章の論理構造を表すことを目的にしている現在では属性を設定することによりデザイン的な見え方を重視する用途で使用されてしまっている内容情報 (HTML) と視覚情報 (CSS) を分離異質な情報を分離することにより, 管理維持が容易出力メディアごとに異なるスタイルを設定できる Web ページを表示するメディアに合わせてスタイルシートを切り替えることでメディアごとに表示を変化させることができるユーザーエージェント ( 多くの場合 Web ブラウザ ),Web サイト制作者, ユーザがそれぞれ定義した CSS のもたらす効果を重ね合わせる ( カスケードする ) ことができる

35 CSS 定義場所 (3 通り ) 外部スタイルシート ( 推奨 ) CSS ファイル (.css) を準備 HTML 文書側では,head 要素に link 要素 <link rel= stylesheet href=./---.css type= text/css > を記述 HTML 文書の head 要素中に style 要素で記述 <style type= text/css > p {color : red} h2 {color : blue; font-size: large} style 属性 ( 個々のタグで指定煩雑になるのですべきではない )

36 CSS の書式セレクタ { プロパティ : 値 ; プロパティ : 値 } セレクタ : スタイル適用対象の選択プロパティ : font-size や line-height のようなレンダリング特性値 : プロパティに指定可能な値が定義 /* 1. p 要素の前景色を maroon 2. 先頭の字下げを二文字分 */ p { color: maroon; text-indent: 2em}

37 head 要素内の style 要素で指定例 <style type= text/css > </* スタイルシートの記述 */> </style> と記述する. 例えば, 下記 CSS を ex2.html に追加すると. <head> <style type="text/css"> h1 {color: blue; font-size: 120%} ul {color: red} </style>

38 <html> ex1.html <head> <title>ex3</title> <style type="text/css"></style> </head> <body> <h1> 授業内容 </h1> <hr /> <ul id="sq"> <li> 復習 </li> <ul> <li>http</li> <li>html</li> </ul> <li>dhtml</li> <li>css</li> </ul> </body> </html> CSS 適用例

39 長方形の表示 ex2.html <body> <div style="position:absolute; top:50; left:150; width:200; height:100; background-color:blue; border: thick solid #00ff00; visibility: visible;"> </div> </body> visibility の値に hidden を指定すると図形が消える 39

40 References 1. タグビューア ( チェッカー ) (IE 上のみ正常動作 ) 2.HTML 入門解説 (CyberLibrarian: 図書館員のコンピュータ基礎講座 ) 3.HTML タグ辞典

41 HTTP (HyperText Transfer Protocol) HTML や XML (extended Mark-up Language) によって記述されたハイパーテキストを転送するための通信手順 ( プロトコル ) HTTP は要求 - 応答型のプロトコル ( クライアントがサーバに要求メッセージを送信し, サーバがこれに応答メッセージをかえす. クライアントは HTTP によって Web ページにアクセスするが, これを指定するために使用されるのが, ネット上のアドレス =URI (Uniform Resource Identifier),URL(Uniform Resource Locator) である.

42 プロトコルスタック OSI 参照モデル 7 アプリケーション層 HTTP, SMTP, SNMP, FTP, Telnet, AppleTalk, X プレゼンテーション層 SMTP, SNMP, FTP, Telnet 5 セッション層 NetBIOS, NWLink, PAP, 名前付きパイプ 4 トランスポート層 TCP, UDP, SPX, NetBEUI 3 ネットワーク層 IP, ARP, RARP, ICMP, DHCP, IPX, NetBEUI 2 データリンク層イーサネット, トークンリング, アークネット, PPP, フレームリレー 1 物理層 RS-232, 電話線 UTP, ハブ, リピータ, 無線, 光ケーブル

43 HTTP 通信のイメージ GET/index.html HTTP/1.1 index.html HTTP/ OK PC Webサーバ参考 403 Forbidden アクセス不可 404 Not Found ファイル未検出 500 Internal Server Error サーバでのエラー

44 HTTP リクエスト Header Request Line Header Field GET /index.html HTTP/1.1 Host: User-Agent:Mozilla/5.0(Windows;U;Uindous NT5.1;ja;rV: ) Gecko/ Firefox/ Accept: text/html, application/xml,application/xhtml+xml, text/html;q=0.9, text/plain;q=0.8, image/png.*/*;q=0.5 Accept-Language: ja,en-us;q=0.7, en;q=0.5 Accept-Encoding: gzip, deflate Accept-Charset: Shift_JIS.utf-8;q=0.7.*;q=0.7 Keep-Alive:500 Connection: keep-alive Body

45 HTTP レスポンス HTTP/1.x 200 0K Date: Sun, 18 Jun :15:59 GMT Server: Apache/ (Unix) mod_gzip/ a PHP/4.4.2 Vary:* X-Powered-By: PHP/4.4.2 Keep-Alive: timeout=8.max=50 Connection: Keep-Alive Content-Type: text/htmi; Charset=EUC-JP Content-Encoding: gzip Content-Length: 5181 HTTP リクエストクライアント Web ブラウザ HTTP レスポンス Web サーバ

WWWとブラウザの過去，現在，未来

WWWとブラウザの過去，現在，未来 WWW とブラウザの変遷図書館のカード目録 MEMEX( メメックス ) MEMory Extension ヴァネバーブッシュのハイパーメディアメメックスとは人間がそのすべての蔵書記録通信を収納しておく装置で素早く柔軟に参照できるように機械化されているこれはいわば所有者の個人的な記憶の詳細かつ大がかりな補遺のようなものといえるメメックスは一種の机であり離れたところからも操作できるが

WWWとブラウザの 過去，現在，未来

WWWとブラウザの過去，現在，未来