Silverlightの表示
Silverlightをブラウザ上に表示するには、HTML文書内のSilverlightを表示させたい任意の場所にOBJECT要素を指定します。基本的な考え方はJavaアプレットやFlashなどのプラグインを表示させる方法と同じです。しかし、Microsoftはこの方法ではなくSilverlight SDKに付属している「Silverlight.js」ファイルを利用することを推奨しています。
Silverlight.jsは、Silverlightを表示するためのcreateObject関数を提供しています。開発者は、HTML文書のHEAD要素内であらかじめSilverlight.jsを読み込ませ、BODY要素の任意の場所からcreateObject関数を呼び出します。
createObject関数は、与えられたパラメータから適切なOBJECTタグを生成し、指定されたDOMオブジェクト内に組み込みます。加えてSilverlightのプラグインがインストールされていない場合は、Silverlightのインストールページに誘導する画像リンクを表示してくれます。
より正確にSilverlight SDKが推奨する設計に従うならば、createObject関数を呼び出すCreateSilverlight.jsファイルを別に用意し、HTMLからはCreateSilverlight.jsを利用する方法が用いられます。テスト用のコードでは冗長な設計となるため、本稿ではHTMLから直接Silverlight.jsのcreateObject関数を呼び出して作ります。
CreateSilverlight.jsとSilverlight.jsによるSilverlightの表示方法やcreateObject関数のパラメータの詳細については「Using CreateSilverlight.js and Silverlight.js」に詳細が書かれています。
まずは、テスト用の簡単なXAMLソースを用意し、Silverlightでブラウザ上に表示してみましょう。XAMLファイルは通常xaml拡張子で保存します。
<Ellipse xmlns="http://schemas.microsoft.com/client/2007"
Fill="Red" Width="200" Height="100"
/>
このXAMLファイルはEllipseという楕円オブジェクトを宣言しています。xmlnsはSilverlight用の名前空間を指定しています。Silverlightで用いられるXAMLの要素は、この名前空間を指定しなければなりません。
Ellipse要素の属性Fillは楕円を塗りつぶすブラシを、Widthは幅、Heightは高さを表しています。つまり、このXAMLファイルは幅200ピクセル、高さ100ピクセルの赤い楕円形を表示します。
XAMLファイルをSilverlightで表示するには、HTML内でSilverlight.jsのcreateObject関数を呼び出します。createObject関数はSilverlightオブジェクトによって保持されているため、正しくはSilverlight.createObjectと記述して呼び出します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Silverlight test</title> <script type="text/javascript" src="Silverlight.js"></script> </head> <body> <div id="silverlight"></div> <script type="text/javascript"> var parentElement = document.getElementById("silverlight"); Silverlight.createObject( "test.xaml", //ソースファイル parentElement, //Silverlight を表示するDIVタグのDOMオブジェクト "silverlight01", //任意の一意なプラグインID { width: "400", //幅 height: "300", //高さ background: "#FFFFFF", //背景色 version: "1.0" //Silverlight のバージョン }, { onError: null, //エラー時のイベントハンドラ onLoad: null //読み込み時のイベントハンドラ }, null, //初期化パラメータ null //onLoad イベントに渡される値 ); </script> </body> </html>
上記のHTMLでは、createObject関数を呼び出してSilverlight.js内のcreateObject関数にSilverlightの初期化を委ねています。createObject関数の第1パラメータにはソースファイルのURIを指定します。第2パラメータにはSilverlightを表示させる要素のDOMオブジェクトを、第3パラメータにSilverlightプラグインの一意のIDを指定します。
第4パラメータには、生成するSilverlightプラグインのプロパティの初期値を指定します。特に重要なのは、サイズを指定するwidthとheightプロパティ、背景色を指定するbackgroundプロパティでしょう。versionプロパティはSilverlightのバージョンを指定するものですが、本稿執筆時点で正式にリリースされているバージョンは1.0のみとなります。
第5パラメータはSilverlightで発生したイベントを受けるJavaScriptのイベントハンドラを指定します。エラー発生時やプラグインが読み込まれたときに何らかの処理を実行したい場合に用います。残るパラメータは、スクリプトに対して何らかの値を渡したい場合に利用します。
XAMLやスクリプトによる処理の詳細は次回以降にご説明します。この場では上記のHTMLを実行してtest.xamlが表示されるかどうかを確認してください。
