はてなフォトライフのスライドショーを表示するガジェットの詳細情報

GoogleGadget

技術的な解説などの覚え書きです。

写真情報の取得方法

ガジェット設定「画像一覧をURLで指定」に指定されたURLのHTMLを読み込み、クラス属性に "foto_thumb" が指定されている<img>を囲んでいる<a>のリンク先URL(href属性)を、写真URLとして取得します。
JavaScriptの実装としては、以下の正規表現にマッチするHTMLを取り出し、<a>のhref属性を写真URLとして記憶します。

/<a href="[a-z_\d\/\.]+"><img class="foto_thumb" src="[a-z_\d\/\.]+" alt="\d+"><\/a>/gi

写真を表示するときには、写真URLのHTMLを読み込み、クラス属性に "foto" が指定されている<img>の属性から、必要な情報(src:画像ファイルのURL, alt:タイトル, width:写真の幅, height:写真の高さ)を取得します。
JavaScriptの実装としては、以下の正規表現を使っています。

/<img src="([a-z_\d\/\.]+)" alt="(.+)" class="foto" width="(\d+)" height="(\d+)">/i

利用しているライブラリ

画面のエフェクトの実現に以下のJavaScriptライブラリを利用しています。

Googleガジェットが重くなるので、本当はあまり良くないのかもしれませんが。

苦労したところとか

  • レイアウト調整に苦労した
    • prototypeのElement.setStyle()を多用してます
    • Firefox(Mozilla系)ではうまく表示されても、IEでは思ったように表示されないとかあった。結局、細かいところは妥協
  • エフェクトと画像読み込みのタイミングの作り込みに苦労した
    • 変にこだわって、画像の読み込みが終わってから表示するようにエフェクトのタイミングを調整し始めたら、状態変数が増えて、変数の値の制御が難しくなった。それなりにデバッグしたが、まだ変なところが残っているかもしれない・・・