2009-08-20

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 のドキュメント を参照してください。その中で質問や要望が出てきましたら、お気軽にコメントください。

3 件のコメント:

匿名 さんのコメント...

jquery-opensocial の開発ありがとうございます!

最近コミットされたバージョンからいきなりformの挙動が変わってしまっています。

今までformのデータは普通にポストできていたのですが、なぜかデータが配列になり、その配列の中に連想配列が入っているようになっています。

jquery-opensocialをgoogle codeのリポジトリに直接リンクを張っているアプリケーション全てでformを用いているものに影響があるみたいです。

jquery-opensocialを古いリポジトリのものに変更したら、治りました。

Unknown さんのコメント...

> 今までformのデータは普通にポストできていたのですが、なぜかデータが配列になり、その配列の中に連想配列が入っているようになっています。

フィードバックありがとうございます。

すみません。状況が把握できずにいます。再現するソースコードがありましたらご提供いただけないでしょうか?

Unknown さんのコメント...

> すみません。状況が把握できずにいます。再現するソースコードがありましたらご提供いただけないでしょうか?

jQuery('form').serialize(); で再現できました。現在 jQuery.param に手を加えていて互換性を気にしていました。

とても助かりました。ありがとうございます。今後も何かありましたらフィードバックよろしくお願いします。