始めよう!Silverlight

第2回SDKを導入しよう

SDKの導入

第1回の最後にSilverlightの開発にはSilverlight.jsを使うと説明しましたが、今回はそのSilverlight.jsを使ったSilverlightの表示を解説していきます。

まずは、以下のリンクよりSilverlightのSDKをダウンロードしてください。

このSDKはSilverlight 1.0用のSDKです。

ダウンロードが完了したら、ファイルを実行してインストールを行います。途中にVisual Studio 2005用のテンプレートをインストールするか確認されますが、連載では使用しませんので飛ばしても問題ありません。

SDKの中にはドキュメントやクイックスタート、ツールなどが含まれています。それではさっそくこのSDKに含まれているSilverlight.jsをつかってSilverlightを表示してましょう。Silverlight.jsはTools/Silverlight.jsフォルダにありますので、コピーして取り出しておいてください。

Silverlight.jsを使って表示する

前回の文字を表示するサンプルを、Silverlight.jsを使って表示するのと、htmlファイル中に書いていたXAMLを外部ファイルに変更していきます。

以下が前回のサンプルのソースコードです。ファイル名はindex.htmで保存されているものとして、解説していきます。

<html>
  <head>
    <title>Hello Silverlight</title>
    <script type="text/xaml" id="xaml">
        <?xml version="1.0"?>
        <Canvas xmlns="http://schemas.microsoft.com/client/2007">
          <TextBlock Text="Hello World" FontSize="25" />
        </Canvas>
    </script>
  </head>
  <body>
    <object type="application/x-silverlight" width="200" height="200">
      <param name="background" value="#FF0000" />
      <param name="source" value="#xaml" />
    </object>
  </body>
</html>

まずは、さきほど取り出したSilverlight.jsをindex.htmと同じフォルダにコピーしてください。index.htmファイルのheader要素内にSilverliight.jsを読み込むためscriptタグを記述します。

<script type="text/javascript" src="Silverlight.js"></script>

次に、body要素以下のobject要素を削除して、変わりにdiv要素をagControlというid属性をつけて記述します。さらに今回のポイントであるSilverlight.jsに定義されているSilverlight.createObjectEx関数を使用して、Silverlightを表示するJavaScriptコードを記述します。ソースコードは以下のようになります。

<body>
<div id="agContainer"></div>
  <script type="text/javascript">
    Silverlight.createObjectEx({
      source : "#xaml",
      parentElement : document.getElementById("agContainer"),
      id : "agControl",
      properties : {
        version : "1.0",
        width : "200px",
        height : "200px",
        background : "#FF0000"
      },
      events : {
        onLoad : null,
        onError : null
      }
    });
  </script>
</body>

では、ここでindex.htmファイルをブラウザで表示してみましょう。前回と同じように、赤い四角の中に「Hello World」という文字が表示されています。

赤い四角の中に「Hello World」という文字が表示される

Silverlight.createObjectEx関数はparentElementで指定された要素の下に、ブラウザに対応したSilverlightプラグインを書きだすための要素(object要素やembed要素)を出力します。この出力された要素はIEであればIE Developer ToolbarやFirefoxであればFirebugなどを使用して確認することができます。

IE Developer ToolbarやFirebugを使って、出力された要素を確認することができる

XAMLを外部ファイルにする

続いて、htmlファイルに直接記述していたXAMLを外部ファイルに移動します。Index.htmのheader要素にあるXAMLを記述してあるscript要素の中を切り取って、新しいファイルにコピーします。また、XML宣言は必要ないので削除します。ファイル名はapp.xamlで保存して、index.htmと同じフォルダに配置してください。

<Canvas xmlns="http://schemas.microsoft.com/client/2007">
<TextBlock Text="Hello World" FontSize="25" />
</Canvas>

切り取り元のscript要素は必要ないので削除しましょう。index.htmのheader要素は以下のようにtitle要素とSilverlight.jsを読み込むscript要素のみになっています。

<head>
  <title>Hello Silverlight</title>
  <script type="text/javascript" src="Silverlight.js"></script>
</head>

では最後に、外部ファイル化したXAMLを読み込むように指定を行います。大方の予想通りかと思いますがSilverlight.createObjectEx関数のsourceの⁠#xaml⁠の部分を外部ファイル名の⁠app.xaml⁠に変更しましょう。変更ができたら保存して、再度ブラウザで開いてみてください。今までと同様に赤い四角の中に⁠Hello World⁠が表示されています。

これでSilverlight.jsを使って、Silverlightを表示することと、XAMLの外部ファイルへの移動が完了しました。

Silverlight.createObjectEx関数も外部ファイルにする

すでに今回の目的は達成できているのですが、若干htmlファイル内にJavaScriptのコードが残っているのが気になります。このコードも外部ファイルにしたいと思います。そうすることでhtmlもスッキリとして読みやすくなります。

XAMLの時と同様に、body要素のscript要素の中を切り取ってください。新しいファイルにcreateSilverlightという名前の関数を作成して、その中にコピーします。切り取り元のscript要素は必要ないのでもちろん削除しておいてください。

function createSilverlight(){
  Silverlight.createObjectEx({
    source : "#xaml",
    parentElement : document.getElementById("agContainer"),
    id : "agControl",
    properties : {
      version : "1.0",
      width : "200px",
      height : "200px",
      background : "#FF0000"
    },
    events : {
      onLoad : null,
      onError : null
    }
  });
}

作成したファイルはindex.htm.jsという名前で保存してください。SDKやその他の多くのサンプルなどではCreateSilverlight.jsというファイル名が使用されています。たしかにSilverlightを作成しているのでファイル名はその用途を表しているのですが、残念ながらparentElementの指定に対象となるid属性の値が記述されています。ほかにも詳細は後ほど記載しますが、idの値やwidth / heightの値など、特化した内容が含まれます。そのため、このファイルは他で使いまわすことが困難になってしまい、結局index.htm以外からは呼び出されないことになります。そうであれば、index.htmに従属するファイルであることをより明確に表現するほうが好ましいと考えられるため、筆者はindex.htm.jsのようなファイル名を好んで使用しています(効率よく使いまわせる場合もあるので、毎回この限りということではなく、ケースバイケースでどういうふうに命名するかを選択する必要はあるのですが⁠⁠。

では、作成したindex.htm.jsとcreateSilverlight関数を呼び出すためにindex.htmを編集します。header要素にindex.htm.jsを呼び出すscript要素を記述します。また、body要素のonload属性にてcreateSilverlight関数を呼び出すように指定します。

<html>
  <head>
    <title>Hello Silverlight</title>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="index.htm.js"></script>
  </head>
  <body onload="createSilverlight();">
<div id="agContainer"></div>
  </body>
</html> 

これで、Silverlight.createObjectEx関数の外部ファイル化も完了しました。index.htmを非常にすっきりさせることができました。今回の例だけでなく多くのSilverlightでの開発は、基本の最小構成としてこのようなファイル構成になります。

Silverlight.createObjectEx関数の解説

Silverlight.createObjectEx関数は前述したようにブラウザに対応したSilverlightプラグインを書きだすための要素(object要素やembed要素)を出力します。引数には今回のサンプル以外にも様々な値を指定できます。詳細を以下に記載します。


Silverlight.createObjectEx({
//xamlの位置
source : “app.xaml”,
//Silverlightを出力するDOMでの親要素
parentElement : document.getElementById(“agContainer”),
//プラグインを書きだす要素のID属性の値
id : ”agControl”,
properties : {
//プラグインを書きだす要素のwidth(文字列)
width : “1024”,
//プラグインを書きだす要素のheight(文字列)
height:'530',
//対応したプラグインがない場合に
//インストールプロンプトを表示するかどうか
inplaceInstallPrompt:false,
//プラグインの背景色
background:'#FFFFFF',
//ウィンドウレスで表示するかどうか(文字列)
isWindowless:”false”,
//最大フレームレート(文字列)
framerate:”24”,
//表示するSilverlightのバージョン(文字列)
version:”1.0”
},
  events:{
//エラーが発生した場合に呼び出される関数
onError:null,
//ロードされた時に呼び出される関数
    onLoad:null
},
//初期パラメーター(文字列)
initParams:”foo-,bar-”,
//onLoadイベントハンドラーの第2引数に渡される値
context:null
});

Silverlight.createObjectEx関数はその名に⁠Ex⁠とついていることから、Silverlight.createObject関数の拡張版です。Silverlight.createObject関数はまったく同一の機能を持つ関数ですが、少しだけ書き方が異なります。

Silverlight.createObject(
  "plugin.xaml",
  parentElement,
  "myPlugin",
  {
    width:'1024',
    height:'530',
    inplaceInstallPrompt:false, 
    background:'white', 
    isWindowless:'false', 
    framerate:'24', 
    version:'1.0' 
  },
  {
    onError:null, 
    onLoad:null 
  },
  null, 
  null
);

Silverlight.createObject関数には引数を並び順で指定するようになっており、名前で指定することができません。Silverlight.createObjectEx関数のほうがより説明的な記述ができるようになっています。そのため見た目の分かりやすさという観点から、筆者はSilverlight.createObjectEx関数のほうを好んで使います。どちらを使うかは好みによるところが大きいのですが、チームで開発する場合などは統一する必要があるでしょう。

次回予告

今回はSilverlight1.0のSDKを導入して、前回のサンプルをSilverlight.jsを使う、またXAMLを外部ファイル化する形に書き換えました。それによりSilverlightの開発における基本的な構成になりました。また、その過程でSilverlight.jsを使っても最終的に作成されるものは前回と同様にプラグインを表示するobject要素(またはembed要素)だということも見ました。

次回は、Silverlight1.0を使って簡単な動きのあるアプリケーションを作成します。お楽しみに。

おすすめ記事

記事・ニュース一覧