EternalWindows
Silverlight / Silverlightの概要

インターネットの急速な発達は、人々に様々な情報やサービスを提供するだけでなく、 アプリケーションの実行環境も変化させる大きな側面を持っています。 それは、これまでデスクトップアプリケーションで行ってきた作業を、インターネットにアクセスしたブラウザ上で行うというものであり、 これによってユーザーはブラウザからデスクトップへの切り替や、専用のアプリケーションのインストールなどを行う必要がなくなります。 こうした利点に注目し、現在ではインターネット上で動作するアプリケーションの開発が増えてきていますが、 現行のデスクトップアプリケーションに並ぶ機能やUIを、HTML上で実現することはそれほど容易ではありません。 確かにJavaScriptを使用すれば、ユーザーの操作に応じて特定のタグの属性を変更できますが、 このような動的にHTMLを書き換えるというスタイルは、あまり慣れていないという開発者も多いでしょう。 ブラウザにプラグインされたSilverlightを使用する場合は、 C#などの言語と共に.NETの機能を使用できるため、 .NETの開発者はこちらの技術でUIを実現することもあります。

Silverlightの正体は、AvtiveXコントロール(npctrl.dll)です。 AvtiveXコントロールといえばAdobe社のFlashが有名ですが、 SilverlightはこのFlashとよく似た性質を持っています。 たとえば、Flashはswfファイルの内容を自身のウインドウに表示しますが、 SilverlightはXAMLファイルやxapファイルの内容をウインドウに表示します。 つまり、Silverlightを通じてUIを実現したい開発者は、 XAMLファイルやxapファイルをSilverlightに読み込ませればよいことになります。 また、Silverlightの正体がAvtiveXコントロールであるという点は、 通常のデスクトップアプリケーションにとっても非常に有用なものです。 たとえば、AvtiveXコントロールの章では自作のアプリケーションにFlashのウインドウを表示しましたが、 このようなことはSilverlightでも同様に可能です。 Silverlightを自作のアプリケーションに表示することは、Silverlightをホストするなどと呼ばれ、 自作のUIとSilverlightのUIを融合できる強力な手段になります。

Silverlightをホストにするにあたって、Silverlightで使用されるXAMLファイルの構造を理解しておくべきと言えます。 この構造を理解しておくことで、アプリケーション内でオブジェクトの情報を取得したり、 イベントを検出したりできるようになります。 次に、XAMLファイルの例を示します。

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Rectangle
     Width="200" Height="200" Fill="Red" MouseLeftButtonDown="RectangleClicked"/>
</Canvas>

Silverlightで何らかのイメージを描画する場合は、基本的にCanvasオブジェクトを最初に指定します。 xmlnsはSilverlightの名前空間を意味し、 xmlns:xはXAMLの名前空間を意味します。 基本的にこれらの値は固定になるはずです。 Rectangleオブジェクトを指定した場合は、長方形が描画されることになります。 幅と高さについては上記の通りであり、FillがRedであることから赤色で表示されることになります。 MouseLeftButtonDownは、マウスの左ボタンが押された場合に実行するイベントハンドラを指定します。 XAMLファイルではUIの情報を定義することを目的としているため、 メソッドの実装は別のファイルに記述することになります。

上記のXAMLファイルを使用する例として、Silverlightをブラウザ上で表示するHTMLを示します。 ブラウザ上でSilverlightを表示する方法を理解していれば、 アプリケーション内でSilverlightを表示する際にも、その知識が役に立ちます。 実行結果を確認する場合は、こちらをクリックしてください。

<html>
  <head>
    <title>Silverlight test</title>
    <script type="text/JavaScript" src="Silverlight.js"></script>
  </head>

  <body>
    <div id="silverlight area"></div>
  </body>

  <script type="text/JavaScript">
    Silverlight.createObject(
      "sample.xaml", 
       document.getElementById("silverlight area"),
       "silverlight sample",
       {
         width: "400",
         height: "300",
         background: "#FFFFFF",
         version: "1.0"
       },
       {
         onError: null,
         onLoad: null
       },
       null,
       null
    );

    function RectangleClicked()
    {
       window.alert("クリックされました。");
    }
  </script>
</html>

1つ目のscriptタグでは、Silverlight.jsというファイルを読み込むようにしています。 Silverlight SDKをインストールしていれば、Silverlight.jsは%ProgramFiles%\Microsoft SDKs\Silverlight以下に存在しているはずであり、 これを上記のhtmlファイルと同じフォルダにコピーしておきます。 bodyタグに記述しているdivタグは、Silverlightを表示するエリアを示す指標です。 このタグは具体的な中身を持っていませんが、実行時にはSilverlightによってタグの中身が更新されることになります。 Silverlightが自身を表示すべきタグを一意に識別できるように、divタグには任意のidを指定しておく必要があります。 2つ目のscriptタグでは、Silverlight.jsに定義されているcreateObjectを呼び出してSilverlightを作成しています。 第1引数は使用するXAMLファイルの名前であり、このファイルはhtmlファイルと同じフォルダに配置しておきます。 第2引数はSilverlightの表示先となるタグであり、これはgetElementByIdにタグのIDを指定すれば取得できます。 第3引数はSilverlightを一意に識別するIDを指定します。 第4引数はプロパティを指定し、第5引数はイベントハンドラを指定します。 第6引数と第7引数はnullで問題ありません。 RectangleClickedは、XAMLファイルのMouseLeftButtonDownで指定したイベントハンドラです。 長方形がクリックされた場合は、このイベントハンドラが実行されることになります。

上記ではイベントハンドラの実装をJavaScriptで行っていますが、 Silverlight 2からはC#やVBなどの言語で実装することが可能になっています。 このような場合は、開発環境としてVisual Studioを使用することができ、 最終的に出力されるファイルの拡張子はxapになります。 xapファイルは、アプリケーションマニフェストとDLLを圧縮したファイルであり、 その圧縮形式はzip形式と全く同じになっています。 つまり、xapという拡張子をzipに変更すれば、圧縮されているファイルを確認することができます。 xapファイルを読み込みたい場合は、そのファイル名をSilverlight.createObjectの第1引数に指定します。


戻る