はてなフォトライフのスライドショーを表示するGoogleガジェットを作ってみた

GoogleGadget はてな

はてなフォトライフにアップロードした写真を、はてなダイアリーのサイドバーにスライドショー形式で表示させたいと思ったので、そんなGoogleガジェットを作ってみました。

動作例

しなもんの写真をスライドショー形式で表示させると、こんな感じ。

IEだと、タイトルが日本語が文字化けしてしまうようです(http://i.hatena.ne.jp/idea/16986参照)。現時点ではタイトルを空欄にするか、英字のみ使うかにしておいた方が良さそうです。(対応されたようです)

できること

  • 指定された写真をスライドショー形式で、ランダムな順番に表示
  • タイトルや写真をクリックすると、その写真のページのウィンドウを開く
  • 右下のStart/Stopリンクで、スライドショーの開始／終了を操作
  • 以下のような写真を、スライドショーに表示する写真として指定できる
    • 特定ユーザ(自分でも他人でも可)の写真一覧
    • 人気写真一覧(新着順／注目／人気順のいずれも可)
    • 特定タグの写真一覧
    • 特定キーワードの写真一覧
    • (その他、色々な条件で指定可能。詳細は「ガジェットの設定の説明」参照)
  • スライドショーに指定可能な写真の枚数は、1〜200枚程度。最大枚数は条件によって変わる

使い方

以下のページで設定を入力して、「コードを取得」でHTMLを取得して下さい。

http://gmodules.com/ig/creator?url=http://www9.plala.or.jp/NAT/program/GoogleGadget/hatena-fotolife-slideshow.xml

取得したHTMLコードは、ブログパーツとしてサイドバーに貼り付けたり、日記本文に貼り付けたりできます。

ガジェットの設定の説明

写真一覧をURLで指定

スライドショーで表示する写真を、写真一覧をアイコンを表示するはてなフォトライフのページのURLで指定します。
例えば、以下のようなURLを指定します。

指定されたURLで表示される写真の範囲が、スライドショーで表示する写真の範囲になるので、たいていの場合は最新50枚がスライドショーで表示されます。

はてなフォトライフのページでも、対応していないページがあります。対応していないページや誤ったURLが指定された場合には、そのURLと一緒にエラーメッセージが表示されます。

縦棒「|」で複数のURLの指定できるので、以下のような指定も可能です。

ただし異常に長い値を設定すると、正しく動かない恐れもありますので、ご注意下さい。

写真の幅、写真の高さ

それぞれ、写真を表示する領域の幅と高さをpx単位で指定します。
この幅と高さより大きい写真は、その範囲に納まるように縮小されます。拡大はしません。

タイトルの文字サイズ

タイトルの文字サイズを指定します。
CSSで使える単位が使えます。「80%」のように「%」を使うのがおすすめです。

写真の切り替わる間隔(秒)

スライドショーで写真の切り替わる間隔を秒単位で指定します。

開始状態

表示されたあとのスライドショーの動きを選択します。
「一定間隔で写真切り替え」を選択したときは、「写真の切り替わる間隔(秒)」をあまり短く(0秒とか1秒とか)しないことをおすすめします。ページが重くなったり、はてなやGoogleのサーバに異常な負荷を与えることになりますので、ご注意ください。

その他、細かい注意点など

  • 表示設定で「タイトル」を空欄にすると、ガジェットの一番上に表示するタイトルを消せます
  • はてなダイアリーの日記の中に貼り付ける場合、デザインのテーマによっては、Googleガジェットに余計な枠線が表示されることがあります
    • サイドバーには正しく表示されます
    • ここの日記の場合、テーマdeltaでこの現象が起きたので、テーマHatena-darkgrayに変えることにしました
  • はてなダイアリーのサイドバーに貼り付ける場合、HTMLコードは、ページの最後の方(サイドバーで最も右下の位置など)に貼り付けることをおすすめします
    • Googleガジェットの読み込みには少し時間がかかるので、HTMLコードがページの先頭や途中にあると、ページの表示がカクカクした感じになることがあります

現在分かっている不具合／変更履歴

  • JavaScriptコードを、HTMLのロード後に実行するようにする2007-12-16 対応しました
  • はてなダイアリーのテーマによっては、日記内に貼り付けると、変な枠線が表示される
  • IE系だと写真が枠内にセンタリングされない
  • Mozilla系だと写真の外側に一定の空間をあけて枠線を引いているが、IE系だと写真のすぐ外側に枠線が引かれる
  • IE系だと、はてなダイアリーのサイドバーに貼り付けたとき(小さいサイズで表示したとき？)、フッターが途切れて表示されることがある
  • はてなフォトライフのリニューアル(2008-04-24)の影響で、表示されなくなった。2008-04-26 対応しました
  • 2008-06-01 はてなフォトライフのHTMLが微妙に変化した影響で、表示されなくなっていたのに対応。

最後に

はてなダイアリーのサイドバーに貼り付けて、最近の写真をちょっと見せる程度なら、それなりに使えるものになったと思っています。どうぞご利用ください。
もし不具合など見つけましたら、ここのコメント欄などでご連絡下さい。空いている時間を使って、趣味で作っているものなので、全てに対応することは難しいかもしれませんが、できる範囲で対応します。