情報技術基礎 - SFC:IT

情報技術基礎
目次
第 1 章 ウェブによるコラボレーション
1.1
1.2
何を学ぶべきか . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Wiki とは . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1
1
2
1.3
1.4
Wiki の書き方 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
複数の変更のマージ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3
3
1.5
1.6
ページのリンク . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4
4
課題 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
第 2 章 HTML
5
5
2.1
ブラウザによる表示の違い . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2
2.3
2.4
ページのソース . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
HTML によるマークアップ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
文字化けの仕組み . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5
6
7
2.5
課題 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8
第 3 章 ウェブページのデザイン
9
スタイル指定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.1
3.2
アクセシビリティ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9
11
3.3
課題 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11
第 4 章 画像
12
4.1
4.2
4.3
画像を扱うことの難しさ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.4
4.5
圧縮 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
ベクトル画像 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
13
14
4.6
課題 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
14
ビットマップ画像 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
情報量 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
第 5 章 URL とファイル
12
12
13
16
5.1
5.2
5.3
ウェブページはどこに保存されているか . . . . . . . . . . . . . . . . . . . . . . .
5.4
5.5
5.6
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
16
17
18
ウェブページの公開
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
相対 URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
18
19
課題 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
22
ディレクトリ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
ホームディレクトリ
i
第 6 章 サーバ
6.1
プロトコル
6.2
6.3
サーバ・クライアントモデル . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.4
6.5
ファイルサーバ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
メールサーバ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
課題 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
第 7 章 セキュリティ(前編)
23
23
24
25
25
27
28
28
28
7.1
7.2
スパム . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.3
7.4
ウイルス . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
盗聴 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
29
29
7.5
なりすまし
31
フィッシング詐欺 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
第 8 章 セキュリティ(後編)
33
侵入 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8.1
8.2
8.3
ファイルの保護 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
データの廃棄 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
33
34
35
8.4
課題 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
35
第 9 章 ハードウェアとソフトウェア (前編)
9.1
9.2
動的なウェブページ
9.3
9.4
自動的な実行 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
スクリプト
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
繰り返し . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
第 10 章 ハードウェアとソフトウェア (後編)
37
37
38
39
41
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
44
44
10.2 CPU . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
10.3 機械語 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
10.4 課題 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
45
45
47
10.1 コンピュータの構造
第 11 章 CGI(1)
11.1 CGI による動的なウェブページ . . . . . . . . . . . . . . . . . . . . . . . . . . . .
48
48
11.2 一部分だけ動的なウェブページ . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11.3 CGI を使うときの注意 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
51
54
11.4 CGI ではない動的なウェブページ . . . . . . . . . . . . . . . . . . . . . . . . . . .
54
第 12 章 CGI(2)
56
12.1 CGI スクリプトにデータを渡す . . . . . . . . . . . . . . . . . . . . . . . . . . . .
12.2 データの渡し方 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
12.3 GET と POST の違い . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
56
57
58
12.4 クッキー . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
58
ii
第 13 章 まとめ
13.1 Wiki の動く仕組み . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
60
60
13.2 来年度の履修について . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
13.2.1 「情報技術基礎」の再履修 . . . . . . . . . . . . . . . . . . . . . . . . . . .
60
60
13.2.2 次にどの科目を履修するか . . . . . . . . . . . . . . . . . . . . . . . . . . .
13.2.3 履修希望調査とクラス分け . . . . . . . . . . . . . . . . . . . . . . . . . . .
13.3 おわりに . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
61
61
62
付 録 A 文字の符号化
A.1 文字集合 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
63
63
A.2 符号化 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
A.3 ウェブページの文字符号化 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
63
64
付 録 B 単位
B.1 コンピュータでよく使われる単位 . . . . . . . . . . . . . . . . . . . . . . . . . . .
65
65
B.2 接頭辞 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
65
iii
第1章
1.1
ウェブによるコラボレーション
何を学ぶべきか
某Ｆ市にある某Ｋ大学を卒業したＡ君の場合：
Ａ君はコンピュータが好きというわけではありませんが、ワープロや表計算は不自
由なく使うことができます。就職面接では「ＩＴはバッチリです」と胸を張りました。
入社して、さっそく仕事で使うソフトのマニュアルを渡されました。しかし、今まで
はマニュアルなんか読まずに適当に使っていたので、分厚いマニュアルを前に戸惑って
しまいました。自分の知りたいことはどこを読めばいいのか、まるで判りません。
「あ
のー、ここ判んないんですけど…」と先輩に訊くたびに、忙しい先輩は迷惑そうな顔
をします。
そんなＡ君もしだいに仕事に馴れてきたある日、課長がＡ君を呼んで言いました。
「今度、わが社もインターネット通信販売を始めることになった。そこで、君にシ
ステムを作ってもらいたい。」
「え、ぼ、僕が作るんですか？」
「君はＩＴが得意だと言っとっただろう。それに、君が自分で作るわけじゃない。
業者に発注するんだ。」
「ああ、そうですよね。業者にまかせればいいんだ。」
さて、業者との打ち合わせの日。
「ハードの見積もりは持ってきてくれましたか？」
「はい、このＸ社の高機能サーバをお勧めいたします。これですと、○○○や△△
△はもちろん、××× までできます。」
「（××× は要るのかな？）ちょっと値段が高いですね。」
「この機能でこの価格なら、お買得ですよ。」
結局Ａ君は、業者の言う通りなら間違いないだろうと、予算オーバーで課長に睨ま
れながら、高機能サーバを買いました。
その後、ソフトの開発は順調に進み、めでたくシステムは完成しました。やれやれ
と思っていたＡ君でしたが、課長が顔色を変えてＡ君を呼びました。
「おい、経理から苦情が来てるぞ。この通信販売システムはわが社の経理システム
とデータの扱い方が違うので、組み合わせるとうまく動かないそうだ。業者には、経
理システムのことをちゃんと説明したんだろうな？」
「えーと、だいたいは説明したはずなんですが…。すいません、すぐに業者に言っ
て直させます。」
軽く考えていたＡ君でしたが、業者の言葉に頭を抱えました。
「今からそんな基本的なところを変更するとなると、一ヶ月以上はかかりますね。
追加料金も頂かないと。」
1
「（ああ、課長に何と説明しよう…）」
練習問題
• Ａ君の直すべき点はどこでしょうか？グループで議論しましょう。特に次の点について考え
なさい。
– マニュアルのどこを読めばよいか判らない。
– 業者の言う通りに値段の高いサーバを買った。
– 経理システムの説明が業者に伝わっていなかった。
• あなたは、情報技術について大学で何を学ぶべきだと思いますか？
グループで議論するとき、漫然と自分の意見を言うだけではいけません。議論の方法と報告書作
成1 をよく読んで、建設的な議論をしましょう。
1.2
Wiki とは
Wiki は、ウェブを利用したコラボレーションツールです。普通のウェブページは作者と読者が
はっきり分かれていますが、Wiki は誰でもページを編集することができ、多数の人が協力して一
つのウェブサイトを作るのに適しています。
例えば、ウィキペディア2 は、みんなで作る百科事典です。
「バザール方式」の文書作成プロジェ
クトと言えます。
この授業では、Wiki の動く仕組み [図 1.1] を勉強することにより、情報技術に対する理解を深
めます。Wiki でページを作ることが目的ではありませんから、誤解しないようにしてください。
練習問題
• 「バザール方式」とは何でしょうか？（ヒント：ウィキペディアにも解説があります）
• Wiki を使っているウェブサイトをできるだけたくさん探しなさい。
（ヒント：wiki というキー
ワードで検索してみましょう）
ウェブ
ブラウザ
HTTP
ウェブ
サーバ
CGI
プログラム
クライアント
ファイル
サーバ
図 1.1: Wiki の動く仕組み
1 http://www.crew.sfc.keio.ac.jp/lecture/2004ipl/
2 http://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8
2
1.3
Wiki の書き方
各クラスごとに、自由に使える Wiki を用意しました。これを使って、ページを作ってみましょう。
Wiki で文章を書くとき、見出しや箇条書きは、読むときとは違います。特別な書き方の約束に
したがって記号を書き、それを送信すると、できあがった画面では、文字の大きさが変わったり、
前に番号がついたりして見えます。このように、文章の中に、表示の体裁を指示する特別な記号を
埋め込む方式を「マークアップ」と呼びます。それに対して、ワープロのように、書いている状態
で出来上がりと同じ画面が見えているものを「WYSIWYG (What You See Is What You Get)」
と呼びます。
練習問題
• 各クラスのページの中にある「ヘルプ」で、新しいページを作る方法と、見出しや箇条書き
の書き方を調べなさい。
• 各グループごとに、メンバー紹介のページを作りましょう。
– 他のグループと混ざらないように、ページの名前にはグループ番号と’/’ を付けること
にします。例えば 0 番のグループは「group0/メンバー紹介」という名前のページにし
ます。
– 一人が書き終わってから、次の人が書くようにします。
1.4
複数の変更のマージ
Wiki は複数人で使うツールですから、自分一人で使うツールとは違う種類の問題が発生します。
例えば、現在のページの内容が「AAA」であるとき、ある人がそれを「ABB」に、同時に別の人
が「CCA」に変更しようとすると、何が起きるでしょうか？
練習問題 次の手順で、複数人が同時に変更しようとするとどうなるか、調べなさい。
1. グループ全員が、先ほど作ったメンバー紹介のページを編集状態にします。
2. それぞれが違う変更を加えます。同じ行を違う内容に書き換えたり、一人が挿入でもう一人
が削除をしたり、いろいろなパターンを試してみましょう。
3. 一人ずつ順に編集を終了していきます。
¶
PC の使い方
大学に入学するまでにコンピュータをどれくらい使っていたかは、人により千差万別です。で
³
すから、全員に対して「マウスの使い方は…」というような授業はしません。もし判らない
ことがあれば、先生や TA/SA に訊いてください。課題の解答は教えてくれないでしょうが、
使い方に関することであれば出来る限り教えてくれます。また、授業時間外にはメディアセン
ター内の CNS コンサルタントで質問をすることができます。せっかく高い授業料を払ってい
るのですから、どんどん質問するようにしてください。
µ
3
´
1.5
ページのリンク
ウェブの特徴は、ページの中のリンクによって、他のページに結び付けられていることです。本
のように最初から順に読んでいくテキストに対して、ウェブのように関連するところへ直接飛んで
いけるものをハイパーテキストと呼びます。
Wiki では、リンクやリンク先のページを簡単に作ることができます。
練習問題
• 「ヘルプ」でリンクの作り方を調べなさい。
• メンバー紹介のページに自分の趣味を書き、そこをリンクにしなさい。例えば「趣味：昼寝」
ならば、「昼寝」の部分をリンクにしなさい。
• リンク先のページを作りなさい。上の例なら「昼寝」というページを作ります。このページ
にはグループ番号を付けません。クラスの中に同じ趣味の人がいれば、協力して一つのペー
ジを作りなさい。
• ページの内容は、その趣味に関して何でも自由に書いてください。
• 他の人が書いたページで関連するものがあれば、そのページに対するリンクを作りなさい。
1.6
課題
コミュニケーション／コラボレーションのためのメディアやツールは数多くあります。例えば、
携帯電話、電子メール、掲示板、回覧板、テレビ会議、weblog、グループウェア、…。その中から
いくつかを選び、その特徴や、どのような状況に適しているかを比較しなさい。
• グループの番号付きで「課題 1」というページ（例えば「group0/課題 1」）を作って書き込
みなさい。
• 作業にかかる前に、議論の方法と報告書作成3 をよく読んでください。
• 次回、グループの中で誰かを指名して質疑応答を行います。誰が当たっても答えられるよう
に、グループ全員が内容を理解していること。
3 http://www.crew.sfc.keio.ac.jp/lecture/2004ipl/
4
第2章
HTML
ウェブ
ブラウザ
HTTP
ウェブ
サーバ
CGI
プログラム
クライアント
2.1
ファイル
サーバ
ブラウザによる表示の違い
同じウェブページでも、ブラウザによって表示が異なることがあります。
練習問題 前回作成した Wiki のページを、次のブラウザで表示し、同じかどうか比べてみま
しょう。
• Internet Explorer
• Netscape または Mozilla
• w3m
注：w3m を起動するには、Unix マシン (zux???) の端末ウィンドウで次のコマンドを実行します。
¶
% w3m http://itbasic.sfc.keio.ac.jp/class00/
µ
操作方法は、w3m マニュアル1 で調べてください。
2.2
ページのソース
ウェブページを表示したときの見掛けは、ブラウザの種類によって違います。それでは、ウェブ
ページが持っている本質的な情報は何でしょうか?
1 http://homepage2.nifty.com/aito/w3m/MANUAL.html
5
³
´
たいていのウェブブラウザには「ページのソースを表示する」という機能があります。
「ソース」
とは「源」という意味で、ウェブページを表示するための情報源ということです。これがウェブ
ページの実体で、ウェブブラウザは、これを人間に判りやすく表示するのが仕事です。
練習問題
• いくつかのページのソースを表示してみなさい。
• 情報技術科目のページ2 のソースを表示しなさい。その中に、< > で囲まれた単語がありま
す。どのような単語があるかリストアップし、ブラウザの表示と比べてその意味を推測しな
さい。
2.3
HTML によるマークアップ
ページのソースとして表示されるのは、HTML (HyperText Markup Language) という言語で
マークアップされた文章です3 。
前回 Wiki で書いた文章は、実は内部で HTML に変換されていました。
Wiki で入力→ HTML に変換→ブラウザで表示
練習問題
今度は HTML を手で書いてみましょう。HTML の書き方は CNS ガイド4 (オンライン版のみ) や
昨年度の教材5 に載っています。また、ウェブ上にも初心者向けの HTML の解説がありますから、
検索してみましょう。もっと本格的に HTML について勉強したい人は、推奨図書リスト6 を参考に
してください。
1. テキストエディタ (emacs, xyzzy など) で、test.html というファイル名を指定して書き始
めます。
2. 前回 Wiki で書いたメンバー紹介と同じ内容を書きなさい。
3. 書けたら、ファイルを保存し、ブラウザで test.html を表示しなさい。
¶
Character-based User Interface
w3m は、(標準の設定では) 入力はキーボードだけでマウスは使えませんし、表示は文字だけ
で画像は見えません。ブラウザ以外にも、このようなインターフェースのアプリケーションは
³
存在します。なぜ、このようなインターフェースが今でも使われているのでしょうか？
• キーボードによる操作は、熟練するとマウスに比べて非常に高速に行うことができます。
• 他のプログラムと連携して、処理を自動化できます。
µ
• ディスプレイの代わりに読み上げ装置を用い、視覚障害者が利用することができます。
2 http://ipl.sfc.keio.ac.jp/
3 HTML
ではないウェブページもありますが。
4 http://cns-guide.sfc.keio.ac.jp/2004/index.html
5 http://ipl.sfc.keio.ac.jp/text/info-2003-4/07/7
2.html
6 /class03/info27/books.html
6
´
余裕のあるグループは XHTML についてウェブで調べ、test.html を XHTML で書き直しな
さい。
2.4
文字化けの仕組み
たいていのウェブブラウザには、
「エンコーディング」とか「文字コード」とかいう名前のメニュー
があります。前回作成した Wiki のページを表示し、このメニューからいろいろな項目を選択して
みましょう。
外国語 (例えばタイ語) を選択すると、いかにもそれっぽい表示になりますが、これは翻訳され
ているわけではなくて、日本語の文字がタイ語の文字に出鱈目に置き換わっているだけです。こ
のように、文字が置き換わって読めなくなってしまうことを文字化けと呼びます。日本語の中にも
EUC-JP や Shift JIS など複数のメニュー項目があり、切り替えるとやはり文字化けします。なぜ
このようなことが起こるのでしょうか？
コンピュータの中では、文字は番号によって表されています。この文字と番号の対応表が複数あ
るのが原因です。
練習問題 次のような二種類の文字と番号の対応表があるとします。
対応表１：
あ
い
う
え
お
か
き
く
け
こ
さ
し
す
せ
そ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
た
ち
つ
て
と
な
に
ぬ
ね
の
は
ひ
ふ
へ
ほ
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
ま
み
む
め
も
や
ゆ
よ
ら
り
る
れ
ろ
わ
ゐ
ゑ
を
ん
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
対応表２：
い
ろ
は
に
ほ
へ
と
ち
り
ぬ
る
を
1
2
3
4
5
6
7
8
9
10
11
12
わ
か
よ
た
れ
そ
つ
ね
な
ら
む
13
14
15
16
17
18
19
20
21
22
23
う
ゐ
の
お
く
や
ま
け
ふ
こ
え
て
24
25
26
27
28
29
30
31
32
33
34
35
あ
さ
き
ゆ
め
み
し
ゑ
ひ
も
せ
す
ん
36
37
38
39
40
41
42
43
44
45
46
47
48
1. 対応表 1 で、「けいおう」と「しようなん」を番号に直しなさい。
2. その番号を、対応表 2 で文字に直しなさい。
上の実験は、実際のウェブシステムでは何に相当するでしょうか?
7
2.5
課題
HTML でのリンク・箇条書き (3 種類)・表の書き方を調べ、それを含んだページを書きなさい。
余裕のある人は、できるだけたくさんの種類のタグを含んだページを書きなさい。
この課題は個人で行います。提出方法は、ファイルをメールに添付して送ります。
¶
文字の符号化
コンピュータにおける文字の取り扱いについて、もっと詳しく知りたい人は、付録の文字の符
³
号化 [A 章] を参照してください。
電子メールの文字化けの原因と対策については、インターネットメールの注意点 — 文字化け
メール根絶の野望a というウェブサイトに、非常に詳しく解説されています。
µ
a http://www02.so-net.ne.jp/˜hat/imail/cover.html
8
´
第3章
ウェブページのデザイン
ウェブ
ブラウザ
HTTP
ウェブ
サーバ
CGI
プログラム
クライアント
3.1
ファイル
サーバ
スタイル指定
HTML は、見出しや箇条書きなどの文章の構造を指定するものですが、具体的に文字の大きさ
や余白の取り方を指定するものではありません。それはブラウザが「適当に」やってくれます。し
かし、それをブラウザまかせにせず、自分で指定したい場合は、スタイルシートを使います。
練習問題
現在、一般的に使われているスタイルシート用の言語は、CSS (Cascading Style Sheet) です。
CSS の書き方は、CNS ガイド1 (オンライン版のみ) や昨年度の教材2 に載っています。また、ウェ
ブ上にも解説がありますから、検索してみましょう。もっと本格的に CSS について勉強したい人
は、推奨図書リスト3 を参考にしてください。
• 先週作った test.html のヘッダ部分4 に、以下の行を書き加えなさい。
<link rel="stylesheet" type="text/css" href="test.css">
• テキストエディタで test.css というファイルを作り、その中に CSS で見出しの文字の大き
さや色の指定を書き込みなさい。
• test.css を保存し、ブラウザで test.html を表示してみなさい。
• test.css の内容をいろいろ変えてやってみなさい。
1 http://cns-guide.sfc.keio.ac.jp/2004/index.html
2 http://ipl.sfc.keio.ac.jp/text/info-2003-4/07/7
5.html
3 /class03/info27/books.html
4 <head>
と </head> に囲まれた部分。
9
¶
表の中央寄せ
CSS で間違いやすいことの一つに、表の中央寄せのやり方があります。
見出しなどを中央寄せするには、text-align を使います。
³
h1 { text-align: center }
しかし、これはテキストに対する指定なので、表に使うと、表の各項目のテキストが中央寄せ
になりますが、表全体は左端に表示されます。
では、表や図を中央寄せするにはどうするかというと、左右の余白を同じにするという指定
をします。
table { margin-left: auto; margin-right: auto }
µ
´
¶
HTML の標準化
HTML の解説の中には、<font> を使って文字の大きさや色を変えるように書いてあるもの
もあります。しかし、これは現在の W3C 標準では非推奨となっています。
³
以前の HTML は、ブラウザのメーカが勝手に拡張したりして混乱していました。そこで、
W3Ca という組織が標準化を進め、HTML 4.0 や XHTML 1.1 といった標準規格が普及しつ
つあります。
µ
´
a http://www.w3.org/
10
3.2
アクセシビリティ
ウェブを使う人の中には、高齢者や障害者も数多くいます。そのような身体的なハンディキャッ
プを持った人でも、容易に情報のやり取りができるかどうかということを、アクセシビリティと呼
びます。
PC の機能として、文字を拡大したり、音声で読み上げたりすることができますが、ウェブペー
ジそのものがアクセシビリティを考慮して書かれていることが重要です。例えば、次のようなこと
に気を付けなければなりません。
• 色覚障害の人でも判別しやすい色の組合わせを使う。
• マウスの細かい操作ができない人のために、リンク個所が小さすぎたり、隣同士のリンク個
所が近すぎないようにする。
練習問題
アクセシビリティに関して、いくつかの組織から具体的な指針が公表されています。それがどの
ようなものか、調べなさい。また、先週と今週で作ったページのアクセシビリティを、その指針に
基づいて判定しなさい。
3.3
課題
• HTML と CSS で実現される「構造とデザインの分離」について、ウェブや文献で調べなさ
い。それにはどういう長所、短所があるか、どのような状況で有効かをグループで議論しな
さい。
• 1.1 節に出てきたＡ君と、ウェブデザイナのＢさんを登場人物にし、
「構造とデザインの分離」
を読者に判りやすく伝えるショートストーリーを書きなさい。
Wiki で、グループの番号付きの「課題 3」というページ（例えば「group0/課題 3」）を作って
書き込みなさい。
¶
ユニバーサルデザイン
アクセシビリティとよく似た考え方で、建築や工業デザインの分野においては「ユニバーサル
³
デザイン」という考え方が提唱されています。これは、特定の障害に対応した特別な設計をす
るのではなく、すべての人にとって使いやすくなるような設計をしようというものです。
例えば、自動販売機の取り出し口を下の方ではなく中央付近にすると、車椅子の人が使えるよ
うになっただけでなく、それ以外の人も腰をかがめなくてよくなり、使いやすくなりました。
µ
´
11
第4章
画像
ウェブ
ブラウザ
HTTP
ウェブ
サーバ
CGI
プログラム
クライアント
4.1
ファイル
サーバ
画像を扱うことの難しさ
前回、コンピュータの内部では文字に番号をつけて処理しているという話がありましたが、それ
では、絵はコンピュータの内部ではどのように扱われているのでしょうか？
練習問題
1. 二人一組になって、次のような実験をしなさい。
(a) 片方が、相手に見えないようにして、紙に絵を描きます。
(b) 絵を描いた方は、それを言葉だけで、できるだけ正確に相手に伝えます。
(c) 伝えられた方は、それに基づいて紙に絵を描きます。
(d) そうやって描いた絵と、元の絵を比べてみなさい。
言葉 (あるいは電気信号の on/off) によって、絵を正確に伝えることはできるでしょうか？
2. さっきの実験と同じやり方ですが、今度は紙にあらかじめ 5×5 のマス目を書いておきます。
そして、自由に絵を描くのではなく、各マス目を白か黒のどちらかにして模様を描きます。
今度は正確に伝えられましたか？
4.2
ビットマップ画像
マス目を白か黒で塗って作った画像をビットマップ画像と呼びます。白と黒を電気信号の on/off
に対応させれば、コンピュータで正確に取り扱うことができます。
12
元の画像のように、連続的に明るさや色が変化する画像をアナログ画像、ビットマップのように
有限個の点の集まりで、しかも各点は何種類か (上の例では白と黒の二種類) の値しかなくて中間
がないものをデジタル画像と呼びます。
練習問題
1. 拡大ツールを使って、画面に表示されている文字や絵を見てみなさい。
Windows の場合 スタートメニューの [すべてのプログラム] - [アクセサリ] - [ユーザ補助]
- [拡大鏡] を選択する。
Unix の場合 端末ウィンドウで lupe コマンドを実行する。
% lupe
2. 白黒ではなく、カラーのビットマップ画像はどのようにして作ればよいか、考えなさい。
情報量
4.3
ネットワーク上で画像をやり取りする時、
「大きい」とか「重い」と言われることがありますが、
これはどういう意味でしょうか？情報を数値で表すと，その分量を量ることができます．この分量
を情報量と呼びます。
昨年度の教材1 を読んで、情報量について勉強しましょう。また、そこにある練習問題をやりな
さい。
4.4
圧縮
大きな画像を圧縮すると、小さくなることがあります（ならないこともありますが）。これは、ど
ういう仕組みでしょうか？また、圧縮を何回もすれば、どんどん小さくなっていくのでしょうか？
練習問題
次のような 5×7 のビットマップ画像があるとします。
1. この画像の情報量は何ビットでしょうか？
2. これを横一列に 1,1,1,1,1,1,0,0,0,0,... と並べなさい。
3. 0 か 1 が続いているところは、
「× 個数」でまとめて書き直しなさい。1×6, 0×4, ... というぐ
あいです。
¶
画像の形式
一口にビットマップ画像と言っても、色表現の方式や圧縮の方式によって様々な形式がありま
³
す。代表的な画像形式として、TIFF, GIF, PNG, JPEG などがあります。画像ソフトによっ
て、使用できる画像形式が違いますから、注意が必要です。
µ
1 http://ipl.sfc.keio.ac.jp/text/info-2003-4/04/4
2.html
13
´
1
1
1
1
1
1
0
0
0
0
1
0
0
0
0
1
1
1
1
1
1
0
0
0
0
1
0
0
0
0
1
0
0
0
0
4. 書き直した列には何種類の記号があるでしょうか？ただし、「1×6」や「0×4」を一つの記号
と見なします。
5. 書き直した列の情報量は何ビットでしょうか？
4.5
ベクトル画像
コンピュータで扱える画像はビットマップ画像だけではありません。ベクトル画像について調べ
てみましょう。
練習問題 二人一組になって、次のような実験をしなさい。
1. 片方が、相手に見えないようにして、紙に円・長方形・三角形などを組み合わせた図形を描
きます。
2. 図形を描いた方は、それを座標で相手に伝えます。例えば、
「左から 3cm, 上から 2cm の点を
中心にして、半径 1cm の円を描く」というふうにします。物差しを持っていない人は、等間
隔の格子を描いて、「左から 3 目盛り、...」としなさい。
3. 伝えられた方は、それに基づいて紙に図形を描きます。
4. そうやって描いた図形と、元の図形を比べてみなさい。
4.6
課題
1. ビットマップ画像とベクトル画像についてウェブで調べ、その特徴と、どんな用途に適して
いるかをまとめなさい。
2. いろいろな画像形式について、それが実際に使われている例を探し、その画像の URL を書
きなさい。(ヒント：多くのブラウザには、画像をマウスで選択し、その画像だけを表示する
¶
音声のデジタル化
アナログ音声も画像と同じような考え方でデジタル音声にできます。ただし、画像のように空
³
間的なマス目に分けるのではなく、時間的に分けます。そして、各時点での空気の振動の強さ
を数値で表わし、その数値を順に並べたものがデジタル音声になります。
µ
14
´
機能があります。その時の URL の最後に.png や.jpeg が付いていれば、それが画像の形式
を表します。)
この課題は個人で行います。提出方法はメールです。
¶
圧縮アルゴリズム
実際の圧縮ソフトは、上の方法よりもはるかに複雑で精巧な仕組みを用いています。興味があ
³
る人は、圧縮アルゴリズムについてウェブで調べてみましょう。
圧縮したデータを完全に元通りに戻せる圧縮方式を、可逆圧縮と呼びます。それに対して、画
像や音楽で人間に違いが判らないような細かいところは元通りにならなくてもよいという圧
縮方式を、不可逆圧縮と呼びます。不可逆圧縮の例として、JPEG や MP3 があります。
µ
15
´
第5章
URL とファイル
ウェブ
ブラウザ
HTTP
ウェブ
サーバ
CGI
プログラム
クライアント
5.1
ファイル
サーバ
ウェブページはどこに保存されているか
これまでに、ウェブページの実体は、HTML や CSS で書かれたソースであったり、ビットマッ
プ画像やベクトル画像であったりすることを見てきました。そのような情報は、コンピュータの中
ではファイルという単位で記憶されています。
ウェブページに限らず、コンピュータの中のあらゆる情報のうち、保存しておきたいものはすべ
て、ファイルに記憶します。逆に言うと、ファイルに保存されていない情報は、ソフトを終了した
り、電源を切ったりすると、消えてなくなってしまいます。
URL の最後の部分は、ファイルの名前 (パス名) によって決まります1 。例えば
http://ipl.sfc.keio.ac.jp/text/basic-2004-9/main.html
という URL は、次のような部分に分かれます。
http
プロトコル
ipl.sfc.keio.ac.jp
ホスト名
text/basic-2004-9/main.html
パス名
プロトコルとホスト名については、次回に解説します。
練習問題
適当な URL について、パス名の部分が何か言いなさい。
1 正確には、プロトコルとサーバによって違うので、ファイル名ではない場合もあります。
16
5.2
ディレクトリ
ファイルは名前で区別されるので、同じ名前のファイルが複数個存在することはありません。こ
れは、同じ住所を持つ家が複数存在しないのと同じです。
しかし、一台のコンピュータの中には何十万∼何百万個のファイルがあるのが普通なので、それ
を区別できるように全部違う名前を付けるのはなかなか大変です。そこで、ファイルのまとまりご
とに名前をつけ、その名前を順にならべることで、ファイルの名前とします。例えば、
「5322 番地」
は日本中にたくさんあるでしょうが、
神奈川県—藤沢市—遠藤— 5322
とすれば、一カ所しかありません。
ファイルのまとまりをディレクトリ2 、と呼びます。ディレクトリを日本語で言うと住所録です。
神奈川県というディレクトリには、横浜市や藤沢市が含まれていて、藤沢市というディレクトリに
は湘南台や遠藤が含まれていて…というように、ディレクトリが何段も重なっている構造を階層型
ディレクトリと呼びます。
Unix では、階層型ディレクトリの構造にしたがって、上位のディレクトリから順に名前を’/’ で
区切りながらつなげていきます。例えば、pub というディレクトリの中にある WWW というディレク
トリを指定したいときは、
/pub/WWW
と書きます。このようにして付けた名前を、そのファイルのパス名と呼びます。
練習問題
ITC のウェブページの URL は http://itc.sfc.keio.ac.jp/で始まります。その後の部分が
パス名で、そのページが保存されているファイルのパス名と対応しています。対応の仕方は、その
サイトの管理者 (この場合は ITC) が決めます。
例えば、
http://itc.sfc.keio.ac.jp/index.html
という URL のページは
/pub/WWW/itc/index.html
というファイルに保存されています。このファイルの中身がページのソースであることを、次のよ
うにして確認しましょう。
1. Unix マシンにログインする。
2. 端末ウィンドウで、ファイルの中身を表示する lv コマンド3 を実行する。
% lv /pub/WWW/itc/index.html
2 ディレクトリは
Unix の用語で、Windows や Mac ではドライブとフォルダと呼びます。
3 http://www.ff.iij4u.or.jp/˜nrt/lv/#usage
17
3. ウィンドウ 1 画面分で一旦停止し、スペースを押すと、次の 1 画面を表示する。
4. 終了するときは、’q’ を押す。
次のページについて、URL のパス名部分から、そのページがどのファイルに保存されているか
を考え、lv コマンド4 で内容を確認しなさい。
• 2003 年 09 月 05 日 SFC-CNS 利用内規について
• 2003 年 04 月 18 日 WinMX などの P2P ファイル交換ソフトウェアの利用について
5.3
ホームディレクトリ
/pub/WWW/itc には、ITC のウェブページが保存されています。それでは、それぞれのユーザの
ファイル (ウェブページだけでなく、受け取ったメールや、ワープロの文書などあらゆるもの) は
どこに保存されているのでしょうか？
個人が作ったファイルは、他の人のファイルと混ざらないようにしなければいけません。そこ
で、例えばログイン名が t00000xy の人は、/home/t00000xy で始まるファイル名を使うという約
束にしておきます。この場合の/home/t00000xy というディレクトリを、その人のホームディレク
トリと呼びます。
練習問題
1. 自分のホームディレクトリの中に何があるか、ls コマンド5 で調べなさい。システムで使用
するファイルやディレクトリが既にできているはずです。
2. グループの他の人、TA/SA、先生のホームディレクトリの中に何があるか、ls コマンド6 で
調べなさい7 。
5.4
ウェブページの公開
ホームディレクトリの中の public html というディレクトリは、その中にあるファイルがウェ
ブページとして公開されます。この場合の URL は、/home/t00000xy/public html を http://
web.sfc.keio.ac.jp/~t00000xy で置き換えたものになります。例えば、
/home/t00000xy/public html/xxx.html
が
http://web.sfc.keio.ac.jp/~t00000xy/xxx.html
に対応します。
練習問題
4 http://www.ff.iij4u.or.jp/˜nrt/lv/#usage
5 http://cns-guide.sfc.keio.ac.jp/2004/2/4/2.html
6 http://cns-guide.sfc.keio.ac.jp/2004/2/4/2.html
7 ここでは練習のために相手の了解をとって行いますが、一般には他人のホームディレクトリを勝手に覗くのはプライ
バシーの侵害になりますので、慎んでください。
18
http://ipl.sfc.keio.ac.jp/example/itbasic.html に練習用のページがあります。これを
自分のホームディレクトリにコピーして書き換えてみましょう。Unix マシンにログインして、次
の操作をします。ただし、t00000xy は自分のログイン名に置き換えてください。
1. ブラウザで http://ipl.sfc.keio.ac.jp/example/itbasic.html を表示し、リンクをた
どってどんなページがあるか確認しなさい。
2. http://ipl.sfc.keio.ac.jp/example/itbasic.html は、/pub/WWW/ipl/example/itbasic.html
というファイルに保存されているので、cp コマンドを用いて、/home/t00000xy/public html/
itbasic.html にコピーします。
¶
% cp /pub/WWW/ipl/example/itbasic.html \
µ
/home/t00000xy/public_html/itbasic.html
³
´
3. ブラウザで http://ipl.sfc.keio.ac.jp/example/itbasic.html と http://web.sfc.keio.ac.jp/
~t00000xy/itbasic.html の表示を比べなさい。違いの原因は何でしょうか？
4. 先ほどと同じようにして CSS ファイルをコピーします。
¶
% cp /pub/WWW/ipl/example/itbasic.css \
/home/t00000xy/public_html/itbasic.css
µ
³
´
5. テキストエディタの emacs を使って、コピーした CSS ファイル8 を好きなように書き換え、
http://web.sfc.keio.ac.jp/~t00000xy/itbasic.html の表示を確認しなさい。
5.5
相対 URL
ウェブページの間にリンクを作るとき、相手のページの絶対的な位置ではなく、互いの位置関
係の方が重要な場合があります。そのような場合は、自分の URL を基準にして、相対的に相手の
URL を指定する方法があります。
相対 URL は http://などで始まらない URL で、自分の URL のパス名のディレクトリ部分 (最
後のファイル名を除いた部分) に、相対 URL をくっつけることによって、相手の URL を作りま
す。例えば、
http://ipl.sfc.keio.ac.jp/index.html
というページの中で、
text/basic-2004-9/main.html
8 emacs
では、ホームディレクトリを’˜’ と省略するので、~/public html/itbasic.css という表記になります。
19
という相対 URL が使われていると、それは
http://ipl.sfc.keio.ac.jp/text/basic-2004-9/main.html
というページを指すことになります。
練習問題
先ほどコピーしたファイルを使って、相対 URL のリンクを使ってみましょう。
1. http://web.sfc.keio.ac.jp/~t00000xy/itbasic.html にある二つのリンクをクリックし
てみなさい。違いの原因は何でしょうか？
2. 先ほどと同じようにして xxx についてのページをコピーします。
¶
% cp /pub/WWW/ipl/example/xxx.html \
µ
/home/t00000xy/public_html/xxx.html
³
´
3. emacs を使って、コピーした xxx.html の中の xxx を (コピー元のファイルと区別するため) 別の
文字に書き換えなさい。それから、http://web.sfc.keio.ac.jp/~t00000xy/itbasic.html
にある二つのリンクをクリックしてみなさい。
4. http://web.sfc.keio.ac.jp/~t00000xy/xxx.html の中の yyy のページへのリンクをク
リックしなさい。これがちゃんと表示されるためには、何が必要でしょうか？
5. yyy.html は、/home/t00000xy/public html/aaa というディレクトリにコピーします。そ
のためには、mkdir コマンドで、このディレクトリを新しく作る必要があります。
¶
% mkdir /home/t00000xy/public_html/aaa
µ
³
´
6. ディレクトリができたら、yyy.html をコピーします。
¶
% cp /pub/WWW/ipl/example/aaa/yyy.html \
/home/t00000xy/public_html/aaa/yyy.html
µ
³
´
7. http://web.sfc.keio.ac.jp/~t00000xy/xxx.html の中の yyy のページへのリンクをク
リックし、表示されることを確認しなさい。
20
¶
コマンドをもっと短くする
上の練習問題で使ったコマンドは長くて入力が大変です。上矢印キーを使って前の行を呼び出し、編集
するのもひとつの方法ですが、コマンド自体をもっと短く書く方法があります。
³
1. /pub/WWW/ipl/example をカレントディレクトリにすれば、ファイルを指定するときにそれが省
略できます。
¶
³
µ
´
%
%
%
%
%
cd /pub/WWW/ipl/example
cp itbasic.html /home/t00000xy/public_html/itbasic.html
cp xxx.html /home/t00000xy/public_html/xxx.html
mkdir /home/t00000xy/public_html/aaa
cp aaa/yyy.html /home/t00000xy/public_html/aaa/yyy.html
2. シェルでは、ホームディレクトリを’˜’ と省略することができます。
¶
³
µ
´
%
%
%
%
%
cd /pub/WWW/ipl/example
cp itbasic.html ~/public_html/itbasic.html
cp xxx.html ~/public_html/xxx.html
mkdir ~/public_html/aaa
cp aaa/yyy.html ~/public_html/aaa/yyy.html
3. cp コマンドは、最後の’/’ から後が、コピー元とコピー先で同じ名前であれば、コピー先ではそ
れを省略してディレクトリだけを書くことができます。
¶
³
µ
´
%
%
%
%
%
cd /pub/WWW/ipl/example
cp itbasic.html ~/public_html
cp xxx.html ~/public_html
mkdir ~/public_html/aaa
cp aaa/yyy.html ~/public_html/aaa
4. cp コマンドは、複数のファイルを同じディレクトリにコピーするときは、まとめて書くことがで
きます。
¶
³
µ
´
%
%
%
%
cd /pub/WWW/ipl/example
cp itbasic.html xxx.html ~/public_html
mkdir ~/public_html/aaa
cp aaa/yyy.html ~/public_html/aaa
5. cp コマンドに-r オプションを付けると、指定したディレクトリとその中のファイルを全部まとめ
てコピーしてくれます。
¶
% cd /pub/WWW/ipl/example
% cp -r itbasic.html xxx.html aaa ~/public_html
µ
µ
21
³
´
´
5.6
課題
Unix のホームディレクトリは、Windows マシンでは Z:ドライブとして見えるように設定され
ています9 。つまり、練習問題で UNIX マシンを使って public html ディレクトリに作ったファイ
ルは、Windows マシンにログインすると、Z:ドライブの public html フォルダの中にあります。
この機能を利用して、練習問題でコピーしたファイルを Windows マシンで編集してみましょう。
xxx や yyy を自分の好きな言葉に置き換えて、それに関する文章を書き加え、意味のあるページに
しなさい。さらに、グループの他の人のページへのリンクを追加しなさい。
この課題は個人で行います。メールで、作成したページの URL を送ってください。
9 この仕組みは、
「サーバ」の回で詳しく説明します。
22
第6章
サーバ
ウェブ
ブラウザ
HTTP
ウェブ
サーバ
CGI
プログラム
クライアント
6.1
ファイル
サーバ
プロトコル
複数のコンピュータがネットワークを通して情報を交換する場合、どういう形式でどんな内容の
情報をやり取りするか、あらかじめ取り決めておく必要があります。そのような取り決めのことを
プロトコルと呼びます。
目的に応じていろいろなプロトコルがありますが、通信しようとする双方が同じプロトコルに従
わないと、うまく通信ができません。
「はい、こちら 110 番。どうしましたか？」
「ラーメン一丁、大至急ね。」
「…(怒)。」
URL の先頭部分は、どのプロトコルで通信を行うかを示しています。http://... の場合は、HTTP
というプロトコルの取り決めに従い、ftp://... の場合は、FTP というプロトコルの取り決めに
従います。
練習問題
以下に挙げたのは、プロトコルの略称です。それぞれ何の略か、ウェブで検索して調べなさい。
1. FTP
2. TELNET
3. SMTP
4. POP
23
5. IMAP
6. NNTP
7. HTTP
8. LDAP
9. NTP
6.2
サーバ・クライアントモデル
二台のコンピュータが通信して作業を行う場合、対等な関係でなく、片方がサービスを提供し、
もう片方がそのサービスを利用するということがよくあります。この場合、サービスを提供する側
をサーバ、サービスを利用する側をクライアントと呼びます。
ウェブの場合には、ファイルに保存されているウェブページを要求に応じて配信するウェブサー
バと、それを受け取って表示するウェブブラウザが、サーバとクライアント (*unknown element*??
参照) になります。
プロトコル
HTTP
サーバ
ウェブサーバ (Apache など)
クライアント
ウェブブラウザ (IE、Mozilla など)
練習問題
プロトコルに従って正しい応答をする限り、サーバやクライアントはどんなものでも構いませ
ん。ここでは、ウェブサーバの代わりに人間が応答する「なんちゃってウェブサーバ」を使って実
験してみましょう。
二人一組になり、サーバ役とクライアント役を決めます。
1. サーバ役は Unix マシンにログインし、次のコマンドを実行します。
¶
% /pub/sfc/ipl/nanchatte
µ
³
´
2. すると、次のように「なんちゃってウェブサーバ」の URL が表示されます。
¶
³
URL は http://zux999.sfc.keio.ac.jp:12345/xyz です。
µ
´
% /pub/sfc/ipl/nanchatte
3. クライアント役の人は適当なブラウザ (IE, Mozilla など) で、表示された URL を入力します。
4. サーバ役の人の画面には、ブラウザから HTTP で送られてきたリクエストが表示されます。
24
5. さらに、その下にブラウザへ返すレスポンスの最初の部分が表示されますので、それに続け
て好きな内容を HTML で書きます。
¶
ブラウザへのレスポンス: (終了は Control-d)
³
---------------------------------------HTTP/1.0 200 OK
Date: Fri May 7 21:08:26 JST 2004
Content-Type: text/html; charset=EUC-JP
<html><body><h1>I am a human.</h1></body></html>
µ
´
6. 書き終わったら、Control-d (コントロールキーを押しながら’d’ を押す) で終了します。
7. クライアント役の人の画面を確認します。
終わったら、役を交代してやってみなさい。また、ブラウザの種類を変えて、リクエストが同じ
かどうか調べなさい。
6.3
メールサーバ
メールの場合、複数のコンピュータが中継するので、一見するとサーバ・クライアントモデルで
はありませんが、中継の各段階では片方がサーバ、片方がクライアントになっています。
SMTP は、ユーザが最初のメールサーバに向けてメールを発信する時と、メールサーバが他の
メールサーバへ向けて中継するときに使うプロトコルです。
POP や IMAP は、目的地のメールサーバに保存されたメールを、ユーザが自分のコンピュータ
へ取り出すときに使うプロトコルです。
練習問題
SFC では、mail.sfc.keio.ac.jp というコンピュータが SMTP と POP のサーバ、imap.sfc.keio.ac.jp
というコンピュータが IMAP のサーバになっています。
1. 自分の使っているメールソフトで、サーバに関する設定がどうなっているか調べなさい。
2. 他のプロバイダのメールアカウントを使うとしたら、設定をどう変更すればいいか考えな
さい。
3. POP と IMAP の違いについて調べなさい。
6.4
ファイルサーバ
特別教室やオープンエリアでは、あるコンピュータでファイルを作り、ホームディレクトリに保
存しておけば、次の日に別のコンピュータにログインしても使うことができます。これはどういう
仕組みでしょうか？
25
¶
ホスト名とポート番号
「サーバ」や「クライアント」と言った場合、ハードウェア (つまりコンピュータ) を指す場
³
合と、ソフトウェア (例えば IE や Mozilla) を指す場合があります。
ハードウェア的な「サーバ」と「クライアント」、つまり二台のコンピュータが通信を始める
時には、まず相手のアドレスを知らなければいけません。手紙を出すには住所が、電話をか
けるには電話番号が必要なのと同じことです。インターネットには世界中のコンピュータが繋
がっていますから、それぞれのコンピュータは世界で唯一の番号a (IP アドレスと呼びます) を
持っています。しかし、番号では人間が覚えにくいので、普通はもっと覚えやすい名前 (ホスト
名と呼びます) を付けておきます。例えば、特別教室のコンピュータには zux???.sfc.keio.ac.jp
や、zxp???.sfc.keio.ac.jp という名前が付いています。
ソフトウェア的な「サーバ」と「クライアント」が通信する時はどうでしょうか。一台のコン
ピュータには一つのソフトウェアしか動いていないのであれば話は簡単です。しかし、普通は
複数のソフトウェアが動いています。同じコンピュータでウェブサーバとメールサーバが動い
ている時に、ブラウザからのリクエストが間違ってメールサーバに渡らないようにしなけれ
ばなりません。そのために、通信を行うソフトウェアにはb 番号 (ポート番号と呼びます) を割
り当てます。ホスト名とポート番号を組み合わせることにより、通信する相手を間違いなく指
定することができます。
URL の http://の次の部分はホスト名とポート番号です。ただし、それぞれのプロトコルには
標準のポート番号が決まっていて、その場合は省略できます。HTTP の標準ポート番号は 80
なので、世の中のほとんどのウェブサーバにはポート番号として 80 が割り当てられています。
それ以外のポート番号を使う時は、ホスト名の後に’:ポート番号’ を書きます。上の練習問題
では、12345 というポート番号を使っています。
a 原則はそうですが、限られた範囲でしか通信しない場合は、例外もあります。
µ
b 正確には通信路
(ソケット) に対して割り当てます。
26
´
ホームディレクトリは、個々のコンピュータではなく、ITC に設置されているファイルサーバに
保存されています。特別教室のコンピュータでファイルを使おうとした瞬間に、ネットワークを通
してファイルが転送されてくるので、まるですべてのコンピュータに同じファイルがあるかのよう
に見えるのです。
練習問題
1. CNS のすべてのユーザのホームディレクトリを一台のサーバで引き受けるのは負担が重す
ぎるので、複数のファイルサーバで分担しています。自分が使っているのは、どのファイル
サーバか調べてみましょう。
Unix マシンにログインします。ログインした直後は、ホームディレクトリがカレントディレ
クトリになっています。その状態で pwd コマンドを実行します。これはカレントディレクト
リを表示するコマンドなので、ホームディレクトリの完全な名前が表示されるはずです。
¶
³
% pwd
/a/fs1123a/t00000xy
µ
´
しかし、/home/t00000xy ではなく、変な名前が表示されます。これは、ネットワークを通し
てファイルサーバにアクセスするための名前で、fs??の部分がファイルサーバの名前です1 。
グループの他の人も同じファイルサーバかどうか比べてみましょう。
2. ファイルサーバやネットワークが不調になると、自分のホームディレクトリにアクセスでき
なくなります。ファイルサーバを実験で停止させるわけにはいきませんが、教卓のコンピュー
タでネットワークを不通にする実験を行います。
3. ファイルサーバを使ってファイルを共有する利点と欠点は何でしょうか？
6.5
課題
複数のコンピュータが通信する方式として、サーバ・クライアントモデルの他に、P2P モデルが
あります。
サーバ・クライアントモデルと P2P モデルの違いを調べ、その長所と短所や、どのような用途
に適しているかをまとめなさい。
この課題はグループで行います。Wiki で、グループの番号付きの「課題 6」というページ（例え
ば「group0/課題 6」）を作って書き込みなさい。
1 SFC
ではそうなっているというだけで、常にそうであるとは限りません。
27
第7章
セキュリティ(前編)
ウェブ
ブラウザ
HTTP
ウェブ
サーバ
CGI
プログラム
クライアント
7.1
ファイル
サーバ
スパム
無差別に送りつけられる宣伝メールのことをスパムと呼びます。現在、インターネットを流れる
メールのかなりの部分がスパムであると言われています。
スパムの中には、「配信を停止するには、このアドレスにメールを送ってください」（あるいは
「この URL にアクセスしてください」）と書いてあるものがありますが、その指示に従うと、メー
ルの内容を読んでいることが相手に判ってしまうので、さらに多くのスパムが届くことがあります。
練習問題
CNS では、スパム対策の試験運用1 を行いました。
• スパムフィルタとは、どういう仕組みか調べなさい。
• CNS での運用では、「SPAM と判定された場合でも、メールそのものの削除は行いません」
となっています。なぜ、そうなっているのでしょうか。また、自動的に削除したい場合はど
うすればよいでしょうか。
7.2
フィッシング詐欺
スパムの中には、宣伝ではなく詐欺を目的とするものもあります。詐欺にもいろいろな手口があ
りますが、最近被害の拡大が懸念されているのが、フィッシング詐欺です。
フィッシング詐欺は、本質的にはオレオレ詐欺と同じですが、より巧妙になっているので注意が
必要です。典型的な例は次のようなものです。
1 http://itc.sfc.keio.ac.jp/announce
open/20040513-antispam.html
28
1. クレジットカード会社の名前でメールが送られてくる。そのメールには、「あなたは○月 ×
日に高額の買い物をしているが、これはカード番号の不正利用の可能性がある。もし、あな
たが買い物をしたのでなければ、以下の URL にアクセスして支払い拒否の手続きをして欲
しい」と書いてある。
2. 買い物をした覚えがないので、メールに書いてある URL にアクセスする。
3. クレジットカード番号や暗証番号などの情報を要求されるので、入力する。
4. 実はそのウェブページは偽物で、入力した情報は詐欺師の手に渡り、悪用される。
その他にも、通販サイトを装って「会員登録の有効期限が来たので、更新して下さい」という
メールを送るなど、いろいろなパターンがあるようです。
練習問題
フィッシング詐欺に引っ掛からないようにするには、どうすればよいでしょうか。
7.3
ウイルス
ウイルスとは、ソフトウェアの一種で、自分自身をコピーすることで、自動的に増殖するもので
す2 。
ウイルスが感染する (ウイルスがそのコンピュータにコピーされる) 経路には、いろいろなもの
があります。
• ファイルのダウンロード
• メールの添付ファイル（感染したコンピュータのアドレス帳を見て、片っ端から自分のコピー
を添付して送るウイルスがあります。そのメールの From フィールドには適当なアドレスを
書き込むので、そのメールに返信してウイルス感染を注意しようとしても無意味です。）
• サーバソフトウェアへの通信（自分のコンピュータでサーバが動いていると、ウイルスがそ
のサーバに通信を仕掛けてくることがあります。通常はそれで感染することはありませんが、
サーバにセキュリティホールがあると感染する可能性があります。）
練習問題
1. 最近流行しているウイルスと、その対策について調べなさい。
2. 定期的にセキュリティ・アップデートを実行していても、ウイルスに感染することがありま
す。それはなぜでしょうか？
7.4
盗聴
インターネットを使ってクレジットカード番号などの重要な情報を送るときは、それが悪意の第
三者の手に渡らないよう、次の点に注意しなければいけません。
2 仕組みの違いによってウイルスとワームに区分することもありますが、ここではまとめてウイルスと呼びます。
29
• 通信は盗聴される可能性があります。
• 偽物が通信相手になりすましている可能性があります。
まず、盗聴の対策について考えてみましょう。盗聴そのものを防ぐのは困難なので、盗聴されて
も大丈夫なように、通信内容を暗号化します。例として、暗号化したリモートログインをやってみ
ます。
リモートログインとは、離れたところからネットワークを通してログインし、コマンドを送って
実行することです。
昔は TELNET というプロトコルが使われていましたが、これは暗号化しないため、パスワード
や通信内容が盗聴される危険性があります。そのため、最近は暗号化を行う SSH を使うのが普通
です。
練習問題
特別教室の Windows マシンから、ITC に置いてある Unix マシンへリモートログインしてみま
しょう。
1. Windows マシンで PuTTY3 を起動します。
2. プロトコルとして SSH が選択されていることを確認します。
3. リモートログインするマシンのホスト名を指定します。全員が一度に同じマシンにログイン
すると、そのマシンの負荷が重くなり過ぎるので、先生の指示にしたがって、分散してログ
インするようにします。
4. そのマシンに初めてリモートログインする場合は、警告のダイアログが出ます。これは、偽
物がそのマシンになりすましている可能性があるためですが、SFC のキャンパス内ではその
心配は無いので、OK をクリック4 します。一度ログインすれば、その情報が記憶されるので、
二度目からは警告は出ません。
5. パスワードを訊かれるので、CNS のログインパスワードを入力します。
6. ログインメッセージが出て、コマンドが実行できる状態になります。
7. w コマンドを実行すると、現在そのマシンにログインしているユーザの一覧が表示されます。
¶
% w
午 前 9
³
時
08
分
稼 働 65 日 間, 23:22,
12 ユ ー ザ,
平 均 負 荷
率: 0.04, 0.04, 0.06
ユーザ
端末
hattori pts/20
t00000xx pts/19
µ
開始時刻
待機
午前 9 時 07 分
午後 11 時 (火)
32:29
JCPU
PCPU
現プロセス名
w
yumiko
´
3 http://cns-guide.sfc.keio.ac.jp/2004/5/3/2.html
4 一般には、そのマシンの公開鍵の指紋を入手しておき、ダイアログに表示される指紋と一致するか確認する必要があ
ります。
30
8. logout コマンドで終了します。
暗号化は自動的に行われるので、ユーザは気にする必要がありません。
7.5
なりすまし
次に、偽物が通信相手になりすましている場合の対策を考えましょう。実生活で重要な手続きを
する時は、身分証明書で本人確認をするのと同じように、通信を始める時に証明書を送ることに
よって、偽物でないことを確認します。
しかし、証明書が送られてきたから安心というわけではありません。その証明書が本物であると
は限らないからです。
証明書が本物であることを保証してくれるのが、認証局です。例えて言えば、成績証明書には、
学生が勝手に書いたものでなく、大学が発行したものであることを示すために、大学の印が押して
あったり、透かしが入っていたりしますが、認証局も同じように証明書を発行し、その認証局が発
行したものであることが確認できるようになっています。
それでは、認証局が偽物でないことはどうやって確認すればよいでしょうか？他の認証局の発行
した証明書によって確認することもできますが、それを続けていくと、最終的にはどれかの認証局
を信頼する以外に方法がなくなります。多くのブラウザには、いくつかの認証局の証明書があらか
じめ組み込まれています。これらの認証局は、実績があり、信頼してもよいと社会的に認知された
ものです。
このような防御措置を行う仕組みが SSL です。SSL 自体は認証と暗号化の機能だけで、他のプ
ロトコルと組み合わせることにより、そのプロトコルの通信を安全にします。例えば、HTTP と組
み合わせた場合は HTTPS と呼ばれ、POP と組み合わせた場合は POP over SSL と呼ばれます。
練習問題
SFC のメールサーバやウェブサーバに SSL で通信することができますが、その時に送られてく
る証明書は SFC で発行したもので、ブラウザに組み込まれている認証局の発行したものではあり
ません。そのため、ブラウザは「その証明書が本物であるかどうか確認できない」という意味の警
告を出します。
警告を無視して通信することもできますが、そのような習慣をつけるのは、あまり好ましくあり
ません。前もって SFC の認証局の証明書を入手し、「SFC は信頼できる」ということをブラウザ
に教えてやるのが良い方法です5 。
ここでは、ITC で使用している認証局を信頼するよう mozilla を設定してみます。Unix マシン
でも Windows マシンでも操作は同じですが、Unix マシンでは表示が英文になります。
まず、組み込む前にはどうなるか、試してみましょう。
1. mozilla を起動し、ITC のページを HTTPS でアクセスします。
https://itc.sfc.keio.ac.jp/
2. 警告のダイアログが出るので、キャンセルをクリックします。
次に、ITC のページで公開されている、認証局の証明書を組み込みます。
5 しかし、現状では SFC 内の認証局が統一されておらず、証明書が簡単に入手できないものもあるので、警告を無視し
て通信するのもやむを得ない状況です。
31
1. 次のページを表示します。
http://itc.sfc.keio.ac.jp/fromisp/ssl-cert/
2. 「単に証明書を入手したい場合」にあるリンクをクリックします。説明ではファイルに保存
せよとなっていますが、mozilla ではクリックすれば自動的に証明書追加のダイアログが出
ます。
3. 「Web サイトを特定するとき、この認証局を信頼する」にチェックをつけ、OK をクリック
します6 。
認証局が追加されたことは以下のようにして確認できます。
1. メニューの［編集］→［設定...］を選択する。
2. 「プライバシーとセキュリティ」の前にある［＋］をクリックし、「証明書」を選択する。
3. 「証明書マネージャ...」のボタンをクリックする。
4. 「認証局」のタブをクリックする。
5. リストの中に「Keio Univ.」があることを確認する。
再び、HTTPS でアクセスしてみます。
1. 次のページを表示します。
https://itc.sfc.keio.ac.jp/
2. 今度は、警告が出ずにページが表示されます。
(次回へ続く)
6 この証明書が偽物でないという保証はありませんので、厳密には、ネットワークを使わない手段 (直接窓口で問い合わ
せるなど) で確認してから OK をクリックするべきです。
32
第8章
セキュリティ(後編)
ウェブ
ブラウザ
HTTP
ウェブ
サーバ
CGI
プログラム
クライアント
8.1
ファイル
サーバ
侵入
新聞やテレビで「コンピュータに侵入した」というニュースが流れることがありますが、これは
どういう意味でしょうか？
他のコンピュータに対して、ネットワークを通してコマンドを送り込み、自分の思い通りに動か
すことを、そのコンピュータに侵入すると言います。不正アクセスと呼ばれることもあります。
侵入の手段には、次のようなものがあります。
• 正規ユーザのパスワードを何らかの方法で入手し、リモートログイン [7.4 節] する。
• サーバソフトウェアの不備 (セキュリティホール) を利用する。
以前はサーバなどの大型コンピュータでしか問題になりませんでしたが、最近は家庭のコンピュー
タもネットワークに常時接続されるようになり、侵入されることがあります。
練習問題
1. CNS でパスワードを 3ヶ月以内に変更しなければならないのは、なぜでしょうか。
2. 「侵入されても、このコンピュータには壊されて困るようなデータはないから構わない」と
いう考え方は正しいでしょうか。
3. ファイアウォールとは何か、調べなさい。
33
8.2
ファイルの保護
CNS には、学部生、大学院生、卒業生、教職員など 6,000 人以上のユーザがいます。共同作業で
はお互いのファイルが参照できると便利なのですが、もし全く自由に他人のファイルの内容を見た
り、変更できたりすると、いろいろな問題が起きる可能性があります。そこで、ファイルやディレ
クトリごとに、他のユーザからのアクセスを許可したり、禁止したりする機能があります。
アクセス権とは、「誰が」、「何を」、「どうする」という組み合わせに対して、許可か禁止かを決
めたものです。保護モードとかパーミッションと言うこともあります。
練習問題
1. CNS ガイドの説明1 を読んで、自分のホームディレクトリの中にあるファイルやディレクト
リのアクセス権がどうなっているか調べなさい。
2. グループで次のことを調べなさい。
(a) グループ内の他の人の/home/t00000xy/public html/test.html（または他の適当な
ファイル）の内容を lv コマンドで見てみなさい。
(b) /home/t00000xy/public html/test.html のアクセス権を
rw------に変更します。
(c) グループ内の他の人の/home/t00000xy/public html/test.html の内容を lv コマン
ドで見てみなさい。
(d) /home/t00000xy/public html/test.html のアクセス権を
rw-r--r-に変更します。
(e) グループ内の他の人の/home/t00000xy/public html/test.html の内容を emacs で変
更してみなさい。
(f) /home/t00000xy/public html/aaa のアクセス権を
¶
パスワードを守るには
悪意を持つ人は、次のような手段でパスワードを入手しようとしていますので、パスワード
³
の取り扱いには細心の注意が必要です。対策として、パスワードを定期的に変更することが有
効です。
推測 名前や誕生日など、よく使われるパスワードを試してみる。
盗聴 ネットワークを通して送信されるパスワードを盗聴する。
解読 暗号化したパスワードなら入手できる場合、それを解読する。例えば、辞書にある単語
µ
を順に暗号化してみて、一致するか調べるといった方法がある。
1 http://cns-guide.sfc.keio.ac.jp/2004/2/4/11.html
34
´
rwx-----に変更します。
(g) グループ内の他の人の aaa の内容を ls コマンドで表示しなさい。
8.3
データの廃棄
古くなったパソコンを処分するとき、ディスクにデータが残っていると、誰かがそれを読み出す
かもしれません。プライバシーに関わる情報などは確実に消しておく必要があります。
一般にファイルを削除する（Unix では rm コマンド、Windows/Mac では「ゴミ箱を空にする」）
だけでは充分ではありません。なぜなら、ファイルをディスクに保存したり削除したりする仕組み
は、次のようになっているからです。
• ディスクは、「ブロック」という単位に区切られている。
• ファイル本体は、いくつかのブロック (連続しているとは限らない) に保存される。
• それぞれのファイルがどのブロックに保存されたかを記録する、索引に相当する部分がある。
• ファイルを削除するとは、索引の部分に「このファイルは不要なので別のデータを上書きし
てもよい」というマークを付けることである。
新しいファイルを作ると、使われていないブロックにデータを保存し、そのブロックに前に書い
てあったデータは消えます。しかし、どのブロックが使われるかは判らないので、ディスクのすべ
てのブロックを調べると、かなり以前に削除したファイルでも、一部が残っている場合があります。
練習問題
1. ハードディスクの構造と仕組みを調べなさい。
2. 「削除したファイルを復活させるソフト」や、
「ファイルを復活できないように完全に消去す
るソフト」が市販されています。どのような機能や制限があるかを調べなさい。
8.4
課題
ネットワーク犯罪や知的財産権侵害の増加に対応して、インターネットにおける規制を強化すべ
きだという意見があります。
¶
Windows におけるファイル保護
Windows もファイルのアクセス権を指定することができます。ただし、特別教室の Windows
³
マシンで「マイドキュメント」に保存する場合は、Unix とファイルを共有しているため、Unix
のアクセス権と対応するような指定しか出来ません。
個人所有のノート PC の場合は、自分しか使わないのが普通ですから、マシン全体のセキュリ
ティさえしっかりしていれば、個々のファイルのアクセス権を指定する必要はあまりないで
しょう。
µ
´
35
1. それに賛成する側と反対する側の主張を調べてまとめなさい。技術的な側面と社会的な側面
(法律など) の両方を含むこと。
2. 将来のコンピュータ/インターネットのセキュリティはどうあるべきか、提言の形でグループ
の意見を述べなさい。
この課題はグループで行います。Wiki で、グループの番号付きの「課題 8」というページ（例え
ば「group0/課題 8」）を作って書き込みなさい。
36
第9章
ハードウェアとソフトウェア (前編)
ウェブ
ブラウザ
HTTP
ウェブ
サーバ
CGI
プログラム
クライアント
9.1
ファイル
サーバ
動的なウェブページ
初期のウェブは、リクエストで指定されたファイルの内容を送り返す機能しかありませんでし
た。しかし、決まった内容を送るだけであれば、テレビやファックスなど他のメディアとそれほど
大きな違いはありません。
ウェブがコミュニケーションやビジネスの面で重要になったのは、ユーザの入力に応じて、違う
内容を送り返す機能を持ったからです。例えば、通販サイトでは、客が商品の個数を入力すると、
次のページで合計金額が表示されます。このページは、あらかじめ用意してあったものではなく、
その場で計算して作り出されたものです。また、Wiki のページも、ユーザが入力したテキストを
HTML に変換したものです。
一般に、あらかじめ用意してあって変化しないものを静的、ユーザの入力などその場の状況に応
じて変化するものを動的と呼びます。
動的なウェブページを作るには、次のような仕組みが必要です。
• クライアントからデータを送り、サーバで受け取る。
• サーバには動的なページを作り出す「手順」が用意してある。
• クライアントからデータが届いたときに、自動的にその「手順」を実行する。
これから 4 回にわたって、この仕組みについて勉強します。
練習問題
動的なウェブページを使っている例を探しなさい。
37
9.2
スクリプト
コンピュータを動かすための手順をプログラムと呼びます。プログラムの中でも比較的単純なも
のをスクリプトと呼ぶことがあります。
スクリプトを書くには、そのための言語が必要です。Unix の場合は、コマンドがそのままスク
リプトを書く言語として使えます。
練習問題
コマンドを使って、スクリプトを書いてみましょう。
1. 端末ウィンドウで date コマンドを実行してみなさい。これは現在時刻を表示するコマンド
です。
¶
³
% date
µ
´
2. emacs を起動し、適当な名前 (例えば myscript) のファイルを新たに作ります。
3. そこに、date と書き込んで保存します。なお、最後は必ず改行してください。
date
4. これで myscript という名前のスクリプトができました。このスクリプトを実行するには、
sh コマンドを使います。端末ウィンドウで次のように実行します。
¶
³
% sh myscript
µ
´
5. myscript に別のコマンドを追加してみましょう。/pub/sfc/ipl/sfcnews は、SFC のウェ
ブページから NEWS の部分だけを取り出すコマンド1 です。
¶
³
% /pub/sfc/ipl/sfcnews
µ
´
6. emacs で myscript を編集し、date の次の行に/pub/sfc/ipl/sfcnews を書き加えます。
date
/pub/sfc/ipl/sfcnews
7. ファイルを保存します。
1 実はこれもスクリプトです。
38
8. もう一度 myscript を実行してみます。
¶
³
% sh myscript
µ
9.3
´
自動的な実行
コンピュータを使うとき、キーボードやマウスで指示してソフトを起動するだけでなく、自動的
に何かを実行して欲しいことがあります。
• 毎日、夜中にファイルをバックアップする。
• メールが届いたときに、画面にポストの絵を表示する。
「自動的に実行する」と言っても、ソフトが勝手に動き出すわけではありません。必ず、そのソ
フトを起動する別のソフトがあり、「いつ」
・
「何を」ということを設定しなければなりません。
• 定期的に何かを実行して欲しいときは、スケジューリングのソフトに対して設定する。
• メールが届いたときに何かを実行して欲しいときは、メールを受け取るサーバソフトに対し
て設定する。
「何を」というのは、普通は一つのコマンドです。複数の手順が必要なときは、あらかじめスク
リプトを作っておきます。
練習問題
Unix には、指定した時刻にコマンドを実行してくれる cron というソフトが常時動いています。
これを使って、さっき作ったスクリプトを定期的に実行するようにしてみましょう。
cron に対する設定項目は、実行したい分・時・日・月・曜日と、実行したいコマンドです。分・
時・日・月・曜日のところに’*’ を書くと、「すべての」という意味になります。例えば、毎日朝 9
時に myscript を実行するには、次のような設定になります。
0 9 * * * sh /home/t00000xx/myscript
また、毎時 0 分と 30 分に実行したい場合は、次のようになります。
0,30 * * * * sh /home/t00000xx/myscript
1. zux???では、一般ユーザは cron を使えない設定になっているので、ccz??にリモートログイ
ン [7.4 節] します。どのマシンにログインするかは、先生の指示にしたがってください。
39
¶
実行可能ファイル
上で作ったスクリプトは、sh(シェル) がファイルを読み込んで実行するので、シェルスクリ
プトと呼ばれます。
¶
³
³
% sh myscript
µ
´
シェルスクリプトのファイルのアクセス権 [8.2 節] を実行可能にすると、それをコマンドとし
て使えるようになります。
ファイルを実行可能にするには、次のようにします。
¶
% chmod +x myscript
µ
³
´
すると、コマンドとして使えるようになります。
¶
% myscript
µ
³
´
実際は sh が自動的に起動するのですが、見掛けは他のコマンドと全く同じです。このように
して、自分で新しいコマンドを作り、システムを拡張していくことができます。
µ
40
´
2. cron に対する設定は crontab コマンドで行います。現在の内容を見るには-l オプションを
付けます。今は、何も設定がないので、エラーになります。
¶
% crontab -l
crontab: crontab ファイルをオープンできません
µ
³
´
3. emacs で適当な名前 (例えば mycrontab) のファイルを作り、そこに以下の内容を書き込んで
保存します。
* * * * * sh /home/t00000xx/myscript
1 日 1 回だと動作確認に何日もかかるので、1 分に 1 回実行するようにします。
注意：サーバの負荷が重くなるので、テスト以外でこんなに頻繁に実行してはいけません。
4. crontab コマンドでファイルを指定すると、そのファイルの内容が設定されます。
¶
³
% crontab mycrontab
µ
´
5. コマンドの実行結果はメールで送られてくるので、確認しなさい。
6. 設定を取り消すには、-r オプションを使います。
¶
³
% crontab -r
µ
´
注意：取り消さないと、1 分ごとにメールが来るので、メールボックスがあふれます。
9.4
繰り返し
コマンドを、複数のデータに対して繰り返して実行したい場合があります。
• 最も単純な繰り返しとして、ファイルを複数指定すると、それぞれについて順に処理を行う
ような種類のコマンドがあります。
• もっと一般的な繰り返しとして、コマンド文字列の一部を次々と別の文字列で置き換えなが
ら、繰り返し実行する仕組みもあります (囲み記事参照)。
41
練習問題
grep コマンドは、探すべきパターンの後にファイル名を複数書くと、それぞれのファイルの中
からパターンに合う行を探して表示します。
/pub/WWW/itc/announce open にある ITC のお知らせのファイルについて、どんな <h1> の見
出しがついているか調べてみましょう。
1. ファイルが 1 個だけの場合は、次のようになります。
¶
% grep ’<h1>’ /pub/WWW/itc/announce_open/2000121401.html
µ
³
´
2. ファイルが 2 個なら、ファイル名を並べて書きます。
¶
% grep ’<h1>’ /pub/WWW/itc/announce_open/2000121401.html \
µ
/pub/WWW/itc/announce_open/2001011701.html
³
´
3. ファイルが何個でも並べて書けばいいのですが、/pub/WWW/itc/announce open には HTML
ファイルが 212 個あります。これを全部書くのは大変なので、’*’ という任意の文字列に置き
換えられる記号を使います。’*.html’ と書くと「なんとか.html」というファイル名を全部並
べて書いたのと同じ意味になります。
¶
% grep ’<h1>’ /pub/WWW/itc/announce_open/*.html
µ
(次回へ続く)
42
³
´
¶
³
for による繰り返し
sh の機能として、複数のデータに対してコマンドを順に適用することができます。
for 変数 in データ 1 データ 2 データ 3 ...
do
コマンド 1
コマンド 2
...
done
例として、wget コマンドで jpeg ファイルをダウンロードし、convert コマンドで png 形式に変換する
という操作をやってみましょう。ダウンロードする画像は、「おかしら日記」に使われている次の画像
です。
http://www.sfc.keio.ac.jp/common/hqdiary/images/F_001_1.jpg
http://www.sfc.keio.ac.jp/common/hqdiary/images/F_001_2.jpg
http://www.sfc.keio.ac.jp/common/hqdiary/images/F_001_3.jpg
http://www.sfc.keio.ac.jp/common/hqdiary/images/F_001_4.jpg
ほとんど同じ URL で、番号が 1, 2, 3, 4 と変わるだけです。
例えば、小島学部長の写真を PNG 形式で欲しいとすると、次のような操作になります。
¶
³
µ
´
% wget \
http://www.sfc.keio.ac.jp/common/hqdiary/images/F_001_1.jpg
% convert F_001_1.jpg F_001_1.png
後の 3 人も同じ要領でやればいいのですが、ほとんど同じことを 4 回入力するのも芸がないので、繰り
返しを使ったスクリプトを書き、コンピュータに作業をやらせましょう。
emacs で、myscript に次のようなスクリプトを書きます。
for n in 1 2 3 4
do
wget http://www.sfc.keio.ac.jp/common/hqdiary/images/F_001_$n.jpg
convert F_001_$n.jpg F_001_$n.png
done
sh myscript を実行すると、n = 1, 2, 3, 4 に対して do と done の間のコマンドが実行されます。その
時に、コマンドの中に$n と書いてあると、それが 1, 2, 3, 4 に置き換えられるので、結局、次のような
コマンドを実行することになります。
wget http://www.sfc.keio.ac.jp/common/hqdiary/images/F_001_1.jpg
convert F_001_1.jpg F_001_1.png
wget http://www.sfc.keio.ac.jp/common/hqdiary/images/F_001_2.jpg
convert F_001_2.jpg F_001_2.png
wget http://www.sfc.keio.ac.jp/common/hqdiary/images/F_001_3.jpg
convert F_001_3.jpg F_001_3.png
wget http://www.sfc.keio.ac.jp/common/hqdiary/images/F_001_4.jpg
convert F_001_4.jpg F_001_4.png
µ
43
´
第 10 章 ハードウェアとソフトウェア (後編)
ウェブ
ブラウザ
HTTP
ウェブ
サーバ
CGI
プログラム
クライアント
10.1
ファイル
サーバ
コンピュータの構造
コンピュータは、どんなに小さな事でもプログラムの指示に従って動いています。全くプログラ
ムが入っていないコンピュータは、電源を入れても何も動きません。ここでは、コンピュータの内
部でプログラムがどのように実行されるかを勉強します。そのためには、まずコンピュータの中が
どうなっているかを知らなければなりません。
コンピュータは、大雑把に言えば次のような部分から成り立っています。
中央処理装置 (CPU) プログラムに書かれている命令を読み取って、計算をしたり、他の部分を
制御したりします。
記憶装置 プログラムやデータを保存します。
• 主記憶 (内部記憶、一次記憶) 装置—半導体メモリ
• 補助記憶 (外部記憶、二次記憶) 装置—ハードディスク、CD-ROM/R/RW
入出力装置 データを外界とやりとりします。
• キーボード
• ポインティングデバイス—マウス、タブレット
• スキャナ
• マイク
• ビデオディスプレイ
• プリンタ
44
• スピーカ
• ネットワーク—イーサネット、無線 LAN、モデム
練習問題
1. 適当なコンピュータのカタログ1 を見て、その構成がどうなっているか、上の区分にしたがっ
て調べなさい。
2. 主記憶装置と補助記憶装置の区別があるのはなぜでしょう？
10.2
CPU
プログラムを実行するのは CPU の役目です。CPU は次のような動作を繰り返しています。
1. 主記憶装置から、次の命令を読み取る。
2. その命令が何を意味しているかを解釈する。
3. 命令の指示を実行する。
CPU の内部は、さらに細かく分かれていますが、各部分がバラバラに動いたのでは混乱するの
で、合図の信号に合わせて一斉に動くようになっています。合図の信号が 1 秒間に何回送られてく
るかを、その CPU の動作周波数と呼びます。
練習問題
1. 「動作周波数 2GHz の Pentium4 は、動作周波数 1GHz の Pentium3 より 2 倍以上速い」と
いうのは本当か？
2. コンピュータの速さをできるだけ正確に表すにはどうすればよいか？(ヒント：「MIPS」、
「FLOPS」、「ベンチマーク」などのキーワードで検索してみなさい)
3. いろいろなコンピュータの速さを調べてみなさい。
10.3
機械語
プログラムを書き表すのには、プログラミング言語を使います。プログラミング言語には、人間
にとって解りやすい高級言語 (例えばシェルスクリプト [9.2 節] など)、と、実際に CPU が実行す
る機械語があります。普通は、高級言語で書いたプログラムを機械語に翻訳して実行します。
機械語は CPU の種類によって違うので、ある機種用の機械語プログラムを別の機種で実行する
ことはできません。
練習問題
機械語の実行の仕組みを見てみましょう。本物の CPU の機械語はものすごく複雑なので、単純
化したシミュレータ2 を使うことにします。
1 カタログにはいろいろな数値が出てきます。よく使われる単位を
2 財団法人九州システム情報技術研究所において、高校の「情報
45
B 章にまとめました。
B」の教材としても使えるように開発されたものです。
• シミュレータの起動34
それでは、3+4 の計算をしてみましょう。
• データメモリの 0 番をマウスでクリックすると入力可能になるので、3 をキー入力します。そ
こで Enter を押すと、次の 1 番が入力可能になるので、4 をキー入力します。
• 足し算をするには、データを演算装置に移動させなければなりません。そこで、「データメ
モリ 0 番の内容をレジスタ A にコピーする」という命令を、プログラムメモリ 0 番に書き込
みます。プログラムメモリの 0 番をマウスでクリックし、次にその右の命令ボタンの中で、
「A」に矢印が向いているボタンをクリックします。これは「データメモリのどれかの内容を
レジスタ A にコピーする」という意味です。さらに、何番の内容をコピーするか指示するた
めに、命令の横の箱の中に 0 をキー入力します。
• この命令を試しに実行してみましょう。
「実行」ボタンを押すと、プログラムメモリ 0 番から
順に (今は 0 番しか書いていませんが) 命令が実行されます。レジスタ A の数値はどうなっ
たでしょうか？
• さっきと同じようにして、「データメモリ 1 番の内容をレジスタ B にコピーする」という命
令を、プログラムメモリ 1 番に書き込みます。
• また試しに実行してみましょう。実行の前に「リセット」ボタンを押すと、演算装置の内容
が最初に戻るので、実行状況がわかりやすくなります。
• 「レジスタ A の内容とレジスタ B の内容を加える」という命令をプログラムメモリ 2 番に書
き込みます。プログラムメモリの 2 番をマウスでクリックし、次にその右の命令ボタンの中
で、「+」ボタンをクリックします。横の箱にはどんな数字が入っていても関係ありません。
• また試しに実行してみましょう。レジスタ A と B の値はどうなりましたか？
• 結果をレジスタに置いたままだと次の計算ができませんから、結果をデータメモリのどこか
に保存します。「レジスタ A の内容をデータメモリ 2 番にコピーする」という命令を、プロ
グラムメモリ 3 番に書き込みます。
「A」から矢印が出ている命令と、その横に 2 という数字
を入力します。
• また試しに実行してみましょう。データメモリ 2 番の値はどうなりましたか？
これで、3+4 を計算してデータメモリ 2 番に保存できました。
3 kuemain.htm
4 許可を得て
www.sfc.keio.ac.jp にコピーしました。
46
10.4
課題
教育用計算機シミュレータのページ5 にサンプルプログラムがあります。実際にどのように動く
のか、試してみなさい。その中から好きなものを 2 個 (ただし「足し算」を除く) 選び、どのよう
に動くか言葉で説明しなさい。
この課題は個人で行います。提出方法はメールです。
¶
オープンソース
高級言語で書いた、翻訳する前のプログラムをソースプログラムと呼び、翻訳して出来た機
³
械語のプログラムをオブジェクトプログラムまたはバイナリと呼びます。
ソースプログラムがあれば、そのプログラムの中身を知ることができ、他機種への移植や改
良ができます。しかし、商品として売っているプログラムは、企業秘密を守るために、ソース
プログラムは公開しないのが普通です。
それに対して、世界中の多くのボランティアがバザール方式でプログラムを作り、その成果で
あるソースプログラムは公開して、誰もが自由に使えるようにしようという考え方がオープ
ンソースです。オープンソースの代表例として Linux があります。
µ
5 http://www.isit.or.jp/˜kimuro/rcupj/kue
index.html
47
´
第 11 章 CGI(1)
ウェブ
ブラウザ
HTTP
ウェブ
サーバ
CGI
プログラム
クライアント
11.1
ファイル
サーバ
CGI による動的なウェブページ
cron による実行 [9.3 節] では、指定した時刻にコマンドを実行してくれます。例えば、スケジュー
ル帳から今日の予定の部分を抜き出し、HTML に変換してファイルに保存するようなスクリプト
があるとしましょう。これを毎朝実行すれば、自分のホームページの「今日の予定」を自動的に更
新できます。
しかし、通販サイトで合計金額を表示するような場合は、定期的な更新ではなく、ユーザがボタ
ンを押した瞬間にスクリプトを実行しなければなりません。ユーザがボタンを押したという情報
は、HTTP を使ってウェブサーバに送られます [6.2 節]。したがって、ウェブサーバに「ユーザが
このボタンを押したら、このスクリプトを実行する」という設定をしなければなりません。
ウェブサーバがスクリプトを実行する仕組みを CGI(Common Gateway Interface)1 と呼びます。
URL がウェブサーバに送られてくると、通常は対応するファイルの内容が送り返されますが、CGI
を使うように設定されていると、対応するスクリプトを実行した結果が送り返されます (図 11.1)。
練習問題
以前に cron で実行したスクリプト [9.2 節] を、今度は CGI で実行してみましょう。
1. CGI スクリプトは、/home/t00000xx/public html ディレクトリの下になければなりません。
emacs で/home/t0000xx/public html/myscript というファイル（~/public html/myscript
と省略します）を作り、以下の内容を書き込みなさい。
#!/bin/sh
1 本来の CGI はウェブサーバと外部プロセスのインターフェースですが、ここではウェブサーバ内部でスクリプトを実
行する場合も含めて CGI と呼ぶことにします。
48
URL
ファイル名に変換
ウェブ
サーバ
ファイルの内容
通常ファイルの場合
URL
ファイル名に変換
ウェブ
サーバ
実行
実行結果
CGI の場合
図 11.1: 通常ファイルと CGI の比較
date
/pub/sfc/ipl/sfcnews
1 行目は、このスクリプトは sh コマンド（実体は/bin/sh）で実行しなさいという指示です。
2. 間違いなく実行できるか確認しなさい。
¶
³
% cd /home/t00000xx/public_html
% sh myscript
µ
´
3. このファイルをブラウザで見てみましょう。http://web.sfc.keio.ac.jp/~t00000xx/myscript
という URL を指定しなさい。何が表示されましたか？
4. SFC のウェブサーバでは、CGI スクリプトは、ファイル名の最後を.cgi にする約束になっ
ています。myscript というファイル名を myscript.cgi に変更しましょう。ファイル名の
変更には mv コマンドを使います。
¶
³
% mv myscript myscript.cgi
µ
´
注意：emacs で myscript を開いたままだと、後でややこしいことになるので、閉じてお
きましょう。現在編集中のファイルを閉じるには、アイコンなら「×」の形、メニューなら
[File]->[Close (current buffer)]、キーボードなら C-x k と押して Kill Buffer:と訊かれたら
Enter を押す、です。
49
5. 変更したファイルをブラウザで見てみましょう。http://web.sfc.keio.ac.jp/~t00000xx/
myscript.cgi という URL を指定しなさい。何が表示されましたか？
6. CGI スクリプトとして実行するには、そのファイルのアクセス権 [8.2 節] が実行可能でなく
てはなりません。myscript.cgi を実行可能にするには、次のようにします。
¶
³
% chmod +x myscript.cgi
µ
´
7. 実は、myscript.cgi の実行結果は、そのままでは HTTP の規則に違反しています。HTTP
でレスポンスを返すときは、必ずヘッダ2 が必要です。ここでは詳しく説明しませんが、ヘッ
ダを出力するために emacs で myscript.cgi を編集し、次の 2 行目と 3 行目を書き加えてく
ださい。
#!/bin/sh
echo "Content-Type: text/plain;charset=iso-2022-jp"
echo
date
/pub/sfc/ipl/sfcnews
8. 実行結果がどうなるか、確認しておきましょう。echo は、その後に書いた文字列をそのまま
表示するだけのコマンドです。
¶
³
% sh myscript.cgi
µ
´
9. 変更したファイルをブラウザで見てみましょう。http://web.sfc.keio.ac.jp/~t00000xx/
myscript.cgi という URL を指定しなさい。何が表示されましたか？
10. 最後に、rm コマンドで実験に使ったファイルを消しておきましょう。
¶
³
% rm myscript.cgi
µ
2 HTML
´
の <head> とは別のものです。
50
11.2
一部分だけ動的なウェブページ
ほとんど静的だが、一部分だけ動的なウェブページを作りたいことがあります。例えば、その
ページをアクセスした人数を数えて「あなたは○○人目のお客様です」と表示したい場合、
「○○」
の部分だけ変更したいのですが、そのためにページ全体を CGI で作るのは大変です。基本的なと
ころは HTML で書いておき、必要に応じて CGI の実行結果を取り込めるようになっていれば便利
です。
HTML の中に、いろいろなものを取り込む仕組みを SSI (Server Side Include) と呼びます。例
えば、次のようなものが取り込めます。
• 他のファイルの内容
• ページの最終更新日時
• CGI の実行結果
練習問題
CGI と SSI を組み合わせて、アクセスカウンタを作ってみましょう。
1. まず、何人目かという数字を記憶するためのファイルを作りましょう。これは number.txt
という名前にします。最初は、まだ誰もアクセスしていないので、0 を書き込んでおきます。
¶
³
% cd /home/t00000xx/public_html
% echo 0 >number.txt
µ
´
エディタで作ってもよいのですが、echo を使う方が簡単です。>number.txt は、実行結果
を画面に表示する代わりに、number.txt というファイルに書き込むことを指定しています。
2. ファイルがちゃんとできたか、ブラウザで確認しましょう。http://web.sfc.keio.ac.jp/
~t00000xx/number.txt を指定しなさい。何回か再読み込みをして、表示がどうなるか確認
しなさい。
3. 数字を 1 増やす CGI スクリプトを作りましょう。名前は counter.cgi にします。emacs で
~/public html/counter.cgi というファイルに次の内容を書き込みます。
#!/bin/sh
echo "Content-Type: text/plain"
echo
read a <number.txt
a=‘expr $a + 1‘
echo $a >number.txt
echo $a
ここでは詳しい説明をしませんが、前にやった計算機シミュレータ3 との対応4 は次のように
なります。
3 http://ipl.sfc.keio.ac.jp/text/basic-2004-4/kuemain.htm
4 概念的な対応で、実際にこのような機械語に翻訳されるわけではありません。
51
¶
スクリプト言語
上の練習問題ではシェルスクリプトを使いましたが、実際には CGI でシェルスクリプトを使
³
うことは、次のような理由から、あまり多くありません。
• 機能が少なくて不便である。
• 実行速度が遅い。
• セキュリティホール [8.1 節] ができやすいa 。
それでは何を使うかというと、Perl や PHP という言語がよく使われます。これらの言語は、
スクリプトを手軽に書けるように工夫されているので、スクリプト言語と呼ばれます。Perl
は、CGI 以外にも広く使われている代表的なスクリプト言語です。PHP は、ウェブサーバや
データベースと連携して、ウェブアプリケーションを簡単に作れるので、急速に普及してい
ます。
大規模なサイトで複雑なプログラムが必要な場合は、スクリプト言語では力不足なため、C++
や Java という汎用言語が使われます。
a シェルだけが特にセキュリティホールができやすいわけではありませんが、Perl などにはセキュリティホールを
できにくくする機能が備わっているので、それと比較しての話です。
µ
read a <number.txt
メモリの内容をレジスタにロードする。
a=‘expr $a + 1‘
レジスタの内容に 1 を加える。
echo $a >number.txt
レジスタの内容をメモリにストアする。
echo $a
データを出力する。
52
´
4. counter.cgi を実行可能にします。
¶
³
% chmod +x counter.cgi
µ
´
5. CGI の動作をブラウザで確認しましょう。http://web.sfc.keio.ac.jp/~t00000xx/counter.cgi
を指定しなさい。何回か再読み込みをして、表示がどうなるか確認しなさい。
6. number.txt の内容がどうなっているか、ブラウザで確認しましょう。http://web.sfc.keio.ac.jp/
~t00000xx/number.txt を指定しなさい。何回か再読み込みをして、表示がどうなるか確認
しなさい。
7. アクセスを数えるウェブページを作りましょう。SFC のウェブサーバでは、SSI を使うペー
ジのファイル名は、最後を.shtml にする約束になっています。ですから、mypage.shtml と
いう名前にします。emacs で~/public html/mypage.shtml に次の内容を書き込みます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html">
<title>My Home Page</title>
</head>
<body>
<h1>My Home Page</h1>
<p>I am very pleased to meet you. You are the
<!--#exec cgi="counter.cgi" -->th guest.</p>
</body>
</html>
<!--#exec cgi="counter.cgi" --> は、SSI によって、指定された CGI の実行結果と置
き換えられます。
8. このページをブラウザで見てみましょう。http://web.sfc.keio.ac.jp/~t00000xx/mypage.shtml
を指定しなさい。何回か再読み込みをして、表示を確認しなさい。
9. 最後に、rm コマンドで実験に使ったファイルを消しておきましょう。
¶
% rm number.txt counter.cgi mypage.shtml
µ
53
³
´
11.3
CGI を使うときの注意
自分で CGI スクリプトが書けなくても、他の人が書いたスクリプトを使うことはできます。イ
ンターネットで公開されているスクリプトも数多くあります (例えば Wiki もそうです) が、そう
いったスクリプトを使う場合は以下の点に注意してください。
• 悪意のあるプログラム (ウイルスやトロイの木馬) が含まれているかもしれません。ダウン
ロードするときは信頼できるサイトからしてください。
• 悪意はなくても、セキュリティホールがあるかもしれません。アップデート情報は定期的に
チェックし、セキュリティホールが発見された場合はすみやかにアップデートしてください。
また、自分でスクリプトを書く場合は、セキュリティホールを作らないよう注意すると共に、無
限ループなどでサーバに負荷をかけないよう、事前のテストをしっかりしてください。
練習問題
1. インターネットでどのような CGI スクリプトが公開されているか、調べなさい。
2. レンタル CGI とは何か、調べなさい。
11.4
CGI ではない動的なウェブページ
CGI 以外にも、動的なウェブページを作る方法はあります。
• Java アプレット
– Java 言語で書いたプログラムを自動的にダウンロードし、ブラウザが実行します。
– アプレットの実行結果はブラウザ画面に表示されますが、その部分は他の文章とはっき
り区別されます。
– 比較的複雑でインタラクティブなプログラムに向いています
– ブラウザが Java に対応している必要があります。対応していても、バージョンの違い
などで動かないことがあります。
– 前回の計算機シミュレータ5 はアプレットです。
• Javascript
– Javascript 言語で書いたプログラムを、HTML の中に文章と混ぜて書いておくと、ブ
ラウザが実行します。
– Javascript の実行結果を表示する専用の領域は特にありません。
– 文章に、マウスの動きに応じて色が変わったりするインタラクティブな要素を付け加え
ることができます。
– ブラウザが Javascript に対応している必要があります。対応していても、機能の違いな
どで、期待した通りに動くとは限りません。
5 http://ipl.sfc.keio.ac.jp/text/basic-2004-4/kuemain.htm
54
– このページも Javascript を使っています。注釈番号のところにマウスカーソルを持って
くると、注釈の内容がポップアップして表示されます。
練習問題
CGI はサーバでプログラムを実行しますが、Java アプレットや Javascript はクライアント (ブ
ラウザ) でプログラムを実行します。どのような違いがあるか、考えてみなさい。
55
第 12 章 CGI(2)
ウェブ
ブラウザ
HTTP
ウェブ
サーバ
CGI
プログラム
クライアント
12.1
ファイル
サーバ
CGI スクリプトにデータを渡す
前回は CGI スクリプトの実行について勉強しましたが、単純に CGI スクリプトを呼び出すだけ
では、状況に合わせて出力結果を変えることはできません。例えば、通販サイトで合計金額を表示
するような場合は、品物の個数を何とかしてブラウザからウェブサーバに伝え、そのデータを使っ
て CGI スクリプトが合計金額を計算しなければなりません。
ブラウザからウェブサーバにデータを渡す仕組みをフォームと呼びます。
1. HTML ファイルの中に <form>...</form> と書いておきます。
2. ブラウザがそのページを表示すると、<form>...</form> の部分にはテキスト入力欄や
チェックボックスなどが表示されます。
3. ユーザがデータを入力し、submit と指定されたボタンをクリックすると、データがサーバ
に送られます。
4. サーバはデータを受け取ると、CGI スクリプトを起動します。この CGI スクリプトは、そ
のデータを使って何かするように、あらかじめ用意しておかなければいけません。
練習問題
1. サンプルページ1 を表示し、適当な文字を入力してボタンを押してみなさい。
2. サンプルページに戻り、ソースを表示してみなさい。
1 myform.html
56
• action="..."で、このフォームのデータを受け取る CGI スクリプトを指定します。
• method="..."は、後で説明します。
• <input> は、どのような入力をするかを指定します。
• type="text"はテキスト入力欄です。
• name="..."はデータに名前をつけます。複数のデータを入力するときは、名前をつけ
ておかないと、どれがどれか判らなくなります。
• type="submit"は送信ボタンです。
3. サンプルページをコピーして、/home/t00000xx/public html/myform.html というファイ
ルを作りなさい。(ブラウザで「ページを保存」すると簡単です)
4. チェックボックス、ラジオボタン、メニューなどの作り方を調べ、実際に myform.html に書
いてみなさい。ただし、ここで使っている CGI スクリプトは、x という名前のデータを表示
するようになっているので、必ず name="x"としてください。
12.2
データの渡し方
ブラウザからウェブサーバへのデータの渡し方には、次の二種類があります。
• URL の中にデータの名前と値を書き込む。
• リクエスト [6.2 節] の本体にデータの名前と値を書き込む。
どちらを使うかは、<form> の method="..."で決まります。
• method="get"とすると、URL にデータが入ります。
• method="post"とすると、本体にデータが入ります。
練習問題
1. 先ほどの myform.html で、ボタンを押した後のページの URL は何か調べなさい。
2. myform.html にもう一つ <input> を追加し、別の名前 (例えば y) をつけなさい。そうして
ボタンを押すと、URL はどうなるでしょうか？
<input type="text" name="y">
3. 入力欄に日本語を入力して、ボタンを押すと、URL はどうなるでしょうか？このような URL
の書き方を他でも見たことがありますか？
4. myform.html を変更し、method="post"にしなさい。ボタンを押すと、URL はどうなるで
しょうか？
57
12.3
GET と POST の違い
GET メソッドを使うときは、次のことに注意しなければなりません。
• 他の人が URL を見ると、入力したデータが判ってしまいます。そのページを表示している
間だけではなく、ブラウザの履歴に保存されたりもしますので、特にインターネットカフェ
など、不特定の人が使う環境では注意が必要です。
• あまりに長いデータを入力すると、URL が長くなり過ぎて、エラーになる場合があります。
それでは、GET を使わずに POST だけ使えばよいでしょうか？POST に比べて、GET には次
のような利点があります。
• <form> を使わなくても、URL さえ指定すれば CGI スクリプトを動かせます。例えば、検
索結果を他人に教えるとき、結果のページの URL をメールで送ったりします。
検索の例から判るように、GET メソッドは、何回送信しても原則として同じ結果になります。
それに対して、POST メソッドは 1 回送信するごとに状況が変化する可能性があります。例えば、
通信販売サイトの「購入する」というボタンは、通常は POST メソッドが使われ、2 回送信すれば
2 個購入することになります。
ブラウザによっては、POST メソッドでデータが送られた結果のページを再読み込みしたりす
ると、「もう一度データを送信するか」というダイアログが出ることがあります。通信販売サイト
でうっかり再送信すると、もう 1 個購入することになりかねませんから気をつけましょう。
練習問題
1. ブラウザの URL 入力欄に、http://ipl.sfc.keio.ac.jp/text/basic-2004-4/form-test.php?x=abc
と直接入力してみなさい。
2. 先ほどの myform.html (method="post"になっていることを確認) を使って、次の操作をし
なさい。
(a) submit ボタンをクリックして、結果のページを表示します。
(b) 別のページ (何でもよい) を表示します。
(c) ブラウザの「戻る」ボタンで、結果のページに戻ります。
どのようなダイアログが出たでしょうか？
3. 実際に <form> が使われている例を探し、ソースを表示して GET か POST のどちらが使わ
れているか調べなさい。
12.4
クッキー
会員制のウェブサイトなどで、「このサイトはクッキーを使用しています」などと書いてあるこ
とがありますが、「クッキー」とは何でしょうか？それを理解するためには、会員制のウェブサー
バの中身を知る必要があります。
• サーバには会員のデータが保存されています。
58
• 最初のページにはフォームがあり、ユーザ名とパスワードを入れると、認証用の CGI スクリ
プトが動いて、どのユーザか確認します。
• 表示用の CGI スクリプトは、保存されているユーザのデータを使います。
ここで問題は、ウェブサーバには多数のブラウザからの通信が次々に来るということです。例え
ば、太郎さんがログインした直後に、花子さんが別のページを表示しようとするかもしれません。
HTTP では、どのブラウザからの通信かを判別できないので、表示用の CGI スクリプトは、太郎
さんか花子さんかどちらのデータを使えばいいか判りません。
クッキーとは、ある通信が誰から来たかがサーバに判るようにするための仕組みです。
1. 太郎さんがログインすると、サーバ2 は、例えば”1”というクッキーを太郎さんのブラウザに
送信します。このクッキーは太郎さんのブラウザに記憶されます。
2. 花子さんがログインすると、サーバは、例えば”2”というクッキーを花子さんのブラウザに
送信します。このクッキーは花子さんのブラウザに記憶されます。
3. 太郎さんが次のページを見ようとすると、太郎さんのブラウザは自動的にさっき受け取った
クッキー”1”をサーバに送信します。
4. サーバ3 はクッキー”1”を受け取ると、それが太郎さんから来たものであることが判ります。
練習問題
クッキーは大変便利なもので広く使われていますが、中にはこれを使って個人情報 (どのサイト
を見たか、など) を収集しようとする人もいます。
1. 自分の使っているブラウザで、現在どんなクッキーが記憶されているか、クッキーについて
の設定はどうなっているかを調べなさい。
2. 大規模なサイトでは、「クッキーをどのように使用するか」などのプライバシーポリシーを
明示しているところがあります。どのようなものがあるか調べなさい。(ヒント：
「プライバ
シー」、「クッキー」などのキーワードで検索してみましょう。)
2 正確には、サーバで動いている認証用の
3 正確には、サーバで動いている表示用の
CGI スクリプト
CGI スクリプト
59
第 13 章 まとめ
13.1
Wiki の動く仕組み
ここまでの勉強で Wiki の動く仕組みが説明できるようになりました。
1. 編集ページにはフォーム [12 章] があり、そこに文章を書き込みます。
2. 編集を終了すると、書いた文章は HTTP でウェブサーバに送られます [6 章]。
3. サーバでは CGI スクリプトが起動されます [11 章]。
4. CGI スクリプトは、送られてきたデータを変換して、HTML[2 章] の形にし、ファイルに保
存します。[5 章]
5. 新しく書いたページの URL を指定すると、ファイルの内容が HTTP でブラウザへ送られ、
表示されます。
ウェブ
ブラウザ
HTTP
ウェブ
サーバ
CGI
プログラム
クライアント
13.2
来年度の履修について
13.2.1
「情報技術基礎」の再履修
ファイル
サーバ
「情報技術基礎」の単位を落とした人は、次のどちらかの方法で再履修してください。
• 春学期に新入生用クラスを履修する。この場合は、ガイダンス期間中に情報技術用クラス登
録システムで希望クラスを登録してください。
• 秋学期に再履修者専用自習クラスを履修する。
60
13.2.2
次にどの科目を履修するか
「情報技術基礎」の次の科目としては、「情報技術ワークショップ」または「プログラミング入
門」がよいでしょう。両方を並行して履修することも可能ですが、演習とレポートの負担が大きい
ので、よほどの覚悟がない限りお勧めしません。
情報技術ワークショップ 情報技術には、いろいろな原理や応用分野がありますが、その中から三
つのトピックを選び、演習を通して理解を深めます。各トピックは別の担当者が授業を行い、
4 週間ごとに交代します。担当者によってトピックが違うので、どのようなトピックを勉強
するかは、クラスによって違います。
プログラミング入門 情報技術基礎で少しだけ出てきたプログラムについて、最初の一歩からきち
んと順序だてて学びます。プログラムを書くための言語はいろいろな種類がありますが、ど
の言語を使うかはクラスによって違います。専門科目やクラスタ科目でプログラミングが必
要になる場合の基礎になる科目です。
それ以外の情報技術科目 すでにプログラミングの経験がある人は、より上級の科目が履修できま
す。詳しくは各科目の講義案内を見てください。
なお、どの科目も情報技術認定試験に合格していないと履修できません。試験の日程は、決まり
しだい情報技術認定試験のページ1 で発表されます。
13.2.3
履修希望調査とクラス分け
「情報技術ワークショップ」と「プログラミング入門」は履修者数が多いので、今学期中に履修
希望を調査し、クラス分けを行います。
• ウェブで登録ページを開設しますので、希望する科目にチェックを付けてください。
• 履修希望できるのは、どちらか 1 科目です。希望クラス登録の時点で空席があれば、両方履
修できます。
• 詳細は情報技術科目のページを見てください。
4 月のガイダンス期間までに、履修希望者のクラス分けを発表します。
• 指定されたクラスは、必ず履修申告しなければなりません。指定されたクラスを含まない履
修申告はエラーになります。
• 他の授業とぶつかった場合や、違う内容のクラスを履修したい場合は、履修希望を取り消す
か、他のクラスへの変更希望を出してください。
• 名簿作成時までに情報技術認定試験に三種目とも合格していないと、クラス名簿に名前が載
りません。ガイダンス期間中に合格した場合は、改めて履修希望を出してください。
1 http://ipl.sfc.keio.ac.jp/qualification-exam.html
61
13.3
おわりに
某Ｆ市にある某Ｋ大学を卒業したＢさんの場合：
Ｂさんは絵を描いたり、デザインしたりするのが好きです。コンピュータは得意と
いうわけではありませんが、頑張って勉強し、ウェブデザイナになることができました。
入社すると、さっそく先輩が仕事で使うソフトのマニュアルを運んできました。
「これ、とりあえず目、通しといてな。」
「うわー、たくさんありますね。」
「小さい会社やさかい、一人で何でもやってもらわんとな。」
Ｂさんはマニュアルの山と取り組み始めました。
「まず、概要を理解しなくちゃね…。用語は全然違うけど、前に使っていたソフト
と本質的には似てるわ…。原理さえ判れば、細かい操作方法は使いながら覚えればい
いし…。」
マニュアル片手にソフトを起動したＢさんのところへ先輩が通りがかりました。
「お、もう使えるようになったんか。早いな！」
それからしばらくしたある日、先輩が何やらカタログを見ています。
「先輩、何を見てるんですか？」
「凸凹コンピュータの新製品や。ＣＰＵは最高速やで。欲しいなあ。」
「でも、ＣＰＵだけ速くてもしかたないですよ。それより、そんなお金があるなら
ファイルサーバを導入しましょう。今は各自のパソコンにファイルがあって、必要に
なるたびにコピーするので能率が悪いし、うっかり古いバージョンを使っちゃうこと
もあります。ファイルは全員で共有し、バージョン管理もきちんとした方がいいです。
そうそう、それから取引先とも相談して、データ交換の形式も統一したいですね。」
「これはびっくりやな。絵を描くだけが能のその辺のデザイナと違て、技術もちゃ
んと判ってるがな。今年の新入社員は掘り出し物やな。」
誉められてＢさんはくすぐったそうです。
「ま、問題はうちの会社には新しい機械を買うお金がないっちゅうことやけどな！」
¶
CNS のパスワード更新
CNS のパスワードの有効期間は 90 日間です。有効期間が切れる前に別のパスワードへ変更し
³
ないと、ログインできなくなりますから注意してください。パスワードの変更方法は CNS ガ
イドを見てください。
µ
´
62
付 録A
A.1
文字の符号化
文字集合
世界各国ではいろいろな文字が使われています。そのため、コンピュータで文字データをを扱う
時は、あらかじめどの範囲の文字を使うかを約束しておかなければなりません。これを文字集合
(character set) と呼びます。
日本で一般的に使われている文字集合の規格には、次のようなものがあります。
ASCII アメリカの規格です。アルファベット (ラテン文字)、数字、記号類を含みます。
JIS X0201 ローマ字部分とカタカナ部分があります。ローマ字部分は ASCII とほぼ同じですが、
バックスラッシュが円記号に、チルダがオーバーラインになっています。カタカナ部分はい
わゆる「半角カナ」ですが、最近はあまり使われなくなりました。
JIS X0208 漢字，ひらがな，カタカナ，アルファベットその他を含みます。いわゆる「全角文字」
です。
ISO 10646 (JIS X0221) 世界中の文字集合を統合しようとする Unicode を基に規格化されまし
た。いろんな文字が入っています。
A.2
符号化
コンピュータの中では、文字はビット列1 で表されています。このように、文字やその他のデー
タをビット列に置き換えることを符号化 (encoding) と言います。
文字集合の規格には、各文字に番号がついていますので、それをそのままビット列にすれば符号
化できます。しかし、複数の文字集合を混ぜて使う場合は、別の文字集合の中に同じ番号の文字が
あると困るので、符号化を工夫する必要があります。日本で一般的に使われている符号化の方法に
は次のようなものがあります。
ASCII ASCII 文字集合をそのまま使います。当然、日本語は使えません。ただし、ASCII と言
いながら JIS X0201 ローマ字を使う人も結構います。
ISO-2022-JP いわゆる「JIS コード」です。文字集合として ASCII，JIS X0201 ローマ字，JIS
X0208 を使います。インターネットで日本語を表現するための標準的な方式です。他の文字
集合にも対応した ISO-2022-JP-2 というのもあります。
EUC-JP 主に UNIX で使われています。文字集合として JIS X0201，JIS X0208 を使います。
1 ビットを並べたもの。普通は各ビットを
0, 1 として 2 進数の数値で表わす。
63
Shift JIS 主に Windows, Mac で使われています。文字集合として JIS X0201，JIS X0208 を使
います。
UTF-8 文字集合として ISO 10646 を使う符号化方式で、アルファベットだけの時は ASCII と同
じ結果になるように工夫されています。
A.3
ウェブページの文字符号化
ウェブページの文字は、上に挙げたようないろいろな種類の符号化方式で書かれている可能性が
あります。それを受け取ったブラウザが、どの符号化方式なのか判らないと困るので、ウェブサー
バは送信する時に符号化方式を指定する約束になっています。例えば、UTF-8 で書いた HTML の
ページを送信する時は、
Content-Type: text/html;charset=UTF-8
という指定をします。
ところが、ウェブサーバには複数の人が書いたファイルを置くので、符号化方式が統一されてい
ないのが普通です。各ファイルの中身がどんな符号化方式かは書いた人しか判らないので、ウェブ
サーバが送信する時に困らないよう、ファイルの中に Content-Type の指定を書いておきます。例
えば、UTF-8 で HTML ファイルを作ったら、ヘッダ部に
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
と書くと、これをウェブサーバが読み取って、上のような指定をしてくれます。
64
付 録B
B.1
単位
コンピュータでよく使われる単位
bit (ビット) 情報量の単位。二つの状態のどちらかを示す情報量。
Byte (バイト) 情報量の単位。1Byte = 8bit。
bps (ビーピーエス) 通信速度の単位。1 秒間に何 bit 送れるか。
Hz (ヘルツ) 周波数の単位。1 秒間に何回振動するか。
B.2
接頭辞
基本的な単位を使ったのでは桁数が多くなってしまう場合、10 の整数乗倍を表す接頭辞を単位
の前につけます。国際単位系1 では 10 の 24 乗から 10 の-24 乗までの接頭辞が決まっています。
半導体メモリの記憶容量を表す場合などは、2 の整数乗倍の方が便利なので、10 の 3 乗の代わり
に 2 の 10 乗を使うことがあります。どちらの意味で使うかによって、表 B.1 のように表す数値が
違いますので、注意が必要です。(参考文献：2 進接頭辞2 )
接頭辞
k(キロ)
表 B.1: 10 進と 2 進の接頭辞
10 の 3 乗倍
2 の 10 乗倍
1,000
1,024
M(メガ)
1,000,000
1,048,576
G(ギガ)
1,000,000,000
1,073,741,824
T(テラ)
1,000,000,000,000
1,099,511,627,776
1 http://ja.wikipedia.org/wiki/SI%E5%8D%98%E4%BD%8D%E7%B3%BB
2 http://ja.wikipedia.org/wiki/2%E9%80%B2%E6%8E%A5%E9%A0%AD%E8%BE%9E
65
索引
CGI, 48
ホスト名, 26
CSS, 9
ポート番号, 26
マークアップ, 3
HTML, 6
文字集合, 63
文字化け, 7
IP アドレス, 26
リモートログイン, 30
P2P モデル, 27
SSI, 51
SSL, 31
Wiki, 2
WYSIWYG, 3
アクセシビリティ, 11
アクセス権, 34
圧縮, 13
ウイルス, 29
階層型ディレクトリ, 17
クライアント, 24
サーバ, 24
情報量, 13
スクリプト, 38
スタイルシート, 9
スパム, 28
ディレクトリ, 17
認証局, 31
ハイパーテキスト, 4
バザール方式, 2
パス名, 17
ビットマップ画像, 12
ファイル, 16
フォーム, 56
符号化, 63
プログラム, 38
プロトコル, 23
ベクトル画像, 14
ホームディレクトリ, 18
66