Silverlight 開発入門

Silverlight

仕事で Silverligth について調査することがあったので
思い切って入門してみた。
Hello World を動かすまでをまとめてみる。

Silverlight のイイトコロ

Microsoft が作った Flash って感じだけど
実装言語にいろいろな言語が選べるのが強み。

準備するもの

注意事項としては Runtime と SDK のバージョンをあわせる必要がある。
上のリンクはたぶん古くなっているので最新版を探してください。
今回使ったのは Silverlight 2.0.30523.8。

環境変数の設定

環境変数に以下を追加する。

C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Tools\Chiron

この下にある Chiron.exe がコンパイラだったり
デバッグ用 Web サーバーだったりする。

開発してみる

以下のようなディレクトリ構成にする。
index.html
app/
- app.xaml
- app.js


index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Silverlight Javascript sample</title>
</head>
<body>
    <div id="out">
    <object data="data:application/x-silverlight,"
            type="application/x-silverlight-2-b2" width="100%" height="100%">
      <param name="source" value="app.xap"/>
      <param name="initParams" value="debug=true,reportErrors=out" />
    </object>
</body>
</html>

object 要素の type 属性は Silverlight のバージョンによって
変える必要があった。
Opera なら opera:plugins で見られる。
param 要素の value を app.xap にすると
chiron.exe が先ほど作った app ディレクトリをオンザフライで
コンパイルしてデバッグできるようにしてくれる。


app.xaml

<UserControl
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="System.Windows.Controls.UserControl"
    x:Name="JSSample1">
  <TextBlock Text="Hello world!" />
</UserControl>

XAML というのがユーザーインターフェースを定義する言語。
Flex でいう MXML と位置づけは一緒。


app.js

Import("System.Windows.Application") 
Import("System.Windows.Controls.UserControl") 

function sample_app() { 
    this.scene = Application.Current.LoadRootVisual(
        new UserControl(), "app.xaml"); 
} 
sample_app.prototype = { 
    start:function() { 
    } 
} 

app = new sample_app; 
app.start();

ロジックは今回は JavaScript を選んだ。

デバッグしてみる

app ディレクトリがあるディレクトリで

chiron /b

とすると Web サーバが起動し、ブラウザが立ち上がる。


こんな感じ。


この状態で index.html を開けば、
Silverlight アプリが表示される。

配布する

配布するときには

cd app
chiron /z:app.xap

で実行可能な XAP ファイル(ただのzip)ができる。


Chiron のヘルプにはコンパイルは /x と書いてあるが
スクリプト言語(JavaScript/Ruby/Python) では
DLL も一緒に XAP に含めなければいけないため
/z オプションを使用する。


XAP ファイルの中身はこんな感じ

JavaScript 用の DLL が多数含まれていることがわかる。

感想

動作に関しては Flash と比べても遜色がないと感じた。
開発に関しては、Flex Builder を使った開発と比べて
やはりまだまだ大変。
特にドキュメントにサンプルコードがまったくなくて困った。
Visual Studio 2008 Professional を使うと
C# を使ってリッチな開発が行えるらしいので
そっちを使えばもしかしたら Flex Builder よりも楽なのかもしれないが
Microsoft の開発環境を使うのはなんだかなーという感じ。

参考 URL

ここと内容はほぼ一緒。新しいのは本記事が Silverlight beta 2 対応なくらい。