JavaScript で遊ぶ
Playing with JavaScript

目次 / Contents

• サーバアップグレード顛末記 / Ins and Outs of server upgrades
• ウェブ改装計画 / Planning for renewal of the web pages
• 意外に難しい JavaScript プログラミング / JavaScript --- difficult programming
• プログラミングに時間を忘れる楽しみ / Joy of being absorbed in programming

サーバアップグレード顛末記

ネットワークの向こうにあるそのサーバは Red Hat Linux が動作する PC であり、 契約によって高木はそのサーバを root 権限で自由にカスタマイズできることになっている （バーチャルドメイン運用など、 してはいけないこともある）。

ただ、 サーバの OS である Red Hat Linux のバージョンが、 1999 年の運用開始当時すでにして 4.2 だったものだから、 一部のフリーソフトのインストールにおいて支障が出ることもあった。 このことは契約前から心配していたし、 しかも契約後いろいろいじった結果、 変になったりした部分もあった。 手元にあるマシンなら、 ハードディスクの再フォーマット、 メディアからのOS再インストールとなるだろうが、 マシンが手元にないため手数料がかかる（3万円！）。 そのうえ、 再インストール後もバージョン番号は 4.2 だし、 ということで躊躇していた。 ところが、 昨年末から 6.2 へのアップグレードサービスなるものが開始された。 これなら 「3万円の手数料でOSアップグレード」 となるから、 個人で払う金として安いとは思わないにしても納得できる形にはなる。

昨年末いちど申し込んだものの、 忙しくてお金を払い込みに行くのを忘れてキャンセル。 その後、 しばらくアップグレードサービス自体が中断してしまっていたが、 今年2月に再開されたため、 こんどこそはということで申し込んだ。 報告されたアップグレード作業日は2月21日だそうだ。

サービス内容は、 新しいOSをインストールしたハードディスクと差し替えてくれるというもの。 環境の完全な移行、 つまりたとえばウェブのファイルなどのコピーは行ってくれないから、 サーバを 「使える」 状態にするには少し時間がかかる。 高木にとっても電子メールやウェブは生命線だ （後者はそうでもないけど、前者は特に）。 従って、 先方の作業が終了したら即座に作業をスタートさせ、 なるべく早くサービス再開できるよう、 手順を考えておいた。 従来使用していた Solaris Intel な環境に代えて、 自宅に Linux （ディストリビューションは、 なんとMLD5） をインストールし、 サーバと似た環境でのセットアップの経験を積んだり、 予行演習も行った。

新しいサーバには、 いちおう必要なものは一通りインストールされているのだが、 個人的な趣味によって追加することにしたものは、 次のソフトウェアである:

• 電子メール関連。高木の趣味により MTA としては Postfix を用いたが、 単に sendmail の置き換えとして使っているだけで、あまり意味はない。
  • OpenSSL
  • Cyrus SASL パッケージ (1.5.24)
  • PCRE ライブラリ (2.08)
  • Postfix (snapshot-20010204)
  • DRAC
  なお、 Postfix は chroot で用いるようにセットアップした。 コンパイル時には /etc/ld.so.conf に /usr/local/lib を加えて ldconfig を実行するのがポイントらしい。 chroot で用いるためには、 SASL ライブラリと sasldb ファイルを chroot jail の中にコピーしてやるのがポイント。
• OpenSSH のインストール。 こちらは ssh_config, sshd_config ほかのファイルをきちんと書けばOKみたいである。

ウェブ改装計画

そこで、 ウェブページも改装を行うことにした。

改装するとなると、 前からやりたいと思っていたことがいくつか出てくる。 わが「RTざんまい」も、 公開から1年以上を経てだんだんコンテンツが増えてきた。 決して悪くないものも含まれていると自負してはいるが、 現在の状態ではそこまでたどり着くのは容易なことではないと思った。 トップページからたどるより、 外部のサーチエンジンからたどった方がいい状態は、 あまり好ましいとはいえない。

サイト内検索用のプログラムも用意されているので、 わが 「RTざんまい」 にも検索機能が近々追加される見込みだが、 検索機能があれば何でもよい、 というわけでもなかろう。 情報を、 見やすく整理された状態で表示できるのがいいと思う。

というわけで、 ここはやはりフレームを使いたい、 と思った。 フレームというのは、 ブラウザの画面を細分化して、 そのひとつひとつに別なものを表示させることが出来る機能のことである。 よく使われるのは、 画面のはじ （左か上） にメニューを表示するフレームを用意し、 そのメニューをクリックすると中身を表示するフレーム （とりあえずコンテンツフレームと呼ぶことにする） が切り替わる、 というものだ。

しかし、 やるとなったら実現したいことはいくつもある。

まず、 読者にとって便利なのは悪くないが、 そのために更新が面倒になるのは避けたかった。 特に面倒なのがサイト内の相互リンクである。 ファイル名がすべて数字などで決まっていて、 「次」 「前」 などのボタンが自動的に生成できるとかであればいいのだが、 たいがいそういうことにはならない。 従来は、 HTML ファイルの上端と下端に相互リンクをいくつも書くスタイルをとってきたが、 これはいちいち手で入力するに近いやりかたでやるため、 異様に手間がかかる。

このような状況はうれしくないので、 できればメニューファイルは用意せず、 コンテンツフレームに表示されるコンテンツに応じて自動的にメニューが表示、 ないしは切り替わるようなものにしたかった。 情報のメンテナンスのためにいじるべきファイルの数を最小にしたいわけだ。

また別なねらいもある。 たとえば、 「RTざんまい」 には 「橋梁ざんまい」 と 「鉄道ざんまい」 というふたつのコレクションがあるが、 あるファイルに書いてあることがこの両者に関係する、 などということはねんじゅうある。 しかし、 読み手に対しては 「あなたは 『鉄道ざんまい』 の文脈でこの記事に到達した」 というようなことを知らせる手段を持ちたかった。 このために、 従来の 「ざんまい」 の流儀のように、 関係しうる文脈を指し示す情報をコンテンツファイルにいちいち記述する、 あるいはまた同一のファイルを複数用意して、 文脈ごとに違うファイルを見せる、 といった考え方もある。 しかし、 いずれにしてもメンテナンスが面倒なので、 コンテンツファイルは単一のまま、 当該コンテンツにリンクを張る上位のファイルが、 メニューに何かの文字列を表示することで、 その辺を表現する手段があればスマートだと思った。

他にも、 メニューの英語・日本語切り替え機能は持たせたい。 現在の 「RTざんまい」 のコンテンツファイルは、 基本的に英語・日本語混在の形で記事を書くように心がけているが、 メニューの領域は狭いため、 英語の時は英語だけ、 日本語の時は日本語だけを表示させたい。

こうした機能を実現するためには、 HTML ファイルに記述して使う JavaScript という言語が便利そうだ。 ということで、 JavaScript のコードをたくさん書いて出来あがったのが、 このページデザインである。

ページの上には「タブ」フレームがあって、 ここからメインコンテンツのトップページに直接飛ぶことが出来る。 タブは GIF イメージでデザインし、 マウスの動きやクリック等にあわせて色や書体が変わったりするようにした。 また、タブの直下には現在表示中のファイルのタイトルを示せるようにした。 たとえば、 この巻頭言 No. 24 は、 トップページ （タブフレームの「RTざ」タブをクリック） から到達することが出来る （注:「ざんまい24号」が最新である間のみ。 24号が最新号でなくなった場合、 バックナンバーページからたどれる） のはもちろん、 タブフレームの「巻頭」タブをクリックし、 「巻頭言」 → 「2001年」 とリンクをたどって到達することもできる。 しかし、 前者と後者とでは、 タブ直下のタイトルの文字列が異なる表示となる。 読者はこの文字列によって、 自分がどういうルートでここに到達したかを理解できるようにした。

ページのサイドにメニューフレームを配置した。 ここにあるリンクは、 実は一部を除いてすべてコンテンツファイルがデータを持っていて、 それを HTML 読込み時にコンテンツフレームからメニューフレームに受け渡している。 データをメニューフレームが受け取ってメニューを表示し、 さらにタブフレームにタイトルを投げるような形になっている （正確には少し違う）。 英語メニューの表示は、 クッキーを設定することで行うことが出来る。

基本的に、 まずコンテンツフレームの読み込みが終わってから、 次にメニューフレームの更新、 そして最後にタブフレームの更新という手順を踏むので、 切り替えが少々遅いが、 これはやむを得ないだろう。

というわけで、 この成果であるソースコード一式を 「RTざんまい」 サイトからダウンロードして中を覗くことが出来る。 ただし、 JIS漢字コードが入っているので、 漢字の表示に対応したウェブブラウザやエディタ等で中身を見るようにしてほしい。 日本語Windowsでも、 OS付属の 「メモ帳」 などでは文字化け等で表示がうまくいかない。

意外に難しい JavaScript プログラミング

ただし、 そのプログラミングは、 非常に難しいという印象を受ける。

まず、 デバッグツールがほとんどない。 Netscape 4.7x は、 Location ウィンドウに javascript: とか書くとコンソールが出てきて、 エラーメッセージを表示してくれる。 しかし、 これに類する機能を他のブラウザ （IE5, Netscape 6, Mozilla） では発見できなかった （この種のものがあったら教えてください）。

しかも、 ブラウザによって動作が異なるケースが多い。 たとえば、 あるブラウザで、 ある条件において、 onLoad イベントが捕まえられない現象が起きる （これを避けるため、 <body>タグにおいて onLoad イベント発生時の実行関数を記述する代わりに、 ファイルのお尻の方に同じ関数を実行する命令を書く方法をとらざるを得なかった）。

いちばんややこしいのは、 ブラウザのキャッシュ機能だ。 いちいちブラウザがサーバにファイルを取りにゆかなくてもすむように、 一度取得したファイルをキャッシュ （隠し場所） に保存しておく機能だが、 これのためにファイルを変更しても古い情報が残っていたりするため、 これを何らかの手段で消してやらなければならない。 特に、 フレームなど使っていると、 多くのファイルを読み込んでいるため、 キャッシュの消去をいちいち手でやらないとまともなデバッグができないようだ。

オブジェクト指向言語としてもなかなかややこしい部分があった。 ブラウザが JavaScript の埋め込まれた HTML ファイルを読み込むと、 その埋め込まれた JavaScript がいろいろなオブジェクトを生成する。 しかし、 オブジェクトがいつからいつまで「有効」なのか、 理解するのに少々時間がかかった。 ある HTML ファイル内の JavaScript で生成されたオブジェクトは、 ブラウザが別な HTML ファイルを読み込むと、 そこですべて破棄されてしまうらしいのだ。 フレームを使用する場合、 各フレーム内部で生成されたオブジェクトについては同じだが、 フレームセットを記述するファイルは別にあるので、 ここに JavaScript をつけてオブジェクトを保管しておけば、 フレーム間でデータのやりとりができる。 このあたり、 HTML がからみ、 JavaScript ですべてが閉じていないことによるわかりにくさといえるかも知れない。

プログラミングに時間を忘れる楽しみ

ブラウザというのは、 こうしたことでけっこういろいろ遊べるものである。 ウェブページを記述している HTML も HyperText Markup Language の略で、 一種のプログラミング言語である。 今回はやらなかったが Java だって動かせるわけである。 そういえば、 日本政府が最近 e-Japan とか何とかいっているが、 ITの基本は当面やはりプログラミングなのではないだろうか。 最近はパソコンはプログラミングする道具ではなくなってしまったようだが、 ブラウザはインターネット接続でよく使うソフトであるだけに、 プログラミングの敷居を再び引き下げてくれるのには役立ちそうである。 人に公開するかどうかは別として、 皆さんもブラウザで何かのプログラミングに挑戦してみてはいかがだろう。

でも、 高木のページ、 苦労した割にはあまり見栄えがしない。 動くページとか、 インタラクティブとかにはあまり目を向けなかったからだと思う。 もう少しそちら方面を考えた方が、 読者が増えただろうか？