EC studio EC studio 技術ブログ

2007年08月21日投稿者:川村 真史

iGoogle用Googleガジェットの作り方

こんにちは、川村です。

私は現在、横断検索ドットコムの利便性を高めるため
GoogleツールバーやiGoogle、Googleデスクトップと連動した
アプリケーションの開発を担当しています。(近日公開予定です!)

今回はiGoogle用にGoogleガジェットを開発しました。
(iGoogleはGoogleが提供しているマイページ機能です。
自分で好きなパーツを組み込んでスタートページを作成できます)

開発した感想は「非常に簡単で面白かった」ということです。
私自身、ガジェットを開発するのは初めてで、
何の言語で作られているかも知りませんでした。

そんな私でも簡単に作ることができた
Googleガジェットの作り方を紹介します。

はじめに、GoogleガジェットはXMLで作成されています。
また、XMLと言ってもXML部分は
決められたフォーマットに従って記述するだけなので問題ありません。
コンテンツ部分はHTMLとJavascript等で作成するので
ホームページを作る感覚でGoogleガジェットを作成することが出来ます。

以下にHello World

■サンプルソース

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <Module>
  3. <ModulePrefs title="Hello World" />
  4. <Content type="html">
  5. <![CDATA[
  6. <div id="contents">Hello World</div>
  7. ]]>
  8. </Content>
  9. </Module>

■サンプル設置方法

1.ソースコードをコピーしsample.xmlとして適当なサーバへアップ

注)文字コードはUTF-8で保存してください

2.iGoogleトップページから「コンテンツを追加」を選択

3.ページ上部のフォーム右にある「URLを指定して追加」を選択

4.URL欄に先ほどアップしたXMLファイルのURLを入力して「追加」を選択

5.iGoogleトップページにサンプルが表示されているか確認

iGoogleトップページにサンプルが表示されていれば設置完了です。

いかがでしたか?
非常に簡単に作成から設置まで出来ることがお分かりいただけたと思います。

それでは簡単にソースの説明をします。
3行目の

  1. <ModulePrefs title="Hello World" />

は、ガジェット設定部分で、サンプルではタイトルを指定しています。
タイトルの他に height="100 " のように高さを設定することもできます。

5行目から始まる

  1. <![CDATA[
  2.  
  3. ]]>

の中身を好きなように変えれば、自作Googleガジェットが簡単に作成できます。
HTMLとJavascriptを使用することができるので、
アイデア次第で面白いガジェットがたくさん作れると思います。

また、ガジェット作りは自分のアイデアを組み込むことで
どんどん形が変わっていくのが目に見えるので、
作っていてとても面白いです。
興味のある方は是非、ガジェット作りに挑戦してみてはいかがでしょうか。


関連した記事:
投稿者
人気のエントリー
カテゴリー
最近のエントリー
アーカイブ
Copyright© ChatWork, All Rights Reserved. secured by ESET.