2011/8/8 1
情報通信システム論
WWW編
京都教育大学 産業技術科学科
多田 知正
[email protected]
2011/8/8 2用語の定義
計算機 コンピュータのこと データ 計算機で扱う情報のこと 文字（テキスト），画像，音声など 通信 計算機間でデータをやり取りすること ネットワーク 複数の計算機が接続され，通信を行うことができる仕組み 送信，受信 データを送ること，受け取ること サーバ 他の計算機にサービスを提供する計算機 クラゕント サーバからサービスを受ける計算機 ユーザ 計算機を使う人間 2011/8/8 3今回のテーマ
今やンターネットといえばWWW (World Wide Web) 「ネットしてる」？ ンターネット自体は WWWの登場する前から存在した しかしンターネットが爆発的に普及したのは WWWのおかげ ンターネット 実際は，WWWはンターネットの利用法の一つ 電子メール フゔル転送など 2011/8/8 4
今回のテーマ
Internet Explorer 1.0の登場が1995年 当時，WWWなんて 知っている人はほんのわずか 今ではWWWは誰でも知っている 当たり前の存在になった この間たったの16年 あっという間にWWWがこんなに普及したのはなぜか？ 2chは おもしろい ねぇ 2011/8/8 5インターネットでできること
世界中の計算機とデータのやりとりができる diary.txtを送ってください 世界的な規模での情報の共有が可能になった →これは確かにすごいこと 2011/8/8 6ところが
ンターネットが生まれた当初 ほとんどの人は利用していなかった なぜか？ それは「面倒だから」2011/8/8 7
ファイルの入手
ある会社の地図のフゔルが欲しいとき 計算機の名前やフゔル名を調べるのは面倒 そちらの地図を保存して いる計算機の名前は？ 地図のフゔル名は？ さあーよく分かんない ですねえ 2011/8/8 8テキストと絵
絵の入った文書を扱うとき 文書のフゔルと絵のフゔルを別々に取ってくるのは面倒 テキストの中に絵を埋め込むことができない この前旅先で見た 並木道がきれいだったので 思わず写真をとりました photo1.jpgを見てください … diary20020901.txt photo1.jpg 2011/8/8 9関連する文書
関係のある文書を参照するとき 昨日久しぶりに出会った 田中さん（昨日の日記 diary20050707.txtを参照） とレストランに行きました… 街中でばったり高校の同級 生の田中さんに会いました． なんと10年ぶりでしたが， ぜんぜん変わってませんで した… diary20050708.txt diary20050707.txt フゔル名を指定していちいちとってくるのは面倒 2011/8/8 10「できる」と「する」の違い
人間は基本的に「面倒なことはやらない」 面倒 利用者多 当時のンターネット 簡単 当時のンターネットは できることは確かにすごいが かなり面倒だった →本当に必要な人しか使わない 利用者少 2011/8/8 11「できる」と「簡単」の違い
WWWによって情報の共有が簡単になった WWW WWWは技術的には それほどすごくないが 「簡単になった」ことで 使う人が増え始めた 面倒 利用者多 簡単 利用者少 その結果すごいことが．．． 2011/8/8 12WWWの爆発
使う人が増える 情報提供者 が増える 便利になる 情報が増える ますます ますます ますます ますます かくしてWWWを使う人はますます．．．．増えていった こういうのをポジテゖブ・フゖードバック(positive feedback)という2011/8/8 13
WWWの構成要素
代表的なもの Internet Explorer mozilla Firefox Google Chrome Opera など WWWブラウザ WWWサーバ ユーザの代わりに 面倒なことを 引き受けてくれる WWWで共有する情報を 保存している計算機 2011/8/8 14WWWブラウザがやっているこ
と
• URLからWWWサーバのIPゕドレスの問い合わせ（DNS）を行い • WWWサーバからURLで指定された文書のフゔルを入手して • 画像が埋め込まれているときは画像のフゔルも入手して • 文書と画像をいい感じに配置して表示して • とってきたフゔルが音声フゔルならば音を再生して • リンクがクリックされたときには指定されたフゔルを入手して表示して ．．． WWWサーバ WWWブラウザ 実はかなり複雑なプログラム 2011/8/8 15WWWのお約束
WWWブラウザとWWWサーバはHTTP (HyperText Transfer Protocol)というプロトコル
にしたがってデータをやり取りする
WWWでやりとりされる文書は
HTML (HyperText Markup Language)という言語
で書かれている HTTP
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <link rel="alternate" type="application/rss+xml" title="Mozilla Japan 最新情報 (RSS)" href="/news-jp.rdf">
<link rel="alternate" type="application/rss+xml" title="Mozilla Foundation 最新情報 (RSS)" href="/news.rdf"> : 2011/8/8 16
HTMLとは？
HTMLとは WWWで共有する文書を作る際に 構造を正しく伝えるために守らないといけない約束ごと 文書の構造とは？ 2011/8/8 17文章の構造
人間はふだん 見た目から文書の構造を把握している 節の表題 段落 データグリッドにおける並列ファイル転送手法 1. はじめに データグリッドは世界中に分散した計算機とストレージ資源を接続し， データの共有を行うシステムである. データグリッドは，近年の科学的 アプリケーションの生成するデータを保存，共有することを目的として おり，そのデータ量は将来的にはペタバイトにも達すると予想されて いる. データグリッドには，以下のような特徴がある． • 生成されたファイルが更新されることはまれである． • 個々のファイルのサイズが非常に大きい． • ネットワーク帯域が比較的大きい 本研究ではこれらの特徴を考慮して，サイト間のデータ転送を効率良 く行う手法を提案する． ： 強調 箇条書き 文章の表題 2011/8/8 18文書の構造の表し方
構造をどのようにあらわすかは場合によってばらばら →人間なら見た目から推測できる データグリッドにおける並列ファイル転送手法 Ｉ. はじめに データグリッドは世界中に分散した計算機とストレージ資源を接続し， データの共有を行うシステムである. データグリッドは，近年の科学的 アプリケーションの生成するデータを保存，共有することを目的として おり，そのデータ量は将来的にはペタバイトにも達すると予想されて いる. データグリッドには，以下のような特徴がある． 生成されたファイルが更新されることはまれである． 個々のファイルのサイズが非常に大きい． ネットワーク帯域が比較的大きい 本研究ではこれらの特徴を考慮して，サイト間のデータ転送を効率良 く行う手法を提案する． :2011/8/8 19
文書の構造の記述
計算機は文書の見た目から 構造を推測することができない 「ある決められた方法」で文書の構造を記述する必要がある HTMLは文書の構造を記述する方法を決めている • 表題 • 段落 • 箇条書き • 強調 ．．．など 2011/8/8 20構造を表すタグ
HTMLはタグというものを使って文の構造を表す <TITLE>データグリッドにおける並列フゔル転送手法</TITLE> <H1>1. はじめに</H1> <P><EM>データグリッド</EM>は世界中に分散した計算機とスト レージ資源を接続し，データの共有を行うシステムである. データ グリッドは，近年の科学的ゕプリケーションの生成するデータを 保存，共有することを目的としており，そのデータ量は将来的に は<EM>ペタバト</EM>にも達すると予想されている.</P> <P>データグリッドには，以下のような特徴がある． <UL> <LI>生成されたフゔルが更新されることはまれである．</LI> <LI>個々のフゔルのサズが非常に大きい．</LI> <LI>ネットワーク帯域が比較的大きい．</LI> </UL> 本研究ではこれらの特徴を考慮して，サト間のデータ転送を効 率良く行う手法を提案する．</P> ： 2011/8/8 21画像の埋め込み
<IMG SRC=“photo.jpg” ALT=“並木道の写真”>これはギリスの並木道の 写真です．みどりの木々がいい感じですね． これはギリスの並木道の写真です． みどりの木々がいい感じですね． 埋め込む画像フゔルのフゔル名 HTMLでは文書の中に画像を埋め込むことができる 2011/8/8 22
HTMLの最大の特徴
HTMLで書かれた文書の中にリンクを埋め込める どこがハパーなのか？ これにより普通のテキストではなく ハパー（超）テキストになる 2011/8/8 23普通のテキスト
… TCPの概要は 以上です． 詳しくは 詳細.txtを参照 ここでは TCPについて 詳しく 説明します UDPについては 付録.txtを参照 ここでは UDPについて 説明します TCPについては 概要.txtを参照 概要.txt 詳細.txt 付録.txt ある文書と別の文書の関係が分かりにくい 別の文書を開く際にフゔル名を気にしなければならない 2011/8/8 24 … TCPの概要は 以上です． 詳しくは TCPの詳細 を参照 ここでは TCPについて 詳しく 説明します UDPについては UDPの説明 を参照 ここでは UDPについて 説明します TCPについては TCPの概要 を参照 概要.txt 詳細.txt 付録.txtハイパーテキスト
リンクで文書を結びつける →フゔル名を知らなくても別の文書を開ける2011/8/8 25
読み方の違い
普通のテキストは前から順に読むだけ ハパーテキストはリンクを使って いろいろなところにジャンプできる 2011/8/8 26リンクの埋め込み
昨日おいしいレストランをみつけました昨日<A HREF=“http://www.triplestar.co.jp/”>おいしいレストラン</A>を
みつけました
リンクをクリックすると表示されるURL HTMLでは<A>タグを使ってリンクを表す
詳しくは日記のページに書いています
詳しくは<A HREF=“diary.html”>日記のページ</A>に書いています
リンクをクリックすると表示されるフゔル名
2011/8/8 27
構造と見た目
HTMLは文書の見た目を指定するものではない
たとえば，文字の色や
大きさ
はHTMLで指定すべきではないたとえば，文字の<FONT COLOR=“green”>色</FONT>や <FONT SIZE=“7”>大きさ</FONT>はHTMLで指定すべきではない
でも実際はできてしまう（歴史的な事情により） でも本当はやるべきでない なぜか？ 2011/8/8 28
WWWページ
あなたが作成したWWWページ だれもが同じように見ていると思いますか？ 2011/8/8 29アクセシビリティ
いろいろな人がWWWで情報を入手する 弱視や老眼の人 →字が小さいと読みづらい 目が全く見えない人（読み上げソフトを使う） →見た目から構造を把握できない 色覚異常の人 →配色によっては見えない 人によって，「見やすいページ」は異なる 2011/8/8 30見た目より構造
文書の見た目を変える→何らかの構造を表したい • ここが段落の切れ目 • ここが箇条書き • ここを強調したい できるだけ多くの人に内容を正しく伝えるには 文書の構造をきちんと伝えないといけない 文書の構造をどのように表示するかは それを読む人が決めるべき2011/8/8 31
それでも見た目にこだわりたい
そうは言っても，多くの人にとって， 見た目のきれいなWWWページはゕピールするのは確か HTMLの各要素ごとにどのように表示するかを書いておくフゔル 背景は薄い水色 通常の文書は黒の明朝体 強調は赤のゴシック体のタリック ．．． ページの見た目を整えたい場合 →スタルシートで指定するスタルシート＝CSS (Cascading Style Sheets) :
昔はCSSは無かった HTMLで見た目も指定したため 本来の目的から外れて ぐちゃぐちゃになってしまった 2011/8/8 32
自分用のスタイルシート
ユーザはページ作成者の提供するスタルシートではなく 自分用のスタルシートを利用することができる →どんなページも自分の好きな形で見られる 私のホームページ へようこそ 私のホームページへようこ そ ☆ 自転車について ☆ 日記 ☆ 掲示板 • 自転車について • 日記 • 掲示板 元々のスタルシート 自分用のスタルシート 2011/8/8 33情報の発見
京都教育大のWWWサトに行けば • 住所 • 地図 • 最寄り駅 などの情報がすぐ手に入る 京都教育大のWWWサトのURLは？ WWWのおかげで情報を入手するのはすごく簡単になった 情報の「発見」は難しい 京都教育大の場所が知りたい 2011/8/8 34検索エンジン
WWWの場所を教えてくれる 情報の「発見」を簡単にする デゖレクトリ型検索エンジン Yahoo, Exciteなど ロボット型検索エンジン Google, gooなど 最近はデゖレクトリ型の検索エンジンがロボット型の検索を とりいれている 2011/8/8 35ロボット型検索エンジンのしく
み
ロボットと呼ばれるプログラムが 自動的にいろんなWWWサーバを回って WWWページの情報を集めてくる ロボットが集めたWWWページから キーワードを抜き出し，自動的に ンデックス（索引）を作成する キーワードの問い合わせが来たら ンデックスを探して 該当するWWWページへのリンク を表示する 2011/8/8 36ロボット型検索エンジンの欠点
キーワードを含んでいればどのようなページも表示 →関係のないページが多数表示される たとえば「旅行」で検索すると．．． 旅行会社 のページ 旅行ガド のページ 誰かの日記 のページ ABCトラベル 初めての 海外旅行の 手引き 修学旅行の 思い出 この前の 旅行 楽しかった どこかの学校 のページ2011/8/8 37
Googleのからくり
すべてのWWWページに得点をつけてランクづけしている 与えられたキーワードに 一致するページを 得点の順に表示する 1 2 3 2011/8/8 39Googleの得点のつけ方
WWWページのリンクに着目 誰かが自分のページからあるページにリンクを張る →その人がそのページは価値があると判断した 多くのページからリンクが張られているページは おそらく価値の高いページ →高い得点をつける 高い得点を持つページからリンクが 張られているページは やはり価値の高いページ →高い得点をつける 2011/8/8 40Googleの得点
Googleの得点はキーワードとは関係なくつけられる →得点の高いページはどのキーワードで検索しても上位にくる 日本ハム 優勝？ そんなバナナ 野球の超有名サト（多くのページからリンクされている） 「バナナ」で検索しても上位に 来てしまう？ この話は一部を除いてフゖクションです 「野球」で検索するともちろん上位に来る 実際にはそれほど問題にはなっていない →良いページは誰にとっても良いページ 2011/8/8 41WWWの新しい形
ブログSNS（Social Network Service）
2011/8/8 42
ブログ
個人や数人のグループで運営され， 日々更新される日記的なWebサト コメント： 他人の記事にコメントを付け る トラックバック： 他人の記事にリンクするとと もに， 相手の記事に自分の記事への リンクを掲載する2011/8/8 43
ブログのインパクトその１
簡単に作れる • HTMLの知識が不要 • 特別な道具（ホームページビルダなど）も不 要 これまでWebサトに興味の無かった人がブログを書き始めた • プロスポーツ選手 • 芸能人 • 会社の社長 など．．． 本当の意味で 「誰でも情報発信できる」時代の到来 2011/8/8 44ブログのインパクトその２
従来のWWWは基本的に一方通行 書き手にとって 読み手の反応を知ることができる ゕクセスカウンタ 掲示板 リンク 不特定多数との双方向コミュニケーション ブログのコメントやトラックバック 読み手にとって 作者に感想を伝えたり反論したりできる 他の人の意見を知ることができる 2011/8/8 45ブログのダークサイド
ブログが原因でトラブルに巻き込まれることも．．． 書き込みが元で 会社をクビになる ブログの炎上 ブログに多数の閲覧者が コメントを集中的に寄せる状態 身元を知られ， 現実に被害を受けることも 2011/8/8 46SNS（Social Network
Service）
友人，知人間のコミュニケーションを目的としている 参加にはすでに入会しているユーザからの招待が必要 現実世界の人間関係を ネット上で実現 リゕルとネットの融合 2011/8/8 47mixiの理念と現実
「健全で安心感のある居心地の良いコミュニテゖ」 2ちゃんねるの紹介スレッド →事実上誰でも入れる 現在400万人もの会員 中には悪い人もいる →現実世界と同じ 現実に知っている人同士の交流の場 mixiで知り合う人が増えている 入会には会員による紹介が必要 匿名での登録が増えている 2011/8/8 48SNSのダークサイド
SNSへの書き込みが元でトラブルになるケースが増えている 基本的に実名で登録 書いた本人がすぐに特定される 反社会的な発言をして告発されるなど 「自分の知り合いしか見ていない」という意識 何でも気軽に書いてしまう2011/8/8 49
時代は繰り返す
WWWが登場し始めたころ， 個人のWebサトに個人情報（実名，写真など）を掲載して， トラブルに巻き込まれた人は結構いた ブログ，SNSが広がるにつれて 事情を知らない人がネットの世界 にどんどん入ってきている 昔と同じことが繰り返されている 「ネットに個人情報を出すのは危険」 という意識が定着 2011/8/8 50ネットワークの基本
ネット上の情報は誰に見られるか分からない いったん流出した情報は止められない 企業で厳重に管理されている（はずの） 情報ですら流出する 「公開範囲の限定」も完全には信用できない サトが乗っ取られることもありうる コピーし放題 すさまじいスピードで広まっていく すべてのコピーを追跡し， 削除するのは不可能 2011/8/8 51それでも
個人情報，ネットに出しますか？
2011/8/8 52まとめ
ンターネットによって情報の共有が可能になった WWWによって情報の共有が簡単になった HTML (HyperText Markup Language)による文書の記述 画像を埋め込まれた文書が表示できる リンクによる文書間のジャンプ 検索エンジンによって情報の発見が簡単になった キーワードによる検索 Google: リンクされている数によるページのランク付け WWWの新しい形 ブログ，SNS 個人情報の扱いには注意
