スタイルシートを用いたWWW ページの作成

					2007年05月22日
情報科学類 コンピュータリテラシ

                                       筑波大学 システム情報工学研究科 
                                       コンピュータサイエンス専攻, 電子・情報工学系
                                       新城 靖
                                       <yas@is.tsukuba.ac.jp>

このページは、次の URL にあります。
http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2007/2007-05-22
あるいは、次のページから手繰っていくこともできます。
http://www.coins.tsukuba.ac.jp/~yas/
http://www.cs.tsukuba.ac.jp/~yas/

■連絡事項

Unix Super Text 上巻「第27章 World Wide Web」「第24章インターネット」、「第34章木構造とグラフ構造」。
次回6月25日金曜日は、実習室 3C113 に集合。
手引き(教育用計算機システム使用の手引き)を持って来る。
Unix Super Text の次の場所を読んでくる。 29.1節～29.3節。

■補足

全世界に WWW ページを公開するためには、ディレクトリ ~/public_html のモード、個々のファイルのモードだけでなく、ホーム・ディレクトリのモードも効いてくる。最小でも、chmod go+x ~ などで、ホーム・ディレクトリの x を出す。

電子メールのアドレスは、 SPAMを受け取らないようにようにするために、人間だけにわかるように、 WWWロボットには、簡単にはわからないように書く方法もある。

■スタイルシート

HTML は、「本来は」、文書の構造を記述する。

HTML で記述できる文書の構造:

ヘッダ（文書の題目）
見出し、章立ての木構造
段落
箇条書
表

HTML では、文書の構造を記述することができるが、「表示の方法」を記述することは、本来はでない。ワープロは、紙に印刷した時の、このような表示の方法を設定するためのプログラムである。

表示の方法:

文字フォントの種類、大きさ、色
行間
左詰め、中央寄せ、右詰め
肩付き、下付き

表示の方法を記述するには、スタイルシートを用いる。

Cascading Style Sheets (CSS)
Extensible Stylesheet Language (XSL, XML用)
その他

◆XML (eXtendible Markup Language)

XML は、タグが定義できるマークアップ言語（＜－＞HTMLはタグが固定）。プログラム間でデータの交換に用いる。

■カスケーディング・スタイルシート

◆例

見出しを青くする。

H1 { color: blue; }

◆カスケーディング・スタイルシートで記述できること

段落書式

行揃え。text-align:, text-justify:
表示範囲。height:, width:, overflow:, text-overflow:,
余白。 margin:, margin-left:, margin-right:, margin-top:, margin-bottom:
表示位置。position:, top:, bottom:, left:,
境界。border-style:, border-width:, border-color:, padding:

文字書式

色。color:, background-color:
フォント。font: font-family:
大きさ： font-size:
その他、飾: font-style:, font-weight:, text-decoration:

箇条書き

印の形状。list-style-type:, list-style-image:
印の位置。list-style-position:

イメージ

枠線: border-style
テキストとの位置: float:, clear:, vertical-align:, margin-right:
ズーム: zoom:
背景。background-image:, background-repeat:, background-position:

その他:

カーソルの形状。 cursor:
表示(非表示)。visibility:, display:
内容の自動挿入。content:

◆スタイルシートを書く場所

HTML のヘッダに書く。

<HTML>
<HEAD>
<TITLE>タイトルです。</TITLE>
<STYLE TYPE="text/css"><!--
(ここにスタイルシートを書く)
--></STYLE>
</HEAD>

別ファイルに書いて読み込む。スタイルシートのURLは、filename.css のようなファイル名が多い。

<HTML>
<HEAD>
<TITLE>タイトルです。</TITLE>
<LINK rel="stylesheet" type="text/css" href="スタイルシートのURL">
</HEAD>

<HTML>
<HEAD>
<TITLE>タイトルです。</TITLE>
<STYLE TYPE="text/css"><!--
@import url(スタイルシートのURL);
(ここにスタイルシートを書く)
--></STYLE>
</HEAD>

複数 @import することもできる。複数のスタイルは、混ぜられる（カスケード）。対立する定義は、後から出てきた方が有効になる。

HTML のタグの属性として書く。宣言部分だけ。

<P STYLE="color:#444444">文。文。文。</P>

◆コメント

コメントとは、あるコンピュータ言語の中に記述する、人間が読むために書かれた部分。コメントは、/* と */ で括る。この表記法法は、Ｃ言語やＪａｖａ言語と似ている。コメントは、デバッグ時など一時的にコンピュータ言語の機能を無効にしたい時にも使える。

◆書式の有効範囲(セレクタ)

HTML の要素(タグ)ごと。<H1>,<H2>,<H3>,<P>,<BODY>など
- 全体。<BODY></BODY>の間
- 段落。<P></P>の間
クラス(class)ごと。
IDごと。

クラス(class)ごと、IDごとの場合は、次のタグで範囲を指定する。

部分。<DIV></DIV>の間
部分（段落より小さい範囲）。<SPAN></SPAN>の間

クラスとは、似たような要素の集まり。同じクラスの要素は、似たような書式になる。 ID(identifier) は、全体の中で１つだけ。

例

H1	{ color:blue; } /* <H1></H1> だけ */
UL LI   { color:blue; } /* <UL></UL>の中の <LI> だけ*/
OL > LI { color:blue; } /* <OL></OL>の直接の子供の <LI> だけ*/
H1 + P  { color:blue; } /* <H1></H1>に隣接する <P> だけ*/
 *      { color:blue; } /* 全ての要素 */

.important    { color:blue; }  /* class="important" と指定したものだけ */
P.important   { color:blue; }  /* <P class="important"></P> と指定したものだけ */
#n10          { color:blue; }  /* id="n10" と指定したものだけ */

P:first-line   { color:blue; } /* <P></P> の中の最初の行だけ */
P:first-letter { color:blue; } /* <P></P> の中の最初の１文字だけ */
A:link    { color:blue; } /* 未訪問のリンク */
A:visited { color:blue; } /* 訪問済みのリンク */
A:active  { color:blue; } /* アクセス中 */
A:hover   { color:blue; } /* カーソルを重ねた時 */

◆書式設定の考え方

余白、境界、パディング（詰め物）がある四角い箱。

　　┌──────────────────────┐
　　│　　　　　　　余白　　　　　　　　　　　　　│
　　│　┌──────────────────┐　│
　　│　│　　　　　境界　　　　　　　　　　　│　│
　　│　│　┌──────────────┐　│　│
　　│　│　│　　　パディング　　　　　　│　│　│
　　│　│　│　┌──────────┐　│　│　│
　　│　│　│　│　内容　　　　　　　│　│　│　│
　　│　│　│　└──────────┘　│　│　│
　　│　│　└──────────────┘　│　│
　　│　└──────────────────┘　│
　　└──────────────────────┘

　　　　　　　　│　エレメントの幅　　│
　　│　　　　　　ボックスの幅　　　　　　　　　　│

◆WWWページデザインの手順

HTML で全部の表示したい内容を記述する。
スタイルシートを埋め込み、見栄えを調整する。

スタイルシートをうまく活用すると、見た目を一度に調整できる。

同じスタイルシートを複数のページで読み込んで使う。
同じページ内でも class をうまく活用する。

いちいち <font> で指定すると、変更したくなった時には、全部変えなければならない。 <span class="classname">のように、クラスを使ってマークしておけば、１個所クラスの設定を変更するだけで全部統一的に変る。 (同様に、ワード・プロセッサでも、スタイルをうまく活用したい。)

注意点

ブラウザによって対応していない場合がある。
対応していても、動作が異なる場合がある。バグも多い。

複数のブラウザ（違うバージョンも含む）で表示を確認したい。

■検索エンジン

The Unix Super Text 28.5節,34章参照。

インターネット上にある膨大な情報から、必要な情報を見つけ出すためには、次のような方法がある。

興味のあるＷＷＷページに埋め込まれているリンクを次々と手繰っていく。
特定の分野についてのFAQやリンク集を参考にする。
雑誌やテレビなど、一般のメディアに掲載されたURLを打ち込む。
人間によってよく整理されたメニュー(ディレクトリ)を次々に選択していく。
キーワードを打ち込んで探す（キーワード検索）。検索対象のデータ（今の場合、ＷＷＷページ）にも、キーワードが与えられている。キーワード検索とは、利用者から与えられたキーワードを持つ対象データを利用者に返すことである。

リンク集 とは、他のページへのリンクを集めたWWWページ。なにかＷＷＷページを探したい時には、すぐに「キーワード検索」を思い浮かべるかもしれないが、実際には、 FAQ FAQやリンク集の方が速いことがある。

◆検索に必要な考え方

ヒット率と選択率

ヒット率: 欲しかった情報のうち、どのくらい見つかったか。
選択率: 見つかった情報のうち、どのくらいが本当に欲しかったものか。

図? ヒット率と選択率

あちらを立てればこちらが立たず。トレードオフ。

３つの論理演算

AND、両方)、(&)
OR、どちらか、または (|)
NOT、否定、ふくまない (!)

外枠は、全体（インターネット上の膨大な数のＷＷＷページ）を表す。色が付いている所が、見つかったデータを表す。

「keyword1」で検索。

図? キーワードを１つ与えた時

keyword1 AND keyword2 AND keyword3

図? キーワードを３つ与えた時(AND)

keyword1 OR keyword2 OR keyword3

図? キーワードを３つ与えた時(OR)

NOT keyword1

図? キーワードを１つ与えた時(NOT)

キーワードを１つ与えた時の NOT は使えない。

NOT keyword1 AND keyword2 AND keyword3

図? キーワードを３つ与えた時(AND,NOT)

NOT は、AND といっしょにつかう。 NOT 単独では、使えない。

◆絞込検索

絞込検索（しぼりこみけんさく）のイメージ

図? キーワードを１つ与えた時

図? キーワードを２つ与えた時

図? キーワードを３つ与えた時

絞込検索は、実は、AND と同じ。

keyword1 AND keyword2 AND keyword3

図? キーワードを３つ与えた時(AND)

◆検索エンジンとWWWロボット

検索エンジン(サーチエンジン): WWWで検索機能を使う時、実際に検索を行うプログラム。インターネット上のあるWWWサーバで動いていてる。

検索結果は、手元のWWWブラウザの画面に表示される。

検索対象のデータにキーワードを与える方法

内容すべてをキーワードと考える（全文検索）
特定のキーワードを与える
- WWWページを作った人がキーワードを与える
- 検索エンジンの提供者（人間）がキーワードを与える
- プログラムでキーワードを自動抽出する

自動抽出したものは、ヒット率はよいが選択率が悪い。人間が整理したものは、選択率はよいがヒット率が悪い。

WWWロボット。: WWWページからプログラムでキーワードを自動抽出するプログラム。

WWWロボットの動き

ロボットは、あるURLが与えられると、そのページを訪れる（ページの内容を得る）。
得たページの内容を解析して、キーワードを抽出する。
そのページにリンクが含まれていたら、1 に戻って繰り返す。

このような繰り返しの方法を、コンピュータ・サイエンスの用語では 再帰(recursion) とう。ロボットは、世界中の WWWページを歩き回り、キーワードを抽出する。ただし、一度訪れたことがあるページは記録しておいて、２度訪れないようする。

インターネット上の重要な情報源に FAQ がある。 FAQ は、もともとは、 Frequently Asked Questions の略で、「よくある質問」という意味である。実際には質問だけでなくて答えもいっしょに書かれている。しかも、実用的で非常に品質がよい情報が集まっていることが多いので、質問したいことがなくても、自分の興味がある分野の FAQ を探して読むことはよい勉強になる。

FAQ を作る活動は、ネットワーク・ニュースでよく行なわれている。というのも、繰り返しなされる質問をまとめて定期的に投稿することで、記事の質を高めることができる。インターネットで流通するようなフリー・ソフトウェアでも、マニュアルとは別に FAQ が作られることもよくある。

■Wiki

Wiki、あるいは、WikiWiki Web は、WWW(World Wide Web) を利用した共同作業と議論を支援するツール。

普通の WWW は、直接的にはページを編集する機能を提供していないので、情報の発信者と受信者は明確に区別されていた。Wiki では、基本的にはページを表示することができれば、簡単な操作でそれを編集することができる。これにより、気軽な双方向のコミュニケーションが実現される。wikiwiki とは、ハワイの言葉で、「素早い、形式張らない、急ぐ」ということを意味している。

Wiki では、WWW ページを記述する時に、HTML のようなマークアップ言語を用いず、基本的にはテキストを用いる。ただし、次のような簡単なルールがあり、HTML に近い表現能力を持つ。

URL や同一サイト内のページ名を書くと自動的にハイパーリンクが埋め込まれる。
(字下げをして)「*」を打つと箇条書きになる。
空行を入れるとパラグラフの区切りになる。

Wiki は、Ward Cunningham氏が開発したものの他に、Wikiクローンと呼ばれる同等品が多数開発されている。多くのクローンは、Perl や Ruby のようなスクリプト言語により記述されており、WWW サーバが持っている、外部のプログラムを実行する機能(CGI機能) を用いて動作する。

◆Wikiの種類

オリジナルの Wiki に続いて、様々な種類の Wiki が開発された。

Hiki。講義の掲示板でも使っている。Ruby で書かれている。
PukiWiki。PHP で書かれている。 2007年度入学者向けフレッシュマンセミナーの Wiki ページや学類コンピューティング環境のページで利用している。
Tiki
YukiWiki
PalmWiki
HashedWiki
vikky
PnutsWiki
WiLiki
MobWiki
Rwiki
Swiki
CoWeb
TWiki
Py Wiki
Zwiki
JOSWiki

日本製が多い。

◆Wikiでできること

WWW ブラウザさえあれば編集できる。
誰で編集できる。
HTML より簡単な規則で(デザインがよい) WWW ページが作れる。
- パラグラフ（改行）
- 箇条書き
- 見出し
- ハイパーリンク
- 文字飾（強調）
- 整形済みテキスト（<PRE></PRE>）
過去の履歴や差分が表示できる
コメントがつけられる
RSS/Atom を生成できる

問題点

（ページ単位の）凝った整形はできない。
表記方法が統一されていない。
アクセス権、編集権の管理が難しい。
サーバへの負荷が大きい
授業でのうまい使い方が見つかっていない。

◆ウィキペディア（Wikipedia）

Wiki を利用した世界規模の共同作業の例として、フリーの百科事典を作るプロジェクト。

http://ja.wikipedia.org/
ウィキペディア(日本語)

■ブログ

ブログ(blog)、または、ウェブログ(web log)とは、World Wide Web において日記形式でニュースを発信するものである。

◆ブログの歴史

ブログは、各個人が日々発見した Web ページへのリンク集を公開したことから始まったとされている。当初は、実際に個人的な日記のレベルに止まっているものも多く、また、ページのデザインも商用のニュースサイトと比較して見劣りするものが多かった。

Blogger と呼ばれるブログ作成ツールの登場すると、商用のニュースサイトに匹敵するようなデザインのページをブログとして簡単に作ることができるようになった。それに伴い、充実した内容を含むものも増え、専門家による情報発信にも利用されるようになった。今日では、ブログはパブリッシングツールとしての地位を得初めている。

ブログが一般的に着目され始めたのは、9月11日の米国同時多発テロ事件以後である。イラク戦争の前には、「Where is Raed ?」と題するバグダッド在住の Salam Pax と名乗る人物のブログに１日数十万件のアクセスがあった。このような出来事では、現場の人の声やマスメディアでは報道されないような情報がブログとして発信された。

日本では、土佐日記以来、誰かに読まれることを前提にした日記（形式の文学）の歴史があり、今でも個人的な日記も多い。

◆ブログと単なる Web ページの違い

時系列に既述される。普通は新しい情報がページの上に置かれる。
HTML を書かなくてもよい。
コメントが簡単に入れられるようになっていることが一般的。
「トラックバック」の機能がある。自分のブログに帯するコメントが他のブログに現れた場合に、それを接続する。
RSS 等で更新情報を配信する機能がある。

◆ブログ・ツール

サーバで CGI や PHP で実行する

Blogger
Movable Type
Blosxom
Nucleus
b2
Drupal
pMacine
tDiary
a-news/a-nikki

一般のアプリケーションとして実行する

Radio UserLand
iBlog
BlogWrite
ecto
MobileAtom

コンテンツ・マネージメント・システム

XOOPS
Slashcode
Geeklog
PHP-Nuke

サイト

はてなダアリー
Doblog
ドリコムブログ
goo BLOG, livedoor ブログ, 楽天広場blog
その他、インターネット・サービス・プロバイダ系

◆blogの内容

個人の情報発信、自分の意見の発信
仲間を集める
専門的な内容

■RSS

RSS (RDF Site Summary、Rich Site Summary、または、 Really Simple Syndication )は、Web サイトの要約や見出しを記述するためのファイル形式(XML 形式)。

RSS の記述は、全体で大きく２つの部分に分かれる。前半は、Web サイト全体（RSSではチャネルと呼ぶ）の記述であり、Web サイト全体のタイトル(40バイト程度)、URL、および、リンク、簡単な説明(500 バイト以内)が含まれる。後半では、個々の Web ページのタイトルや URL が置かれる。

RSS は、ニュースサイトが記事の見出しを配信するためによく使われている。また、ブログ(blog、Web log)のツールの中には、自動的に RSS により更新情報を提供するものがある。RSS を自動的に収集して表示するためのブラウザや RSS を蓄積し検索サービスを提供する Web サイトも開発されている。

現在、RSS には、1.0 系列と 0.9-2.0 系列の２つの系列がある。 RSS は、1999年、Netscape Communications社により、自社のサービスで見出し一覧を配信するために開発された。その後、見出しだけでなく、要約、日付などの拡張がなされた(RSS 0.9, 0.91)。 Netscape が開発をやめた後、RSS-DEV と呼ばれる開発グループが作られた。そのグループにより、基本的な要約提供部分をコアとし、高度な機能をモジュールとして追加できるようにした RSS 1.0 が策定された。一方、別のグループは、RSS 0.91 を元にして、コンテンツ配信を目指して RSS 2.0 を作成した。

RSS 2.0 は、クリエティブ・コモンズのライセンスで配布されている。

RSS -- サイト情報の要約と公開 by 神崎正英 http://www.kanzaki.com/docs/sw/rss.html

◆Atom

RSS と同様に、見出しを配信するための形式。 IETF (Internet Engineering Task Force) で開発されている。次のような RSS の問題を解決することを目指している。

仕様の曖昧性の排除。
拡張可能性がある。
自由に使える。
Atom API という、記事の投稿・更新・削除の機能が定義されている

◆RSSリーダ

RSS で配信された見出し(RSSフィード、Webフィード)を元に、元のページを表示する機能を持つWWW ブラウザを RSS リーダという。多くの場合、RSS だけでなく Atom を扱える。

英語圏では、「RSS reader」よりも「aggregator」という呼び方が多い。複数の RSS や Atom で配信されている情報を１つに集約(aggregate)して読みことができることによる。

RSS reader/Aggregator を使うと、単純に WWW サイトを訪れる方法と比較して、楽に更新された情報を見ることができる。メーリング・リスト等と比較して、spam が混入することは（今の所）ない。

２種類の方法がある。

アプリケーション。専用アプリケーション、Web ブラウザの機能拡張、メール・リーダ/ニュース・リーダの機能拡張。
Web サイト。Bloglines, My Yahoo!, Google Reader, はてな RSS, Livedoor Reader, goo RSS リーダなど。

■インスタント・メッセンジャ

２人のユーザ間で短いテキスト（文字からだけなるデータ）を、即座に交換するためのしくみ。

電子メールと異なり、通信相手がネットワークを利用している必要がある。所在確認にも使える。

歴史

メインフレームにも存在。１台のコンピュータ内でのみ利用可能。ユーザは、電話回線で文字端末を使って中央のコンピュータに接続して使う。
Unix write コマンド。１台のコンピュータ内でのみ利用可能。書き込みが許可されている相手の端末に有無を言わさずメッセージを書き込む。 mesg コマンドで書き込み許可拒否を制御。
1983年 BSD Unix talk。TCP/IP 上で動作。「talk who@hostname」の形式で利用する。
phone (Unix用)。複数人でも使える talk 。
1996年 ICQ (Mirabilis社)
AOL Instant Messenger, MSN Messenger, Yahoo! Messenger, iChat
1999年 Jabber/XMPP。
2003年 Skype (電話)
2005年 Google Talk

◆メッセージの配送

テキストの場合、中央のサーバを経由するものが多い。サーバに対してユーザ登録が必要になる。

図? サーバを経由したメッセージの送受信

接続の時には、サーバを利用して、相手を探すが、実際のメッセージの交換は、サーバを介さず、クライアント間で直接行われる方法も考えられる。 (「直接」といってもルータは存在する。)

図? クライアント間で直接メッセージのやりとり

◆Microsoft Passport

もともとは、シングルサインオンを実現するための認証システム。ユーザ名とパスワードを集中管理する。一度あるサイトに接続する時に認証を済ませたら、別の提携サイトに接続する時には認証を省略できる。

MSN Messenger や Windows Messenger で、通信相手を識別するために使われている。 Hotmail にアカウントを登録すると自動的に使われる。（その他にはそれほど普及していない。）

◆Yahoo!Messenger

日米で類似のクライアント・プログラムを利用している。日米でユーザ登録が違うので、直接接続できない。

◆AIM (AOL Instant Messenger)

MacOSX iChat AV とも相互接続できる。英語版のクライアントは、動画像での対話もできる。

◆Jabber

オープンソースのインスタント・メッセンジャのサーバとクライアント。通信プロトコルとしては、 XMPP (The Extensible Messaging and Presence Protocol) という XML ベースのものを使っている。IETF で標準化されて、 RFC 3920 としてまとめられた。

Yahoo!Messenger, MSN Messenger, AOL Instant Messenger と、サーバを通じて相互接続できる機能がある。

http://www.jabber.org/

Jabberクライアント

◆インスタント・メッセンジャの機能

テキストメッセージの１対１の送受信（基本）
テキストメッセージのグループ通信（会議室、チャットルーム）
ファイルの送受信
音声、動画像での通信。
コンタクト（通信相手）の管理、ユーザの検索

◆IRC(Internet Relay Chat)

IRC (Internet Relay Chat) は、文字による遠隔会議のプログラムある。ある参加者が打ち込んだメッセージは、即座に他の行単位で参加している人全員に送られる（ネットワーク・ニュースでは、１つの文書単位で、遅延がある）。

IRCの参加者は、何種類かのプログラムを使って近くのサーバ・プログラムに接続して、メッセージを送受信する。サーバ・プログラムは、他のサーバ・プログラムとの間でメッセージの交換する。結果として世界中の、地理的に離れている参加者の間でメッセージの交換することができる。

IRC のサーバには、世界規模のものもあれば、日本国内のもの、組織内のものがある。１つの IRC のサーバでも、複数の会議室があり、この会議室のことを IRC では、 チャネル(channel) (チャンネル、チャンネル）と呼んでいる。

■VoIP(Voice over IP)

VoIP そのものの意味は、 TCP/IP による通信ネットワーク上で音声データを送受信すること。単に音声データのファイルをコピーするのではなく、実時間（リアルタイム）での対話（電話）を指すことが多い。

実時間（専門用語）とは、「（ほぼ同時に感じるくらい）速い」という意味ではなく、ある時間内に仕事を完了させることを保証するという意味。

TCP/IP のネットワークは、実時間で音声を流すのには適していない。

◆Best Effort

TCP/IP のネットワークは、Best Effort のネットワークである。

データを送信したとしても、途中で失われることがある。その場合、TCP では再送して回復を試みるが、必ず送り届けられる保証はない。 (UDP では、自動的には再送はされない。) 時間切れで遅れなかったと報告されても、実際には送られていたということもある。
利用可能な通信帯域（あるいは、通信速度）が、変動する。混んでくると、データが失われないまでも、帯域が狭くなる（速度が遅くなる）。

Best Effort に対して、予約ができるネットワークもある。

通信を開始する時点で、途中のルータ（交換機）で利用可能な帯域が予約できる。予約できない時には、そもそも通信の開始ができない。
メッセージを送信できたか、送信できなかったかが必ずわかる。

電話のネットワークは予約ができる。電話には、「通話中」で通じないことがある。交換機の容量のせいで「通話中」になることもある。

◆遅延

TCP/IP のネットワークでは、通信遅延の保証がない。しかも、遅延時間そのものが刻々と変化する。

衛星通信では、遅延は大きいが遅延時間は一定。

通信遅延が大きいと、電話としての対話が成り立たない。

◆圧縮

音声データをそのまま送ると、データ量が多くなる。 VoIP では、データ圧縮の技術が不可欠である。

◆暗号化

音声データをそのまま送ると、データ量が多くなる。 VoIP では、データ圧縮の技術が不可欠である。

◆セッションの確立

VoIP では、多くの場合、テキストのインスタント・メッセンジャとは異なり、クライアント間での接続の時に利用されるだけである。実際の音声データは、クライアント間で直接やりとりされる。

◆Skype

ユーザ間では無料の電話が使えるサービス。

Windows, Linux, MacOSX, PocketPC(Windows CE)などで利用可能。
インスタント・メッセンジャとしてもつかえる。
データの暗号化を行っている。
NAT があっても、通信できる。グローバル・ＩＰを持つ Skype を起動したパソコン（サーバではない）を中継につかうこともある。
一般の電話にかけられる(有料)。
一般の電話から着信できる(有料)。
ビデオの機能がついた(2005年)。

Skype に対向して、無料で一般の電話にかけられるサービスを提供する会社が現れた。

2005年に eBay (アメリカのオークション・サイト)に買収された。

◆日本でのIP電話

インターネット・サービス・プロバイダが、その回線を利用して付加サービスとして電話サービスも提供することが多い。

同一プロバイダ間では、通話料を無料に設定していることが多い。プロバイダ間で相互接続して無料にすることもある。

内部的にには、TCP/IP のルータを使うが、一般のインターネットを間に挟まない場合は、通信遅延の問題には強い。通信遅延が少ない場合は、050 の電話番号が与えられる。

日本では、Skype のようなインターネットを使うものには、050 の番号は付加されない。しかし、一度、着信した電話を転送するという技で、 2006年2月から 050 の番号が使えるようになった。

■IPテレビ電話

VoIP と同様に、動画像をのせる。

インスタント・メッセンジャやVoIPプログラムの付加機能として普及してきている。

◆テレビ会議

多地点間で利用できることが求められる。
エコー・キャンセルの技術が重要になる。

エコー・キャンセルとは、相手から届いた音声を再び相手に送り返さないこと。（自分の声が、相手の音声と混じってスピーカから流れてこない。）

VoIPプログラムにも入っているが、うまく働かないことも多い。１対１ならヘッドセットで対応できる。

■IPマルチキャスト

送信者が１人で、受信者が複数のメッセージを、TCP/IP (正確には、UDP/IP のデータグラム) のネットワークで送信すること。

動画像や音声など大量のデータを配信する時、複数人で同じデータを受信する時に、同じメッセージを共有できる。

例：筑波大学で、１００人の人が同じ 1M bps の動画像のデータを見る

単純な方法: 100人 * 1M bps == 100 M bps のデータが、大学と学外を結ぶ線を流れる。
マルチキャスト: 人数にかかわらず、1M bps のデータが流れる。

◆「IPマルチキャスト放送」

日本の法律の用語。IP マルチキャストを使った、「放送」。

今までは、「放送」といっても、著作権法上は、インターネットを使う他のものと同様に「通信」に分類されており、著作権管理の手間が大きかった。

2006年の改訂で、「放送の同時再送信」について、有線放送と同様の取扱うことになった。著作隣接権については、事前の許諾は不要で、事後に保証金を支払えばよい。 http://www.bunka.go.jp/1tyosaku/chosakukenhou_kaisei_2.html

■実習

実習時間中には、以下の課題をできるだけ多く行いなさい。全部を行う必要はない。

★練習問題(1101) CSSの観察

自分がよく見る WWW ページについて、スタイルシートが使われているかを観察しなさい。 Firefoxブラウザを操作して、元の HTML (ソース)を表示させなさい。

「表示」メニューから「ページのソース」を選ぶ。

スタイル・シートが別のファイルに含まれている時には、その URL をコピーする。相対形式で書かれている時には、絶対形式に変換して、その URL を Web ブラウザに与える。

★練習問題(1102) Wikiが利用している観察

講義のWiki が利用しているスタイルシートを表示しなさい。そして、どのような機能が利用されているかを調べなさい。同様に、学類コンピューティング環境のページで利用されているスタイルシートを調べなさい。

★練習問題(1103) WWW検索エンジンの利用

WWW検索エンジンで次の演算を実行してみなさい。

AND (絞り込み検索)
OR
NOT (否定)

★練習問題(1104) 図書検索

http://www.tulips.tsukuba.ac.jp/,筑波大学付属図書館 で図書の検索を行いなさい。３つの演算(AND, OR, NOT)をどのようにして利用するかを調べなさい。

★練習問題(1105) よいキーワード

検索エンジンに与えるべきよいキーワードについて考えなさい。たとえば、次のようなものが考えられる。

固有名詞
珍しい単語、あまり使われていない単語

これらの点を評価しなさい。また、他にどのようなキーワード、または、その組み合わせ方法をよいか考えなさい。

★練習問題(1106) ThunderbirdのRSSリーダ機能

Thunderbird には、RSS リーダとしての機能がある。これを利用してみなさい。

「ツール」メニューから「アカウント設定」を選ぶ
「アカウントを追加」ボタンを押す
「RSSニュースとブログ」を選ぶ。
「アカウント名」に分かりやすい名前を打ち込む（標準の「ニュースとブログ」のままでもよい）。その後、「次へ了」ボタンを押す。
「完了」ボタンを押す。

トップの項目ができた後に、購読する RSS を追加する。

「フォルダ」の下にある RSS の項目（上の4.で指定したもの）を選択する。
「購読するニュースやブログを管理する」を選ぶ。
「追加」ボタンを押す。
RSSフィードURLに、 RSS などの URL を打ち込み、OK ボタンを押す。

以後、１つの RSS フィードは、ネットワーク・ニュースのニュースグループのように扱われる。メッセージの既読、未読の情報が管理される。

★練習問題(1107) FirefoxのRSSリーダ機能

Firefox の RSS リーダ機能(ライブブックマーク)を利用してみなさい。

http://www.mozilla-japan.org/support/firefox/2.0/tutorials/feeds

★練習問題(1108) SafariのRSSリーダ機能

Web ブラウザ Safari の RSS リーダ機能を利用してみなさい。ブックマーク機能の一部として作られている。

★練習問題(1109) MacOSX iChatの利用

インスタント・メッセンジャとして、MacOSX iChat.app (/Applications/iChat.app) を利用してみなさい。次のような機能を確認しなさい。

文字による対話
音声、動画像による対話
複数人による対話

★練習問題(1110) MSN Messengerの利用

インスタント・メッセンジャとして、MSN Messenger (/Applications/Microsoft\ Office\ 2004/MSN\ Messenger.app) を利用してみなさい。

★練習問題(1111) Firefoxの言語選択

Web ページの中には、1つの URL に対して複数の言語で資源が用意されていることがある。Firefox は、Web サーバに対して表示可能な言語を送信している。 Web サーバは、受け取った言語のリストの中から、資源を選択して返す。

Firefox の言語選択機能で、どの言語が選択されているか調べなさい。

「Firefox」メニューから「環境設定」を選ぶ。
「詳細」ボタンを押す。
「一般」タブを選ぶ。
「言語設定」ボタンを押す。

言語のリストを編集したり、言語の優先順位を変更することができる。

この機能を利用してみなさい。複数の言語で記述されているページを探して、表示が切り替わることを確認しなさい。

◆課題11 CSSによるWWWページの作成

締め切りは、2007年5月25日金曜日とする。

本日の課題は、(1)と(6) については、講義の掲示板(CSS) (2)については、講義の掲示板(RSS) に含まれている各自のページに記述することで提出しなさい。(3)-(5) については、問題、および、回答をテキスト・ファイルに記述し、レポート提出ページから提出しなさい。

(1) HTML と CSS で次のような条件を満たす WWW ページを作成しなさい(注意: ホーム・ページでなくともよい)。 (Wiki提出)

課題9の条件をすべて満たす。
２つ以上のタグのスタイルを変更する。そのうち１つ以上は、class を使う。
同じ class のスタイルを、１つ、または、複数の HTML 文書の中の２個所以上で利用する。

(2) RSSリーダの設定をしなさい。RSSリーダとしては、Firefox, Thunderbird, Safari, その他 Web サイト上のもの考えられる。 2つ以上のサイトの RSS を登録しなさい。RSS の URL、他の受講生に対する紹介（数行程度）、Wiki かBlog なら、その種別を書きなさい。Wiki でも Blog でもないものについては、種別には「その他」と書きなさい。(Wiki提出)

(3) 内部的にWWWロボットが利用されていると思われる検索エンジンを利用しなさい。10件以下の Web ページがヒットするような、キーワード(できるだけ少なく)の組み合わせを探しなさい。この時、AND演算、OR演算、NOT演算を利用してよい。レポートには、利用した検索エンジンの URL、および、キーワードと演算子による式を書きなさい。

(4) The Unix Super Text の次の部分を読みなさい。

上巻第29章安全な通信/29.3.1 SSH まで

次の項目について2-5行で説明しなさい。

盗聴
共通鍵暗号
公開鍵暗号
電子署名
SSH パスフレーズ

(5) [加点] インスタント・メッセンジャを利用しなさい。利用したプログラム（サービス）、利用したコンピュータとネットワークの状況、通信相手の指定方法(方法のみ、個人が特定できる情報は不要)、どの程度の通信の品質が得られたかを書きなさい。ファイル転送によりファイルをコピーし、ファイルの大きさと通信速度を書きなさい。

(6) [加点] (1) で、講義の範囲を超えたスタイルシートの機能を利用しなさい。そして、その機能の説明、どこに利用しているか、および、その機能の有用性を書きなさい。

Last updated: 2007/05/22 12:01:24

Yasushi Shinjo / <yas@is.tsukuba.ac.jp>