皆さんはブラウザのスタートページを何にしていますか？
私は以前MyYahoo!を使っていましたが、最近はiGoogleを利用しています。
iGoogleは「ガジェット」と呼ばれるブラウザ上で動作するミニアプリケーションをWebページ上に配置し、自分好みのページに仕立て上げることができます。
また、作成したガジェットは、以下のように簡単にブログに貼付けることができます。
今回はそのガジェットの作り方を書いていきます。
まずは環境を整えましょう。
iGoogle上に、GGE（Google Gadget Editor）と呼ばれるガジェット開発用ガジェットを登録します。
ここのページ下部の、「To add GGE to your iGoogle page, click here:」下部のボタンを押せば完了です。
おおお、追加されました。ただし、iGoogle上のガジェットは領域が狭いので好みに応じて使い分けましょう。
追加されたGGEを見ると、Hello Worldサンプルコードが登録されています。Previewタブをクリックするときちんと表示されるのが分かりますね。
Editorタブに戻ってソースを見ると、シンプルなXMLで記述されています。基本は下記のCDATA部分に処理を記述していきます。
<Content type="html"><![CDATA[
** ここにHTMLとCSSとJavascriptを記述する **
]]></Content>
では簡単なガジェットを作ってみましょう。自分のはてなブックマークの最新5件を表示することにします。
下記のソースをeditor部分にコピペしてみてください。
ソース中の*****部分はご自分のものにするのをお忘れなく。
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs
title="マイハテブ"
author="***** 自分の名前 *****"
author_email="***** メールアドレス *****" />
<Content type="html">
<![CDATA[
<style> #content_div { font-size: 90%; margin: 5px; background-color: #FFFFBF;} </style>
<div id=content_div></div>
<script type="text/javascript">
// _IG_で始まる関数がGoogleガジェットAPIです。
_IG_FetchFeedAsJSON("***** ここに自分のはてブRSS *****",
function(feed) {
if (feed == null){
alert("There is no data.");
return;
}
// タイトル部分
var html = "<div><b>マイハテブ</b></div>";
// ブックマークリストを作成
if (feed.Entry) {
html += '<ul>';
for (var i = 0; i < feed.Entry.length; i++) {
html += '<li><a href="' + feed.Entry[i].Link + '" target="_blank">'
+ feed.Entry[i].Title + '</a></li>';
}
html += "</ul>";
}
_gel("content_div").innerHTML = html;
// ブックマーク取得件数
}, 5);
</script>
]]>
</Content>
</Module>
Editorに貼付けたら、Previewタブで確認してみましょう。はてなブックマークのRSSから、最新の5件取得されたと思います。うまく取得できない場合は、はてなブックマーク側で、公開設定が「パブリック」になっているかご確認ください。
では、このガジェットをiGoogleに登録してみましょう。
まずはFileプルダウン＞Save asをクリックして、名前を付けて保存します。
次に、Fileプルダウン＞Publish をクリックし、ダイアログから「Add to my iGoogle page」をクリック。
次の画面で「Googleに追加」をクリック。
追加されましたね！（見栄えはよろしくないですが）
思ったより簡単に作ることができました（かなり端折ってますが）。まだGoogleガジェットAPIのほんの一部しか使ってないので、もっと複雑な処理やUIを作ることができそうです。また、作成したガジェットは自分のブログにも簡単に貼付けることができます。
次は、このガジェットでGoogle Open Social APIを使ってみたいと思います。