opensocial-jquery と Google Gadget Editor を使って iGoogle production でガジェットを開発しよう

おはようございます。なかじまんです。

2009年8月12日 米国の iGoogle は OpenSocial に正式対応しました。残念ながら日本はまだですが、近いうちに対応することが予想できます。なので、今後 iGoogle に向けた OpenSocial ガジェット (アプリ) の開発も広がってくるでしょう。

もちろん opensocial-jquery も iGoogle を熱烈サポートしていきます。なんたって最終的には全世界がターゲットになるのですからね。そこで iGoogle を使った opensocial-jquery のチュートリアルを用意しました。Google アカウントさえあれば WEB ブラウザ 1つだけで体験できる構成にしています。

それではチュートリアルをはじめます。

はじめに iGoogle (米国) http://www.google.com/ig?hl=en にログインしてください。



続けて iGoogle に Developer Gadget を追加してください。



続けて iGoogle に Google Gadget Editor を追加してください。そして Hello, world! ガジェットのソースコードが表示されるのを確認してください。



Google Gadget Editor で File メニューから Save を選択してください。続けて playground.xml と入力して OK ボタンをクリックし、Hello, world! ガジェットを保存してください。



playground.xml の URL を確認します。playground.xml のリンクを開いてください。



このときの playground.xml の URL を手元に控えてください。次のような URL になるはずです。数値の部分は各自によって異なります。

http://hosting.gmodules.com/ig/gadgets/file/(数値)/playground.xml

Developer Gadget で、手元に控えた playground.xml の URL を入力して Add ボタンをクリックし、iGoogle にガジェットを登録してください。



iGoogle に playground.xml として保存したガジェットが表示されます。



iGoogle が playground.xml をキャッシュしないように cached チェックボックスを OFF にします。



Google Gadget Editor で playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example" />
<Content type="html"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10 results</option>
<option value="20">20 results</option>
<option value="30">30 results</option>
</select>
<input type="submit" value="Search">
</form>
]]></Content>
</Module>

ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして、検索ボックスが表示されるのを確認してください。

※ playground.xml に HTML を記述すると、そのままガジェットで表示されます。



Google Gadget Editor で playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example" />
<Content type="html"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10 results</option>
<option value="20">20 results</option>
<option value="30">30 results</option>
</select>
<input type="submit" value="Search">
</form>
<script src="http://scripts.lrlab.to/opensocial-jquery-1.0.4.min.js"></script>
<script>
jQuery(function($) {
  $(document.form).submit(function() {
    alert(this.q.value + ' ' + this.c.value);
    return false;
  });
});
</script>
]]></Content>
</Module>

ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そしてSearch ボタンをクリックし、入力内容が alert 表示されるのを確認してください。

※ opensocial-jquery は http://scripts.lrlab.to/opensocial-jquery-1.0.4.min.js のアドレスで配信しています。詳しくは opensocial-jquery on the cloud を見てください。
※ playground.xml に JavaScript を記述すると、そのままガジェットで実行されます。



Google Gadget Editor で playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example" />
<Content type="html"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10 results</option>
<option value="20">20 results</option>
<option value="30">30 results</option>
</select>
<input type="submit" value="Search">
</form>
<div id="videos"></div>
<script src="http://scripts.lrlab.to/opensocial-jquery-1.0.4.min.js"></script>
<script>
jQuery(function($) {
  $(document.form).submit(function() {
    var url = 'http://gdata.youtube.com/feeds/videos';
    var data = { alt: 'json',
      vq: this.q.value,
      'max-results': this.c.value
    };
    $.getJSON(url, data, function(json) {
      $.each(json.feed.entry, function() {
        $('<img />')
          .attr('src', this.media$group.media$thumbnail[0].url)
          .appendTo('#videos');
      });
    });
    return false;
  });
});
</script>
]]></Content>
</Module>

ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして Search ボタンをクリックし、入力内容にしたがって YouTube から動画を検索し、サムネイルがリスト表示されるのを確認してください。

※ opensocial-jquery は jQuery の Ajax API をクロスドメイン対応に拡張します。
※ YouTube の動画検索は YouTube Data API を使っています。



Google Gadget Editor で playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example">
<Require feature="dynamic-height" />
</ModulePrefs>
<Content type="html"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10 results</option>
<option value="20">20 results</option>
<option value="30">30 results</option>
</select>
<input type="submit" value="Search">
</form>
<div id="videos"></div>
<script src="http://scripts.lrlab.to/opensocial-jquery-1.0.4.min.js"></script>
<script>
jQuery(function($) {
  $(document.form).submit(function() {
    var url = 'http://gdata.youtube.com/feeds/videos';
    var data = { alt: 'json',
      vq: this.q.value,
      'max-results': this.c.value
    };
    $.getJSON(url, data, function(json) {
      $.each(json.feed.entry, function() {
        $('<img />')
          .attr('src', this.media$group.media$thumbnail[0].url)
          .appendTo('#videos');
      });
    });
    $(window).adjustHeight();
    return false;
  });
});
</script>
]]></Content>
</Module>

ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして Search ボタンをクリックし、サムネイルの数に応じて、ガジェットの高さが自動調整されるのを確認してください。

※ playground.xml に <Require feature="dynamic-height"> を記述すると、jQuery.fn.adjustHeight がロードされます。



Google Gadget Editor で playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example">
<Require feature="dynamic-height" />
</ModulePrefs>
<Content type="html"><![CDATA[
<style>
#videos img { margin: 2px; width: 80px; hegith: 60px; }
</style>
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10 results</option>
<option value="20">20 results</option>
<option value="30">30 results</option>
</select>
<input type="submit" value="Search">
</form>
<div id="videos"></div>
<script src="http://scripts.lrlab.to/opensocial-jquery-1.0.4.min.js"></script>
<script>
jQuery(function($) {
  $(document.form).submit(function() {
    var url = 'http://gdata.youtube.com/feeds/videos';
    var data = { alt: 'json',
      vq: this.q.value,
      'max-results': this.c.value
    };
    $.getJSON(url, data, function(json) {
      $.each(json.feed.entry, function() {
        $('<img />')
          .attr('src', this.media$group.media$thumbnail[0].url)
          .appendTo('#videos');
      });
    });
    $(window).adjustHeight();
    return false;
  });
});
</script>
]]></Content>
</Module>

ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして Search タンをクリックし、CSS が適用されるのを確認してください。

※ playground.xml に CSS を記述すると、そのままガジェットで適用されます。



これでチュートリアルはおしまいです。

これ以降は opensocial-jquery のドキュメント を参照してください。その中で質問や要望が出てきましたら、お気軽にコメントください。