VB.NET, C#, PowerShell, Silverlight, WPF, LINQを使用しているエンジニアのためのサイト。
基本的な使用方法から開発で役立つTipsまで幅広く取り扱っています。
1)開発単位ごとにフォルダを作成する
Silverlightアプリケーションを開発する際には、アプリケーション単位ごとにフォルダを分けることをおすすめします。
今回はSampleというフォルダを準備し、そこへファイルを作成していきます。
2)Silverlight.jsファイルを準備する
Silverlightアプリケーションには、Silverlight.jsファイルが必要です。
このファイルは、C:\Program Files\Microsoft Silverlight 1.0 SDK\Tools\Silverlight.js\localized の中にある Silverlight.ja-jp.js をコピーし、ファイル名をSilverlight.jsに変更します。
3)基本となるHTMLファイルを作成する
次にHTMLファイルを作成します。下記は基本となるHTMLファイルです。
<html> <head> <title>はじめての Silverlight</title> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript" src="createSilverlight.js"></script> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/> </head> <body> </body> </html>
4)基本HTML内にSilverlightが組み込まれるエリアを作成する
先ほどの基本HTMLをWebブラウザで表示するだけでは、Silverlightアプリケーションとして成り立ちません。
Silverlightが組み込まれるエリアとSilverlightオブジェクトを生成するためのスクリプトを追加する必要があります。
4-1)Silverlightを組み込むエリアの作成
Silverlightを組み込むエリアを作成するには<divgt;タグを使用して下記のように記述します。
タグ内の「sampleHost」は、任意に名前を付けてかまいません。
<div id="sampleHost"></div>
4-2)Silverlightオブジェクトを生成する関数を呼び出すスクリプトを追加する
次にSileverlightオブジェクトを生成するために次のようなスクリプトを追加します。
getElementByIdで指定している「sampleHost」という名前は4-1)で指定したものと同じである必要があります。
また、3行目でcreateSilverlightPluginという関数を呼び出していますが、この関数で実際にSilverlightプロジェクトを生成します。この関数は createSilverlight.js に記述します。
<script type="text/javascript"> var parentElement = document.getElementById("sampleHost"); createSilverlightPlugin(); </script>
ここまでをまとめるとSample.htmは下記のようになります。
<html> <head> <title>はじめての Silverlight</title> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript" src="createSilverlight.js"></script> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/> </head> <body> <div id="sampleHost"></div> <script type="text/javascript"> var parentElement = document.getElementById("sampleHost"); createSilverlightPlugin(); </script> </body> </html>
5)Silverlightオブジェクト本体を生成するJScriptファイルの作成
次にSilverlightオブジェクト本体を作成するJScriptファイルですが下記のようにします。詳細については機会を改めて説明したいと思います。
4行目はxamlファイルの参照先を示します。xamlファイルへは画像やアニメーションの設定などを記述します。
6行目はSilverlightのプロジェクトのIDで任意に名前を付けることができますがユニークな値にする必要があります。また、ここで設定したユニークIDは3)で作成したHTMLファイルのDIVタグと連動させる必要があります。今回ユニークIDを"sample"としているので、Sample.htmのDIVタグのIDを"sampleHost"としています。このように ユニークID + Host とする必要があることを覚えておいてください。
8行目と9行目は、Silverlightオブジェクトの表示エリアとなります。
14行目はSilverlightのバージョン番号を表しており、1.0を指定します。
function createSilverlightPlugin() { Silverlight.createObject( "sample.xaml", // xamlファイルの参照先 parentElement, // 親要素の定義 "sample", // SilverlightプロジェクトのユニークID { width:'300', // Silverlightオブジェクトの幅 height:'300', // Silverlightオブジェクトの高さ inplaceInstallPrompt:false, // インストールプロンプトを適所に表示するかどうか決定 background:'#FF0000', // 背景色 isWindowless:'false', // Windowlessモードによるプラグインを表示するかどうか決定 framerate:'24', // フレームレート最大値 version:'1.0' // Silverlightのバージョン番号 }, { onError:null, // OnErrorのときのfunction名 onLoad:null // OnLoadのときのfunction名 }, null); // イベントハンドラ名 }
6)XAMLファイル
今回は、簡単なXAMLファイルを準備しました。Hello, Silverlight World! と表示するだけのもです。
XAMLの要素についても機会を改めて説明したいと思います。
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <TextBlock >Hello, Silverlight World!</TextBlock> </Canvas>
7)実行
上記のファイルをすべてSampleフォルダへ保存したら Sample.htm をダブルクリックして実行してみましょう。
実行結果は、こちらとなります。
今回紹介したファイルは、こちらからダウンロード可能です。
もしもこのサンプルをローカルではなくWebサーバー上に配置して実行したときに Hello, Silverlight World! という文字が表示されない場合はMimeタイプの設定が必要です。その際、拡張子を.xaml、Mimeタイプはapplication/xaml+ xml とする必要があります。