2007-12-16
■[GoogleGadget][はてな] はてなフォトライフのスライドショーを表示するGoogleガジェットを作ってみた
はてなフォトライフにアップロードした写真を、はてなダイアリーのサイドバーにスライドショー形式で表示させたいと思ったので、そんなGoogleガジェットを作ってみました。
動作例
しなもんの写真をスライドショー形式で表示させると、こんな感じ。
IEだと、タイトルが日本語が文字化けしてしまうようです(http://i.hatena.ne.jp/idea/16986参照)。現時点ではタイトルを空欄にするか、英字のみ使うかにしておいた方が良さそうです。(対応されたようです)
できること
- 指定された写真をスライドショー形式で、ランダムな順番に表示
- タイトルや写真をクリックすると、その写真のページのウィンドウを開く
- 右下のStart/Stopリンクで、スライドショーの開始／終了を操作
- 以下のような写真を、スライドショーに表示する写真として指定できる
- スライドショーに指定可能な写真の枚数は、1〜200枚程度。最大枚数は条件によって変わる
使い方
以下のページで設定を入力して、「コードを取得」でHTMLを取得して下さい。
取得したHTMLコードは、ブログパーツとしてサイドバーに貼り付けたり、日記本文に貼り付けたりできます。
ガジェットの設定の説明
写真一覧をURLで指定
スライドショーで表示する写真を、写真一覧をアイコンを表示するはてなフォトライフのページのURLで指定します。
例えば、以下のようなURLを指定します。
指定されたURLで表示される写真の範囲が、スライドショーで表示する写真の範囲になるので、たいていの場合は最新50枚がスライドショーで表示されます。
はてなフォトライフのページでも、対応していないページがあります。対応していないページや誤ったURLが指定された場合には、そのURLと一緒にエラーメッセージが表示されます。
縦棒「|」で複数のURLの指定できるので、以下のような指定も可能です。
- id:NATの写真の最新100枚
- id:hatenacinnamonの写真と、キーワード「しなもん」の写真
ただし異常に長い値を設定すると、正しく動かない恐れもありますので、ご注意下さい。
写真の幅、写真の高さ
それぞれ、写真を表示する領域の幅と高さをpx単位で指定します。
この幅と高さより大きい写真は、その範囲に納まるように縮小されます。拡大はしません。
タイトルの文字サイズ
タイトルの文字サイズを指定します。
CSSで使える単位が使えます。「80%」のように「%」を使うのがおすすめです。
写真の切り替わる間隔(秒)
スライドショーで写真の切り替わる間隔を秒単位で指定します。
開始状態
表示されたあとのスライドショーの動きを選択します。
「一定間隔で写真切り替え」を選択したときは、「写真の切り替わる間隔(秒)」をあまり短く(0秒とか1秒とか)しないことをおすすめします。ページが重くなったり、はてなやGoogleのサーバに異常な負荷を与えることになりますので、ご注意ください。
その他、細かい注意点など
- 表示設定で「タイトル」を空欄にすると、ガジェットの一番上に表示するタイトルを消せます
- はてなダイアリーの日記の中に貼り付ける場合、デザインのテーマによっては、Googleガジェットに余計な枠線が表示されることがあります
- はてなダイアリーのサイドバーに貼り付ける場合、HTMLコードは、ページの最後の方(サイドバーで最も右下の位置など)に貼り付けることをおすすめします
現在分かっている不具合／変更履歴
-
JavaScriptコードを、HTMLのロード後に実行するようにする2007-12-16 対応しました - はてなダイアリーのテーマによっては、日記内に貼り付けると、変な枠線が表示される
- IE系だと写真が枠内にセンタリングされない
- Mozilla系だと写真の外側に一定の空間をあけて枠線を引いているが、IE系だと写真のすぐ外側に枠線が引かれる
- IE系だと、はてなダイアリーのサイドバーに貼り付けたとき(小さいサイズで表示したとき？)、フッターが途切れて表示されることがある
-
はてなフォトライフのリニューアル(2008-04-24)の影響で、表示されなくなった。2008-04-26 対応しました - 2008-06-01 はてなフォトライフのHTMLが微妙に変化した影響で、表示されなくなっていたのに対応。
最後に
はてなダイアリーのサイドバーに貼り付けて、最近の写真をちょっと見せる程度なら、それなりに使えるものになったと思っています。どうぞご利用ください。
もし不具合など見つけましたら、ここのコメント欄などでご連絡下さい。空いている時間を使って、趣味で作っているものなので、全てに対応することは難しいかもしれませんが、できる範囲で対応します。
■[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ライブラリを利用しています。
- script.aculo.us 1.5.1
- prototype 1.4.0
Googleガジェットが重くなるので、本当はあまり良くないのかもしれませんが。
苦労したところとか
- レイアウト調整に苦労した
- エフェクトと画像読み込みのタイミングの作り込みに苦労した
