遊んでみた2006.01.26先日このブログで公開したばかりの、「ライブドア事件」専用トラックバック・ステーションであるが、毎回ページが開かれるたびにデータベースにアクセスする仕組みで作ったのだが、そんな作りのままではトラフィック増には耐えられない。そこで、良く出来たブログ・サービス(例えばMT)の様に、変更があったときに(つまり、トラックバックが送られてきた時に)、データベース上のデータからHTMLページを生成しておき、閲覧時にはそれを返すように変更することにした。その作業を進めているときに、この手法の一つの欠点に気が付いた。しているように、ヘッダーも含めた全HTMLページを生成するようにしておくと、その中にスタイルシート(CSS)へのリンクを埋め込むことになるので、スタイル(見た目)が固定化されてしまうのである。そこで、複数のスタイルシートを用意しておき、閲覧時に動的に結び付きを決められるようにする方法を幾つか考えてみた。案1.ページ全体ではなく、HTMLの一部だけを生成しておき、PHPを使って動的にスタイルシートとの結び付けをする。案2.HTMLではなく、PHPを生成しておき、それを使って動的にスタイルシートとの結び付けをする。使ってスタイルシートと結びついた親ページにそれを読み込んでくる。案1と案2は既にやり方を知っているので、あえて案3の方法でやってみることにした。一度遊んでみたかったので、丁度良い。すると、親ページ(最初にブラウザーがロードするページ)はこんな感じになる。cache/livedoor1.html)を異なったスタイルで見せることができるのである。サンプルとして、二つの異なるスタイルシート(listview1.css、listview2.css)と結びつけたサンプルを下に貼り付けたので参照していただきたい。使って表示したもの「何で同じHTMLなのにこんなに異なる表示が出来るんだ?」と疑問に思う方は、それぞれのCSSファイルを参照してみると良い。分離するだけでもかなり面白いことが出来ることがこの例を見ても良く分かると思う。上でうまく動いたので、「クライアント側でのHTMLとCSSの動的結びつきに成功。アクセスしてみて、がっくり。漢字が文字化けしてしまうのだ。サーバー上で生成しているHTMLファイルも親ページもどちらもUTF-8でセーブしてあるので、本来ならうまく行くはずなのだが、なぜか文字化けしてしまうのだ。正しく認識してくれないようである(原因は不明...もし心当たりのある方がいたら、コメントをいただけるとありがたい)。あることを示すBOM(EF、BB、BF)を付けてみたところやっとちゃんと動いてくれた。認識するコードが入っているとは少し驚きだ。いうことで、「ライブドア事件」専用トラックバック・ステーションも無事にアップデート終了。簡単なプロトタイプだが、色々と勉強になった。|Comments先にTBしてくれた方の情報が深いところに隠れてしまいますのでTB昇順(CNETjapanの記事TBのように)という形で表示して、別枠で新着TB数件(あるいは数時間内)という形(listview2.css)と、したほうが良いかもしれませんね。17:04ブログに慣れているせいか、新しいものが上の方がしっくり来るのですが...。ちなみに、リストの順番を変えるまではCSSの切り替えでするのはたぶん無理でしょうね(誰か天才的な人がやってしまうかもしれませんが)。XML(この場合はRSSで十分)を生成しておき、それを読み込んでHTMLを生成するべきでしょうね。17:32昇順・降順の二者選択なら、はじめから二種類のリストを生成しておき、cssの制御で片方だけを表示させるとかでどうでしょう。非常に泥臭い方法ですが。19:45原理的には「Ajaxで動くブログ」と同じですね。20:18最近やっとスタイルシートをいじりはじめたので、全く分かりません!!(笑)でもスタイルシートも昔は分からなかったのに今は興奮して眠れないくらいだから・・・できるようになるでしょうか・・どきどき。こんなにいろんなことができるのを尊敬します。20:35普通にjavascriptでdocumnet.stylesheet=等で切り替えたら駄目なんですか?親ウィンドウのフレーム名も判別できたはず。ajaxは必要ないかとおもってます。20:35親ウィンドウのフレーム名から判断して異なるCSSファイルを読み込むんですね。