【ハウツー】Microsoftが満を持して送り出す"Flashの対抗技術" - Silverlightを体感する (2) 体験! Silverlightの世界 | エンタープライズ

お知らせ: 「マイポ」からのポイント交換を再開いたしました。(5月9日); メール会員100万人突破記念「春の読者プレゼント」結果発表は5月30日です。; マイナビベアがミクシィで部屋を作ったよ。ぜひ見てね！; 一緒に「マイナビ」で働きませんか。採用情報はこちらから。; 旅行券3万円、時計、ビジネスバッグなどが当たる！さらに応募者全員に50マイポもプレゼント

その先を伝える総合情報サイト
マイナビニュース

エンタープライズ

急上昇ワード

[

]

【ハウツー】

Microsoftが満を持して送り出す"Flashの対抗技術" - Silverlightを体感する

2 体験! Silverlightの世界

白石俊平　 [2007/05/07]

印刷

先頭
前へ
- 1
- 2
- ／2

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参照)。