≪ ≪ 最近。。 Sharepointとか、Pukiwikiとか、Blogとか Windows Server World 2009年3月号 ≫ ≫

Windows Vistaのサイドバーに表示されるガジェットがありますよね。

DHTMLDiver(大昔に自作したDOM Inspectorっぽいツール)で、これの構造を解析する事ができる事に気付きました。

手前味噌であれですが、ちょっと面白いので解説します。

DHTMLDiverは、IEエンジンで動作している画面上で右クリックメニューから起動するDOM Inspectorツールです。

(正確には、JavaScriptで辿れるオブジェクトの構造を辿るツールなので、オブジェクトブラウザといった方が近いでしょうか・・・?)

■実行例
  1. ガジェット上で右クリックできる場所を探す。 今回の場合は、テキストボックス内です。 右クリックメニューから、DHTMLDiverをクリックして起動します。 gadget_DomInspector_01
  2. DHTMLDiverが起動したら、[参照]ボタンをクリックしwindowオブジェクトを一覧する。 window.locationが、”x-gadget:///currency.html”となっている点が特徴的ですね。 gadget_DomInspector_02
  3. HTMLタグにあたるオブジェクト(window.document.getElementsByTagName(”HTML”)[0] )を一覧する。 outerHTMLで、ガジェットで使われているHTMLの全体像を把握できます。 gadget_DomInspector_03
  4. [string]ボタンを押すと、outerHTMLの中身が表示されます。 gadget_DomInspector_04

DOMインスペクタっぽい機能の他に、任意のJavaScriptを実行できるexecScriptタブも動作しました。 これらの機能は動作しているガジェット上でのデバッグに、かなり役立つと思いますので、もし興味を持たれたら使ってみてください。

■ダウンロード

■注意点

DHTMLDiver3.3は、WinXP&IE6の組み合わせの頃に作ったツールなので、今回の紹介で利用したVISTA&IE7の組み合わせでは、ちょっと動かない機能があるようです。 そのうち時間ができれば対応したい所です。。

≪ ≪ 最近。。 Sharepointとか、Pukiwikiとか、Blogとか Windows Server World 2009年3月号 ≫ ≫

関連記事

Google Ads

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>