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