Silverlight2のプログラムをテキストエディタとJavaScriptだけで作成する簡単チュートリアル
2008 年 8 月 10 日 – 6:59 PMSilverlight2 β2のプログラムをテキストエディタとJavaScriptだけで作成する方法が、ある程度見えてきたのでチュートリアル風にまとめます。なお、XAMLの詳細には触れないので、詳細は、JavaScriptでSilverlight1.0あたりを参照してください。次が、作成するプログラムです。スライダーを左右にドラッグすると、画像の透明度が0～1のあいだで変化します。
STEP1：Silverlight2 SDKのインストールとChiron.exe
まず、サンプルを作る前に、Silverlight2β2のSDKを入手して、インストールします。
Microsoft® Silverlight™ 2 Software Development Kit Beta 2
SDKといっても、サンプルやドキュメント、HTMLヘルプ等を集めたものです。これらのドキュメント類はとりあえず置いておいて、重要なのは、SDKに含まれるChiron.exeというコマンドラインのプログラムです。SDKをインストールすると、Chiron.exeは次のフォルダに保存されます。
C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Tools\Chiron
Chiron.exe（「カイロン」または「ケイロン」と呼ぶようです）は、作成したXAMLファイルやJSファイルなどから、拡張子が「.xap」（ザップ）のファイルを生成します。「XAP」はXAML Application Package の略で、その実体はXAMLファイルやJSファイル、プログラムに必要なDLLファイルをまとめているZIPファイルです（拡張子の「.xap」を「.zip」に変更するとzipファイルとして扱えます）。
Silverlight2のプラグインは、このXAPファイルを読み込んでプログラムを実行します。実際に、テキストエディタでXAMLやJavaScriptのコードを書いたりデバックしたりする場合も、Chiron.exeで一時的なXAPファイルを生成し、それをブラウザで表示する流れになります。また、完成したプログラムを配布する際も、Chiron.exeを使ってXAPファイルを生成し、それをWebサーバーに置く手順となります。具体的な手順については後述します。
以上の理由から、Chiron.exeをどのフォルダでも実行できるよう、OS上でパスを通しておく必要があります。Windows Vistaの場合だと、［スタート］メニューの［コンピュータ］を右クリックし、ショートカットメニューの［プロパティ］を選択してシステムのウィンドウを開きます。左側の［システムの詳細設定］をクリックして［システムのプロパティ］ダイアログボックスを開いたら、［詳細設定］タブの［環境変数］ボタンをクリックします。そして、システム環境変数のPathに、上記のChiron.exeが保存されているパスを追加すればOKです。
STEP2：フォルダとファイルの準備
Chiron.exeのパス設定が終わったら、適当なフォルダに、appフォルダとassetsフォルダを作ります。ここでは、c:\sampleフォルダの下にappフォルダとassetsフォルダを作ったものと仮定します。そして、sampleフォルダにはindex.html、appフォルダにはapp.xaml、app.jsというファイルを用意します。ファイルはすべてテキストファイルでエンコードばUTF-8で保存してください。
また、assetsフォルダに、dog.jpgという画像ファイルを置きます。これは、四角形の中に表示する画像ファイルなので何でもかまいませんが、ファイル名はdog.jpgとしてください。
作成するフォルダ、準備するファイルを図示すると、次のようになります。
sampleフォルダ (index.html)
├ appフォルダ (app.xaml , app.js)
└ assetsフォルダ (dog.jpg)
各ファイルのソースは次のとおりです。
【index.html】
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Silverlight2β2 JavaScript sample</title>
</head>
<body>
<div style="text-align:center;">
<object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="100%" height="100%">
<param name="source" value="app.xap"/>
</object>
</div>
</body>
</html>
【app.xaml】
<Canvas x:Class="System.Windows.Controls.Canvas" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="300" Height="300">
<Rectangle Width="200" Height="200" x:Name="myRec" Canvas.Top="30" Canvas.Left="50" Stroke="Skyblue" StrokeThickness="15" Opacity="0.5" RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<ImageBrush ImageSource="../assets/dog.jpg" Stretch="UniformToFill" x:Name="myRec_brush1" />
</Rectangle.Fill>
</Rectangle>
<Slider Canvas.Top="250" Canvas.Left="50" Value="0.5" Maximum="1" Minimum="0" x:Name="Slider1" Width="200" Cursor="hand" />
</Canvas>
【app.js】
Import("System.Windows.*");
Import("System.Windows.Controls.*");
var root = Application.Current.LoadRootVisual(new Canvas(), "app.xaml");
root.Slider1.ValueChanged += function(sender, args) {
sender.findName("myRec").Opacity = sender.Value;
}
STEP3：Chiron.exeの実行と動作チェック
ここまでの作業が終わったら、コマンドプロンプトを起動して、index.htmlを保存したフォルダにカレントフォルダを移動します。この例では、「c:\sample」です。そして、「chiron /b」を実行します（chiron.exeのヘルプはchironとだけ入力し、[Enter]キーを押すと表示されます）。
すると、ブラウザが起動して、次のようなページが表示されるはずです。表示されたら、index.htmlをクリックしてください。冒頭に紹介したプログラムが表示されると思います。
この状態では、テキストエディタにapp.xamlやapp.js、index.htmlなどを読み込んで編集できます。編集後、上書き保存したら、ブラウザを更新することで、最新の状態にすることができます。プログラムの作成やデバッグは、この方法で行うことになります。
なお、この状態では、じつはChiron.exeによって、app.xapというxapファイルがメモリ上に生成され、実行されています。ファイルとして見えていませんが、実行されるているのはxapファイルです。ファイルを編集してブラウザを更新すると、Chiron.exeが再びapp.xapを自動生成し、それをブラウザが読み込んで表示が変化する、という仕組みになっているようです（コマンドプロンプトをながめていると、自動生成されるファイルを確認できます）。
Chiron.exeを終了するには、［Ctrl］+［C］キーを押してください。
STEP4：app.xapの生成とサーバーへの配置
プログラムが完成したら、xapファイルを生成し、index.htmlや画像ファイルとともにサーバーにアップロードします。xapファイルを生成するには、コマンドプロンプトで再びindex.htmlのあるフォルダをカレントにし、次のコマンドを実行します。
chiron /d:app /z:app.xap
/dオプションはappフォルダの指定、/zオプションは生成するxapファイルの指定です。これによって、index.htmlファイルのあるフォルダにapp.xapが生成されます。
あとは、index.htmlとapp.xapをサーバーの適当なフォルダにアップロードし、その下にasstesフォルダを中身の画像ファイルごとアップロードします。図示すると次のようになるはずです。
フォルダ (index.html , app.xap)
└ assetsフォルダ (dog.jpg)
そして、ブラウザでindex.htmlのURLを指定すれば、プログラムが表示されます。
STEP5：コードの簡単な説明
このチュートリアルは作成手順がテーマなのと、コードについてはよく分からない点も多いので、ここでは簡単に触れるのにとどめます。
まず、index.htmlでは、次の<object>タグがポイントです。
<object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="100%" height="100%">
<param name="source" value="app.xap"/>
</object>
<param name="source" value="app.xap"/>でapp.xapを指定しているのが分かります。なお、Silverlight2のサンプルがFirefox3で表示できなかった原因判明で書いたように、data="data:application/x-silverlight," の末尾のカンマを忘れると、Firefox3でなぜか表示されませんでした。
XAMLファイルのapp.xamlは、基本的にはJavaScriptでSilverlight1.0で説明した内容が、そのまま使えます。ただし、x:Class="System.Windows.Controls.Canvas" のような指定が入るのは、Silverlight2特有と言えそうです。
また、Sliderのように、Silverlight1.0では使えなかったXAMLのタグが使えるのも異なります。Sliderは「コントロール」と呼ばれる一種の部品で、その他にもボタンやドロップダウンリスト、カレンダーなどかあります。コントロールの詳細は、SDKのHTMLヘルプにのっていますし、こちらにも情報があります。
app.jsは、JavaScriptを書くファイルですが、書き方はSilverlight1.0とは、かなり違います。まず、次の2行でSilverlightのライブラリを読み込みます。
Import("System.Windows.*");
Import("System.Windows.Controls.*");
ライブラリというのは、プログラムの部品みたいなもので、読み込むライブラリによってさまざまな便利なことが実現できます。これらのライブラリの情報は、Silverlight ライブラリの使用あたりに情報があります。
次は、ルート要素としてCanvasを指定し、app.xamlを読み込む指定です。
var root = Application.Current.LoadRootVisual(new Canvas(), "app.xaml");
変数rootには、このルート要素への参照が入ります。そして、このrootを使ってスライダーの値が変化したときの処理を指定しています。
root.Slider1.ValueChanged += function(sender, args) {
sender.findName("myRec").Opacity = sender.Value;
}
具体的には、スライダーの値を、四角形の透明度（Opacity）に設定しています。
関数を += と書くのは、かなり違和感がありますが、これはデリゲート（delegate）と呼ぶようですが、詳しくは分かりません。
※注意：Silverlight2 β2を前提にしていますので、内容は変更される可能性があります。
4 Responses to “Silverlight2のプログラムをテキストエディタとJavaScriptだけで作成する簡単チュートリアル”
おもしろいですね～。
今度ためしてみます。
By えすぬま on 8 月 12, 2008
ぜひ、お試しください。β2なので、仕様変更もあまりないんじゃないかと思います。
By MAKOTO3 on 8 月 13, 2008