gooホーム を使った opensocial-jquery のチュートリアルを用意しました。Google と goo のアカウントさえあれば、WEB ブラウザ 1つだけで体験できる構成にしています。

はじめに Google にログインしてください。

次に Google Gadget Editor を開いてください。そして Hello, world! ガジェットが表示されるのを確認してください。

Hello, world! ガジェットを次のとおり修正してください。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example"
  description="hello world example" />
<Content type="html" view="profile,home,canvas"><![CDATA[
Hello, world!
]]></Content>

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

続けて goo ホーム sandbox にログインしてください。そして、ガジェット開発管理へをクリックしてください。

• goo ホーム sandbox のアカウントを持っていないときは ディベロッパー申請 をしてください。数営業日で受理されます。

手元に控えた playground.xml の URL を入力して新規作成ボタンをクリックし、ガジェットを登録してください。

そして、このガジェットを追加ボタンをクリックし、ガジェットをインストールしてください。

ガジェットを追加ボタンをクリックしてください。

このガジェットを見るボタンをクリックしてください。

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

このときのガジェットの URL を手元に控えてください。次のような URL になるはずです。gooID や英数字の部分は各自によって異なります。

http://sandbox.home.goo.ne.jp/gadget/canvas/(gooID)/(英数字)/(英数字)

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

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example"
  description="hello world example" />
<Content type="html" view="profile,home,canvas"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10件</option>
<option value="20">20件</option>
<option value="30">30件</option>
</select>
<input type="submit" value="検索">
</form>
]]></Content>
</Module>

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

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

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

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example"
  description="hello world example">
<Require feature="opensocial-jquery" />
</ModulePrefs>
<Content type="html" view="profile,home,canvas"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10件</option>
<option value="20">20件</option>
<option value="30">30件</option>
</select>
<input type="submit" value="検索">
</form>
<script>
jQuery(function($) {
  $(document.form).submit(function() {
    alert(this.q.value + ' ' + this.c.value);
    return false;
  });
});
</script>
]]></Content>
</Module>

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

• playground.xml に <Require feature="opensocial-jquery"> を記述すると、opensocial-jquery がロードされます。
• playground.xml に JavaScript を記述すると、そのままガジェットで実行されます。

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

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example"
  description="hello world example">
<Require feature="opensocial-jquery" />
</ModulePrefs>
<Content type="html" view="profile,home,canvas"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10件</option>
<option value="20">20件</option>
<option value="30">30件</option>
</select>
<input type="submit" value="検索">
</form>
<div id="videos"></div>
<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>

goo ホーム sandbox に戻り、ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして、検索ボタンをクリックし、入力内容にしたがって 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"
  description="hello world example">
<Require feature="opensocial-jquery" />
<Require feature="dynamic-height" />
</ModulePrefs>
<Content type="html" view="profile,home,canvas"><![CDATA[
<form name="form">
<input type="text" name="q" />
<select name="c" />
<option value="10">10件</option>
<option value="20">20件</option>
<option value="30">30件</option>
</select>
<input type="submit" value="検索">
</form>
<div id="videos"></div>
<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>

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

• 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"
  description="hello world example">
<Require feature="opensocial-jquery" />
</ModulePrefs>
<Content type="html" view="profile,home,canvas"><![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件</option>
<option value="20">20件</option>
<option value="30">30件</option>
</select>
<input type="submit" value="検索">
</form>
<div id="videos"></div>
<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>

goo ホーム sandbox に戻り、ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして、検索ボタンをクリックし、CSS が適用されるのを確認してください。

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

おしまいです。