Google AJAX Feed APIを利用したスライドショー

　こんばんは。前回の書き庫コメントでアップロードした画像のスライドショーの話が出ていたので。

　ブログのサイドバーでスライドショーを見せるブログパーツは結構あると思いますが、良く見かけるのはAdobeのFlashを用いて表示させる方法。これは純粋にJavaScriptを使うよりは、凝った演出が出来る傾向にあります。もっとも、最近はモダンなブラウザではCanvas要素^Gをサポートしているので、JavaScriptだけでも凝った演出が可能になってますけど（ppBlogでは、写真を回転させたりして表示できますが、この部分でCanvasを使っています）。

　単なる好みの問題ですが、サイドバーでスライドショーを見せる際に演出に凝りまくるのは、あまり好きでありません(特にFlash系)。なので、スライドショーを見せるにしてもJavaScriptのみで動くシンプルなものが良いなぁ、と思いました。スクリプトは自前で用意したいところですが、画像切り替えのアルゴリズムなどを考えるとはまりそうなので、ここは既知のJavaScriptライブラリーを使うことにします。

　で、Google AJAX API が良さそうでしたので、これを使ってスライドショーを付けてみました。Googleで、スライドショーそのもののスクリプトを公開しているので、それを利用するだけです。実際のデモは、http://p2b.jp/demo/slideshow.html 　あるいは　http://martin.p2b.jp/index.php で確認出来ます(3paneのテーマであれば右側に表示される)で確認できます。

　早速ですが、簡単な設置手順を記しておきます。

mediaRSSファイルが必要なので、それを作成するadmin.phpとmodules/mrss2.inc.phpをゲット。
管理画面の「各種ツール」に「MRSSの作成２」というメニューがあるので、それを選択。これでmediaRSSが作成される。
表示させたいテーマのtemplate.phpに必要なJavaScript関連の記述をする。

　基本的にはこれで足ります。template.phpに記述するJavaScriptですが、先に挙げた小生のサイトでは、まず以下のようにして動作に必要なファイルをGoogleのサーバーから外部スクリプトとして呼び込んでいます。

 <script type="text/javascript" src="http://www.google.com/jsapi?key=（AJAX APIのキー）"></script>
 <script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js" type="text/javascript"></script>

AJAX APIのキー指定ですが、これはなくても動きますが、グーグルのサイトで簡単に入手出来るので手に入れておくと良いでしょう。

　この２つのスクリプトを通じて、予め用意したmediaRSSファイルを読み込んで、画像を順次表示させていく訳ですが、mediaRSSファイルを手書きで用意するのは大変なので、こういうものはppBlogに作らせましょう(手順1, 2)。ppBlogで生成されるmediaRSSは、具体的にはhttp://martin.p2b.jp/feeds/mrss.xml のような感じになります。

　このmediaRSSファイル読み込み時に起動する呼び出し関数は、以下のような記述です。グーグルのサイトにあるサンプルコードとほぼ同じです。

function load(){ // mediaRSSファイルを読み込んだ際のコールバック関数
  var src = "http://martin.p2b.jp/feeds/mrss.xml"; // 読み込むRSSファイルを指定
  var options = {
    displayTime: 3000,  // 一枚あたりの画像表示時間(ミリ秒)
    transistionTime: 1000, // 画像切り替えのフェードアウト・フェードインの時間(ミリ秒)
    scaleImages : true, // 指定したサイズに合わせて画像を縮小させるかどうかのオプション指定
    linkTarget : google.feeds.LINK_TARGET_BLANK // 画像をクリックした際に新しいウィンドウ(タブ)でリンク先を開くか
  };
  new GFslideShow(src, "slideframe", options); // slideframeというID名を持つ要素に対して発動
 }
 google.load("feeds", "1");
 google.setOnLoadCallback(load);

これに対するHTMLの記述は以下のような感じです。これもtemplate.php内の記載になります。

 <div id="slideshow" style="margin: 60px auto 30px auto; width: 120px; height: 150px; background: url(theme/3pane/Images/slide-frame.jpg) no-repeat; padding-top: 30px;">
  <div id="slideframe" style="width: 100px; height: 100px; margin: auto; position: relative;"></div>
 </div><!--#slideshow-->

ここでは、インライン形式のスタイルシート指定にしていますが、勿論スタイルシートのCSSファイルで指定しても構いません。設置の参考にするには、上に挙げたデモサイトが分かりやすいかと思います。

　尚、このスライドショーは、マウスが画像に載ると、そこで一時停止します(これはデフォルトの動作)。で、そのままクリックするとその画像が含まれる記事にリンクするようになっています(これはmediaRSSの内容による)。

　ppBlogに組み込めるように、admin.phpとmodules/mrss2.inc.phpを添付しておきますね。

　参考リンク: http://www.google.com/uds/solutions/slideshow/reference.html

添付ファイル： admin.php