[Blog翻訳] IE9 のサイトの固定機能を Microsoft Silverlight と統合する
みなさん、こんにちは。Windows 開発統括部の古内です。
昨日お約束したように、今日も Developing for Windows Blog から 2011 年 1 月 10 日に投稿された Integrating IE9 Pinning with Microsoft Silverlight という英語記事の翻訳をお届けします。内容的に昨日の記事とほぼ同じですが、Silverlight で使用する方法について説明されています。
Internet Explorer、Silverlight ともども、どうぞよろしくお願いいたします!
IE9 のサイトの固定機能を Microsoft Silverlight と統合する
IE9 のサイトの固定 (ピン留め) API を Adobe Flash と統合する方法を説明した前回の記事 (英語 ・ 日本語) を読まれた方の中には、Microsoft Silverlight と統合することもできるのではないかとお考えの方がいらっしゃるかと思いますが、 実際のところ可能です!
IE9 のサイトの固定 API を Microsoft Silverlight と統合する概念を理解しやすくするために、前回の Flash サンプルとまったく同じ外観と機能を持つアプリケーションを作成してみました。
このアプリケーションは、機能的には Flash のサンプルとまったく同じなので、サンプルの機能については割愛し、実装の詳細について説明します。
HTML と Silverlight マネージ コードとの間でやりとりする方法を説明した文書は、MSDN のこちらのページでご参照ください。統合について興味深いトピックが 2 つあります。Silverlight マネージ コードからの JavaScript API の呼び出しと、JavaScript からの Silverlight マネージ コードの呼び出しです。1 つずつ見ていきましょう。
Silverlight からの JavaScript API の 呼び出し
ジャンプ リスト アイテムを追加したり、サイトが固定モードで動作しているか確認したりするには、JavaScript を Silverlight から呼び出す必要があります。
JavaScript API の呼び出しと戻り値の取得は、HtmlPage.Window.Invoke メソッドを使って行います (完全なチュートリアルについては、こちらをご参照ください)。このメソッドは、いくつかのパラメーター、つまり、呼び出す関数と、その関数に渡すパラメーターの可変リストを取ります。以下に、私が作成した Silverlight コードのサンプルを示します。
HtmlPage.Window.Invoke("addJumpListItem", itemUrl.Text, itemText.Text )
addJumpListItem は、JavaScript で次のように宣言された関数です。
function addJumpListItem (itemUrl, itemText)
以下のように、Silverlight コードで HtmlPage.Window.Invoke (英語) 呼び出しの戻り値をチェックすれば、JavaScript 関数から戻る値をチェックすることもできます。
private Boolean siteMode = false;
siteMode = (Boolean)HtmlPage.Window.Invoke("checkSiteMode");
もちろん、対応する JavaScript 関数を次のように宣言する必要があります。
function checkSiteMode ()
この関数は、true または false のいずれかを返します。
JavaScript からの Silverlight マネージ コードの呼び出し
サイムネイル バーのボタンをクリックするなど、ピン留めサイトを操作する際に特定のタスクを実行する場合は、Silverlight マネージ コントロールに実装されているメソッドを呼び出します。完全なチュートリアルはこちらにありますが、以下に、私のサンプルの関連部分を説明します。
Silverlight を JavaScript から呼び出すには、ステップをいくつか追加する必要があります。
1. まず、メソッドがスクリプト可能であることを示す必要があります。これは、次のように [ScriptableMember] 属性を適用して行います。
[ScriptableMember]
public void getEventFromJavaScript(String str)
2. さらに、getEventFromJavaScript メソッド (スクリプトに利用できる) を含むクラスのインスタンスを、以下のメソッドを使用して登録します。
HtmlPage.RegisterScriptableObject("myapp", this)
そして、Silverlight コントロールの実装に使用する JavaScript と HTML ファイルを少々変更します。
1. まず、Silverlight コントロールに onLoad パラメーターを追加します。これは、Silverlight コントロールを実装している HTML ページで <param name="onLoad" value="pluginLoaded" /> を記述して行います。Silverlight の onLoad イベントについては、こちら (英語) をご覧ください。
2. JavaScript の pluginLoaded 関数を追加することにより、onLoad イベントを処理し、Silverlight コントロールのインスタンスへの参照を取得します。
function pluginLoaded(sender, args) {
slCtl = sender.getHost();
}
3. 最後に、Silverlight のメソッドを実際に呼び出します。
function thumbnailclick(btn) {
if (btn.buttonID == prev)
slCtl.Content.myapp.getEventFromJavaScript("previous");
else if (btn.buttonID == next)
slCtl.Content.myapp.getEventFromJavaScript("next");
}
細かい事ですが、ついでに申し上げると、私は、Visual Studio 2010 と Microsoft Silverlight Tools 4 for Visual Studio 2010 を使ってサンプルを作りました (Microsoft Silverlight Tools 4 for Visual Studio 2010 は、こちら (英語) から入手できます)。Silverlight アプリケーションをデバッグできるようにするには、こちら から Silverlight Developer Runtime 4 をインストールしてください。
この固定サンプルを Web サーバーから実行するときは、こちらで説明されているとおり、正しい MIME タイプが、 *.xap ファイルに確実に作成されるよう注意してください。
デバッグについて一言
1. Visual Studio で Silverlight プロジェクトを作成すると、Silverlight コントロールを実装したテスト HTML ファイルが作成されます。ただし、ローカル ドライブの URL を起動しても、固定機能はテストできません。また、必要な固定のメタタグを追加しても、作成されたテスト HTML ファイルを変更することはできません (加えた変更が無視されるため)。
2. この問題を解決するには、テスト ファイルを自分の HTML ファイルにコピーします (私は、SLPinningDemo.html というファイルにコピーしました)。そして、このファイルにすべての必要な変更を加え、ファイルをプロジェクトに追加します。実際のテストとデバッグを行うには、サーバー上に仮想ディレクトリを作成し、HTTP プロトコルを使用して HTML を開く必要があります (例: https://leonbrhpmain/sltest/SlPinningDemo.html)。
3. Web サイトの固定には HTTP を使用したアクセスが前提となるため、固定された実際のサイトを実行しているときは、F5 を使って固定コードをステップ実行することはできません (F5 では、テスト HTML ファイルがローカル ドライブから呼び出されるため)。私が見つけた解決策は、次のとおりです。
a. 上記のステップ 2 で作成した Web サーバー上の HTML ファイルを IE9 で開き、ピン留めします。
b. ピン留めされたアプリケーション アイコンをクリックし、ピン留めアプリケーションを開きます。
c. 実行中のすべての iexplorer.exe プロセスに Visual Studio デバッガを適用します (こうすれば、目的のプロセスはどれかを考えずに済みます)。コードにブレークポイントを設定すれば、固定された実際のサイトで呼び出されるマネージ コードをいつでもデバッグできます。
次のステップ
Silverlight のマネージ コードは、JavaScript との充実した統合性を備えています。Silverlight では、Flash とは異なり、各種の型を持つさまざまな数のパラメーターを JavaScript との間でマーシャリングできます。お気付きかもしれませんが、
function addJumpListItem (itemUrl, itemText)
は、2 つの別々のパラメーターを取ります。そのため、それらを連結し、1 つの文字列から複数のパラメーターに分割するという Flash での作業を、ここでは行いませんでした。Silverlight と JavaScript の統合を計画されている方は、Silverlight と JavaScript との間のマーシャリングを完全に理解されるとよいと思います。
最後までお読みいただき、ありがとうございました。お役に立てば幸いです。