始めよう!Silverlight

第2回 SDKを導入しよう

この記事を読むのに必要な時間:およそ 4 分

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を使って,出力された要素を確認することができる

著者プロフィール

丸山和秀(まるやまかずひで)

株式会社アークウェイ システムクリエイター。趣味はドラム。社会人になりたてのころは職業はドラマーだと豪語していたが,いつのまにかシステム開発の楽しさにのめりこみ,仕事内容が職業になっていた。パッケージベンダにて金融向けパッケージソフトの開発を行うSEを経て現職へ。現在は研究開発としてRIAに取り組み中。

コメント

コメントの記入