[Blog翻訳] IE9 のサイトの固定機能を Adobe Flash と統合する
みなさん、こんにちは。Windows 開発統括部の古内です。
来週の 4 月 26 日 (火) から、いよいよ Internet Explorer (IE) 9 日本語版の提供が始まります。英語版などほかの言語については、すでに米国時間の 3 月 14 日より提供を開始していますが、東日本大震災に伴うインターネット回線への負荷軽減などを考慮して、日本語版についてはリリースを延期していました。
そこで、今回は 「祝! Internet Explorer 9 日本語版リリース」 と銘打って (ちょっと大袈裟?)、IE 9 に関する英語 Blog 記事をご紹介します。今日お届けするのは 2011 年 1 月 4 日に Developing for Windows Blog に投稿された Integrating IE9 Pinning with Adobe Flash という記事の翻訳で、IE 9 の新機能であるサイトの固定 (ピン留め) に関するプログラミングの内容です。明日も関連記事の翻訳を掲載予定ですので、どうぞお楽しみに !
IE9 のサイトの固定機能を Adobe Flash と統合する
ご承知のように、Internet Explorer 9 では、サイトの固定 (ピン留め) 機能を使用したデスクトップ統合がサポートされています。サイトの固定機能については、さまざまなリソース (MSDN のすばらしい記事 (英語)、Windows Summit での私のプレゼンテーション (英語) (日本語 PPT ファイルはこちら)、Scott Seiber によるピン留めサイトに関するブログ記事 (英語)、そして言うまでもありませんが Internet Explorer Test Drive (英語) 上のすばらしいデモ) で学ぶことができます。サイトの固定機能を使用すると Web アプリケーションを Windows に統合できるため、タスクバーへの統合、ジャンプ リスト、タスク バー プレビュー時のサイムネイル バーのボタンなど、便利な機能を利用できるようになります。
画期的なニュースとして、ピン留めサイトを Adobe Flash から直接利用する方法があります。それを実現するには、IE9 に実装されている JavaScript の固定 API を ActionScript と統合します。サイトの固定機能は IE9 で初めて利用できるようになったため、以下のサンプルは、IE9 で動作する Web ページに Flash コントロールを実装した場合にだけ機能します。JavaScript API と ActionScript の統合については、こちらの KB 記事 (英語) をご参照ください。これを IE9 のサイト固定にどう適用できるかを見ていきましょう。
概念を理解しやすくするために、Adobe Flex (英語) を使った簡単なサンプルを作ってみました。Adobe Flex を使用すると、MXML ファイルに埋め込んだ宣言的な ActionScript を使って、リッチ アプリケーションをすぐに作成することができます。Flash ムービー (ActionScript を含んだ FLA ファイル) を作成する場合も同じ方式が通用します。以下に、私が作成したサンプルの画面を示します。ご覧のとおり、これは Flash として実装されています。
私のサンプルは、以下のようなピン留めサイトの機能を実装しています。
1. オーバーレイ アイコン (このスクリーンショットでは、星が表示されています)。
2. サイトをブラウザーで開き、サイトのアイコン上にマウス ポインターを置くと、サイムネイル バーのボタン ([戻る] と [進む]) が表示されます。
3. カスタム カテゴリ内のジャンプ リスト アイテム ([Custom created items] カテゴリ内の “Microsoft.com”)。
さらに、このサンプルではサイトの固定用のメタタグを実装し、カスタムのお気に入りアイコンやカスタム タスクを、index.template.html ファイルで直接定義しています。
統合について興味深いトピックが 2 つあります。ActionScript からの JavaScript API の呼び出しと、JavaScript からの ActionScript の呼び出しです。1 つずつ見ていきましょう。
ActionScript からの JavaScript API の呼び出し
ジャンプ リスト アイテムを追加したり、サイトが固定モードで動作しているか確認したりするには、JavaScript を ActionScript から呼び出す必要があります。
JavaScript API の呼び出しと戻り値の取得は、ExternalInterface.call メソッド (英語) を使って行います。このメソッドは、2 つのパラメーター、つまり、呼び出す関数と、その関数に渡すパラメーターを取ります。以下に、私が作成した ActionScript コードのサンプルを示します。
ExternalInterface.call("addJumpListItem", "init");
addJumpListItem は、JavaScript で次のように宣言された関数です。
function addJumpListItem (param).
以下のように、ActionScript コードでExternalInterface.call の戻り値をチェックすれば、JavaScript 関数から戻る値をチェックすることもできます。
protected var siteMode:Boolean;siteMode = ExternalInterface.call("checkSiteMode", "");
もちろん、対応する JavaScript 関数を以下のように宣言する必要があります。
function checkSiteMode ()
この関数は、true または false のいずれかを返します。
JavaScript からの ActionScript の呼び出し
サイムネイル バーのボタンをクリックするなど、ピン留めサイトを操作する際に Flash コントロールで特定のタスクを実行する場合は、Flash コントロールに実装されているメソッドを呼び出します。
ActionScript を JavaScript から呼び出すには、ステップを追加する必要があります。
1. まず、コールバック関数 (JavaScript によって以下のように呼び出される) を登録します。
ExternalInterface.addCallback ("getTextFromJavaScript",getTextFromJavaScript);
2. この関数は、次のように宣言します。
protected function getTextFromJavaScript(str:String) : void {…}
3. 最後に、JavaScript からこの関数を呼び出します。
function thumbnailclick(btn) {
if (btn.buttonID == prev)
window["LeonTest"].getTextFromJavaScript ("previous");
else if (btn.buttonID == next)
window["LeonTest"].getTextFromJavaScript ("next");
}
“LeonTest” は、Flash Player にパラメーターとして渡される、Flash ムービーの ID です。通常、ID にはプロジェクト名が使われますが、必要に応じてもちろん変更できます。
細かい事ですが、ついでに 2 つのことをご説明します。まず、ActionScript を宣言的な MXML で使用する際は、JavaScript コールバックをセットアップする次のような API を呼び出します。
ExternalInterface.addCallback ("getTextFromJavaScript", getTextFromJavaScript);
コールバックは関数のスコープ内で行う必要があります。私が handleCreationComplete() 関数のスコープ内で呼び出しを行っているのはそのためです。この関数は、アプリケーションが生成されるときに呼び出されます。
もう 1 つは、ExternalInterface.addCallback で登録したコールバック関数も ExternalInterface.call によって呼び出される JavaScript 関数も、取る関数は、いずれも 1 つだけということです。つまり、複数のパラメーターを渡す必要がある場合、関数呼び出し時にそれらを連結し、その後、個々のパラメーターに分割する必要があります。私は、新しいジャンプ リスト アイテムを追加する必要があるとき、この方法を使用します。
protected function addJumpList_clickHandler(event:MouseEvent):void
{
…
ExternalInterface.call("addJumpListItem",
"additem&" + itemUrl.text + "&" + itemText.text);
…
}
ご覧のとおり、ここでは “&” 文字を区切り記号として使用し、3 つの異なる値 (“addItem” 文字列、アイテムの URL、アイテムのテキスト) を連結しています。そして、以下のように、これらの値を JavaScript 内で分割します。
function addJumpListItem (param) {
var myValue = param.split ("&");
…
}
次のステップ
このサンプルを改善し、実用的なものにするには、アイテムの URL とテキストをエンコードし、それら両方の中で区切り記号 “&” を使用できるようにするとよいでしょう (現状では、それらに区切り記号 “&” が含まれていると、値が正しく解析されません)。
また、他の固定機能 (例: ジャンプ リスト アイテムのクリア) を実装し、コードを改善してもよいでしょう。
最後までお読みいただき、ありがとうございました。お役に立てば幸いです。