今さらながらWindows7でガジェットを作ってみた
※pgカテゴリはプログラミング系のお話なので興味がない方はスルーしてください。
システム開発を行う場合、クライアント端末(要はPC)の環境というのは顧客に依存します。顧客が使用している環境で動くように実装されます。逆に言えば、Webで展開するサービスなんかとは異なり、クライアント端末を固定できるため、「どんな環境(OS、ブラウザなど)でも動く」作りにする必要はなくなります。
そうやって作ると、今度は顧客がPC環境を入れ替えよう(OSを新しくしたりブラウザを他のものに変えたり)と思ったときにシステム側の対応が必要になるため、そうそう新製品が出るたびに入れ替えられるようなことはありません。いまだにXPが現役で使われ続け、Microsoftもしぶしぶ(?)サポートを延長しているというような状況が生まれるわけです。なのでそのシステムを作る側も同じ環境で作ることになるわけです。
前置きが長くなりましたが、とは言えさすがにここ最近の案件ではWindows7をクライアントPCに指定されることが多くなってきました。開発にも7を使って行います。Vistaは完全にすっ飛びました。
開発作業をしているとちょっとした作業をbatファイルでスクリプト化し、デスクトップに置いといて使うというようなことがよくあります。リポジトリの最新化とか、FTPでのファイルアップロードとか、TeraTermマクロとか。別に気になるわけでもないのですが、せっかくWindows7になったのでガジェットにしてしまえってことで作ってみました。
凝ったことをやろうとすると分かりませんが、HTML+JavaScriptでできてしまうので本当に簡単。
ざっくりと下に書いてみます。詳細はMSDNをご参照あれ。
Windows Sidebar | Microsoft Docs
gadget.xmlの作成
自作ガジェットは以下のいずれかのフォルダ配下に、○○(任意の名前).gadgetというフォルダを作成し、その配下にファイルを置きます。
- C:\Users\(user)\AppData\Local\Microsoft\Windows Sidebar\Gadgets
- C:\Program Files\Windows Sidebar\Shared Gadgets
- C:\Program Files\Windows Sidebar\Gadgets
まず必要になるのがマニフェストファイル「gadget.xml」。ガジェットの基本的な情報を記載します。以下のような感じでUTF-8で作成します。
<?xml version="1.0" encoding="utf-8" ?> <gadget> <name>Sample</name> <version>1.0.0.0</version> <author name="nobrooklyn" /> <copyright>(C) 2011</copyright> <description>サンプルガジェットです</description> <hosts> <host name="sidebar"> <base type="HTML" apiVersion="1.0.0" src="main.html" /> <permissions>Full</permissions> <platform minPlatformVersion="1.0" /> </host> </hosts> </gadget>
他にも、アイコンファイルの指定などもできますので詳しくはMSDNをご参照あれ。
ここでbaseの中で指定されているHTMLがガジェットとして読み込まれるHTMLファイルです。
System.Gadgetオブジェクト
HTMLはいわゆる普通のHTMLで、JavaScriptやCSSも普通に使えます。ただし、ガジェット専用のタグやオブジェクトが存在します。
どうやら背景を指定するにはg:backgroundタグを使うのが一般的のようです。
JavaScriptで使用できるSystem.Gadgetオブジェクトを使用することで色々なことができます。
サンプルのHTMLを。
<html> <head> <style type="text/css"> body { width: 130px; height: 130px; } div { font-size: 12pt; text-align: center; } </style> <script type="text/jscript"> <!-- function init() { System.Gadget.Flyout.file = "flyout.html"; } function showFlyout() { System.Gadget.Flyout.show = true; } function openHtml() { System.Shell.execute('notepad.exe', System.Gadget.path + '\\main.html'); } //--> </script> </head> <body onLoad="init()"> <g:background> <div onclick="showFlyout();">クリック</div> <form><input type="button" onclick="openHtml();" value="HTMLを開く" /></form> </g:backround> </body> </html>
System.Gadget.Flyoutで、ガジェットをクリックした時に吹き出しのような感じで表示されるページを指定することができます。
ボタンでHTMLを開くの自体は対して意味がないけれど、System.Shell.Executeでコマンドを実行できたり、System.Gadget.pathでガジェットの配置されているフォルダパスを取得できたりします。
なので、batやVBSやなんかのスクリプトや、マクロなんかを置いておいて実行することもできます。
デスクトップにあっても対して違わないけれど、配置したガジェットを右クリックして不透明度を下げて半透明するとちょっとカッコいいとかそんな程度の満足感は得られます。