GoogleのWEBガジェットを試してみた

GoogleのWeb用ガジェットを試してみた。これが出来ると、Googleパーソナルページにそのモジュールを表示することも出来るし、JavaScriptが動くサイトであれば、Google以外の外部サイトにも表示することが出来る。

とりあえずサンプルページを作成して外部サイトでも表示できるようにGoogleに登録するまで。超お手軽です。

  • まず、Googleのアカウント(Gmailとかのアカウント)を取得。
  • Google(http://www.google.co.jp)にアクセスして、画面右上にあるログインをクリックし、ID/PW入力してログイン
  • 画面右上にあるパーソナライズドホームをクリック
  • コンテンツを追加をクリック(たくさんのガジェットが現れるので気に入ったものがあれば今すぐ追加ボタンを押す)
  • 上段にある検索欄のホームページコンテンツの検索ボタンの右にある、URLを指定して追加をクリック
  • デベロッパーモジュールのURL(http://www.google.com/ig/modules/developer.xml)を入力し、モジュールを追加
  • 外部から参照可能な場所に(自分のホームページスペースなど)、下記のサンプルXMLを設置(ファイルの保存はUTF-8とする) 注意:title_url,height,author,author_emailは自分の環境によって適宜書き換える。
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="sample1"
title_url="http://hoge.org/gadget/hello.xml"     
height="200" 
author="hoge" 
author_email="hoge@hoge.com"/> 
<Content type="html">
<![CDATA[hello hoge
]]>
</Content>
</Module>
  • 実際の設置したURLにアクセスし、XMLとして正常に表示されるか確認
  • 先ほど追加したデベロッパーモジュール(GoogleパーソナライページのTOPに表示されているはず)の、Add a gadget:という欄に設置したURLを入れてAddボタンを押す。するとhello hogeと書かれたガジェットが表示されるはず
  • 外部のホームページから追加したガジェットを利用するためにGoogleに自分のガジェットを登録する(http://www.google.com/ig/submit)
  • Gadget URLに設置したURLを入れて、sendボタンを押す(Warning: No screenshot field detectedと赤字で表示されるがこれは問題なし)
  • 中断の四角で囲まれた欄にCongratulations.と表示されればOK
  • Did you know you can put your gadget on your webpage? Click hereという表示のhereをクリック
  • コードを取得ボタンを押すとJavaScriptが表示されるので、それをコピーして自分のHTMLやブログに貼り付ければOK(ガジェットの枠を変えたければ、枠線の選択肢から色々と選べるので、選んでプレビューの切り替えをして、良ければコード取得ボタンを押してJavaScriptをコピーすればよい))

これを改良していくと、外部のHTMLを読み込んで表示も出来るし、JavaScriptで書いたものをそのまま実行も出来る。外部のHTMLをCGIにすれば、実際の表示ロジックをPerlなどで実装可能。動的に表示を変える場合はAjaxとかと組みあせればOK。