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"?>ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そしてSearch ボタンをクリックし、入力内容が alert 表示されるのを確認してください。
<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>
※ 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"?>ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして Search ボタンをクリックし、入力内容にしたがって YouTube から動画を検索し、サムネイルがリスト表示されるのを確認してください。
<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>
※ opensocial-jquery は jQuery の Ajax API をクロスドメイン対応に拡張します。
※ YouTube の動画検索は YouTube Data API を使っています。
Google Gadget Editor で playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。
<?xml version="1.0" encoding="UTF-8"?>ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして Search ボタンをクリックし、サムネイルの数に応じて、ガジェットの高さが自動調整されるのを確認してください。
<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>
※ playground.xml に <Require feature="dynamic-height"> を記述すると、jQuery.fn.adjustHeight がロードされます。
Google Gadget Editor で playgorund.xml を赤字のとおり修正してください。そして File メニューから Save を選択して、ガジェットを保存してください。
<?xml version="1.0" encoding="UTF-8"?>ブラウザの更新ボタンをクリックし、ガジェットをリロードしてください。そして Search タンをクリックし、CSS が適用されるのを確認してください。
<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>
※ playground.xml に CSS を記述すると、そのままガジェットで適用されます。
これでチュートリアルはおしまいです。
これ以降は opensocial-jquery のドキュメント を参照してください。その中で質問や要望が出てきましたら、お気軽にコメントください。
