電子計算機及び実習 第 3 回 (10/6)
3 ウェブページの作成
3.1 今日のテーマ
*ウェブページ作成のマナー
* HTML文書の基礎
*パーミッションについて
*ウェブページの公開
*リンクの設定
* (参考) GIMPによる画像の作成
* (参考)画像の表示
**今日の課題
1. 自分のウェブページを作成し，学内に公開すること．
マナーが守られていることと，最低限の内容を有することが必要．
以下のようなウェブページ（ただし，画像は除く）ができていればよい：
http://jwww.ed.noda.tus.ac.jp/s-suzuki/sample.html 2. 以下の内容のメールを，s-suzuki宛に送ること．
課題3.3，3.4の結果．後者に関しては，書き込みができないことを確かめる方法のみ記せ．
自分のウェブページのURL．
メールには，署名を付け，Subjectは「学籍番号+Oct06」とせよ．
3.2 ウェブページ作成のマナー
ウェブページ作成のマナーに付いては，「手引き」や「インターネット事例集」を参照してもらいたいが，最低 限守るべきことを以下に述べる．これらを守らなければ，思わぬ不利益を受けたり，場合によっては法律により 罰せられる．法に触れなくとも，社会的信用を失うなど，一生を左右する事態になりかねない20．
• 自分の個人情報(住所や電話番号など)はむやみに載せるべきではない．どのような悪意を持った者が見る か分からないからである．
• 他人の著作権，肖像権を侵害しないこと．具体的には，本の内容の大部分を丸写ししたり，音楽ファイル や他人の写真を公開したり，といったことを許可を得ることなしにしてはいけない．
• 個人のページにリンクを張る場合，基本的には許可を得ること．許可情報が掲載されている場合はそれに 従うこと．
これ以降は，マナーというより，人として守るべきことである．
• 他人を誹謗，中傷してはならない．
• デマ，虚偽の内容を公開してはならない．
• 犯罪を助長する内容や，公序良俗に反する内容を公開してはならない．
20今回は学内にのみ公開するので，そこまで神経質になる必要はない．
3.3 HTML 文書の基礎
3.3.1 HTML とは
ウェブページの原稿は，HTML(Hyper Text Markup Languageの略)という言語のテキスト形式ファイル(ソー スファイル)を，Emacsなどのエディターを用いて記述することで作成できる．このテキスト形式のソースファイ ルのことをHTMLファイル，HTML文書などと呼び，通常.html という拡張子を付ける21．HTML文書を閲覧 するためのソフトウェアは，ウェブブラウザと呼ばれており，Firefox, Netscape, Internet Explorerなどはその一 つである．
文書(テキストファイル)に，「ここは表題」，「ここは箇条書き」といった，文書の構造を表す目印(マーク)を 付けることを「マークアップする」といい，マークアップを文書に埋め込むための人工言語をマークアップ言語 というのだが，HTMLや後に学ぶTEXはマークアップ言語の一つである．
3.3.2 ソースファイルの表示
HTML文書はウェブ上にいくらでも存在するので，それらを見本にするとよい．適当なページを開き，ソース ファイルを表示してみよう．
課題 3.1 授業のページのソースファイルを表示せよ．
ブラウザを起動し，授業のページを開いたあと，ブラウザの一番上の欄のメニューから，「表示」を選び，さらに
「ページソース」を選べばよい．
3.3.3 初めてのHTML
HTMLでは命令を< >で挟む．この< >で挟まれた部分をタグという．例えば，HTMLファイルは<html>
で始まり，</html>で終わる，という約束がある22．これによってブラウザはファイルを HTMLファイルと認 識する．この <html>のようなタグを開始タグといい，</html>のようなタグを終了タグという．開始タグと終 了タグに挟まれた部分がマークアップされた部分である．以下に入力における注意点を述べる．
1. 全ての記号は半角でなければならない．日本語を入力するとき以外は全角を用いてはならない．
2. 一部の例外を除いて開始タグと終了タグは対になっていなければならない．
3. 終了タグであることを表す記号はスラッシュ(/)であって，バックスラッシュ(\)ではないので気を付け ること23．
課題 3.2 Emacsで以下の内容のhello.html というファイルを作れ．さらに，ブラウザを用いてこのファイル を閲覧せよ．
¶ ³
<html>
<head>
<title>練習</title>
</head>
<body>
Hello，world．
</body>
</html>
µ ´
21.htmという拡張子を用いる場合もあるが，ここでは種々の事情から.htmlと名前を付けてもらいたい．
22タグの中身は小文字でも大文字でも構わない．タグであることを強調するために大文字を好む人も多い．
23バックスラッシュは，後に学ぶTEXの文書に頻出するので，あえてここで注意した．
このファイルをブラウザで閲覧するには，ブラウザのメニューバーのFile (ファイル)→Open Page (ファイル を開く)でファイルを指定すればよい．また，HTML文書の編集中には，何度も同じ文書を読み込み直して，編 集結果を確認する必要が生じるが，既にブラウザで開いているファイルの変更を確認するには，「再読み込み」を するだけでよい．
HTML文書を作成する際には，ブラウザで表示(プレビュー)させて結果を注意深く観察し，思い通りになって いるかチェックしなければならない．
では，使われているタグについて簡単に説明しよう．<head> </head>はその部分がヘッダであることを示す．
ヘッダとは，文書の体裁を記す部分である．これに対し，<body> </body>は本文である．また，ヘッダにおけ
る <title> </title>は文字通りタイトルであり，この部分はブラウザのタイトルバーに表示される．
3.4 パーミッション
ウェブページの公開の前に，その準備としてUNIXの基礎知識であるファイルのパーミッションについて知っ ておく必要がある．
まず，ls -lとしてみよう．以下のようなファイルのリストが現れるであろう．
drwx--- 1 s-suzuki teach 512 Apr 13 2008 Mail/
-rwxrwxrwx 1 s-suzuki teach 50 Sep 22 10:19 hoge
-rw-r--- 1 s-suzuki teach 2950 Sep 29 21:32 Sep29.txt
左から，モード，リンク数，所有者，グループ名，大きさ，更新時刻，名前の順で並んでいる．モードの最初 の文字はファイルの型を表し，dはディレクトリ，-はファイルを表す．残りの9文字がアクセスの可否を決める ための情報，すなわちパーミッションである．
3.4.1 パーミッションとは
パーミッションとは，ファイルの保護モードのことである．本来１台のマシンを複数ユーザが使用することを 前提としたUNIXでは，ファイルやディレクトリの所有者が誰か，ファイルの読み書きの権利をどうするか，と いった情報が大切になるのである．
パーミッションは9文字から成っているが，3文字ずつ3つのブロックに分かれ，左から「所有者」「グループ」
「その他」のユーザに関する情報である．1文字ごとの意味は，
• r 読み出し可
• w 書き込み可
• x 実行可 (ディレクトリの場合は検索可)
である．対応する場所が -である場合は，そのアクセスが許可されていないことを表す．例えば，上の例で rwxrwxrwx
は，全てのユーザが読み書き実行できることを表し24， rw-r---
は，「所有者」は読み書きができ，「グループ」のユーザは読むことだけができ，「その他」のユーザは何もできない ことを表す．
24これは大変危険な設定である．
3.4.2 パーミッションの数値化
パーミッションは数字で表すことができる．まず，許可を1，不許可を0 として2進数とみれる．例えば，
rw-r---
は 110100000となる．これを8進数に直すと 640となる．
課題 3.3 以下はよく使われるモードである．それぞれのモードを8進数で表せ．
1. rw-r--r-- 2. rwxr-xr-x 3. rwx--x--x 4. rwx---
ここまでの例を見ればわかると思うが，r= 4,w= 2, x= 1 と考えればよい．例えばrw-r--r--の場合，
「所有者」 r+w= 4 + 2 = 6
「グループ」 r= 4
「その他」 r= 4 より，644となる．
3.4.3 モードの変更
ファイルのモードを変更するには，
¶ ³
% chmod hモードi hファイル名i
µ ´
とする．例えば，ファイルquota.txtのモードをr---(自分が読むことしか許さない)にしたければ，
% chmod 400 quota.txt とすればよい．
課題 3.4 上の操作により，quota.txtが書き込みできなくなっていることを確かめよ．どのようにすれば，書き 込みできなくなっていることが確認できるのか，自分で考え，その方法を記せ．次に，quota.txtの保護モード
を rw-r--r--に変更せよ．
3.5 ウェブページの公開
HTMLファイルを作っただけでは，自分しか見ることができない．公開するには，通常サーバー25にアップロー ドするという作業が必要であるが，理科大の環境では jwww というフォルダにファイルを置くだけで学内にのみ 公開することができる．詳しくは，以下のページを参照しなさい．
http://www.ed.noda.tus.ac.jp/doc/web_open/
このページは次のようにたどっても見ることができる．
「コンピュータ利用案内」→ マニュアル → ホームページの公開方法
課題 3.5 ホームディレクトリのすぐ下にディレクトリjwwwを作成し，hello.htmlをindex.html という名前 でこのディレクトリにコピーしなさい．次にカレントディレクトリをjwwwにし，以下HTMLに関することはこ のディレクトリで作業しなさい．
25WEBサーバー，httpdサーバーなどという．サーバーに使われるプログラムとしてはapacheが有名．
具体的には，以下のように作業しなさい．
¶ ³
% cd
% mkdir jwww
% chmod 755 jwww
% cp hello.html jwww/index.html
% cd jwww
µ ´
cd, mkdir, cp等のコマンドがまだよく分かっていない者は，「手引き」UNIX編 の4.3節を熟読しなさい．
最初にアクセスされるページには通常index.htmlと名前を付ける26．このファイル名を間違えると，他人が アクセス不能になり，結果として今日の成果が評価不能になるので気を付けること．
次に，ディレクトリやファイルの保護モード(パーミッション)を適切に設定しなければならない．公開するか らには，他人に読んでもらえなければ意味が無いし，といって他人に勝手に内容を書き換えられては困る．よっ て，jwww 内のファイルの保護モードはrw-r--r--(644)にするのが適当である27．
課題 3.6 コマンドls -l で，jwww 内のファイルの保護モードがrw-r--r--になっていることを確かめよ．そ
うなっていない場合はrw-r--r--に変更せよ．
保護モードが644になっていない場合はコマンドchmod で保護モードを変更しなければならない．具体的には 次のようにすればよい．
% chmod -R go=rX ~/jwww
これで，jwww内のファイルは(学内限定だが)ウェブで公開されていることになる．URLは http://jwww.ed.noda.tus.ac.jp/ログイン名/ファイル名
である．最後のファイル名を省略すると，index.htmlが読み込まれる．
課題 3.7 index.html のタイトルを「xxxのホームページ」と書き換えよ．ただし，xxxには自分の名前を入れ
ること．それから，URLを入力してそのページをブラウザで閲覧してみよ．また，他の人のページも見てみよ．
3.6 基本的なタグ
改行は<br>，改行した上にラインを引くには<hr>とする．これらは例外的に終了タグを持たない．また，以
下のタグで文字の見栄えを変えることができる．
<b> </b> 太字(ボールド) <small> </small> 文字を小さく
<i> </i> 斜体(イタリック) <big> </big> 文字を大きく
<font> タグにより，フォントのサイズを直接指定することもできる．指定できるサイズは1から7の7段階で
ある．
例: <font size=7>Hello，world．</font>
<font>タグでは色を変えることもできる．sizeとcolorは併用も可．
例: <font size=7 color=red>Hello，world．</font>
似た例として，<body>タグに手を加えれば背景色を設定できる．
例: <body bgcolor=blue>
26この意味でindex.htmlをホームページという．今日ではホームページという言葉をウェブページの意味で用いることも多いが，本来は ホームページとはウェブページの一部にすぎない．
27ディレクトリの保護モードはrwxr-xr-x(755)にするのが一般的である．
しかし，これでは目がちかちかするだろうから，試してみたら元に戻そう．一般に原色は目が疲れるが，もっと 優しい色も使える．詳しくはウェブなどで調べるとよい．
<p>タグで一行立てのテキストを出力できる．
例: <p>xxx のホームページ</p>
同じ様な働きのタグとして<h1>があり，文字の大きさが異なる．文字の大きさは6段階あり，<h6>まで使える．
出力されないコメントを入力するには，次のようにする．
例: <!--これは授業で作成したファイルです-->
以上で最低限の文書は作れるであろう．他にもタグは多く存在するので，詳しくは文献をあたると良い．興味を 持ったなら，申請すれば学外へも公開できる．
3.7 リンク
クリックするだけで他のページに移動できる設定をリンクという．リンクには，自分のページ内を移動する相 対リンクと他の人のページに移動する絶対リンクがある．まずは，絶対リンクの例として，理科大のページにリ ンクを設定してみよう．
課題 3.8 index.html に次の行を書き加えよ．
<a href="http://www.tus.ac.jp/">東京理科大学のページ</a>
<a href="http://jwww.ed.noda.tus.ac.jp/s-suzuki">電子計算機及び実習の授業のページ</a>
次に，プレビューをして，確かに理科大のページ，授業のページにに移動できることを確かめよ．
相対リンクを設定するには，まずHTMLファイルをもう一つ用意しなければならない．
課題 3.9 次の内容のファイル profile.htmlを作成せよ．「ここに自己紹介を書く」とあるところには，自分の 自己紹介を書きなさい．読んで楽しいものになることを期待する．
注意．ここで求めている自己紹介は，個人情報の公開ではない．個人情報をどこまで公開するか，自分でよく考 えて適切に判断しなさい．
¶ ³
<html>
<head>
<title>プロフィール</title>
</head>
<body>
ここに自己紹介を書く．
</body>
</html>
µ ´
次に，index.htmlに次の行を書き加えよ．
<a href="profile.html">プロフィール</a>
プレビューをして，確かにprofile.htmlに移動できることを確かめよ．
3.8 (参考) GIMP による画像の作成
HTMLでは，テキストのみならず，画像，音声などを扱うことができる．画像ファイルには，GIFファイル，
JPEGファイル，PNGファイルなどがある．
ここでは，GIMPという画像編集ソフトを用いて，自分のウェブページのタイトル用の画像ファイルを作成し てみよう．GIMPというソフトは非常に高機能なソフトで，画像編集に関して様々なことが行える．ここでは，ソ フトの起動方法，終了方法，画像の作成の仕方，ファイルの保存の仕方といった，最も基本的なことのみ説明す る．そのほかの様々な機能については，ヘルプやウェブページを参照して欲しい．
注意．GIMPは，サーバーにかなりの負担をかけることが予想される．多くの利用者が同時に使うと，あまり快 適に動作しないかもしれない．
準備として，画像を作るディレクトリを準備しよう．kterm上で以下のように入力しなさい．
¶ ³
% cd ~/jwww
% midir image
% chmod 755 image
% cd image
µ ´
さらに(デイレクトリは~/jwww/imageのまま)次のようにタイプしなさい．これでGIMPが起動する．
¶ ³
% gimp &
µ ´
初めて利用する時には，初期設定のために色々と聞かれるが，それらに適切に答えよう28．すると，いくつかの ウィンドーと共に，図1左のようなウィンドーが現れる．このパネルのFileというところを左クリックし，New を選んで左クリックすると，図1中のようなウィンドーが現れる．ここで新しい画像のサイズなどを設定するの だが，ここでは，このままOKをクリックしよう．すると図1右のようなウィンドーが現れる．ここに文字や絵 を書いて，画像を作成する．
図1: GIMP(左：GIMPのパネル，中：新規画像の作成，右：新規画像)
ここでは，簡単な文字を書いてみよう．GIMPのパネル(図1左)で T とあるボタンを押し，新規画像の ウィンドー(図1右)上で左クリックすると，テキストツールのウィンドー(図2左)が立ち上がる．ここでは，文 字サイズやフォントを選び，入力する文字列を記入する．Fontのところから適当なフォントを選び，Sizeも適当 なものを選ぶ．さらにPreviewのところに，入力したい文字列を記入して，OKを押す．すると，図2中のよう になるはずである．これをファイルとして保存するには，このウィンドー上でコントロール＋Sを押すか，右ク
28全てにContinueと答えるのでいいはず．
リックしてFileを選びさらにSaveを選ぶ．すると，図2右のようなウィンドーが立ち上がるので，ファイル名 を入力（ここでは，title.jpgとする）して，OKを押す．これで，title.jpgという画像ファイルが作成され るはずである．
なお，GIMPを終了するには，GIMPのパネルでFileを選びQuitを選べばよい．
図 2: GIMP(左：テキストツール，中：テキストの挿入，右：画像の保存)
次に，作成した画像を表示させてみよう．それにはdisplayというコマンドが使える．これはImageMagickと いう画像を扱うためのツール群のうちのひとつである．
¶ ³
% display title.jpg
µ ´
表示を終了するには，kterm上でC-cとするか，表示されている画像上で右クリックして，Quitを選べばよい．
3.9 ( 参考 ) 画像の表示
それでは，GIMPで作成した画像（JPEGファイル）を，ウェブページに乗せてみよう．
課題 3.10 index.htmlに次を書き加えてプレビューしてみよ．
<img src="image/title.jpg">
3.10 本日の課題
1. 自分のウェブページを作成し，学内に公開すること．
マナーが守られていることと，最低限の内容(誰のウェブページであるのかわかること，理科大のページと 授業のページに絶対リンクが張られていること，自分の自己紹介に相対リンクが張られていること)を有す ることが必要である．おおよそ，以下のようなウェブページ（ただし，画像は除く）ができていればよい：
http://jwww.ed.noda.tus.ac.jp/s-suzuki/sample.html
課題をこなしていれば必要な内容は出来上がっているはずである．さらに，余裕があれば，適当な画像を作 成し，それをウェブページ上に載せなさい．きちんと採点されるか不安な者がいるかもしれないが，
http://jwww.ed.noda.tus.ac.jp/ログイン名
で見ることができれば大丈夫だろう．他の人に見えるかどうか確かめて貰えれば，なお確実である．
2. 以下の内容のメールを，s-suzuki宛に送ること．
課題3.3，3.4の結果．後者に関しては，書き込みができないことを確かめる方法のみ記せ．
自分のウェブページのURL．
メールには，署名を付け，Subjectは「学籍番号+Oct06」とせよ．
3.11 次回のテーマ
TEXの基礎．
