Hatena::ブログ(Diary)

匣の向こう側 - あまりに.NETな RSSフィード

2007-05-04(Fri)

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

折角のSilverlightなので自分のホームページでも動かしてみたくなりますね。

Microsoft® Silverlight™ Streaming by Windows Live™

マイクロソフトSilverlightのホスティングサービスを行っているので、早速、使わせてもらうことにします。

まずは、Windows Live IDの入手です。次に、

Sign In

次に上記ページのGet it freeボタンを押してSilverlight Streaming account IDを入手します。入手後、先ほどのページに戻って画面右上のSign inからサインインします。すると、画面左から

  • Manage Account
  • Manage Applications

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

ホスティングサービスの準備が出来たので、試しにテストアプリケーションを作成してみましょう。

完成するとこのようなアプリケーションになります。

Silverlightホスティングのサンプル

ほとんど廃墟になっている私のサイトに貼ってみました。(^^;

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

先日のサンプルと一部ファイル構成が変わっていますが、ホスティングするには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を1つ含み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」とします。で、アップロードするファイルには先ほどの1つにまとめたzipファイルを指定します。

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

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

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

(追記)

http://www.ne.jp/asahi/nami/mei/hello.zip

サンプル一式はここからダウンロードできます。IDは潰していますので、各自のIDに書き換えてください。

SeasonsSeasons 2007/05/05 12:27 連休中、狂ったようにさわってますが、Silverlightおもしろいっすね。
私のほうで、apache(coLinux)版の動作をまとめてみました。

akirameiakiramei 2007/05/05 14:06 おー、Linux環境で試してみたんですね。技術的にも面白いし、色々なプラットフォームでも動くし、今後が期待です。

私の方も仕事の方でSilverlightを使いたいので技術調査をしたいのですが、会社にそんなリソースがないので内職になりそーです。(^^;

SeasonsSeasons 2007/05/05 14:36 apacheサーバーが多いホスティングサービスでは、
かなり有効だと思ってます=coLinuxで仮想ネットワーク開発というスタイルが
自分の中で定着しているので、まとめた次第です。
私もしばらくは、内職で進めることになりそうですが(^-^;)

はてなユーザーのみコメントできます。はてなへログインもしくは新規登録をおこなってください。