2009-08-14

opensocial-jquery と Google Gadget Editor を使って gooホーム sandbox でガジェットを開発しよう

こんばんは。なかじまんです。

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

opensocial-jquery は jQuery を使って WEB サイトを開発する手法を OpenSocial のガジェットにも持ち込もうという目的ではじめたものです。

ですので、このチュートリアルは、日々 jQuery を使って WEB サイトを開発しているがOpenSocial 環境でガジェットを開発したことがないとか、開発しようとしたが新しいことを覚えるのに抵抗を感じているという方々に体験して貰いたいものです。

まずは OpenSocial のガジェットは特別なもの... という感覚をリセットして、jQuery を使って WEB サイトを開発した経験を opensocial-jquery によって OpenSocial のガジェット開発にも再活用できないか...という視点で再確認してはどうかと提案します。その中で新しい発見があればうれしい限りです。

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

はじめに 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>
</Module>
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 を記述すると、そのままガジェットで適用されます。



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

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

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)