ギターチューナーの外観を作る（その1）
基本的な枠組みを準備する
それでは始めましょう。Silverlightプラグインはインストールしてありますか。もしまだなら、ここからダウンロードしてインストールします。もう1つ、SDKはいかがですか。まだなら、ここからダウンロードしてインストールします。
1
「GuitarTuner.gadget」という名前のフォルダを作ります。
2
このフォルダに「Silverlight.js」というファイルをコピーします。このファイルは、[ドライブ名]:\Program Files\Microsoft Silverlight 1.0 SDK\Resourcesにあります。
3
新たにテキストファイルを作り、その拡張子を.HTMLに変更して、「GuitarTuner.HTML」という名前にします。そして、次のテキストを貼り付けます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Guitar Tuner</title> <script type="text/javascript" src="Silverlight.js"></script> </head> <body> </body> </html>
4
これは起動用のHTMLで、ここにSilverlightコントロールを記述します。まず、divタグを追加し、そこにSilverlightコントロールを作るJavaScriptコードを記述します。これでbody部分は次のようになるはずです。
<body> <div id="SilverLightControlHost"> <script type="text/javascript"> var parentElement = document.getElementById("SilverLightControlHost"); createGuitarTunerControl(); </script> </div> </body>
5
次に、このコードに使われているcreateGuitarTunerControl関数を用意する必要があります。そこで、もう1つテキストファイルを作り、拡張子を.jsに変更して、「GuitarTuner.js」という名前にします。
6
このファイルに次のコードを貼り付けます。
function createGuitarTunerControl() { Silverlight.createObject( "guitarTuner.xaml", // Source property value. parentElement, // DOM reference to hosting DIV tag. "guitarTunerControl", // Unique plugin ID value. { // Per-instance properties. width:'400', // Width of rectangular region of // plugin area in pixels. height:'290', // Height of rectangular region of // plugin area in pixels. // Determines whether to display in-place // install prompt if invalid version detected. inplaceInstallPrompt:false, background:'Orange', // Background color of plugin. // Determines whether to display plugin in Windowless // mode. isWindowless:'true', framerate:'24', // MaxFrameRate property value. version:'1.0' // Silverlight version to use. }, { onError:null, // OnError property value -- // event handler function name. onLoad:null // OnLoad property value -- // event handler function name. }, null); // Context value -- event handler function name. }
このコードは、Silverlightコントロールオブジェクトを実装しているXAMLファイル（guitarTuner.xaml）へのパスを渡し、実際にインスタンス化します。プラグインID（guitarTunerControl）は、getElementbyIdなどのDOMメソッドからこのチューナーコントロールにアクセスする際に必要になります。さらにこのコードでは、コントロールの大きさを400ピクセル×290ピクセルに設定しています。
7
HTMLファイルのhead部分に、このスクリプトファイルを使う旨の宣言を追加します。
<head> <title>Guitar Tuner</title> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript" src="guitartuner.js"></script> </head>
8
まだ作っていないのはXAMLファイルだけです。そこで、もう1つテキストファイルを作り、拡張子を.xamlに変更して、「guitarTuner.xaml」という名前にします。
9
次のコードを貼り付けます。
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/ presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="400" Width="290" > </Canvas>
10
これで、枠組みはできあがりです。それでは、「guitarTuner.HTML」をダブルクリックしてください。このHTMLがWebブラウザ上に読み込まれ、問題がなければ画面には次のようなオレンジ色の矩形が表示されるはずです。
