Hello, Silverlight!

それでは、Silverlight版の「Hello, World」アプリケーションを作成してSilverlightの開発を体験してみよう。

Silverlightアプリケーションの開発には、Silverlight SDKが必要だ。Silverlightのランタイムを入手したページから、SDKもダウンロードできる。

ダウンロードしたSDKは単なるzipアーカイブなので、展開すると「Silverlight1.0SDK」というディレクトリが生成される。その中にはサンプル、ドキュメント、VisualStudio2005用のプロジェクトテンプレートなどが含まれる。

では、ブラウザ上で「Hello, Silverlight!」というメッセージを表示するだけの簡単なSilverlightアプリケーションを書いてみよう。

アプリケーションのファイル構成は以下のとおりだ。

  • Helloディレクトリ
    • Silverlight.js: Silverlight SDKに含まれるJavaScriptファイル
    • Hello.xaml: XAMLコントロール(「Hello, Silverlight!」と表示する)
    • Hello.html: ブラウザで読み込むHTMLファイル

まず、Silverlight.jsであるが、これはSilverlight SDKに含まれているファイルをコピーして使用する。同JavaScriptファイルには、Silverlightアプリケーションを作成する上で有用ないくつかのJavaScriptコードを含んでいる。

次にHello.xamlだ。これは、以下に示すように、TextBlock要素を用いて「Hello, Silverlight」と表示するだけの非常に単純なXAMLコードである。見ておわかりのように、Silverlightが利用するXAMLファイルはCanvas要素をルートとして記述することになる。

Hello.xaml

<?xml version="1.0"?>
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <TextBlock Text="Hello, Silverlight!" />
</Canvas>

最後に、ブラウザによって実際にアクセスされるためのページが必要だ。Hello.htmlを以下に示す。

Hello.html

<html>
  <head>
    <title>Hello, Silverlight!</title>
    <!-- Silverlight.jsの読み込み -->                  ……(1)
    <script type="text/javascript" src="Silverlight.js"></script>
  </head>
  <body>
    <!-- Silverlightコントロールの表示領域-->          ……(2)
    <div id="silverlightCanvas"></div>

    <script type="text/javascript">
      // Silverlightコントロールを表示するエリアを取得
      var parentElement = document.getElementById("silverlightCanvas");

      // 以下のメソッドによりObjectタグを生成          ……(3)
      Sys.Silverlight.createObjectEx({
          id: "helloSilverlightControl", // ID
          source: "Hello.xaml",          // XAMLファイルへのパス
          parentElement: parentElement,  // コントロールの親要素
          properties: {                  // プロパティ
            width: 200,                    // コントロールの幅
            height: 100,                   // コントロールの高さ
            version: "0.9"                 // コントロールのバージョン
          },
          events: {                      // イベントハンドラ
            onLoad: null,                  // ロード時
            onError: null                  // エラー時
          }
        });
  </script>
  </body>
</html>

確認すべきポイントは以下の通りだ(各番号はプログラム中に記した括弧書きの番号に対応する)。

(1) Silverlight.jsを読み込み、SDKが提供するSilverlight用JavaScriptライブラリを使用可能にする。

(2) Silverlightコントロール(今回はHello.xaml)を表示するための領域をdivタグを用いて定義しておく。

(3) Sys.Silverlight.createObjectEx()メソッドを用いて、指定したXAMLファイルを読み込むSilverlightコントロールを作成する。このメソッドでは、Silverlightのランタイムがインストールされていればsourceで指定されたXAMLファイルを使用するobjectタグを動的に生成し(typeは"application/ag-plugin")、インストールされていなければSilverlightへのリンク画像を表示するということが行われる(画像3参照)。

画面3:Silverlightがインストールされていない状態で表示されるリンク

上のアプリケーションを実行した結果は以下のようになる。

画面4:Hello, Silverlight!の実行結果

以上がSilverlightアプリケーション作成の全体的な流れであるが、いかがだろうか。

XAMLは、平易なマークアップを用いて複雑なUIを簡単に構築できる強力なテクノロジーだが、Silverlightによりブラウザやプラットフォームを選ばずに利用できるようになったことは非常に大きな意義がある。

今回のアプリケーションは文字列を表示するだけの非常に簡単なサンプルであったが、SilverlightではJavaScriptを用いたダイナミックなアプリケーションも容易に作成することが可能だ(バージョン1.1ではさらに、CLR上で動作する複数の言語を利用できる)。

機会があれば、バージョン1.1でのSilverlightアプリケーション作成についてもご紹介したいと思う。