はじめてのSilverlightホスティング

折角のSilverlightなので自分のホームページでも動かしてみたくなりますね。
Microsoft® Silverlight™ Streaming by Windows Live™
マイクロソフトでSilverlightのホスティングサービスを行っているので、早速、使わせてもらうことにします。

まずは、Windows Live IDの入手です。次に、
Outlook.com - Microsoft free personal email
次に上記ページのGet it freeボタンを押してSilverlight Streaming account IDを入手します。入手後、先ほどのページに戻って画面右上のSign inからサインインします。すると、画面左から

• Manage Account
• Manage Applications

が、選択可能になります。SilverlightアプリケーションのアップロードにはManage Applicationsを使います。

ホスティングサービスの準備が出来たので、試しにテストアプリケーションを作成してみましょう。
完成するとこのようなアプリケーションになります。
Silverlightホスティングのサンプル
ほとんど廃墟になっている私のサイトに貼ってみました。(^^;

用意するファイルは以下のとおりです。

• Silverlight.js (SDK付属)
• hello.xaml
• hello.xaml.js
• CreateSilverlight.js
• manifest.xml

先日のサンプルと一部ファイル構成が変わっていますが、ホスティングするにはDefault.htmlが不要となり、変りにmanifest.xmlが必要になります。では、各ファイルを順に見ていきましょう。

Silverlight.jsはSDK付属をそのまま使うので説明は省きます。

hello.xaml

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Background="Yellow"
   MouseLeftButtonDown="onClick">    
  <TextBlock x:Name="textBlock" Text="Click Me!" FontSize="32"/>
</Canvas>

ルートXAMLです。TextBlockを１つ含みClick Me!という文字列が設定されています。また、イベントハンドラとして左ボタンクリックを行うとonClick関数が呼び出されます。

hello.xaml.js

var flag=false;
function onClick(sender, args) {
    var msg="";
    flag=!flag;
    if (flag) {
    msg="Hello, Silverlight!";
    }
    else {
    msg="Click Me!";
    }
    
    sender.findName("textBlock").Text=msg;
}

イベントハンドラに登録した関数が定義されています。処理は見てのとおり、「Click Me!」と「Hello, Silverlight!」を交互に設定するだけです。

CreateSilverlight.js

function CreateSilverlight() {
  Sys.Silverlight.createHostedObjectEx( {
    source: "streaming:/Silverlight Streaming account ID/hello",
    parentElement: helloElement});
}

sourceの書式は

source:streaming:/Silverlight account ID/アプリケーション名

となっています。Silverlight Streaming account IDには入手したIDを指定してください。

最後にmanifest.xmlですが、これはホスティングしたアプリケーションの初期パラメータとなります。

<SilverlightApp>
    <source>hello.xaml</source>
    <width>320</width>
    <height>240</height>
    <background>yellow</background>
    <jsOrder>
        <js>Silverlight.js</js>
    <js>hello.xaml.js</js>
        <js>CreateSilverlight.js</js>
    </jsOrder>
</SilverlightApp>

ここでは、画面サイズと背景色及び、ロードするJavaScriptの順序を指定しています。

これでファイルは揃いました。あとはこれをアップロードするのですが、これらのファイルを1つのzipファイルに纏める必要があります。zipファイルにまとめたら、
http://silverlight.live.com/files.aspx
ここから、「Upload a Silverlight Application」を選択してアップロードします。(注意：サインイン済みであること)
アプリケーション名は、ここでは「hello」とします。で、アップロードするファイルには先ほどの１つにまとめたzipファイルを指定します。

アップロードに成功すると「Application Properties」ページが表示されます。ここでは、

• Upload Updated Application (同一のアプリケーションを更新する場合に使用)
• Launch Application Test Page (アプリケーションのテストをします)
• Delete Application (アプリケーションを削除します)

上記のアクションを行うことができますので、アプリケーションのテストしてみると良いでしょう。また、Silverlightアプリを自分のページに貼りつけるための手順も表示されていますので、試してみてください。

(追記)
http://www.ne.jp/asahi/nami/mei/hello.zip
サンプル一式はここからダウンロードできます。IDは潰していますので、各自のIDに書き換えてください。