Google Gadgetを作ってみよー - 宇宙野武士は元気にしているか

今日は、JavaScript Day! と勝手に決め、前々から気になっていた
Google Gadgetの記事が出ていたので触発された。
ちょっといじってみよ。

はじめに

ふむふむ。
作るのはxmlベース。Contentの中にJavaScriptとHTMLで記述する。
すごくお手軽だ、、、

<?xml version="1.0" encoding="UTF-8"?>
<Module>
    <ModulePrefs title="はろーー"/>
    <Content type="html">
        <![CDATA[
            はろーわーるどーーー
        ]]>
    </Content>
</Module>

その他、基本的なタグを記事より抜粋

Module ･･･ルート要素
ModulePrefs ･･･ガジェットのメタデータを記述
Require ･･･ガジェットが必要とするライブラリ
Locale, MayRequireなどその他のタグ
UserPrefs ･･･ガジェットが必要とするユーザ設定
Content ･･･HTML/JavaScriptなどでガジェットの内容を記述する

続いて、
『Google ガジェット API 開発者向けガイド』のスタートガイドから目を通し始める

開発環境設定

Google Gadget Editorをつかう。
設定は簡単。以下からガジェットを自分のiGoogleに追加するだけ。
http://www.google.co.jp/ig/directory?q=gadget+editor&root=%2Fig&dpos=top&url=www.google.com/ig/modules/gge.xml

このガジェットだけのタブを用意して、タブの編集で、レイアウトを1列にすると使いやすい。
あ〜〜！！！iGoogleが定期リロードして、途中まで書いたソースが消えた〜〜〜。
このリロードをとめる方法はないのか〜？？
まめにSaveするしかないかな、、、、

冒険の書が消えた気分だ、、、、orz

面倒だけど、Editorで書く＞貼ってプレビューでやる。

いじってみる

開発環境が整ったところで作ってみる。

まずは、JavaScriptを使ってみる。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
    <ModulePrefs title="JavaScript Test" />
        <Content type="html">
        <![CDATA[
            <script type="text/javascript">
                function alertHoge(){  alert("hoge");}
            </script>
            <input type="button" value="hoge" onClick="alertHoge();"></input>
        ]]>
    </Content>
</Module>

さくっと書いたのが、プレビューで確認できる。
お手軽すぎてすげーーー。

APIを利用して、自分の日記のタイトルを取得してみた。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
    <ModulePrefs title="RSS Fetcher" />
        <Content type="html">
            <![CDATA[
                <script type="text/javascript">
                    window.onload = function (){
                        var url = 'http://d.hatena.ne.jp/daisun/rss/';
                        _IG_FetchXmlContent(url, function(response){
                            var items = response.getElementsByTagName('item');
                            var rss = "<ul>";
                            for(var i = 0; i < items.length; i++){
                                rss += "<li>" + items[i].childNodes[0].text + "</li>";
                            }
                            rss += "</ul>";
                            document.getElementById("rss").innerHTML = rss;
                         });
                    };
                </script>
                <div id="rss" style="font-size:12px;"></div>
            ]]>
        </Content>
</Module>

変なボンミスで時間かかった、、、

リンクにしてタイトルも付けてみる

<?xml version="1.0" encoding="UTF-8"?>
<Module>
    <ModulePrefs title="RSS Fetcher" />
        <Content type="html">
            <![CDATA[
                <script type="text/javascript">
                    window.onload = function (){
                        var url = 'http://d.hatena.ne.jp/daisun/rss/';
                        _IG_FetchXmlContent(url, function(response){
                            var items = response.getElementsByTagName('item');
                            var rss = '<h3>' + response.getElementsByTagName('title')[0].text + '</h3>';
                            rss += '<ul>';
                            for(var i = 0; i < items.length; i++){
                                rss += '<li>';
                                rss += '<a href="' + items[i].childNodes[1].text + '" target="_blank">';
                                rss += items[i].childNodes[0].text;
                                rss +='</a></li>';
                            }
                            rss += '</ul>';
                            document.getElementById('rss').innerHTML = rss;
                         });
                    };
                </script>
                <div id="rss" style="font-size:12px;"></div>
            ]]>
        </Content>
</Module>

このgetElementByTagName()とかでのとってき方や、ループでHTMLタグはさみながら文字列を組み立てるって
やり方は、スマートなのだろうか、、、、

idを指定して取ってくるようにした。

で、できたのがこれ。

う〜ん、、、、