Making of "What a Wonderful World"


機材
コンテンツ製作用PC
サーバー用PC
覚え書き
Webサーバー構築ガイド
MovableTypeの設置Update!
XHTML1.0への道
Webオーサリングツールについて
User Agentについて

ここでは、ウェブサイト作成の過程で、思った事や気がついた事をメモしていく予定です。


ブロードバンド・ルーターの設定

目的はセキュリティの強化

NECのBR1500Hというルーターを導入した。 最初はWebサーバー(FreeBSD)にダイアルアップさせていたのだが、セキュリティを強化するためにWebサーバーの前にダイアルアップルーターを置くことにしたのだ。

BR1500Hは、ADSLモデムも無線LANも内蔵していない単機能タイプ。 当然ながら多機能なタイプに比べて安価だが、スループットはFTTHにも対応できるほど高い。 パケットフィルタリングやポートフォワーディング機能はもちろん、UPnPやDMZにも対応している。 ISDN時代にNECのTAを2台使っていたので、ファームウェアやユーティリティーのアップデートを続けるNECの姿勢も選択理由の一つ。

設置は簡単

スイッチングHubを置き換えて、ADSLモデムと接続するだけ。 WebサーバーのPPPは停止させる。 Webベースの設定画面で固定IPアドレスをBR1500Hに設定。 80番ポートをWebサーバーにポートフォワーディングする。 Webサーバーは固定のプライベートアドレスとし、 Web製作用のPCはDHCPを使う。

自分のWebサーバーが見えない!?

設定も終わり、とりあえずWeb製作用のPCでインターネットへの接続を確認。 ちゃんとgoogleにアクセスできる。 自分のサイトはどうかなと、「What a Wonderful World」へアクセスするが、”サーバーが見つからないか、DNSエラーです”と言われてしまった。 CGIを使った掲示板「52deg. T-Twin's World」も同じ。 Webサーバーのプライベートアドレスを指定した場合は表示できる。 どうやら自宅サーバーの公開がうまくいってないようだ。

設定が悪かったのかなと、BR1500Hのパケットフィルターやポートフォワーディングを何度もいじってみるが効果なし。 NECのサイトにある、自宅サーバーを公開する設定通りにやっているのだが。 googleで検索しても、それらしい情報にはヒットしない。 結局、週末の2日間を費やして、延べ30回以上もルーターの設定/リセットを繰り返したものの、原因は分からなかった。

ところが公開できていないはずの掲示板に、たかぴさんから書き込みが入っていた。 なぜだろうと思い、たかぴさんに連絡を取ると「Webも掲示板もちゃんと見えているよ」とのこと。 どうやら見えていなかったのは自分だけだったらしい。 週明けに会社から自分のサイトにアクセスしてみると、確かに表示される。  なんなんだ、これは(怒)。 俺の週末を返せ〜!

原因は?

その後、NECの「PCユーザーズフォーラム」に、同じ問題で投稿があるのを発見。 でも根本的な解決策は無し(外部Proxyサーバーを使うというのは一般的でない)。 原因は不明だが、他メーカー製のルーターでは問題なかったという話もあり、NEC(あるいはBR1500H)特有の事象なのかもしれない。

回避策

プライベートアドレスを指定してアクセスすれば、とりあえずページの表示確認はできるのだが、ページ内に絶対URLで貼られたリンク(アクセスカウンターがそう)や画像は表示されない。 これでは不便なので、回避する方法を考えてみた。 

ISPのDNSでのネームの解決がうまくいっていないのだから、閲覧するPCの側でWebサーバーのURLとそのプライベートアドレスを結びつけてやればいい訳だ。 つまり、

だとしたら、閲覧するPCのhostsファイルに、

192.168.0.1  www.hogehoge.ne.jp  server01

という行を追加する。 hostsファイルは、Windows2000/Xpの場合 %Systemroot%\System32\Drivers\etc の中にある。 Windows9X/Meの場合は、Windowsフォルダに上記の一行だけ書いたテキストファイルを、hostsという名前で保存する。


SSI(Server Side Include)の導入

簡単な説明

HTML文書が呼び出された際に、httpサーバーにより動的にHTML文書を構成して、User Agentに送り返す機構。

実例

  1. このページの最下部にある水平線と文書の更新時刻は、SSIを使って別のHTML文書を挿入して表示しています。
  2. Mac版 IE4.5は、XML宣言があるとソースを表示してしまうので、SSIを使ってMac版 IE4.5のみXML宣言を出力しないようにしてあります(サーバーでHTTPヘッダに文字コードを入れているので省略してもOK)。

メリット

  1. フレームでも同じことが出来るが、SSIによる方法ならフレームに対応していな
    いUser Agentでも読むことができる。
  2. フレームと違い、今見ている文書のタイトルがUser Agentに表示される。
  3. サーバー側で処理をするので、閲覧者の端末の処理能力に影響されない。

デメリット

  1. (ホームページビルダーなどの)オーサリングツール上では、完成状態の表示確認が出来ない。
  2. フレームの完全な代替にはならない。
  3. フレームの代わりとして使う場合は、スタイルシートによるレイアウトが必須となる。
  4. プロバイダー提供のWebサーバーでは、SSIが使えない場合が多い。
  5. サーバーの負荷が高くなる一因である。
  6. サーバーのセキュリティー上の弱点となりうる。

「正しいHTML」と CSS

「正しいHTML」とは?

Googleなどで検索すると、それ系のサイトが引っかかると思います。 以下に「正しいHTML(文書)」について、色々なサイトに書かれていることを、自分なりにまとめてみました。

当たり前といえばそうなのですが、実際にこれを実行できているサイトは少ないのです(当サイトも、正しくない部分は沢山あります)。

原理主義?

「正しいHTML」に目覚めた人達の中には、掲示板や自身のサイトなどで啓蒙活動を行っている方もいます。 ときにHTML原理主義と揶揄されることもあるようですが、主張の中身については概ね納得できると思いました。

ただ Strict至上主義的な考え方には、少し疑問を感じます。

フレームの功罪

当サイトのほとんどの文書は XHTML1.0-Transitional (Frameset)で書かれています。 frameset/frame要素は、HTML4.01でも「望ましくない要素」とされていて、XHTML1.1に至っては規格からも外されてしまいました(フレームを含む独自の文書型定義を作成することは可能ですが)。

でも、メニュー等の共通する部分を別の文書に分けることができるので、フレームを使った方が保守性がいいんですよね。 現在のデザインを続けているうちは、今後もフレームを使い続けることになりそうです。

表とは何か?

テーブル(table)要素も、嫌う人が多いようです。 テキストエディタ派の人に嫌われるのは、書くのが面倒だからかもしれません。 また、table要素を解さないUser Agentでは、テーブルに書かれた内容を逐次列挙するので、書き方によっては意味が通じなくなってしまうことがあるそうです。

特にレイアウト目的で table要素を使うのはご法度とはよく言われます。 当サイトでも以前は多用していました。 現在も整備記録ツーリング・オフ会レポートでは使っています。 div要素やdt/dd要素による置き換えも検討したのですが、いまだ実現していません。 あれも一種の”表”である、というのは強弁でしょうか。


Another HTML-lint

って何のこと?

リンクの中にあります。 HTML文書の文法をチェックし、採点してくれます。

見た目と点数は関係ない

他人様のサイトで、「かっこいいなぁ」と思うようなサイトでも、チェックしてみると結構点数が悪かったりします(文書型宣言(DTD)がなかったりすることもしばしば)。 逆にmeta要素の使い方など、参考になる部分があったりもします。

面倒な指摘項目

Another HTML-lint の指摘で面倒なのが、img要素などのalt属性と、table要素のsummary属性の欠如です。 確かにアクセシビリティを考えると、きちんと書くべきなのかもしれません。 でもどんなに言葉を費やしたとしても、写真の内容を伝えるなんて自分には出来そうにありません。 自分の伝えたいものが画像でなければ伝えられないとして、そういう文書を「画像を表示できないUser Agent」で閲覧できたとして、いったい何の意味がある?という気持ちもあります。