"ガジェット" タグがついている記事

  • 2008/02/06 20:30

    Googleガジェットを作ってみる

    皆さんはブラウザのスタートページを何にしていますか？　
    私は以前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 *****",
                [...]