最近ガジェットの種類も増えて、ますます便利になってきた iGoogle 。実は JavaScript 開発にもけっこう使えます。 Google Gadget Editor と適当なリファレンス検索系のガジェットなどを組み合わせれば、ちょっとした JavaScript 統合開発環境に早変わり。 iGoogle ガジェットなら任意サーバーへの GET リクエストなども可能で、ちょっとした実験に最適です。

そんな便利な Google Gadget Editor ですが、欠点もあります。簡単な JavaScript を実行するだけでも iGoogle ガジェットを作らなければいけませんし、なんといっても Opera で動きません（´Д｀； というわけで、ブラウザに依存せず、 iGoogle ガジェット以外の開発にも便利な JavaScript Console ガジェットを作ってみました。すぐ下に貼り付けてあるので触っていただいたほうが早いのですが、主な特徴を挙げると・・・

• iGoogle 上で JavaScript の実行が可能。
• JavaScript の実行結果（≒最後に評価した式の値）の表示。
• エラー（例外）が発生した場合、その情報を表示。
• 結果表示とは別のログ表示。
• 入力したスクリプトや HTML から iGoogle ガジェットを生成。
• HTML/URL エスケープやブックマークレットの生成。
• Flash の Shared Object を使い、入力テキストを保存（デフォルトでは無効になっています）。
• インラインバージョンを使えば、 iGoogle のページ本体を操作できる。

というところでしょうか。便利そうな機能を片っ端から実装してみた感じです（＾＾ゞ。実はだいぶ前から個人的に使っていたのですが、 iGoogle ガジェットコンテストに応募するために全書き直ししまして、ついでに記事にしてみました。けっこう実用的になったと思いますので、皆さんぜひお試しください。

さっそくですが、↓がそのガジェットです。

iGoogle ページに追加するには、ガジェット左下の Google ボタンをクリックしてください。横幅が狭いと使いづらいので、レイアウトを 1 ～ 2 カラムに変更することをお勧めします。レイアウトの変更は、 iGoogle 本体のタブのメニューで「このタブを編集」を選択することで行えます。

とりあえず、上側のテキストボックスに適当な JavaScript （ "1+2;" とか ＾＾；）を入力して、「スクリプトを実行」ボタンを押してみてください。下側の「出力」タブ内にスクリプトの実行結果が表示されるはずです。こんな感じで、簡単に JavaScript を実行することができます。

JavaScript Console ガジェットには、単純な JavaScript の実行以外にもさまざまな機能があります。調子に乗ってけっこう詰め込んでしまったので、以下、順番にご紹介していきます。

上側のテキストボックスです。単純な TEXTAREA なので特別な機能はありませんが、タブを切り替えることで 5 つまでの独立したテキストを入力できます。フォントサイズや表示行数は設定で変更可能です。

標準では、ページをリロードすると入力したテキストは消えてしまいますが、 Flash の Shared Object に自動保存することも可能です。ただし、いくつか注意点がありますので、後述の「Flash Shared Object への保存について」を参照してください。

ボタンをクリックすると、テキストエディタの内容を JavaScript として実行します。標準の JavaScript 関数のほか、 iGoogle ガジェット特有の関数も呼び出せます。ほとんどの機能別ライブラリも有効になっています。

注意点として、スクリプトはローカルスコープで実行されるので、普通の方法ではグローバルな変数・関数を定義できません。以下のように window オブジェクトのプロパティーに直接代入してください。

window.foo = function() {
  //...
}

この方法で定義した関数は、以下の「HTML を表示」ボタンで生成した HTML 要素のイベントハンドラから呼び出すこともできます。グローバルスコープでスクリプトを実行する方法もあるのですが、いくつか問題があって悩み中です。う～む。

ボタンをクリックすると、テキストエディタの内容を「HTML」タブ内に innerHTML で挿入します。任意のタグが使えますが、 SCRIPT タグは innerHTML のセキュリティー制限により機能しません。「スクリプトを実行」ボタンを使用してください。なお、上記のとおり HTML のイベントハンドラ（onclick など）は通常どおり機能します。

「スクリプトを実行」ボタンでスクリプトを実行した際に、その実行結果（≒最後に評価された式の値）が表示されます。もしスクリプトでエラーが発生した場合は、エラーの内容が表示されます。Opera ではけっこう詳しいスタックトレースが表示されるのですが、他のブラウザでは簡素なメッセージしか表示されません。もっと詳しい情報を表示する方法をご存知の方がおられましたら、ぜひご教示くださいませ。

「スクリプトを実行」ボタンで以下のようなコードを実行することで、「ログ」タブに文字列を追加することができます。

jsconsole.log('文字列');

改行は自動では挿入されないので、改行したい位置に明示的に "\n" を含めてください。

「HTML を表示」ボタンをクリックすると、このタブの中に HTML が表示されます。えーと．．．それだけです（＾＾；

テキストエディタの内容から iGoogle ガジェットを生成します。「設定」タブでタイトル・表示サイズやテキストエディタのどのタブの内容を使うかといったことを指定し、「ガジェットを生成」ボタンをクリックすると、「プレビュー」タブ内に iGoogle ガジェットが表示されます。「ソース」タブにはガジェットのソースが表示されますので、これをコピペして Web に公開すれば単体の iGoogle ガジェットとして使えます（現在のところ、だいぶ冗長ですが・・・＾＾；）。

設定のうち、「タイトル」「幅」「高さ」は自明でしょう。これらは空欄でもかまいません。「HTML」と「スクリプト」はそれぞれガジェットの内容となる HTML 、スクリプトをどのタブから取得するかを指定します。「HTML」で指定したタブの内容はガジェット内にそのまま挿入され、「スクリプト」の内容は SCRIPT タグで囲んで挿入されます。ただし、ガジェットでは HTML 内の SCRIPT タグも機能しますので、スクリプトは必須ではありません。

言葉だけではちょっとわかりにくいので、実際にやってみましょう。まずテキストエディタの「1」タブに以下の内容を入力し、「HTML を表示」ボタンをクリックしてください。

<div id="time"></div>

そして、今度は「2」タブに以下を入力し、「スクリプトを実行」ボタンをクリックしてください。

setInterval(function() {
  _gel('time').innerHTML = _hesc(String(new Date()));
}, 1000);

この状態で「HTML」タブを表示すると、現在の日付・時刻が表示されているはずです。それでは次に、「ガジェット」タブの「設定」で以下の各パラメータを以下のように設定してください。

設定したら「ガジェットを生成」ボタンを押し、「プレビュー」タブに切り替えてみてください。破線の枠内が iGoogle ガジェットになっており、その中に現在時刻が表示されているはずです。「ソース」タブでガジェットの XML ソースが取得できますので、これをそのまま Web に公開すれば、 iGoogle にも追加できる完全な iGoogle ガジェットになります。

現在はガジェットの細かい設定が指定できませんが、暇をみて追加していくつもりです。追加してほしい項目などをお知らせいただければ、優先的に実装したいと思います。

Web 開発の際に便利な小物ツールをいくつか実装しています。ドロップダウンで実行したい機能を選択し、「実行」ボタンをクリックしてください。現在のところ、以下の機能が使えます。

HTML Escape

テキストエディタの内容に HTML エスケープをかけます。

HTML Unescape

テキストエディタの内容の HTML エスケープを解除します。

URL Escape

テキストエディタの内容に URL エスケープをかけます。

URL Unescape

テキストエディタの内容の URL エスケープを解除します。

Bookmarkletize

テキストエディタの内容を JavaScript と考えてブックマークレット化します。実行すると、「ツール」タブ内にブックマークレット化した結果のリンクとソースが表示されます。改行はすべて削除されるので、ステートメント末尾のセミコロンが省略されているとブックマークレットが動作しません。ご注意ください。

このほかにも便利機能のアイディアなどありましたら、どしどしお寄せください。

JavaScript Console ガジェットを iGoogle に追加して、タイトルバーのメニューから「設定を編集」を選択すると、以下の項目がカスタマイズできます。

テキストを保存（要 Flash）

このオプションにチェックを入れると、テキストエディタの内容を Flash の Shared Object に自動保存します。保存されるタイミングは、主にフォーカスがテキストエディタから外れて 3 秒後です。その他、詳細は「Flash による自動保存について」をご参照ください。

フォントサイズ

テキストエディタ、「出力」タブ、「ログ」タブなどに使われるフォントのサイズを指定します（ピクセル単位）。

テキストの行数

テキストエディタの表示行数を指定します（行単位）。

出力の最大行数

「出力」タブの最大表示行数を指定します（行単位）。出力の行数がこれを超える場合はスクロールバーが表示されます。ただし、 IE ではこの設定は機能せず、常にすべての出力内容が表示されます（早く max-height をサポートしてください・・・）。

ログの行数

ログの表示行数を指定します（行単位）。

ガジェットの高さの最大値

ガジェットプレビューの縦方向の最大サイズを指定します（ピクセル単位）。ガジェットの高さがこれを超える場合、スクロールバーが表示されます。

ユーザー定義値 1 ～ 4

スクリプト内で自由に使用できる設定値です。 'u1' ～ 'u4' の設定名でアクセスできます。

う～む、かなり混沌としてますね・・・（＾＾ゞ。そのうち整理します。

この機能は近日中に削除予定です。 sandbox では暫定措置として、 Flash の代わりに AppData を使って保存しています。

前述のとおり、設定で「テキストを保存（要 Flash）」を有効にすることで、テキストエディタに入力したテキストが自動保存されるようになります。この機能は Flash の Shared Object を使って実現されており、以下のページで細かい設定変更などが行えます。

http://www.macromedia.com/.../settings_manager07.html

この Shared Object を使ったのは正直、苦肉の策なので、以下のような制限があります。

• データはローカルディスクに保存されるので、別のマシンからはアクセスできません。
• デフォルトでは総サイズが 100Kbyte に制限されており、これを超えるとエラーになります。上記の設定ページでこの制限を緩和できます。
• 保存データは Same Origin ポリシーにより保護されますので、ガジェットが存在するうちは他のガジェットなどからアクセスされる心配はないはずです。しかし、ガジェットを iGoogle ページから削除するとドメインが使いまわされる可能性があるので、上記の設定ページで手動でデータを削除してください。まあ、基本的にこの保存機能はあくまでテンポラリーと考え、用がなくなったらテキストエディタの内容を消す癖をつけるのが無難かと思います。
• 上記と同様の理由により、 Web ページに埋め込む場合はテキストの保存を有効にしないでください。
• 後述のインラインバージョンでは機能しません（オプション自体がありません）。

本来なら iGoogle の標準のユーザー設定を使いたいところなのですが、あれは URL 経由で渡されるので長い文字列を保持できないんですよね・・・ orz 。なにかいい方法はないものか。

iGoogle 自体がインラインガジェットのサポートを停止したので、 JavaScript Console のインラインバージョンも動作しなくなりました。

ガジェットの最下行にもリンクがありますが、 JavaScript Console ガジェットには通常バージョン（IFRAME バージョン）のほかにインラインバージョンも存在します。機能はほとんど同じですが、インラインバージョンは iGoogle ページ本体に埋め込まれるため、 iGoogle ページ本体（ヘッダ、フッタなど、ガジェットの外側の部分）にアクセスすることができます。 iGoogle ページ本体をカスタマイズするようなガジェットの実験に便利ですので、併せてご活用ください。

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

WebOS Goodiesに参加

メール アドレス:

このグループにアクセス

以上、本日は iGoogle 上で動く JavaScript Console ガジェットをご紹介しました。単体で使ってもけっこう便利だと思いますが、そこはそれ、 iGoogle の特長を生かして他のガジェットと組み合わせるとさらに強力です。例えば、リファレンスとして QuickRef.org ガジェットなんかお勧めですね。頻繁に使うなら Google Desktop でデスクトップ上に置いておくのも良いでしょう。 JavaScript 開発のお供として、ぜひご活用ください！