iGoogle ガジェットコンテストでインプレスR&D賞をいただいた JavaScript Console ガジェットを久しぶりにアップデートしました。追加機能はとくにありませんが、次世代 iGoogle でも正しく動作するようになっています。

で、そのついでに iGoogle ガジェットのプレビュー機能を汎用的なクラスとしてライブラリ化してみました。このライブラリを使うと、 JavaScript Console や Google 純正の Google Gadget Editor と同様に on-the-fly で iGoogle ガジェットを生成し、表示できます。自分なりの iGoogle ガジェット開発環境の構築などに、ぜひご活用ください。

※ このライブラリは非公開の API (?) を使ってプレビューを表示しています。 Google が突然仕様を変更して動作しなくなることも考えられますので、その点をご了承の上、ご利用ください。

上の説明だけではどういうものかわからないと思いますので、実際に動作するライブデモを用意しました。ページの文字コードが UTF-8 でないと動作しないので、 IFRAME で挿入しています（＾＾；

テキストボックスに iGoogle ガジェットのソースを入力して「ガジェットを表示」ボタンをクリックすると、その場でガジェットが生成され、テキストボックスの下に表示されます。テキストボックスには例として @nifty 翻訳ガジェットが入力されていますので、適当に変更してオリジナルのガジェットを生成してみてください。ソースコードをファイルに保存することなく、直接ガジェットに変換できているのがおわかりいただけるかと思います。

このデモのソースは概ね以下のようになっています（タグの属性などは省略しています）。

<textarea id="source"></textarea><br>
<input type="button" value="ガジェットを表示"
       onclick="preview.update(document.getElementById('source').value);">
<div id="gadgetDiv">ここにガジェットが表示されます</div>
 
<script type="text/javascript">
var preview = new GadgetPreview('gadgetDiv', { border:true });
</script>

ほとんどはテキストボックスなどの UI を準備するコードで、 JavaScript は実質 1 行 + イベントハンドラだけです。ここではテキストボックスにソースを入力していますが、もちろん JavaScript でプログラム的に生成したものでもかまいません。その気になれば、ビジュアルな iGoogle ガジェット構築ツールなんてのも作れるかもしれませんね。

ライブラリのソースは、いつもどおりcodeなにがしに投稿してあります。

このソースをファイルに保存して読み込むか、直接 HTML に埋め込んで使ってください。

gadgetpreview.js の機能は、すべて GadgetPreview クラスにまとめられています。コンストラクタの書式は以下のとおりです。

GadgetPreview(DIVのID, [オプション])

DIVのIDには DIV 要素の ID を指定してください。ここで指定した DIV 要素の中に動的に IFRAME を生成し、ガジェットを表示します。オプションに指定できる値は後述します。

基本的には、上記のコンストラクタで GadgetPreview クラスのインスタンスを作成し、その update メソッドにガジェットのソースコードを渡すだけでガジェットが表示されます。だいたい以下のような感じです。

var gadget = new GadgetPreview('divId');
gadget.update("ガジェットのソースコード");

ガジェットを更新したいときは、新しいソースコードを引数にして再度 update メソッドを呼び出せば OK です。

GadgetPreview のコンストラクタは第 2 引数として省略可能なオブジェクトをとり、以下のメンバを指定できます。

例えば、以下のコードはデフォルトのガジェットサイズを 400x300 にします。

var gadget = new GadgetPreview('divId', { width: 400, height: 300 });

width, height 以外はあまり使わないと思いますが（笑）。

GadgetPreview クラスのメソッドには以下のものがあります。

JavaScript Console ガジェットでは、 getWidth() などを呼び出してガジェットのサイズを取得し、ラッパー DIV のサイズを調整しています。

gadgetpreview.js に関するご意見・バグ報告には、以下の Google グループをご利用ください。 Google アカウントがあれば Web 上から投稿できますし、アカウントがなくてもメールで投稿できます。お気軽にどうぞ。

WebOS Goodiesに参加

メール アドレス:

このグループにアクセス

また、 iGoogle ガジェット開発全般の話題に関しては、 準公式コミュニティーである Google-Gadgets-API-Japan グループへの参加もお勧めします。 iGoogle 関連の情報をいち早くお届けしています。

以上、本日はソースコードから直接 iGoogle ガジェットを生成する JavaScript ライブラリ「gadgetpreview.js」をご紹介しました。これを公開することで、使いやすい iGoogle ガジェット開発ツールがたくさん出てくるといいな、と思っています。ぜひ使ってみてください！