Google AJAX Feed API の AJAX SlideShow を使ってみよう

Google AJAX Feed API - AJAX SlideShowではGoogle AJAX Feed APIを利用したスライドショーのライブラリとその使い方が紹介されています。

↑ ここでは作成したスライドショーをiframeでページに埋め込んでみました。こんな感じで写真がフェードイン、フェードアウトするスライドショーが作れます。(ソースはこちら: Google AJAX Feed APIのAJAX SlideShowのサンプル)

写真は「とことん鬼太郎に頼りまくっている境港に行ってきました」で掲載した写真の一部を使っています。

↑ フェードアウトして写真が切り替わる瞬間。

このサンプルのために、まず新しくRSSフィードを作成しました。Feed APIなので、RSSを読み込む必要があるのです。(作成したフィード: 水木しげるロードフォトフィード)

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/">
    <channel>
        <title>水木しげるロード フォトフィード</title>
        <link>http://blog.fkoji.com/2007/04230150.html</link>
        <description>とことん鬼太郎に頼りまくっている境港に行ってきました</description>
        <lastBuildDate>Mon, 23 Apr 2007 01:50:25 +0900</lastBuildDate>
        <pubDate>Mon, 23 Apr 2007 01:50:25 +0900</pubDate>

        <item>
            <title />
            <link>http://blog.fkoji.com/blogimg/kitarou/000.jpg</link>
            <author>F.Ko-Ji</author>
            <description><![CDATA[<img src="http://blog.fkoji.com/blogimg/kitarou/000.jpg" alt="" />]]></description>
            <media:group>
                <media:content medium="image" url="http://blog.fkoji.com/blogimg/kitarou/000.jpg" />
                <media:title>000.jpg</media:title>

                <media:thumbnail url="http://blog.fkoji.com/blogimg/kitarou/000.jpg" />
            </media:group>
        </item>

RSSファイルのソースの先頭を抜粋しています。AJAX Slideshowでは Media RSS の名前空間がデフォルトになっています。これはオプションで変更できます(後述)。この場合、media:thumbnailタグに指定したURLの画像ファイルがスライドショーに使われます。

HTMLファイルとJavaScriptのソースは以下のようになります。(太字のYOUR_API_KEYの部分は自分のAPIキーに置き換えてください。)

<html>
  <head>
    <title>Google AJAX Feed APIのAJAX SlideShowのサンプル</title>
    <script src="http://www.google.com/jsapi/?key=YOUR_API_KEY"
      type="text/javascript"></script>
    <script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
      type="text/javascript"></script>
    <style type="text/css"><!--
    div#slide-show {
        width: 352px;
        height: 288px;
        background: #000;
        color: #fff;
    }
    div#slide-show p#loading {
        text-align: center;
    }
    --></style>
    <script type="text/javascript"><!--
    function load() {
      var feed  = "http://blog.fkoji.com/photo-feed-kitarou.xml";
      var options = {
        displayTime: 2000,
        transistionTime: 600,
        scaleImages: false /* trueだとIE7でうまく表示できませんでした */
      };
      var slideShow = new GFslideShow(feed, "slide-show", options);
    }
    google.load("feeds", "1");
    google.setOnLoadCallback(load);
    --></script>
  </head>
  <body>
    <div id="slide-show"><p id="loading">Now Loading...</p></div>
  </body>
</html>

http://www.google.com/uds/solutions/slideshow/gfslideshow.js を読み込むと、 GFSlideShow というオブジェクトが有効になります。GFSlideShowに与えることができるオプションは以下の通りです。(参照: Google AJAX Feed API - AJAX Slide Show)

numResults

表示する画像数を指定。

scaleImages

画像のスケール変更を許可するかどうか。trueまたはfalseを与える。

displayTime

画像の表示時間(ミリ秒)。

transitionTime

画像の切替時間(ミリ秒)。

linkTarget

画像のリンク先ターゲット。指定しなければリンクしない。target要素を自由に指定できるが、次の定数も使える。

google.feeds.LINK_TARGET_BLANK
google.feeds.LINK_TARGET_SELF
google.feeds.LINK_TARGET_TOP
google.feeds.LINK_TARGET_PARENT

pauseOnHover

マウスオーバーしたときにスライドショーを停止するかどうか。trueまたはfalseを与える。デフォルトはtrue。

thumbnailSize

アイテムに複数のサムネイルが含まれていたとき、どのサムネイルを利用するかのヒントを与えることができる。以下の定数を指定する。

GFslideShow.THUMBNAILS_SMALL
GFslideShow.THUMBNAILS_MEDIUM
GFslideShow.THUMBNAILS_LARGE

(追記: これはサムネイルがサイズの小さい順に並んでいる場合を想定している。たとえば media:thumbnail タグが5個記述されているとすると、 GFslideShow.THUMBNAILS_SMALLを指定すると1個目、GFslideShow.THUMBNAILS_MEDIUMでは3個目、GFslideShow.THUMBNAILS_LARGEでは5個目のmedia:thumbnailタグが選択される。)

thumbnailTag

サムネイルのタグを指定する。デフォルトは GFslideShow.MRSS_THUMBNAIL_TAG でその値は thumbnail である。また、iTunesで利用される coverArt タグが GFslideShow.ITMS_THUMBNAIL_TAG として定義されている。

thumbnailNamespace

サムネイルの名前空間を指定する。デフォルトは GFslideShow.MRSS_THUMBNAIL_NS でその値は http://search.yahoo.com/mrss/ である。また、iTunesで利用される http://phobos.apple.com/rss/1.0/modules/itms/ が GFslideShow.ITMS_THUMBNAIL_NS として定義されている。

スライドショー用のフィードを作成するのが若干面倒かもしれませんが、スライドショーの実装自体は数行記述するだけなので簡単にできます。これらを参考にスライドショーを作ってみましょう。

参照:
- Google AJAX Feed API - AJAX SlideShow
- Yahoo! Search (Media RSS specification)