F.Ko-Jiの「一秒後は未来」

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

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

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

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

google-ajax-slide-show.jpg

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

このサンプルのために、まず新しく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)

【関連エントリー】
Google AJAX Feed API でブログの人気エントリーを表示するサンプル はてなブックマーク数
generated by 関連エントリーリストジェネレータ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

著者について

fkoji

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity電車遅延なう梅酒.in#グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など