Silverlight 2 SDK+JavaScriptで無償の開発環境を作る #1 [環境整備編] (Neutral Scent)

先日公開されたSilverlight2のSDKを利用すると、Visual StudioやExpression Studio等の開発環境やアプリを全く利用することなく、素の状態のWindows (いや、それどころかMacでも...) でSilverligh2の開発を行うことができます。

やり方がわかってしまえば非常に単純なのですが、そもそもSilverlight2でDLR(Dynamic Language Runtime: LL実行環境)を使用した開発に関する情報がまだほとんど出回っておらず、いろいろ苦労したので、そのあたりをまとめておきます。
以下、ちょっとクド目ですが、素のWindowsにnotepad(メモ帳)だけで開発できるよ、という手順をご紹介。

必要な環境:

Windows XP 以降
.NET Framework 2.0 (たぶん)
英語が読める人 (現時点でほとんどの資料は英語)

余談ですが、.NET FrameworkやSilverlightのランタイムは基本的にインストールするだけでは他に影響を与えるモノではないので、なんか得体が知れなくてイヤだなぁ、とか思ってもよっぽどディスクの残りが少ないとかいうことでなければ、インストールしても害はないですよ...。

Silverlight2 ランタイムのインストール:

(Express Edition以外の)Visual Studio 2008ユーザーの人は Visual Studio 2008 用 Microsoft Silverlight Tools をインストールすれば、Silverlight2ランタイムとSDKも同時にインストールされるので、このプロセスは不要です。

SDKの導入の前に、まずはSilverlightのランタイムを入れましょう。
公式サイト、silverlight.netへアクセスします。
http://silverlight.net/

いきなり↑のように、「Silverlightが入ってないよ(意訳)」と言われたら、Silverlight 1.0のランタイムが未だインストールされていないようです。

ここで取り上げるのはSilverlight 2.0なので、1.0のランタイムは必ずしも必要ありませんが、まぁあって困るわけではないので入れておきましょう。
1.0と2.0の違いや過去の経緯についてはあちこちで書かれているモノがあると思うのでここでは触れません。

まぁ、基本的にOk,Okしてけばインストールは終わります。この辺のプロセスもシームレスでよくできています。英語だけど...。

さて、今度は2.0のランタイムです。

silverlight.netトップページ上部のメニュー[Get Started]から
http://silverlight.net/GetStarted/
へアクセスします。

次に、ページ内の、
Silverlight 2 Beta Runtime & Tools
Silverlight 2 Beta 1 Runtimes
から、

Windows - Silverlight 2 Beta 1 Runtime
http://www.microsoft.com/silverlight/resources/installationFiles.aspx?v=2.0
へアクセス。

インストールページでWindowsロゴのボタンをクリックします。

Silverlight2.exeのダウンロードが始まるので、そのまま保存するか直接実行。

今度のインストーラーは日本語ですね。
日本語未対応の1.0をスキップして、まだβの2.0から始める理由はここにもあります。

Silverlight 2 SDK の導入:

次はいよいよSDKのダウンロードです。
GET STARTEDのページに戻って、

Silverlight 2 Beta 1 SDK
http://www.microsoft.com/downloads/details.aspx?FamilyId=4E03409A-77F3-413F-B108-1243C243C4FE&displaylang=en
のダウンロードを行います。

ダウンロードされたsilverlight_sdk.exeを実行すれば、インストールが行われます。

SDKはお手軽なアプリやツールと違うので、基本的にはファイルがコピーされるだけです。
スタートメニューには[Welcome]のドキュメントが一つ登録されるだけなので、とりあえず開いてみましょう。

ライセンスやイスントール物の説明がさらっと英語で書かれていますが、まーただのリンク集です。
ページ中ほどの[Tools]のリンクをクリックしてみましょう。

規定値でインストールしていれば、
C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Tools
(x64版Windowsならば C:\Program Files (x86)\Microsoft SDKs\Silverlight\v2.0\Tools)

フォルダが表示されます。

ここに置かれている[Chiron] (カイロン又はケイロン)が今回の話の肝になるツールです。
実体としては、ここにある、Chiron.exe 一つだけがSilverlight2の開発環境となります。(基本的な使い方は同じフォルダにあるReadme.txtにも書かれているので、目を通しておくといいです)
xapパッキングツール・実行用ローカルサーバーなどを1つのexeで兼ねており、コマンドラインからオプションを指定して使用します。
ので、いざ開発へ、と移るためにこのchiron.exeにpathを通しておかないといけません。

またまた余談ですが、なんとなくWindows開発なんて知らん、という人もいそうなので書いておくと、環境変数は、
コントロールパネル/システム/システムの詳細設定/環境変数
で設定もできますが、開発関連のpathは何でも入れてしまうのではなく、それぞれbatファイルにしておいて、各種batファイルを一つのフォルダ(例えばc:\bat\)に集めておいて、ユーザー環境変数設定で、%path%;c:\bat\ などとしておくと、お行儀がよく融通が効くのでよいかと思います。

なお、先ほどのWelcomeのドキュメントから、Silverlight SDKドキュメントのCHM(HTML Help)版をダウンロードしておくとネットを使わずに素早く検索できるのでお勧めです。

http://go.microsoft.com/fwlink/?LinkId=111131

プロジェクトの作成:

さて、ではシンプルなプロジェクトを作ってchironの動きを見てみましょう。

とりあえず、適当にフォルダを作ります、ここでは、
c:\samples\js_sample1
として、以下、このフォルダをプロジェクトのルートフォルダとします。
ここに
index.html
を作成します。
内容はこんな感じ。

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

要するにSilverlight2コントロールを張った空のHTMLファイルです。

さらにこの配下にappフォルダを作成
c:\samples\js_sample1\app
ここに、テキストファイル
app.xaml
app.js
を作成します。
内容はこんな感じ。
(ここで、app.pyやapp.rbとするだけで何も追加することなくIronPythonやIronRubyが利用可能です)

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="Javascript meets Silverlight 2!" />
</UserControl>

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();

3つのファイルができましたか?

テキストファイルの形式ですが、基本ANSI形式でもOkですが、日本語を含ませることもあると思うので、エンコーディングはUTF-8にしておきましょう。
今のところSilverlight2のランタイムは標準でSJISではなくUTF-8で決め打ちで読むようです。まぁ、ふつうと言えばふつう。
notepadだと規定値ANSIなので、ファイル/名前を付けて保存でこんな感じ。

さて、必要なファイルはこれだけです。
では、コマンドプロンプトでindex.htmlのあるプロジェクトルートフォルダへ移動して、
chiron /b
と実行してみましょう。

既定のブラウザが立ち上がりましたか?
既定のブラウザがOperaなどのSilverlightが対応していないブラウザの方すいません、既定のブラウザをIE, Firefox系に変更するか、表示されたURLをIEなどへCopy&Pasteしてください。

で、とりあえず、そっ気のないディレクトリ表示がされていると思うので、一覧からindex.htmlをクリックすれば、最初に作成したindex.htmlが表示されます。

うまく Javascript meets Silverlight 2! と表示されましたでしょうか?
右クリックすれば、Silverlightコントロールとして表示されているのを確認できると思います。

このように、chiron.exeは自動的にオンメモリでxapファイルを生成し、ローカルサーバーを作成し、ブラウザを開き、と、ランタイムが実行可能な環境を整えてくれる非常に便利なツールです。

ソースを変更し保存して、ブラウザでリロードすれば、自動的にchironがソースを読み直してくれます。
chironを終了したい場合は、コマンドプロンプトでctrl+cするか、ブラウザのアドレスバーに localhost:2060/bye! を入れてブラウズしてください。
また、実行時に表示されるlocalhostのポート番号はchironのコマンドラインオプションで変更が可能です。

まとめ:

Silverlightというと、MS環境べったりのVisual StudioとExpression BlendとIISでゴリゴリ作るみたいなイメージがあるかも知れませんが、実は、SDKをインストールするだけで最低限の環境としては十分に開発が可能となります。

言語もJS,Python,Rubyがそのまま利用可能。XAMLの記述にちょっと慣れが必要ですが、慣れてくるとHTML+CSSやFlash+ActionScriptと比較して強力かつシンプルな面白さが見えてくるのではないかと思います。

もちろん、Expression Blendでコードを書かずにアニメーションをうにうにと設定したり、Visual Studioで.NETでC#を使えば、IntelliSenceバリバリでxamlをがんがん書いたり、と、より一層手軽な部分もあるわけですが、現在のところVSのSilverlight拡張はVS Express Editionには対応してませんし、まずはこのあたりから試してみると面白いのではないかと思うのです。

[XAML基礎編]へ続く...

Neutral Scent

Kaoru Nakajima @ Cybozu Labs