Vistaのサイドバーガジェットの開発とデバッグ方法

ガジェットはgoogleを始め、yahooなど様々なものが存在しますが、私はVistaのサイドバーガジェットが一番好きです。やっぱりOSの一部だけあって、デザインがVistaで使うとごく自然ですし、ショートカットキーも便利だからです。

このVistaのサイドバーガジェットは基本はhtmlとjavascriptが分かれば作成する事が可能です。僕は会社でVistaのサイドバーガジェットを作成してくださいと指令があって、作ってみたのですが、あまりWeb等を探しても開発環境とデバッグ方法などの記述があまり豊富ではありません。
そこで、私が開発していて、学んだ、Vistaのサイドバーガジェットの開発とデバッグ方法をご紹介します。

javascriptとhtmlなので、一応普通のテキストエディタやEclipseなどでも作れますが、デバッグができません。普段私はEclipseを使ってJAVAを開発しているのですが、ガジェットのデバッグには相当参りました。開発にはデバッグができるVisual Studioが絶対オススメです。

このブログでは私が所有しているVisual Studio2005を利用します。

インターネットなどからダウンロードしたガジェットは
C:\Users\"ログイン名"\AppData\Local\Microsoft\Windows Sidebar\Gadgets　の中に展開されています。


自信で開発する場合、このディレクトリ内で作業をします。このディレクトリは隠しフォルダのため、標準では見れませんし、VisualStudioからファイルを開くこともできないです。ので、フォルダオプションで隠しファイルも見れるようにしてから、AppDataの属性を変えて表示されるようにします。

このフォルダを見てみると分かるのですが、アプリケーション名のフォルダの下に、ja-JPフォルダがあってその中に様々なファイルがあります。
細かいフォルダの中身は今回は割愛しますが、C:\Program Files\Windows Sidebar\Gadgets　にデフォルトでインストールされているガジェットがあります。これのフォルダの中身を見てみるとどのような構成になっているのか確認できます。


では、とりあえず、C:\Program Files\Windows Sidebar\Gadgetsにある、Weather.Gadgetこと天気ガジェットを表示してみましょう。まず、このWeather.Gadgetを先ほどのC:\Users\"ログイン名"\AppData\Local\Microsoft\Windows Sidebar\Gadgets　の中にコピーしてください。コピーする前に天気ガジェットは終了しましょう。
コピーが終わったら、天気ガジェットを起動させます。この時、一覧に天気がふたつ出てきます。分からない場合は、両方表示させましょう。デバッグはコピーされた方しか出来ないので問題ないです。

ここまで出来たらVisual Studioを起動します。


ソースを開くにはファイルの開くからWebサイトを選択して、C:\Users\"ログイン名"\AppData\Local\Microsoft\Windows Sidebar\Gadgets\Weather.Gadgetを選択します。これだけで天気ガジェットのソースコードが見れます。
つぎにデバッグですが、メニューのデバッグからプロセスにアタッチを選択すると、プロセスにアタッチと言う画面が表示されます。

選択可能なプロセスにsidebar.exeがありますので、タイトルに天気と表示されている項目をアタッチします。


アタッチできると、jsファイルに普段利用されている通り、ブレークポイントを付けるとそこで止まって変数を見る事もステップ実行も可能になります。
これで随分楽に開発ができるようになると思います。

私は、はっきり言ってhtmlもjavascriptもド素人ですが、会社でサイドバーガジェットを作成しろと指令が出てとりあえずjavascriptの勉強をしました。

java script超初心者の方にはこの書籍をお薦めします。これを週末読んだら理解できました。htmlについても書いてあるので、分かりやすいです。

JavaScriptの絵本

• 作者: アンク
• 出版社/メーカー: 翔泳社
• 発売日: 2007/09/13
• メディア: 大型本

タグ：サイドバーガジェット