AJAX で『はてなフォトライフデスクトップ』

Windows の、デスクトップの壁紙に HTML ファイルを指定できる機能 (Active Desktop) を利用して、はてなフォトライフデスクトップみたいなものを作ってみました。

これまで XML を扱ったことがあまり無かったので難しいかなと思ったんですが、次々とインスピレーションが湧いてきて、割とあっさりと出来上がりました。

いちおう何をするものか説明しますと、はてなフォトライフが提供する RSS (人気写真、お気に入り、タグ、キーワードなど) から画像の URL を抜き出し、壁紙として表示します。

画像は重複して表示されないようになっています: まず最初に画像のリストを作成し、そこからランダムに選択、選択したものはリストから削除していきます。

こんな感じで、なかなか便利にこの事を実現しています:

image = imglist.remove(imglist.random())

リストが空になると再度 RSS を読みに行き、リストを更新します。

画像の表示位置は初期設定の状態のまま固定されています。内部的には、支配人がランダムに (空いている額縁から) 絵を入れていく、という感じで表現してみました。

画像の処理に関しては、アニメーション的な効果とか、透明度をランダムにしてみるとか、いろいろ工夫の余地はありそうなんですが、あまり得意な分野ではないので、ごく単純なものに留めました。

設定に関しては、以下の三つの項目が変更可能になっています:

RSS フィード
画像の更新間隔
画像の表示位置 (および個数)

pref.js というファイルに以下のような書式で記述してください (無くても動作します)。

var Pref = {
  list: [],	/* RSS フィードの URL リスト (はてなフォトライフのみ)
		 * デフォルト: 人気写真 */

  poslist: [ 'x1,y1', 'x2,y2' ],
		      /* 画像の位置リスト (デフォルト: 四隅)
		       * CSS で有効な単位 (px, pt, % 等) で指定してください。
		       * ただし頭に '-' を付けると right/bottom の値として、
		       * そうでなければ left/top の値として設定されます */

  interval: { length: INT, unit: CHAR }
				/* 画像の更新間隔。unit は 's' 'm' 'h'
				 * のいずれかを設定してください
				 * (デフォルト & 最短: 1 分)
				 */
};

本体はこちらです: ajaxfotolife.htm.gz
(どうでもいいことですが、コーディング・スタイルを変えました。Ruby の人っぽいスタイルになっていると思います)

なお、XP 等をお使いの方は、Active Desktop はデフォルトでオフになっていると思います。オンにする方法は、すみませんがご自分で調べてみてください。 <- MSXML オブジェクトの関係でスクリプト・エラーになっていたものを「オフになっている」と思い込んでいたようです。

Update [20060409]:
些細なことなんですが、額縁の数よりもフィードの数が多かった場合、多い分の各フィードの一枚目の写真が捨てられてしまう、という問題がありましたので修正しました。

Update [20060410]:
普通の壁紙のように、画面の中央に画像を表示できるようにしてみました: IMG 要素ではなく、BODY の背景プロパティーを利用するようにしたものです (なので、中央以外に表示させることもできます)。

位置指定のオプションで 'top,left,repeat' として、コンマを二つ使うこと (実際には「一つではない」こと) が通常の位置指定との区別となるようにしました。

なお当然ながら、背景を使用するため、この形式での指定は同時に一つしか有効になりません (複数設定すること自体は可能です)。

設定例:

var Pref = {
  poslist: [ 'center,center,no-repeat', '0,0', '-0,-0' ]  // 左上から右下に並べる
};

Update [20060421]:

id:reinyannyan:20060418:p1 の思い付き (その後成功しました) を受けて、任意の RSS ファイルを読めるようにしました。

具体的には HTTP 通信用の "XMLHTTP" の代わりに XML 専門の "DOMDocument" オブジェクトを利用するように変更しました。これにより、ローカルの RSS ファイルも読めるようになります。

なお、このようなはてなフォトライフ以外の RSS については、link 要素の URL を (現状では画像かどうか確認せずに) 表示する仕様となっています。

Update: id:reinyannyan:20060423:p1

Update: id:reinyannyan:20060427:p1