Friday, May 30, 2008
はじめてのSilverlight(Silverlight 入門)

今回はSilverlightアプリケーションの開発手法について説明したいと思います。

前回の説明で、開発に必要なランタイムとSDKのインストールについて説明しました。

このほかにSilverlightの開発はテキストエディタが必要ですので、各自使い慣れているものをご使用ください。

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ファイルです。

　<Title>～</Title>タグは、ご存じの通りWebブラウザに表示されるタイトルですので、任意に変更してください。

　4行目は 2)でコピーしてきたJScriptファイルです。

　5行目のcreateSilverlight.jsというファイルは、実際に表示されるSilverlightアプリケーション本体ファイルです。このファイルは自分で作る必要があります。ファイル名は任意で指定してかまわないのですが、これはMicrosoftの例に倣ってcreateSilverlight.js としています。

　2)でコピーしたファイル(Silverlight.js)は文字コードがutf-8となっています。このJScriptを正しく使用するために6行目が必要となります。

　下記を Sample.htm として Sampleフォルダに文字コードutf-8で保存してください。

<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を組み込むエリアを作成するには<div>タグを使用して下記のように記述します。

  タグ内の「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 とする必要があります。

 

Silverlight | Silverlight 入門
Friday, May 30, 2008 9:47:52 PM (Tokyo Standard Time, UTC+09:00)  #    Comments [0]  |  Trackback
Comments are closed.

Theme design by Jelle Druyts

Pick a theme: