言語ゲーム

とあるエンジニアが嘘ばかり書く日記

Twitter: @propella
トップ > いまさらながら Google Gadget の作り方。

いまさらながら Google Gadget の作り方。

はてなには iframe を埋め込めないので、せっかく作った Javascript のコンテンツを簡単に見てもらう事が出来ません。しかし裏技(?)として、Google Gadget を経由するという方法があります。この Google Gadget というのをちょっと調べてみました。

Google Gadget とは。

Google Gadget というのは Google のポータルサイト iGoole に小さな部品を付ける仕組みです。作った部品は mixi 等にも貼り付けられるらしい。

Google Gadget の動作原理

ガジェットは Gadgets API に基づいて作られた xml ファイルです。この xml をウェブに公開してiGoogle から ADD GADGET - Add feed or gadget で作った URL を入力するとあなたの iGoogle に登録されます。ガジェットの内容はだいだい普通の HTML で、Gadget API というのを使うとガジェット特有の機能を使うことが出来ます。ガジェットは直接公開した場所から呼び出されるのではなく、一旦 google にキャッシュれます。なので、画像ファイル等ガジェットから参照したい物は絶対パスを指定する必要があります。

ガジェットの作り方は二つあります。簡単なのは Content type="url" として URL で内容を指定する方法で、例えば

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="言語ゲーム" />
  <Content type="url" href="http://d.hatena.ne.jp/propella/" />
</Module>

のようにするとこの日記がガジェットとして表示されます。この方法で既存のウェブページをそのままガジェットとして使えますが、Gadget API を使うことが出来ません。

もう一つは Content type="html" として Content タグの中にページの内容直接書く方法で、次のようにします。

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs title="Frank" /> 
  <Content type="html">
     <![CDATA[ 
       <p>Hello, Frank!</p>
       <img src="http://metatoys.org/pub/frank.png" />
     ]]>
  </Content> 
</Module>

この方法も、だいたい普通の HTML と同じように書けます。注意点は、ガジェットは一度 google にキャッシュされるので、画像などは絶対パスで書く事です。

Gadget API

Content type="html" を選ぶと Gadget API を使うことが出来ます。これでユーザの情報なんかを取得出来ます。 http://code.google.com/intl/ja/apis/gadgets/docs/reference.html に詳しい説明があります。私は OpenSocial jQuery 経由で使いました。

OpenSocial jQuery

私は元々 Javascript を jQuery 用に書いていたので、結構手間がかかりました。というのも、Google Gadget ではコンテンツがキャッシュされる関係上リモートのリソースが読めなくなるからです。ちょっとでも手間を減らすために OpenSocial jQuery を使いました。これは jQuery を改造して Ajax 系の関数などを Gadget API 経由で呼んでくれるライブラリです。ちょっと古いのですんなりとは行きませんでしたが、ナマの Javascript をゴリゴリ書くよりはずいぶん楽でした。という訳で作ったもの。

(Chrome と Safari だけ動作確認)
このワニについては今週中に別の日記で書きたいと思います。

ところで、Google って割りとぱっとしないサービスを簡単に切る印象があります。この Google Gadget も無くなりませんように。。。

参考

日本語の丁寧な解説があります。