part 1: create a Silverlight project

Silverlight を Web ページに追加するにはどうすればよいでしょうか。典型的な Silverlight プロジェクトには、次の 4 つのファイルがあります。コンテンツをホストしたり表示するための HTML ファイル、Silverlight.js ファイル、XAML ファイル、そして JavaScript ファイルです。ここでは、Silverlight プロジェクトを作成する方法と、Silverlight コンテンツの HTML ファイルへの追加方法について段階を分けて解説します。このガイドは、以下のセクションで構成されています。

始める前に...

Silverlight コンテンツを作成する前に、次のものが必要です。

step 1: HTML ページへのスクリプト参照の追加

このステップでは、Silverlight.js と createSilverlight.js という JavaScript ファイルへの参照を、HTML ページに追加し、Silverlight コントロールをホストする要素を作成します。Silverlight.js ファイルは、Silverlight コンテンツが複数のプラットフォームで表示されるようにするため JavaScript で書かれた補助ファイルです。createSilverlight.js ファイルは step 2 で作成するファイルです。

  1. Silverlight.js ファイル を HTML ページと同じディレクトリにコピーします。Silverlight.js リンクを右クリックして [対象をファイルに保存(A)] を選び、Silverlight.js ファイルを HTML ページと同じディレクトリに保存してください。

  2. HTML ページを開いて、<head> セクションの中に以下のマークアップを追加します。まだ、HTML ファイルを準備していない場合は、SampleHTMLPage.html リンクを右クリックして、 [対象をファイルに保存(A)] を選び、Silverlight.js ファイルと同じディレクトリに SampleHTMLPage.html を保存してください。

    <script type="text/javascript" src="Silverlight.js"></script>
  3. 空のファイルを作成し、createSilverlight.js という名前にしてください。このファイルは、step 3 で使います。

  4. HTML ページ（SampleHTMLPage.html）の <head> の中に、もうひとつのスクリプト参照を追加します。今回は、src に createSilverlight.js を指定します。

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

    5. これで HTML ページは、次のような基本要素を含むものになります。

    <!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" xml:lang="en">
  <head>
    <title>A Sample HTML page</title>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="createSilverlight.js"></script>
  </head>
  <body>
  </body>
</html>

step 2: HTML 要素の作成と初期化部分k

  1. HTML ファイルの中の、<body> タグと、Silverlight コンテンツを表示させたい場所の間に以下の 3行を追加して、ホスト用 HTML 要素を作成します。

    <!-- Silverlight コントロールを表示する場所 -->
<div id="mySilverlightControlHost">
</div>

    <div> タグの ID は好きなものに変更できます。複数の Silverlight コントロールを同じページに表示させたい場合は、それぞれ異なる ID を使って、この手順を繰り返してください。

  2. 初期化部分の作成: 前のステップで追加した HTML の後ろに、以下の HTML ＋スクリプトを追加します。

    <script type="text/javascript">
        
        
        // 前のステップで作成した div 要素を取り出す。
        var parentElement = 
            document.getElementById("mySilverlightPluginHost");
        
        // この関数は Silverlight コントロールを作成する。
        createMySilverlightPlugin();
        
</script>

    複数の Silverlight コントロールを同じページに作成するときは、それぞれの関数名を異なるものにするか、関数の引数として独自の ID を設定して使うようにして、このステップを繰り返してください。また、それぞれのスクリプト部分は、前のステップで作成した対応する DIV の直後に置くようにしてください。

step 2 の最後にたどりつきました。HTML ファイルは、以下の要素を含んでいます。

<!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" xml:lang="en">
  <head>
    <title>A Sample HTML page</title>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="createSilverlight.js"></script>
  </head>
  <body>

    <!-- Silverlight プラグインを表示する場所-->
    <div id="mySilverlightPluginHost">
    </div>
    <script type="text/javascript">
        
        
        // 前のステップで作成した div 要素を取り出す。
        var parentElement = 
            document.getElementById("mySilverlightPluginHost");
        
        // この関数は Silverlight プラグインを作成する。
        createMySilverlightPlugin();
        
    </script>

  </body>
</html>

step 3: コントロールを初期化する作成関数の定義

Open the createSilverlight.js ファイルを開いて、以下の JavaScript 関数を追加してください。

      
function createMySilverlightPlugin()
{  
    Silverlight.createObject(
        "myxaml.xaml",                  // Source プロパティの値
        parentElement,                  // DIV ホストへの DOM リファレンスタグ
        "mySilverlightPlugin",         // ユニークなプラグイン ID 値
        {                               // インスタンスごとのプロパティ
            width:'300',                // 長方形領域の幅（ピクセル値）
            height:'300',               // 長方形領域の高さ（ピクセル値）
            inplaceInstallPrompt:false, // 不正バージョンを検出した場合に、
                                        // インストールプロンプトを表示するかどうか
            background:'#D6D6D6',       // プラグインの背景色
            isWindowless:'false',       // プラグインをウィンドウレスで表示するか
            framerate:'24',             // MaxFrameRate プロパティ値
            version:'1.0'               // Silverlight のバージョン
        },
        {
            onError:null,               // OnError プロパティの値 -- 
                                        // イベントハンドラの関数名
            onLoad:null                 // OnLoad プロパティの値 -- 
                                        // イベントハンドラの関数名
        },
        null);                          // Context の値 -- イベントハンドラの関数名
}

このスクリプトは、コントロールの高さや幅（百分率も使えます）、 Silverlight コンテンツを含む XAML ファイル名、 コントロールをウィンドウレスで表示するかどうかを指定する値などを 変更できるようなパラメータを持っています。

Silverlight コンテンツを同じページに追加するときは、 それぞれについて新たな関数を作成してください。 また、それぞれの関数におけるコントロール ID の値 （この例における "mySilverlightControl"）には、 異なるものを指定してください。

step 4: Silverlight コンテンツファイルの作成

HTML ファイルを構成したので、今度はコンテンツを作成します。

  1. HTML ファイルと同じディレクトリに空のファイルを作成し、"myxaml.xaml" という名前を付けます。以前のステップでソースファイルのパラメータを変更しているときは、ファイル名もそれに合わせてください。

  2. (任意で) Silverlight プロジェクトがイベントを処理したり、動的にコードを生成したり、ユーザーと対話性を持たせたい場合は、このために別のスクリプトファイルを追加する必要があります。 このスクリプトを含む JavaScript ファイルを作成して、ホストする HTML ページにファイルへの参照を追加します。以下のサンプルは、my-script.js というファイル名のスクリプトファイルへの参照を作成しています。

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

    これで、HTML ファイルは、次の要素を含みます。

      <!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" xml:lang="en">
  <head>
    <title>A Sample HTML page</title>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="createSilverlight.js"></script>
    <script type="text/javascript" src="my-script.js"></script>
  </head>
  <body>

    <!-- Silverlight プラグインを表示する場所-->
    <div id="mySilverlightPluginHost">
    </div>
    <script type="text/javascript">
        
        
        // 以前のステップで作成した div 要素を取り出す。
        var parentElement = document.getElementById("mySilverlightPluginHost");
        createMySilverlightPlugin();
        
    </script>

  </body>
</html>

複数の Silverlight コントロールを作成する

複数の　Silverlight コントロールを同じページで作成したいときは、それぞれのコントロールについて 2, 3, 4 のステップを繰り返します。

  • ホスト用の <div> タグ（ステップ 2a で作成）には異なる ID を与えます。
  • 初期化部分（ステップ 2b で作成）は、先のステップ 2a で作成した <div> タグの直後に置きます。
  • 作成関数（ステップ 3 で作成）には、異なる名前を与えます。コントロール ID のパラメータにも異なる名前を付けます。

次のステップ

次のステップは、XAML ファイルの作成です。XAML ファイルへのコントロールの追加方法について学びます。

Copyright © 2007 Microsoft Corporation. All rights reserved. 使用条件.