ヤマダタイゴです。
10/9に公開された赤すぐ内祝いのAPIを使って、iGoogle上にお菓子やお酒をスライドショー表示するガジェットを作ったのでご紹介します。

テーマは、
・お菓子やお酒をだらだら表示して食欲を誘うガジェットを作る
・iGoogleの小さなスペースでも飽きがこないように、かつなるべく少ない操作量でだらだら見れるようにする
でした。

iGoogleに登録すると、「菓子・グルメ」か「酒」かを選べるようになります。
ぜひあなたのiGoogleでお試しくださいませ。

作り方

スライドショーの表示は、jQueryとjQuery Cycle Pluginを使ってます。自分でごりごり書くわけではないのでとっても簡単です。

ソース（uchiiwai.xml）

http://mtl.recruit.co.jp/sandbox/yamada/uchiiwai.xml

（１）外部jsファイルのインクルード

<script src="http://mtl.recruit.co.jp/sandbox/yamada/js/jquery-1.2.1.pack.js" type="text/javascript"></script>
<script src="http://mtl.recruit.co.jp/sandbox/yamada/js/jquery.cycle.all.pack.js" type="text/javascript"></script>

試す前はちょっと不安でしたが、<Content type="html">タグ内に宣言してOKでした。

（２）noConflict設定

jQuery.noConflict();
var $j = jQuery;

iGoogleはこのエントリの上に貼ったようにblogパーツとしても使えます。 貼った先のblogでprototype.jsを使われているとコンフリクトを起こすことがあるので、 これをセットしておきましょう。（詳細はこのエントリーをご覧ください。）

（３）赤すぐ内祝いAPIでデータget

_IG_FetchContent(url,
  function(res){
  if (!res) {return;}
  eval(res);
});

このあたりはGoogle ガジェット API 開発者向けガイドにある、通常どおりのガジェット作りです。

（４）スライドショー実行

$j('#items').cycle('turnDown');

今回は上から下にスライドするイメージにしています。jQuery Cycle Pluginには他にもエフェクトがあるようです。かっこいいエフェクトばかりですよ！

まとめ

まとめです。 今回のiGoogleガジェットはたった75行です。正直jQueryの使い方に慣れるのに手間取りましたが、さっぴくと4,5時間あればできちゃうと思います。さらに、Google Desktop Gadgetでも同じUIのまま使えるので一粒で2度おいしいです。

最後に、この手の見せ方はホットペッパー.jp APIを使って居酒屋の写真を、なんて展開できそうですね。どなたかいかがでしょうかー。