カテゴリ：Web/blog

この記事は、公開当初は普通のhtmlファイルのページでしたが、後にblogに移動しました。そのため、表記がおかしい部分があります。

• 今回のリニューアル目的
• 実際の作業
• デザインについて
• 各種ブラウザでの描画比較について（2003/04/25追記）
• <div>や<span>について（2003/11/05追記）
• Google AdSense（2004/08/19追記）

2003年4月23日、当サイト（Old&New）はリニューアルオープンしました。

ここに、その記録を残しておくことにします。

今回のリニューアル目的

リニューアルしようと思ったからには目的が存在します。

1. いいかげんなHTML、複雑なHTMLが嫌になった。
2. 更新作業をもっと楽にしたい。
3. 繁雑になってきたナビゲーションの整理。

項目ごとに、より詳しい話と、その対策を書いてみます。

[UP]

いいかげんなHTML、複雑なHTMLが嫌になった。

サイトを立ち上げ3年が経った2003年3月現在、総ページ数800以上、容量は画像を含めて200MB、文書ファイルだけでも10MBを越えるまでに大きくなりました。

（2004年12月現在、総ページ数1018、総容量387MB）

今まで、ページ更新用のツールはレイアウトのひな型のみIBMの「ホームページビルダーV6」を使い、本文は秀丸エディタを使っていました。

レイアウトと書きましたが、これは一般的には「やってはいけない」と言われる<table>タグの複雑なネスト（多重の入れ子状態）を使った無理やり綺麗に見せようという手法でした。正直
「別に見た目が良ければどんな方法でも構わないんじゃないかなぁ？」
と思っていましたが、ある日、出先からノートPCでアクセスした際に、いくら待ってもサイトマップが表示されずにイライラしたのです。

多くのブラウザは、<table>タグで囲まれたすべての内容を読み込まないと中身を表示しません。そして、ネスト（入れ子）の数が多くなればなるほど遅くなり、環境によってはハングアップしてしまうこともあるそうです。

リニューアル前のサイトマップは、まさに<table>タグの多重ネストにより、環境によっては数分待っても表示されない状況でした。自宅の環境では気付きませんでした。

改めて自分のサイトのHTMLソースを眺めてみると、ツールが吐き出したままの状態で放置している箇所が多く、ツールのバグによる不必要な要素も山のように散在し、とても汚いものでした。

一念発起しました。

1. <table>は、多重ネストの要素を排除し、本来の「表」用途のみにする。結果、ページの表示も早くなる（ハズ）！
2. 今まで<table>要素を使ってレイアウトしていた部分をすべてスタイルシートに追い出し、文書構造とデザインを明確に分離する！
3. どうせなら「HTML 4.01 Strict」に則ったHTMLにしてみようじゃないか！
4. 3年の間にバラバラになった文体を統一し、読みやすい文章を目指してリライトしてみよう！

当初、作業自体は機械的に変換して楽に終わると考えていましたが、他の要因（後述するSSIやCSS2など）が絡んで難航し、作業開始から2ヶ月もかかってしまいました。勉強を含めて試行錯誤している時間が長かったことと、修正しなければならないページ数が多かったことが原因です。今、新規に作れば、かなり早く作れるようになったのではないかと思います。

<table>の多重ネストを整理したことによって、だいぶページが軽くなりました。今までレイアウト目的のみで使用していた<table>もすべて排除しました。今このページをご覧になり、上部に分室移動タブ、左に目次、右に本文という具合に装飾付きでレイアウト表示されている場合は、ご利用のブラウザがCSS2（Cascading Style Sheets, level 2）に対応しているということです。例えばCSS2に未対応なNetscape Communicator 4.**では装飾が一切なくなり、味気ない画面になっているハズです。

文書本体（ページを通して伝えたいこと）とCSS2による装飾を明確に分離することにより、HTMLはシンプルになり、携帯電話を含むPDAでもブラウズ可能になりました。

当初の目標はこれでクリア。

<div>や<span>について（2003/11/05追記）

しかし、それに伴い構造上無意味な<div>や<span>が増えました。レイアウトに関する記述を何でもかんでも<div>に頼ってしまったためです。

前の<table>レイアウトの時と同様、「これでも別に構わないかな？」と思っていましたが、とあるページで「div厨」という言葉を目にしました。解説を読んでみると「おぉ、まさに自分のことだ」と思うところもありましたが、正直良く分かっていませんし、今のところ良い解決策も思いつきません。

<div>や<table>要素のネストを使わずに、このサイトと同じデザインを実現する方法があれば、是非こっそり教えて下さい。

[UP]

更新作業をもっと楽にしたい。

リニューアル前にも一応テンプレートは用意していました。新規ページを作るときは、それをコピーするところから始めていました。

しかし、文字の強調や色変更をするために<font>（フォント）や<b>（ボールド）といった物理的なマークアップを使いまくったり、<table>レイアウトのかたまりによって、恐ろしく複雑なHTMLソースになっていました。もはやエディタだけで新規ファイルを作ることは不可能に近い状態になっていました。

1. 前節にも通ずる内容ですが、スタイルシートを積極的に使い、文書には極力装飾目的のタグを付けない！
2. SSIを使おう！
3. ページ作成ソフトは使わず、エディタだけでサクサク作業が進められる環境を作ろう！

最初の項目は、例えば枠で囲んだボックスの中にタイトルを表示する場合、今までは<table>を使って枠を囲み、塗りつぶす色を指定し、タイトル文字を太字にして…という具合に、その都度HTMLに装飾用のタグを打ち込んでいました。これをすべてスタイルシートに追いやることで、例えばこのページの見出しは

<h3>更新作業をもっと楽にしたい。</h3>

だけで済んでいます。

（実際にはページ内リンクのためのアンカーも入れている）

SSI（Server Side Include）は、その名の通りWebサーバ側で環境変数や他の文書、コマンドの実行結果などを挿入してくれる機能です。

このページのソースを表示すると分かりますように、今回の新しい構造では一つのHTML文書をいくつかのコンテナ（入れ物）ブロックに分割し、それぞれを別ファイルに分断しています。これをSSIにより一つにまとめ上げられたものがクライアントであるブラウザに送られています。

要するに、各ページ固有の情報は「■ページ本体（右側）のコンテナ■」部分のみで、他は「共通部分」なのです。

[UP]

繁雑になってきたナビゲーションの整理。

1. 3年の間に、つけ足しつけ足しで繁雑になってきたので何とかしたい！
2. フレームをなくす！
3. リンク集計廃止！
4. ディレクトリ階層の整理。dechi→OldNewへ！

ナビゲーションとは、ここではページ間移動、誘導などの意味で使っています。例えばページ数の多いドライブコーナーではNext →だけですと何かと不便です。後半のページに見たい写真があることが分かっている場合でも、ずーっとNext →を選択し続けなければならないからです。

リニューアル版では、分室を問わず3ページ以上のコンテンツについてダイレクトに指定ページにジャンプできるナビゲーションを追加しました。→01 02 03

フレームについてはアンケートでも二つに分かれました。しかし、「HTML 4.01 Strict」を使うと決めた瞬間に「フレーム無し」に決定です。なぜならStrictではフレームが認められていないからです。同様の理由で他サイトにジャンプする際、別ウィンドウを開くことも廃止されました。Strictではアンカー（a）の「target」属性が使えないのです。

ディレクトリ階層については、この3年間ずっと気になっていた部分です。今まで、コンピュータ分室は

http://www.sofarts.com/computer/

車は

http://www.sofarts.com/car/

という具合にルートが起点でした。トップページが

http://www.sofarts.com/dechi/

であったため、本来ならば

http://www.sofarts.com/dechi/computer/

にするべきでしたが、アドレスが定着してしまったので（他のサイトからもダイレクトにリンクされていますし）なかなか階層変更する気持ちにはなれませんでした。リニューアルをきっかけにOld&Newトップを作り

http://www.sofarts.com/oldnew/

階層以下にごっそり移動することに決めました。

Apacheのリダイレクト機能を使えば、そんなに影響は出ないだろうと考えました。実際、.htaccessに次のようなリダイレクト設定を書いて対処しています。

Redirect permanent /dechi/ http://www.sofarts.com/oldnew/
Redirect permanent /car/ http://www.sofarts.com/oldnew/car/
Redirect permanent /chanpon/ http://www.sofarts.com/oldnew/chanpon/
Redirect permanent /computer/ http://www.sofarts.com/oldnew/computer/
Redirect permanent /link/ http://www.sofarts.com/oldnew/link/
Redirect permanent /renewal/ http://www.sofarts.com/oldnew/renewal/
Redirect permanent /software/ http://www.sofarts.com/oldnew/software/

Apacheのリダイレクト設定に関する詳細は、「ミケネコ研究所」さんが分かりやすくてお薦めです。

[UP]

実際の作業

偉そうに書いておりますが、失敗や不具合に悩み、色々学ぶところも多かった今回の作業です。ここでは、注意したことや、作業の流れをざっと記しておこうと思います。

1. 注意したところ
2. 困ったところ
3. 流れ

[UP]

注意したところ

大幅なデザイン変更をしても、これまでのサイトイメージが大きく変わらないように注意しました。分室ごとのカラーはそのままで、本文領域のみグレーで統一し、少し落ち着いた雰囲気にしようと思いました（過去のデザイン）。

LynxやPDA（携帯電話含む）からもストレス無くアクセスできるようにしたいと思いました。事前のアンケート調査で、携帯やPDAからのアクセスも意外と多いことが分かったためです。

使える要素と属性にも注意しました。装飾系（物理マークアップ）はダメ。使いなれた「font」や「b」も使えません。すべてスタイルシートで記述しました。

そして、何よりユーザインターフェイスを統一して、ページ間、分室間を気持ちよく回れるよう努力しました。実際は…いかがでしょうか。

[UP]

困ったところ

とにかくブロックで区切ったコンテナがずれるのには参りました。Netscape 7.02で調整するとOpera 6.05/7.03でずれる。それを直すと、今度はIE6でずれる。つい先程まで正常に表示できていたのに、別の項目を増やしてゆくと、いつの間にか別のブラウザの表示がおかしくなっている…。そんなことが続きました。

最大の手間は、HTML 4.0で「非推奨」とされる要素をすべて排除しなければならなかったことです。ひな型が決定してしまってからの修正は、ちょっとの変更でもページ数ぶん（×800）になりますから修正作業は大変でした。そうならないためにも最初の設計は納得の行くまで吟味する必要があります。

現在でも、Mac環境、Linux環境でのブラウズチェックは十分ではありません。今後、新しいブラウザが登場したときに正常に表示できるとも限りません。可能な限り対処しますので、不具合がありましたらメールや掲示板でお知らせ頂けると助かります。

[UP]

流れ

掲示板等において、作業経緯に関する部分のみ抜き出した文をまとめて書いておきます。

●02/15(土)

出先でノートPC（P-in）からOld&Newにアクセスしたとき、表示の遅さに参る。

●02/18(火)

レイアウト目的で<table>タグを使っている所を無くそうと決意する。

トップページのCGIやフレームも嫌になっていたので良い機会だから作り直そうと思っていたが、修正箇所がものすごく多いので躊躇している。

●02/19(水)

SSIが使えるようにサーバの設定を変更する。

●02/20(木)

リニューアル作業開始。

ツールに頼った汚いHTMLが嫌になり、全部書き直したくなる。

●03/03(月)

素材の絵をペイントを使って描く。

●03/04(火)

PS2 LinuxでWebサーバを公開し始めたが、今日はSofarts.comとシームレスで接続できるように設定してみる。

●03/07(金)

第1回 Old&New アンケートを設置し、今までのOld&Newについて、今後のOld&Newについてを聞いてみた。

それを元に、デザインの変更をしてみた。

●03/09(日)

StrictなHTML（HTML 4.01 StrictとCSS）に目覚めてサイト内の全HTMLを書き直す。

レイアウトも含めてデザイン部分は全てスタイルシートに任せるべきだと認識する。

●3月15日(土)

SSIを使うためにファイルを分断する作業を行う。ローカルWebサーバ上でのテストもO.K.！

●3月17日(月)

文書型宣言（DOCTYPE）によりスタイルシートが切り替わることを知る。

●3月18日〜約1ヶ月間

ひたすら800ページぶんの変換作業…

途中、ひな型修正が数回。

●4月23日(火)

リニューアルオープン。

[UP]

デザインについて

今回のリニューアル作業で使用した素材全体図です。Windowsに付属の「ペイント」を使って描きました。これはなかなか楽しい作業でした。

最初にこのような全体のイメージを決めてしまい、それをパーツ単位に切り分けてスタイルシートを作っていきます。

各分室のタブは、こんな風に作りました。

WX25ページで使ったビデオカードの写真を…

上下反転して輪郭抽出し、塗りつぶす。

この出っぱりはAGPスロットの形を表していたのです。

縮小して装飾して完成です。

車＆バイク分室用のタブは、インプレッサの横向きの写真を取り込んで輪郭抽出し、それを塗りつぶし…

縮小して装飾して完成です。

2003年8月。車が変わったので、これも変更…

縮小して装飾して完成です。

2004年2月2日
分室ごとにタブの形を変えることを止め、シンプルなデザインに変更しました。
（リニューアル直後の画面デザイン）

先にも書きましたように、レイアウトやデザインに関するものは、すべてスタイルシートに記述しました。

HTMLの先頭に次のような行があります。

<link rel="stylesheet" href="/oldnew/temp/css/base.css" …

base.cssは、本体ではなく、さらにワンクッションおいています。

別に秘密にしているわけではありません。oldnew.cssが本体です。

このようにしている理由はきちんとありまして、base.cssの中の

@import url(./oldnew.css);

という記述は、対応していないブラウザ、例えばNetscape Communicator 4.75では解釈されません。無視されるということは装飾に関する記述が一切排除されるということです。一部のPDA/携帯電話でも同様です。中途半端に解釈されて画面が崩れるより、潔くバッサリ切り捨ててしまう制作ポリシーに変えました。

[UP]

各種ブラウザでの描画比較について

各種ブラウザで表示テストをしているところです。

左からOpera 6.05/7.03 for Windows（日本語版）、Internet Explorer 6.0 for Windows（日本語版）、Netscape 7.02 for Windows（日本語版）です。この4つのブラウザでは、ほぼ同じデザインで表示されます。

Lynx for Win32では、このような表示になります。

テキストブラウザであるため、余計な装飾は一切表示されません。

Netscape Communicator 4.75 for Windows（日本語版）では、このような表示になります。

CSS2に対応していないブラウザでは、このようにシンプル（しかも縦長）な表示になります。

このため、ページトップには「本文までスキップ」というリンクを設けました。

ブラウザ比較の画像は、ローカルWebサーバでのチェック画面です。

2003/05/06：メニューの画像を排除し、更新時刻等必要な情報がよりチェックしやすい配置に修正しました。

[UP]

Google AdSense

2004年8月18日よりGoogle AdSenseを試してみることにしました。

ページ下にある広告です。

開設当初から広告は入れないポリシーでしたが、これは自分にとって何となく良い形に思えました。

SSIを使っていますので、フッタ用のインクルードファイル1つに追加するだけで、ほぼすべてのページに広告を入れることができました。

その弊害として「Valid HTML 4.01!」のバナーを外さねばなりませんでした。広告挿入用のスクリプトがValidではないからです。

WebDAVの脆弱性をねらった（らしい）攻撃が鬱陶しくてたまらないので、（Apacheのhttpd.confに）対策を試みましたが、どうもうまくいきません。

SEARCH /\x90\x02\xb1\x02\xb1\x02\xb1\x02\x…

という記録が１回につき32KBもずらずら続くのでログも読み辛いですし困っています。

httpd.confに

SetEnvIf Request_URI "\\x90.+" worm_log no_log

などと書いてみましたがダメ。

正規表現は使えるらしいけど…

ならばRequest_Method

SetEnvIf Request_Method SEARCH worm_log no_log
CustomLog /usr/local/apache/logs/worm_log combined env=worm_log

とやってみましたがこれも効かず。

その後、逆の発想でhttpd.confを書いて試したところ、うまく振り分けることができました。

それは、通常の（GET/POST等の）リクエストを通し、それ以外ならログを分けてしまうという方法です。

SetEnvIf Request_Method "(GET)|(POST)|(PUT)|(DELETE)|(HEAD)" pass
SetEnvIf Request_URI    "default\.ida"       !pass
SetEnvIf Request_URI    "NULL\.ida"          !pass
SetEnvIf Request_URI    "cmd\.exe"           !pass
SetEnvIf Request_URI    "root\.exe"          !pass
SetEnvIf Request_URI    "Admin\.dll"         !pass
 
CustomLog /usr/local/apache/logs/access_log combined env=pass
CustomLog /usr/local/apache/logs/worm_log   combined env=!pass

と書いてみたら、きちんと振り分けできました。

Request_Method部分は自分のところの環境で異なるとは思いますが、一応こんな感じで様子を見ることにします。

VirtualHostで弾くのが有効との情報を頂いたので後で試してみようと思います。

Old&NewのトップページをMovable Type（ムーバブル・タイプ）を使ってblog形式にしてみました。

更新状況をRSS配信したくなってあれこれ考えていたのですが、管理にMovable Typeを使うのが現状一番便利そうだったので思い切って移行しました。

掲示板や日記等のプライベート情報は、今まで通りメンバーオンリーとし、こちらでは公開しても良さそうな内容を書いてみたいと思います。

まぁ使ってるうちに、また違った方向性が見えてくるのではないかと思っています。

今までの「更新履歴」の更新（変な表現！）も止めて、こちらに移行しました。

HTMLでの更新は今月でまる5年になります。今回初めてこういったもの（MT）を使ってみましたが、管理のしやすさの点から言えば雲泥の差でこちらに軍配が上がると思いました。

まだ使い始めたばかりですが、いろいろな可能性を感じさせてくれますね。

思っていた以上に楽しいですね。＞MTテンプレート作り

（これはハマりそう…）

いろいろテンプレート・タグを調べながら追加をしているところですが、オリジナルの見出し等に使われている「音引き」が気になって仕方ありません。

＃「追記(extend)」に書くと「続きを読む」になるのかな？

この音引き（おんびき）ですが、例えば「プログラマー」の「ー」部分です。

私は「ー」を付けずに「プログラマ」と書きます。

付けると間延びした感じで嫌いなのです。

で、オリジナルの見出しで使われている「エントリー」とか「カテゴリー」になっている部分も全部音引き無しにしました。

すっきりしました。