第 5, 6 回 (2002.05.21, 28) -- web 作成 1,2

web 発信

WWW(World Wide Web)を閲覧者として利用するだけでなく，自らも WWW 上で情報を発信する方法を学び，実際に発信してみることで WWW をより深く理解するとともに，学習,研究へ応用する能力を身につける.

web の仕組み

■ World Wide Web の仕組み ■
	web の仕組みの概念を図に表すと左のようになる. ネットワーク上に無数の Web Server があり，さらにその Server 上に Web Page が置かれているという状態で web の情報は置かれている. web page の多くは (X)HTML という言語で書かれた HyperText であり，情報の参照先を別の HyperText である web page として「リンク」している. web の閲覧者は，手元の Web Browser を通じて，HTTP で Web Server と情報をやり取りする. リンクされた別の web page へは，その URI を見て接続先を変えるということになる.

web 発信の手続きの概要

web で情報を発信するには，ユーザとしては一般的に次のような手順を経れば良い.

サーバ自体の用意 … web server とよばれるマシンを用意する.
阪大教育用計算機システムでは既に用意されているので，ユーザとしては特に何もしなくてよい.
web page 用ファイルの作成 … (X)HTML で web の内容を記述したファイルを作成するのが現時点では主流である.
(X)HTML 等については後述する.
サーバ上にファイルを置く … これはサーバの構成等によって方法が異なる. 通常は遠隔からファイルを転送するか，システムに直接ログインしてファイルを操作するかのどちらかになるだろう.
また，ファイルのパーミッション(特に読み出し許可属性)についてもきちんと設定する必要がある.
阪大教育用計算機システムの場合は，個人ウェブページの公開方法にも書いてあるが，結局は
1. ホームディレクトリに public_html というディレクトリを作る.
2. 作ったディレクトリ public_html の下に好きなだけ公開したいファイルを置けば良い. デフォルト HTML ファイルは index.html というファイル名にしておくのがよい.
3. ホームディレクトリの属性に +x を与えておく.
  kterm を起動して，
  
  cd ~ chmod +x .
  
  とすれば良い.
4. public_html 以下のファイルとディレクトリの属性に +rX を与えておく.
  kterm を起動して，
  
  cd ~ chmod -R +rX public_html
  
  とすれば良い(大文字小文字が違うと動作が違うので注意).
5. 公開するファイルやディレクトリに変更があるたびに，上の最後の手続き(のみ)を行なえばよい.
という手続きをすればよい.

(注意) 阪大教育用計算機システムでは，作成した web page は阪大教育用計算機システムからしか見えない.
web browser でアクセスして閲覧できることを確認する … 阪大教育用計算機システムでは，上の手続きをしておけば

http://webserver/~ログイン名/

という URI でアクセスできるので，その URI を使って閲覧してみる.

web 発信の注意点

web 発信も結局は「対人間」の部分が本質であるため，メールの扱いの際の注意点と本質的には良く似ている. そういった点も含め, 気をつけるべき点について列挙しておく.

人を中傷するような内容は発信しない. 中傷と建設的かつ合理的な理由がある批判は違うものであることを意識せよ. また，きちんとした批判ですら敵対行動だとして感情的に受け取るのが大半の人間である，という事実も忘れてはならない.
# 非合理的な人間を相手に合理的な話をするほど非合理的な話はない(^-^).
法に触れるような内容は書かない(^-^). 例えばねずみ講やマルチ商法の類いに参加しないこと. 参加するとたぶん退学.
また，web 発信の手軽さからつい著作権や通信法を無視した内容を発信してしまう者がいるが，これも違法行為であることを重々自覚すること.
たとえ自分の情報と言えど，情報の開示の「いきすぎ」には注意する. ストーカーを自ら招き寄せるような危険は犯さない.
例えば，自宅の住所や電話番号を web で公開したらどうなるだろう. 自分の顔写真を公開したらどうなるだろうか.

(X)HTML とは

web page を記述する主流言語である HTML および XHTML について簡単な解説を行なう.
これを機に Markup 言語について親しんでおくのが良い. なぜなら，大学のこれからの学生生活では TeX を始めとする Markup 言語の使用が必要不可欠であるからである.

HTML (HyperText Markup Language)

HyperText を記述するための言語の一つ. Markup 言語の一つで，技術的には SGML (Standard Generalized Markup Language) というメタ言語によって定義されている. この定義は固定である.
WWW が誕生したときより存在し，これまで web page を記述する主流言語として活躍してきた. 年とともに改訂されて発展して来たが, HTML 4.0(1997), 4.01(1999) が最後のバージョンとなった.
web page を記述する言語は下の XHTML に移行することが web 技術標準化団体の w3c によって言明されているため，これからは使われなくなる運命にあるといえる.
よって，どうせこれから覚えるならば XHTML から入るのがよいだろう. 今ならばほとんど見た目は変わらないし.

XHTML (eXtensible HyperText Markup Language)

HyperText を記述するための言語の一つ. Markup 言語の一つで，技術的には XML (eXtensible Markup Language) というメタ言語によって定義されている. この定義はユーザが便利なように自分である程度書き換えることができる(自己拡張可能性).
これからの web page 記述言語の主流となると見なされている.
幸いなことに現在主流であるバージョン XHTML 1.0 は HTML 4.01 とほとんど同じなので，HTML を覚えている者も今移行するのが最も楽である.
# モジュール化等を採り入れた XHTML 1.1 がすぐそこに控えているが…

Markup Language

情報を文書化したものには各々「構造」がある. 例えば「これは名前だ」「これは金額だ」「これは章だ」「ここは大文字で」等々.
こうした構造をテキストで明示的に範囲づけすること(マークアップ)によって文書を記述するマークアップの方法(言語)をマークアップ言語とよぶ.
例えば，住所録は


      <person>
        <name>ほげほげ 太郎</name>
        <address>あちこち</address>
        <telephone>06-6850-xxxx</telephone>
        </person>

      <person>
        <name>なになに 花子</name>
        <address>おうち</address>
        <telephone>06-6852-xxxx</telephone>
        </person>

などと記述すれば，厳密にどの部分がどういうデータなのか，どのデータとどのデータがどういう関係なのかがわかる.
この時，マークアップするための記号をタグなどと呼ぶが(上の <person> など), どういうタグを使うか，どのタグがどういう意味なのかを規定したものがマークアップ言語だ，と思えばよい.
これから分かるように，マークアップ言語は「情報を合理的に記述するための決まり」であって，これによって作成されたファイルは単なるテキストファイルである. このファイルを何か処理するにはまた別のプログラムが必要となる. (X)HTML で書かれたファイルは Netscape や Mozilla 等の Web Browser で人間に「見やすい形に整形して」閲覧することができる.

■ HTML, XHTML, SGML, XML の関係 ■
	上で述べた HTML 等の関係図は左のようになる. XML は SGML のサブセットであり，強力だが複雑すぎる SGML に比べて web 用の言語を定義するのに適していると言われる.

(X)HTML の概要

論理構造と表現の分離 -- 本体と CSS

HTML 4.01 および XHTML 1.0 では文章を書くときに論理構造と表現設定を分離して記述することが推奨されている. より詳しく言うと，
「web page 本体には論理構造だけを記述しろ」
「文字の大きさとか色とか，諸々の表現については CSS というルールを従って別のファイルで設定しろ」
ということが推奨されているのである.
これはなぜかというと，

論理構造だけの文書なら，機械的な様々な処理が可能.
「見た目」は見るための機械によって変える必要があるが，論理構造は不変でよい.
# 例えば，PC で見るのと携帯電話で見るのとを同じ見掛けにしようとするのは無理があるだろう.
論理構造と表現設定を別にしないと，文書を修正するのが大変.
論理構造と表現が一緒になっていると，大きな文書で統一した表現が難しい.
書いている本人が論理と表現の区別がつかないとろくな文書にならない(^-^).

などの理由があるからである.
# XHTML 1.1 以上を見るとこれらの推奨の度合いはより強くなり，だんだん「強制」に近くなっている.

さて，より詳しく解説しよう.
例えば，本の目次をみると

  
    第一章 はじめに
      第 1節 hogehoge とは
      第 2節 hogehoge の歴史
      第 3節 hogehoge の現状
      第 4節 hogehoge を利用するには

    第二章 hogehoge の利用
      第 1節 オプション
      第 2節 初期設定
      第 3節 通常の使用方法
      第 4節 より高度な利用
      第 5節 プラグインについて

などとなっている. これは本の論理的構造を非常に粗くみたもの，と見ることができる.
このような文章の論理構造「だけ」を本文に書け，表現は別ファイルにしろ，というのが上の主張である. 具体的には，例えば上の本の例を (X)HTML で書くと


    <h1>はじめに</h1>
    <p>
      この本は…
      </p>
    <h2>hogehoge とは</h2>
    <p>
      hogehoge とは○○を行なうために
      開発されたシステムであり…
      </p>
    <h2>hogehoge の歴史</h2>
    <p>
      そもそも hogehoge は 1980年に
      誰々が××をするために開発したものであり…
      </p>

等となるだろう.
後述するが，ここで念の為に解説しておくと <h1> は一番大きな論理構造たる「見出し」であり(章に相当する)， <h2> は次に大きな論理構造たる「見出し」であり(節に相当する)， <p> は「段落」を意味する (X)HTML のタグである.

そして， <h1> (見出し)はこれぐらい大きな文字で書こうとか，ブロック体にしようとか，色はこういう色にしよう，等というのは CSS(Cascading Style Sheet)というルール(文法)を用いて別ファイルに次のように書くのである (皆が見ているこの web page 自体の設定例).


    h1 {      ←タグ<h1>の「表現」の設定
      color: #eeeeee;
      border-color: #eeeeee;
      background-color: #666666;
      font-size: medium;   
      font-weight: bold;
      text-align: center;
      width: 95%; 
      padding: 0.5em;
      border-width: 0em 0em 0em 0em; 
      border-style: none none none none;
      }

より詳細についてはこれから学習していく (CSS についてはかなり後になるだろう).

XHTML 1.0 の文法

最初からあまり多くを学んでも大変なので，ある程度簡単なものだけに限定して学習しよう.
まず，XHTML で書く文書は次のような大きな構造を持たねばならない.

■ XHTML 文書の構造 ■
文書規格の宣言	その文書がどのような(Markup)言語のどのバージョンで書かれているのかを宣言する. Web Browser 等のソフトは，ここを見て「ああ，この言語で書かれているのだな」と判断して，それに応じて動作や表示を変える… はずである(^-^). とりあえず細かいことは置いておくと， `<?xml version="1.0" encoding="EUC-JP"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">` の3行を文書の最初に書いておけ，ということである(漢字コードが euc の場合). ちなみに，違う漢字コードの場合は上の該当部分を次のように書く. euc … EUC-JP jis … ISO-2022-JP shift-jis … Shift_JIS (注) 漢字コードについては漢字コードについてをよく読むこと. # 実は3行目は文書型の宣言ではなくて，HTML 開始，という意味だがまあいいか.
ヘッダ	その文書固有の情報が書かれる. 具体的には，文書の形式(HTTP用)，タイトルや著者，CSS ファイルの読込み，追加 CSS などである. とりあえずは `<head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> <title>タイトル</title> </head>` の 4行を上の「文書規格の宣言」に続けて書いておけばよいだろう. もちろん，タイトルと漢字コードは適切に書き換えること.
本文	肝心の文書の中身を書く部分である. `<body>` と `</body>` とで囲まれた部分が「本文」として扱われるので，この二つのタグを書いておいて，この間に本文を書いていくことになる.
(終了宣言)	HTML を使っているのはここまで，とわかるようにする. `</html>` と書く.

上のルールに従えば，XHTML 文書そのものは作れる. ただ，まだ中身を書く方法が分からないので(^-^)，それについても記述しておこう.

分類エレメント概要使い方

テキストブロック構造 p 文章の一段落を書くのに使う. <p> 中身 </p> とする.

ブロックフレーズ h1, h2, h3, h4, h5, h6 見出し行. 数字が小さいほど抽象度が高い. <h1> 中身 </h1> 等とする.

インライン構造 br 強制改行. 段落内で用いる. <br /> と書く.
最後の / を忘れないように.

インラインフレーズ em 強調. <em> 中身 </em> と書く.

strong より強調. <strong> 中身 </strong> と書く.

code (コンピュータ)コード.
たいてい見た目は何も変化しないが(^-^). <code> 中身 </code> と書く.

HyperText a HyperText としての参照先を URI を用いて書く. <a href="参照先のURI">参照先の説明</a> と書く.
web browser 等では，上の「参照先の説明」部分がクリックできるようになっていて，それをクリックすると参照先の HyperText に飛ぶようになっていることが多い.

画像 img 画像を表示する. <img src="画像のURI" alt="画像が見えない場合の記述テキスト" /> と書く.
グラフィカルでない環境では画像は見えない. そうした環境でも支障がないように，alt= できちんとしたテキストを記述しないといけない.

リスト

リスト宣言

定義リスト. 見出しとその説明が交互に並ぶリストを作る.

<dl>
   <dt>見出し1</dt>
     <dd>見出し1 の説明</dd>
   <dt>見出し2</dt>
     <dd>見出し2 の説明</dd>
   </dl>
等と書く(項目数は好きなだけ増やせる). これを Web Browser で実際に見ると，

見出し1: 見出し1の説明
見出し2: 見出し2の説明

と見える.

番号付きリスト

<ol>
   <li>要素1</li>
   <li>要素2</li>
   <li>要素3</li>
   </ol>
等と書く(項目数は好きなだけ増やせる). これを Web Browser で実際に見ると，

要素1
要素2
要素3

と見える. 番号は Web Browser が自動的に付けてくれる.

単なるリスト

<ul>
   <li>要素1</li>
   <li>要素2</li>
   <li>要素3</li>
   </ul>
等と書く(項目数は好きなだけ増やせる). これを Web Browser で実際に見ると，

要素1
要素2
要素3

と見える.

要素 dt 定義リストの見出し要素. dl の項を見よ.

dd 定義リストの説明要素. dl の項を見よ.

li 番号つきリストと単なるリストの要素. ol, ul の項を見よ.

表

表宣言

table

表を作る.

<table>
   <caption>表のタイトル</caption>
   <tr>
     <th> 見出し要素1 </th>
     <td> 要素1 </td>
     <td> 要素2 </td>
     <td> 要素3 </td>
     </tr>
   <tr>
     <th> 見出し要素2 </th>
     <td> 要素4 </td>
     <td> 要素5 </td>
     <td> 要素6 </td>
     </tr>
   </table>
等と書く(項目数は好きなだけ増やせる). これを Web Browser で実際に見ると，

表のタイトル
見出し要素1	要素1	要素2	要素3
見出し要素2	要素4	要素5	要素6

と見える.

名称 caption 表のタイトルをつける. table の項を見よ.

行 tr 表の一行(横一行ということ)を表す. table の項を見よ.

要素 th 表中の要素で，見出しに相当するもの. tr の中で使う. table の項を見よ.

td 表中の普通の要素. tr の中で使う. table の項を見よ.

コメント  コメントを書く. コメントは Web Browser では「表示されない」.  と書く.
-- の部分は見えにくいが，ハイフン(-)が二つつながっている. XML ではコメントの定義はこの形だけである.

実体参照 & & を表示する. & と書く.
& は XHTML 中で特別な役割を持つため， & をそのまま書いても正しく表示できないことがある. よって，& を表示したい場合は & と書く必要がある.

' ' を表示する. ' と書く.
理由は & と同じ.

" " を表示する. " と書く.
理由は & と同じ.

< < を表示する. < と書く.
理由は & と同じ.

> > を表示する. > と書く.
理由は & と同じ.

XHTML ファイルを作る手順

既にあるファイルをコピーする等して，新しくファイルを作るこの時，ファイルの拡張子は .html にしておくのが現状ではよいと思われる.
サンプルファイルをまるごと写してから修正するのも良いだろう.
# XHTML ファイルという意味では，拡張子は .xhtml か .xml にするべきであるが，現状では Netscape 4.7 や他のちょっと古めの Web Browser がそれらの拡張子の web page にきちんと対応できない.
# そこで，苦肉の策とも言えるが，上記のようにするのがよい. こうすると XHTML ではなくて単なる HTML ファイルとして解釈されてしまうのだが仕方ない.
エディタで内容を書く or 修正する.
この時，タイトルなどのヘッダ部分を修正し忘れることが多いので注意する. ヘッダ部分のタイトルは，bookmark や web 検索で用いられる大事な情報であるので，扱いには注意しておく.
複雑な web page を作るには web page ファイルを作成する専用のツールを使うのが便利であるが，最初からそうするのは良くない. 文書を論理構造に分解して記述する，という能力を身につけるためにも，最初のうちだけでもテキストエディタで直接 XHTML ファイルを編集するべきである.
文法ミスがないか「形式的に」チェック.
例えば，拡張子を .xhtml か .xml に変えれば Mozilla 等では文法を「形式的に」チェックしてから表示する. よって，一時的に拡張子を上記のように変更して Mozilla で見れば，形式的な文法チェックならできる，というわけだ.
(できれば)文法ミスがないか厳密にチェック.
W3C HTML Validation Service を用いると，作成したファイルが文法的に正しいか厳密にチェックできる.
もし厳密に正しいことが分かれば，W3C の用意した証明書(画像)をその web page に張ることが許される. この web page は実際に厳密に正しいので張っておく.

文法的に正しいという御墨付き →

(X)HTML を書く時の注意点

タグは全て小文字で書く

<p> を <P> などと書いてはならない，ということである. Web Browser が気を利かせてほぼ狙い通りに表示してくれる可能性は高いが，これにより表示が崩れる可能性もあるので注意する.

何もないところに文章を書かないこと

どのような文書も文字も数字も，表示されるものは全て何かのタグで囲まれていないといけない. よく分からない，という人は仕方ないので，せめて <p> と </p> で文書を囲んで書くようにしよう.

タグは必ず終了させる

例えば，
<li>要素1
でリストの要素を書いた後， </li> を書くのを忘れて
<li>要素2
と続けてしまった場合などがそれにあたる.
HTML 4 ではそうした省略が認められていたが， XHTML 1.0 以上ではそうした省略は禁止されているので注意する. Web Browser を厳密に動作させると，そうした web page は文法エラーで見えないことになるので，注意が必要だ.
あと， <br /> と <img /> の最後の / を忘れやすいので注意が必要だ.

表現設定をしないこと

上の表では意識的に排除したが，文字の色や大きさ，配置場所等を (X)HTML で指定することができる. こうした機能は XHTML 1.1 以上では意識的に排除され，使えなくなる. 後で泣かないように，今からこうしたことをしないよう注意する.
# そうした機能についてはまた後に学習する.

論理的構造を崩さない

見た目に凝りたいあまり，HTML の論理的構造を無視した使い方をしたくなることがあるが，そういうことのないように注意する.

「ここ」というリンクは駄目

a タグを使うときに，つい，

ホゲホゲを見るならば<a href="hogehoge">ここ</a> を参照のこと.

などと書いてしまう人がいるが，これは良くない. 理由はいくつかある.
まず，その文書が HyperText だというのを忘れて普通に文書として読んでみると，「ここ」というのが如何に不自然な文章かがわかる. つまり，「ここ」を使った web page は既に文書としておかしいのである.
また，例えば，Web Browser がリンク先だけを抽出して別表示するようなものだったとしよう.
# 視覚障害者が Web Browsing するときの状況は「読み上げに時間がかかるため」これに近いものがある.
すると，このような表示は例えば次のように見えるのである.

      ホゲホゲを見るならば (1) を参照のこと.
      それが嫌なら，例えば図書館に幾とか云々…
      …
      …
      あれを見るならば (2) を参照のこと.
      …
      …
      …
      …
      これを見るならば (3) を参照のこと.
      …
      …
    ----------------------------------------
    (1)ここ    (2)ここ    (3)ここ

で，クリックできるのは最下行だけ，としよう. すると，どれがどの「ここ」だ? 分かることは分かるが，分かりにくいことこの上ない.

これは web の世界では「here症候群」と呼ばれる知られた話なので, 他人に笑われないように気をつけるべし.

漢字コードを間違えないように気をつける

漢字コードを間違えて宣言すれば，閲覧できないということになる. EUC か JIS を使う，と自分で決めてしまうのが良い. shift-JIS はあまりお勧めできないが，まあそれでも良い.

漢字コードの変換等については漢字コードについてをよく読むこと.

漢字コードについて

日本語のテキストをファイルとして保存する形式には実は数種類の方法がある.

■ 漢字コードの種類 ■
名称(俗称)	説明	変換方法 (kterm 上で)
JIS	7 bit コード. 7 bit コード(欧米アルファベット等)しか想定していないプログラムでも問題なく扱えるため， e-mail 等のネットワーク上通信では JIS をデフォルトもしくは必須とすることが多い. (注) ちなみに， e-mail は JIS で送られるもの，と決められている. unix を日本語化するときに JIS をデフォルトとすることも多い.	file1 を JIS コードに変換して file2 とするには， `nkf -j < file1 > file2` とする. file1 をそのまま変換したい，という場合は少しややこしいが， dummy という名前のファイルが存在しない前提で `mv file1 dummy nkf -j < dummy > file1 rm dummy` とすればよい.
EUC	8 bit コード. unix を日本語化するときに EUC をデフォルトとすることも多い. その歴史の長さから unix の多くのプログラムが EUC 対応になっていることもあり，よく用いられる.	file1 を EUC コードに変換して file2 とするには， `nkf -e < file1 > file2` とする. file1 をそのまま変換したい，という場合等は JIS コードの該当項を参照すること.
shift-JIS	8 bit コード. 主に PC 系でよく用いられる. 逆に unix ではあまり用いられないことから， (サーバに unix を用いることが多いこともあり) web 発信にはあまり用いられない傾向がある.	file1 を shift-JIS コードに変換して file2 とするには， `nkf -s < file1 > file2` とする. file1 をそのまま変換したい，という場合等は JIS コードの該当項を参照すること.
Unicode	世界統一文字コードを目指した規格. ただし中国文字，台湾文字，日本文字(漢字)等を無理やり一つにまとめようとするなど，問題点も多いとされる.

上にあるように，unix 上で JIS, EUC, shift-JIS 形式のテキストファイルは御互いに容易に変換することができる.
もしどれか一つの漢字コードを主に使うというのであれば，歴史的経緯等を配慮して EUC か JIS を用いるのがよいだろう.

実習

ログイン, Netscape(or Mozilla) の起動, このページの閲覧
ホームディレクトリに public_html というディレクトリを作る.
public_html ディレクトリに index.html という名前でファイルを作成.
kterm 上で

cd ~/public_html
touch index.html

とするのが良いかな.
サンプルファイルの中身を index.html に写す. copy & paste の練習でもある.
index.html の中身を適当に書き換えて，自己紹介などの内容にする. <h1>, <h2>,.. や <ul> あたりのタグは使えるようになっておく. この段階でもメニューの「File」→「Open File」を使えば Netscape や Mozilla から見えるはずだ.
web 発信の手続きの概要を参照して, 作成した index.html が(教育用計算機システム内部から)見えるようにする.

… この辺りまででおそらく第 5 回の授業が終わると予想.
両隣りなどの 2名以上に自分の web page を見てもらう.
両隣りなどの 2名以上の web page を HyperText としてリンクするように， index.html を修正する.
a タグを使えるようにする，ということである.

具体的には，例えば友人A のログイン名が smXXXX, 友人B のログイン名が smYYYY, だったとすると， index.html の中に

<a href="http://webserver/~smXXXX/"> 友人 A </a> <br /> <a href="http://webserver/~smYYYY/"> 友人 B </a> <br />

などと書込めばよい(smXXXX の後にスラッシュ「/」を忘れないように).
前回の授業の web を参照して，阪大 OPAC と Google を HyperText としてリンクするように， index.html を修正する.
index.html 以外の xhtml ファイルを作成し，やはり index.html から HyperText としてリンクするように， index.html を修正する.

具体的には，例えば hogehoge.html というファイルを作ったとしたら， index.html の中に

<a href="hogehoge.html"> ほげほげとは </a>

などと書込めばよい.
(中級者向け) table タグを使って，表を作ってみる.
(上級者向け) 三日坊主＋＋の部屋などを参照して， W3C HTML Validation Service のテストをパスするように文法的に厳密な web page を作るようにせよ. もしパスするようになったら，証明書(画像)を張り付けておけ.