はてなダイアリーのスタイルシートを取り込む : インターネット殺人事件

前置き及び挫折の経緯

今回はちょっと趣向を変えて、はてなダイアリーで提供されているテーマを再利用する方法を考えてみた。

はてなダイアリーのテーマとは、デフォルトで選択可能なスタイルシートのことを指す。
詳しくははてなダイアリー - テーマを参照してほしい。
はてなダイアリーは tDiary 互換の HTML を生成するため、初期の頃は tDiary のテーマが流用されていたが、その後ははてな独自のテーマが多数公開されているらしい。

なぜはてなのテーマを再利用しようと思ったかというと、前述の“はてな独自テーマ”がかなりの数に上るので、はっきり言ってどれがどう違うのか分からなくなったから。
しかも、はてなダイアリー日記を見ていると、相当のスピードで新しいテーマが追加されてゆく。
これは一覧表示か動的切り替えが欲しいなあと思い立ち、まずはちょっとだけテーマについて調査してみた。

そんなわけで、最初ははてなのテーマ一覧をリストアップするのと一緒に、はてな内で使えるスタイルシート切り替えツールでも提供してみるつもりだった。
しかし、残念なことに、 2004-08-29 現在、はてなダイアリー内でスタイルシートを切り替える方法はない。
なぜかというと、はてなダイアリーの本文、ヘッダ、フッタ内では script タグ及び object タグが禁止されているから。
(はてなダイアリー利用可能タグ参照。 script / object 要素や onclick 属性などは排除されている。
禁止に至る経緯はこの記事の範疇ではないので省くが、 XSS 対策用の措置である。はてなダイアリー日記 - 2003 年 01 月付近参照。)

外部 JavaScript が使えないとなると、残る切り替え方法は代替スタイルシートだが、現在のところ、はてなダイアリーにそういった機能は見当たらない。
また、最近のブラウザなら標準で代替スタイルシートへの切り替え機能が実装されているとはいえ、デフォルトの Internet Explorer が対応していないのはやはり惜しい。
というわけで、わたしははてなダイアリーでのスタイルシート切り替えは不可能だと判断しました。
「こうすればできる」といった方法をご存じの方がいらっしゃったら、是非ともご教授ください。(連絡はこの記事へリンクするのが一番手っ取り早いです)

なお、はてなのテーマ一覧は id:Jehoshaphat さん製作のページが既にある。
はてなユーザーがテーマを選びたい場合はこちらを使うとよい。

気を取り直してツール作成

さて、そんなわけで、はてなテーマ切り替えツールを作る意味はあまりなくなってしまったが、思いついたことを放っておくのも気持ち悪いので、ツールはツールで作ってみることにした。

まず、はてなダイアリーのソースを覗いてみると、デフォルト CSS の URL は次のようになっている。

http://d.hatena.ne.jp/theme/hatena/hatena.css

デフォルトテーマの名前が Hatena であることから、各テーマは http://d.hatena.ne.jp/theme/( CSS 名)/( CSS 名).css にあるのではないかと推測できる。これは正解だった。(正確にはテーマ名は小文字のみ。はてなダイアリー - テーマ参照。)

あとはテーマの一覧を外部ファイルで定義して、切り替え用 JavaScript ファイルの中に整形して流し込めばよい。
で、完成品がこちら。勉強がてら PHP で作ってみた。

スタイルシート切り替え JS ファイルはいちゆうポータルのスタイルシート切り替えスクリプトを使わせていただきました。

使い方

PHP が使えるサーバに 3 つのファイルを配置して、外部から JavaScript として呼び出す。
HTML の中で以下のように書けば、その位置にスタイルシート切り替え用フォームが表示される。

<script type="text/javascript" src="changess.php"></script>

オプション

file

外部 CSS リストファイル (TSV) の URL 。 URL は http 始まりのみ受け付ける。 TSV ファイルは ^( CSS 個別 URL )\t( CSS 名)$ で記述すること。

ex. http://internet.kill.jp/o/hatena/manual/css/changess.txt

code

出力文字コード。

file オプションで定義ファイルを外部指定できるので、テーマ一覧の更新に対応可能。
2004-08-29 現在のはてなスタイルシート一覧を指定する場合はこんな感じ。

<script type="text/javascript" src="changess.php?file=http://internet.kill.jp/o/hatena/manual/css/hatenaCSS_all.txt"></script>

サンプルページ

はてなスタイルシート再利用ツール設置サンプルページ

サンプルページの内容は有里さんのはてなダイアリー用CSS作成支援を使わせていただきました。

注意点

切り替え対象に全てのスタイルシートを指定すると、ページのロードが極端に重くなるので避けた方がよい。幾つかのテーマを選んだ定義ファイルを自作して指定するのがおすすめ。
このサーバの changess.php は外部から呼び出せる状態になっている。サンプルとして使うのは構わないが、常設するのは避けた方がよい。わたしのためではなく、あなたのために。このツールは設置先サイトの内容を書き換えるものなので、わたしがその気になったらオレオレ詐欺電話をかけるのと同じくらいの手間ヒマであなたのサイトに猫の死骸画像を表示することができる。

使い道

tDiary ユーザーがはてなのテーマを取り込むときに役立つかもしれない。
はてなダイアリーと同じ CSS 構成でページを作っている人なら再利用できる。
つまり、それほど役に立たない。