Vistaガジェットへの変換
最後にVistaガジェットに変換するのですが、この作業は今までで最も簡単です。同じフォルダに「Gadget.xml」という名のファイルを作ってメモ帳で開き、次のコードを貼り付けます。
<?xml version="1.0" encoding="utf-8" ?> <gadget> <name>Guitar Tuner</name> <namespace>GuitarTuner</namespace> <version>1.0</version> <author name="[Your Name here]"> </author> <copyright>2007</copyright> <description>Guitar Tuner for tuning by ear</description> <icons> </icons> <hosts> <host name="sidebar"> <base type="HTML" apiVersion="1.0.0" src="GuitarTuner.html" /> <permissions>full</permissions> <platform minPlatformVersion="0.3" /> </host> </hosts> </gadget>
「名前を付けて保存」で保存し、エンコーディング方式としてUTF-8を選択します。これは重要です。こうしないと、正しいガジェットとして認識されません。ガジェットへの変換作業はこれで終わりです。ブラウザを管理しそこでガジェットを動かすというのが、ガジェットのフレームワークだからです。HTMLページで動けば、ガジェットの中でも十分動くのです。
ここで必要な作業は、ガジェット開発ガイドラインに準拠させ、外観を整え、正常に動作させることだけです。まず、「Vista gadget UI guidelines」に目を通します。
ガイドラインの中で、次の4点については既に準拠しているはずです。
- 機能はいつでも使えるようにすること - この点については、チューナーガジェットは問題ないでしょう。インストールすれば使えますから。
- 主機能以外にも気を配ること - この点については、あとで考えます。しかし、不要なときに利用者を悩ませることはありませんから（調弦を終えたあとにメディアとアニメーションを止めることができます）、方向性としては間違っていません。
- 機能は1つに絞り明確に規定すること - この点についても、問題はありません。目的は調弦の道具であり、その通りの機能を持ち、余計な飾りはありません。
- 目的に相応しい外観にすること - この点についても、問題はありません。ギターのボディーと弦の形をしていますから。
したがって、問題はガジェットを格納したときの大きさを小さくすることだけです。そこで、次のように、GuitarTuner.HTMLでボディー要素の大きさを指定します。
<head> <title>Guitar Tuner</title> <style> body { width: 130px; height: 130px; margin: 0px; font-size:11px; font:10px segoe ui,tahoma; } </style> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript" src="guitartuner.js"></script> </head>
これで、ガジェットのガイドラインに準拠できました。
Vistaでガジェットを使っている方ならご存じでしょうが、ガジェットはサイドバーに格納した状態でもサイドバーから出した状態でも使うことができます。Microsoftのガイドラインでは、格納したガジェットの大きさとして130ピクセル×130ピクセル、出したときの大きさは少し制限が緩くなり400ピクセル×400ピクセルが推奨されています。
130ピクセル×130ピクセルというのはかなり窮屈です。この大きさでは6本の弦を入れるのが精一杯です。しかし、400ピクセル×400ピクセルの矩形では、もう少し工夫ができます。ガジェットの開発者に推奨されていることの1つに見栄えのよさがあります。そこで、サイドバーから出ているときはギターのボディーを曲線的な形にしてみましょう。
それでは、サイドバーに格納されているのかサイドバーの外にあるのかをどのようにすれば知ることができるでしょうか。実は、ハンドラを登録するだけでこれらのイベントを捕捉できる機能が、VistaガジェットAPIに用意されています。イベントの通知を登録し、ハンドラの中で必要な処理を行います。つまり、ボディーがロードされたときにこれらのハンドラを登録し、そのハンドラの中で格納状態に応じてボディーの大きさを130から400に変更するのです。そのコードは下に示したようになりますが、説明は不要でしょう。
「GuitarTuner.HTML」を、次のように変更します。
<script type="text/javascript" src="guitartuner.js"></script> </head> <script type="text/javascript"> function loadMain() { //register for the events and pass in our handler System.Gadget.onDock = dockStateChanged; System.Gadget.onUndock = dockStateChanged; } function dockStateChanged() { //change size depending on state if(System.Gadget.docked) { document.body.style.width = "130px"; document.body.style.height = "130px"; } else { document.body.style.width = "400px"; document.body.style.height = "290px"; } } </script> <body onload="loadMain()"> <div id="SilverLightControlHost">
これで、ガジェットをサイドバーから出すと大きくなります。次に、このガジェット用にギターのボディーを作る必要があります。ここでは、背景画像を利用することにしましょう。サンプルの「media.zip」ファイルには、背景画像「BKGND.png」が含まれています。そこで、HTMLのスタイルを次のように変更します。
<style>
body
{
width: 130px;
height: 130px;
margin: 0px;
font-size:11px;
font:10px segoe ui,tahoma;
background-image:url(bkgnd.png);background-repeat:no-repeat;
}
</style>
そして、「guitarTuner.js」ファイルを開き、次のように背景色を白に変更します。
inplaceInstallPrompt:false, // Determines whether to display // in-place install prompt if // invalid version detected. background:'#00000000', // Background color of plugin. isWindowless:'true', // Determines whether to display plugin
この時点でHTMLを起動すると、次のようになるはずです。
位置がずれてしまいました。背景画像を少し左上にずらす必要があります。そこで、ボディーのスタイルを次のように調整します。
background-image:url(bkgnd.png); background-position: -80px -70px; background-repeat:none;
このように変更すると別の問題が発生します。格納状態では確かに背景画像をこのように移動する必要があり、こうすれば弦などの要素はボディーに対して正しい位置になります。
一方、サイドバーから出した状態では、逆に、背景画像の左上をボディーの左上に合わせなければなりません。つまり、背景画像の位置を(0, 0)にする必要があるのです。しかし、背景画像は移動させたのですから、この場合は弦などの要素の方を移動しなければなりません。すべての要素を移動するのは大変なことです。簡単な方法はないのでしょうか。もちろんあります。キャンバスについて説明したことを思い出してください。キャンバスを別のキャンバスに含めることができるとお話ししましたね。これを利用するのです。すべての要素を1つのキャンバスに入れ、そのキャンバスをルートキャンバスの中に入れれば、子キャンバスを動かすだけでそこに含まれているすべての要素が自動的に動きます。
次に示すコードは、この方法を組み込んだものです。
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/ presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="400" Width="290" > <Canvas x:Name="MainDrawing" Canvas.Left="0" Canvas.Top="0" Height="130" Width="130" > <MediaElement x:Name="sound" Width="0" Height="0" MediaEnded="endofmedia"/> ..... </Canvas> </Canvas>
次に、dockstatechangedハンドラの中で、これらの要素を動かします。
function dockStateChanged() { if(System.Gadget.docked) { document.body.style.width = "130px"; document.body.style.height = "130px"; document.body.style.backgroundPosition = "-80px -70px"; document.getElementById("guitarTunerControl").content. findName("MainDrawing")["Canvas.Left"]="0"; document.getElementById("guitarTunerControl").content. findName("MainDrawing")["Canvas.Top"]="-10"; } else { document.body.style.width = "400px"; document.body.style.height = "290px"; document.body.style.backgroundPosition = "0px 0px"; document.getElementById("guitarTunerControl").content. findName("MainDrawing")["Canvas.Left"]="80"; document.getElementById("guitarTunerControl").content. findName("MainDrawing")["Canvas.Top"]="70"; } } </script>
これで完成です。あとはこのガジェットをインストールするだけです。次の方法が最も簡単でしょう。まず、フォルダにあるファイルをすべて（media.zipファイルを除く）選択し（Ctrl+Aを押します）、右クリックして［送る］→［圧縮（zip形式）フォルダ］を選択し、GuitarTunerフォルダのコンテンツを圧縮します（コンテンツだけを圧縮します。フォルダ自体を圧縮しないでください）。そして、そのzipファイルの拡張子を変更し、たとえば「GuitarTuner.gadget」とします。次に、Vistaマシン上で「GuitarTuner.gadget」ファイルをダブルクリックします。確認メッセージに応答すると、ガジェットが表示され使えるようになるはずです。格納されているガジェットをサイドバーから出してみてください。いかがですか？
