私の作文作法
(11)

ダイナミックなホームページの作成

魅力的なホームページとは
 インターネットやイントラネット上に個人ホームページを開くことによって、今や誰でも自由に情報発信ができる時代となった。しかしホームページを開いたはよいが、内容(コンテンツ)が一向に更新されないページは実に多い。何を情報発信したらよいか迷っているのであろう。一方、更新されてはいるがその内容はごみ情報ばかりで読む価値のないページは更に多い。

 どのようなページが優れているのか評価することは、個人の主観が入るので非常に難しい問題である。しかしページの“見てくれ”ではなく“内容”の方が重視されるべきだという主張に異論を差し挟む人は少ないであろう。

 最近私が気になっているのは、アニメーション画像やJavaアプレットなどを用いて派手に飾り立てているページが多いことである。飾り立てること自体はそれはそれで良しとしよう。問題は、そのようなページだけが高い技術を駆使した優れたページであるとみなす世の中の風潮の方である。

 確かに、何の飾りもないテキスト情報だけの羅列では余程内容が魅力的でない限り誰もそのページを再訪しようとは思わないであろう。したがってある程度は、アクセントを付ける為の装飾は必要であろうと思うし、そのための手段の一つとしてダイナミックな画面構成が求められるのは至極当然のことと言えるであろう。

 しかし私は自分の場合に限って言えば、ダイナミックなページにするためにJavaアプレットを使おうとは(当分の間?)決して思わない。そういうページを開こうとすると“Javaを起動中です”などという表示が出て長々と待たされることが多いからである。ダイナミックな画面を構成するのにJavaアプレットなど使わなくても、HTML言語の範囲内で十分に実現可能だと信ずるからである。そこで本稿では、HTMLの新しい機能を用いて魅力的なページを作る方法について紹介することにしたい。

HTML 4.0
 HTML言語に従来からある各種の機能を駆使すれば、ダイナミックで魅力的なページを構成することは可能であるが、どうしても沢山のファイルをダウンロードして画面の一部を何度も描き直さなければならなくなり、結局は“Javaを起動中です”の場合の使い勝手とたいして変わらないことになりかねない。ところが最近知ったのだが、HTML言語の第4.0版では、かなり魅力的な機能が導入されていて、今まで私がHTMLの記述で不満に感じていたことの多くが解決されようとしている。ここではその一部の仕様を例とともに紹介する。
 ただ残念なことは、これらの機能はまだ一部のブラウザでしか利用できない点である。たとえば Netscape 4.5(NS)ではまだ使えないが、Internet Explorer 4.0(IE)では一部の機能が実現されている。ここで紹介する機能が実体験できないブラウザ(NSとIEの古い版)の利用者のために、以下では「NSでは‥‥」として別ファイルで参照できるようにした。

インラインフレームの機能
 従来のフレーム機能に加えてインラインフレームの機能が追加された。フレーム機能というのは、画面をボーダー(border)と呼ばれる枠で区切って複数の表示領域に分ける機能である。それぞれの領域にスクロールバーを付けることもできる。インラインフレームでは、これらの枠にイメージを挿入するときのような感覚で各種の情報を挿入表示できる点が特長である。以下のようにインラインフレームは iframe というタグを用いて記述する。

<iframe name="フレーム名" src="xxxxx.htm" frameborder="0" .... >
(ここには、インラインフレーム機能をサポートしていないブラウザ
の場合に、警告の意味で表示したいメッセージなどを書くことができる)
</iframe><p>

<a href="xxxxx.htm" target="フレーム名"> ***タイトル等*** </a>

 href=で指定したファイル xxxxx.htm が、target=で指定されたインラインフレーム上に表示される。iframe タグをサポートしていないブラウザでは、<iframe>と</iframe>の間に示した文が替わりに表示されるので警告として利用することができる。

******************** コーディング例 ********************
<html>
<head>
<title>Inline Frames</title>
</head>

<body BACKGROUND="images/recbg.jpg">

<div>
<h1 align="center"></h1>
<p>クリックして、右側の窓から表示先を選択してください。</p>

<iframe name="branch" src="fnavi.htm" width="350" height="190" align="right" frameborder="0">(あなたのブラウザは残念ながら in-line frame の機能をサポートしていません。<br>
 表示された様子を知りたければ<a href="images/pattern1.jpg">ここ</a>をクリックしてください)</iframe>

<p>
・<a href="fnavi.htm" target="branch">私め</a> <br>
・<a href="fnavi1.htm" target="branch">ソフトウェアの法則</a> <br>
・<a href="fnavi2.htm" target="branch">素朴な疑問</a> <br>
・<a href="fnavi3.htm" target="branch">私の作文作法</a> <br>
・<a href="fnavi4.htm" target="branch">素歩人徒然</a> <br>
・<a href="fnavi5.htm" target="branch">その他 もろもろ</a> </p>
・<a href="fnavi6.htm" target="branch">メールアドレス</a> </p>

<p>
・<a href="http://www.hi-ho.ne.jp/skinoshita/cshunhp.count" target="count">最新カウンター値 </a>
<iframe name="count" src="http://www.hi-ho.ne.jp/skinoshita/cshunhp.count" width="60" height="50" align="center" frameborder="10">(あなたのブラウザは残念ながら in-line frame の機能をサポートしていません)</iframe>
<br><br><br>

</p>
</div>
</body>
</html>
********************************************************

 この表示結果は以下のようになる。
ただしNSでは正しく表示されないのでここをクリックして確認してください。

例:インラインフレーム

********************************************************

Inline Frames

私めのホームページ

クリックして、右側の窓から表示先を選択してください。

私め
ソフトウェアの法則
素朴な疑問
私の作文作法
素歩人徒然
その他 もろもろ

メールアドレス

最新カウンター値


********************************************************

テーブル機能
 テーブルについても以下のような便利な機能が追加されている。
 通常テーブルを作るには、大きなものになると全体の様子が見えないので変更や修正には苦労するものであるが、この新機能ではテーブルの最初の部分で各カラムの特性を colgroupタグや colタグを用いてまとめて定義することができる。ヘッダは theadタグを用いて、フッタは tfootタグを用いて、本体部分の定義は tbodyタグを用いて行うようになっている。

 テーブルにはその他 widthcellhaligncellvalignspan などの属性を指定できる。

******************** コーディング例 ********************
<table border=2 width=280>
<colgroup>
<col span="2" width="100">
<col width="80">
</colgroup>
<thead>
<tr> <th>ヘッダー</th> <th>aaaaa</th> <th>bbbbb</th> </tr>
</thead>
<tfoot>
<tr> <th>フッター</th> <th>AAAAA</th> <th>BBBBB</th> </tr>
</thead>
<tbody>
<tr> <th>‥‥</th> <td>‥‥</td> <td>‥‥</td> </tr>
<tr> <th>‥‥</th> <td>‥‥</td> <td>‥‥</td> </tr>
<tr> <th>‥‥</th> <td>‥‥</td> <td>‥‥</td> </tr>
</tbody>
</table>
********************************************************

 この表示結果は以下のようになる。
ただしNSでは正しく表示されないのでここをクリックして確認してください。

ヘッダー aaaaa bbbbb
フッター AAAAA BBBBB
‥‥ ‥‥ ‥‥
‥‥ ‥‥ ‥‥
‥‥ ‥‥ ‥‥

********************************************************


 もう一つ表示例を示そう。
NSでは正しく表示されないのでここをクリックして確認してください。

 テーブルの例(net素歩人の錨欄のタイトル一覧)
ヘッダー 錨(タイトル)
フッター 作者(私め Knuhs)
創刊号 りんご
第2号
第3号 ぶどう
第4号 恐竜
第5号 二兎
第6号 原稿
第7号
第8号 スパゲッティ
第9号 床屋
第10号 日曜劇場「兎か熊か」
第11号 ジグソーパズル
第12号 自衛消防隊
第13号 クローン牛

********************************************************

フォーム機能
 フォーム機能は大幅に拡張されている。以下に代表的なものを示す。
 ウィンドウズの基本的な操作で、入力のためのテキストボックスにフォーカスを移動する手段としてタブキーや特定のアクセスキーが使われる。これをHTML記述で実現することができる。

 タブキーを用いてフォーカスを前後に移動するには、次の例のように tabindexを指定して移動する順番を定義する。

******************** コーディング例 ********************
<form action="cgi-bin/data.pl" method="post">
名  前: <input tabindex="1" type="text" name="userName">
Eメール: <input tabindex="2" type="text" name="userEmail">
電  話: <input tabindex="3" type="text" name="userPhone">
<input tabindex="4" type="submit">
<input tabindex="5" type="reset">
</form>
********************************************************

 この表示結果は以下のようになる。
ただしNSでは正しく表示されないのでここをクリックして確認してください。

名  前:
Eメール:
電  話:


 アクセスキーを用いる場合は、次の例のように accesskey="N" として[Alt]キーと組み合わせて[N]のキーをショートカットキーとして用いること示す。入力フィールドには labelタグで名前を付けることができる。この名前 for="name" が inputタグで指定する id="name" の名前と一致するように指定すればよい。

******************** コーディング例 ********************
<form action="cgi-bin/data.pl" method="post">
<label for="name" accesskey="N">名前(N): </label>
<input id="name" type="text">
<label for="email" accesskey="E">Eメール(E): </label>
<input id="email" type="text">
<label for="phone" accesskey="P">電話(P): </label>
<input id="phone" type="text">
<P><input accesskey="S" type="submit">
<input accesskey="R" type="reset"></P>
</form>
********************************************************

 この表示結果は以下のようになる。
ただしNSでは正しく表示されないのでここをクリックして確認してください。

 フォームで用いるプッシュボタンに対しては、任意の表示(文字)や画像を貼り付けることができる。以下の例を参照されたい。

******************** コーディング例 ********************
<button tabindex="4" accesskey="S" name="submit" type="submit">
送信開始!<img src="images/button.gif" alt="Submit it!">
</button>
<button tabindex="5" accesskey="R" name="reset" type="reset">
やり直し! <img src="images/button.gif" alt="Try again!">
</button>
********************************************************

 この表示結果は以下のようになる。
ただしNSでは正しく表示されないのでここをクリックして確認してください。



 こういった新しい機能は、多くの主要なブラウザ上で利用可能とならない限り無闇に使うべきではなかろう。早く一般的な機能となってほしいものである。
 なお、HTML言語の4.0版について更に詳しく知りたい場合は http://www.w3.org/TR/REC-html40/ を参照するとよい。私は、実体験できたものしか紹介しなかったが、まだ他にも新しい機能が豊富に用意されていることが理解できるであろう。■