Web サイトを Windows 8 アプリに接続する
本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。
【元記事】Connect Your Web Site to Your Windows 8 App2011/10/21 9:28 AM
Windows 8 Metro スタイルのアプリによって、開発者は Web サイトのエクスペリエンスをこれまでにない新たな段階へと引き上げることができます。
Metro スタイルのアプリでは、ユーザーが没頭できて美しく、他のアプリや Windows の各種機能との接続がスムーズなエクスペリエンスを構築できます。
アプリは Windows Runtime を活用して、ローカルのファイルやフォルダーへのシームレスなアクセス、Windows 8 チャームとの統合による共有や検索、ローカルに接続されたデバイスの操作など、ブラウザー単独では実現できなかった機能を提供できます。Windows Store では、ユーザーが関心を持っているアプリを参照、検索、入手するための、優れたエンド ユーザー エクスペリエンスが提供されています。
ここでは、Windows 8 の Metro スタイル Internet Explorer で Web サイトとアプリを接続するための機能を説明します。また、Web 開発者がこの接続の作成に使用するメカニズムについても説明します。
Web を参照してアプリを見つける
Metro スタイルのアプリを検索したり、それに接続したりする場合には、Web を参照するのが自然な方法です。Metro スタイルの Internet Explorer では、お気に入りのサイトでアプリが利用可能になると通知されます。アドレス バーから、Windows Store のアプリをシームレスに入手できます。Web サイトから、関連付けられているインストール済みのアプリにシームレスに切り替えることもできます。
開発者は、Metro スタイルのアプリを作成したら、既存の Web サイトの利用者にアプリを提供するために、単純なマークアップをサイトに追加してアプリとの接続を作ることができます。この接続によって、ユーザーはサイトを訪問したときに、Metro スタイル Internet Explorer のアドレス バーから直接、アプリを簡単に見つけることができます。
アプリを入手する
お気に入りの Web サイトを参照するだけで、そこに関連付けられたアプリをサイト アイコンを通して見つけることができます。サイト アイコンは、IE がサイトのアプリを検出すると、ボタンに変化します。このボタンをタップすると、Windows Store にあるアプリの説明に移動します。
アプリに切り替える
Web サイトに関連付けられた Metro スタイルのアプリがインストール済みの場合は、そのサイトに移動したときにサイト アイコンのボタンを使って、直接そのアプリに切り替えることができます。
たとえば、友人から電子メールやソーシャル メディアで Web コンテンツへのリンクが送られてきて、そのリンクから Metro スタイルのブラウザーを起動したとします。このサイトに関連付けられたアプリがある場合は、サイト アイコンをタップするとそのアプリ名が表示されます。それを選択するとアプリが起動し、アプリ内でまったく同じコンテンツを利用できます。
実際の動作については、次のビデオを参照してください。
Metro スタイルの Internet Explorer で Web サイトと Windows 8 Metro スタイルのアプリを接続する方法を説明するビデオ
内部のしくみ
Web 開発者は、Web サイトとその Windows 8 アプリを、サイト上の単純なマークアップで関連付けることができます。Web ページの <head> 要素に次のメタ タグを含めます。Metro スタイルの Internet Explorer でサイト アイコンのボタンを提供するには、次の "両方" のタグが必要です。
<meta name="msApplication-ID" content="microsoft.build.App" />
<meta name="msApplication-PackageFamilyName" content="microsoft.build_8wekyb3d8bbwe" />
これらのタグが存在する場合、Metro スタイルの IE はこれらのタグを使用して、アプリが PC に既にインストールされているかどうかを判定します。インストールされていない場合は、Windows Store にあるアプリの説明ページに直接移動できるリンクを表示します。Windows 8 のデスクトップ版の IE10 では、このリンクは表示されません。
上記の 2 つの必須タグを含めて、サイト、ストア、アプリの連携を制御する <meta> タグは 5 つあります。次の表に、すべてのタグを示します。
| 名前 | 内容 |
|---|---|
| msApplication-ID | 必須。アプリケーション マニフェストからの、パッケージに相対的なアプリ ID です。サイトとアプリをリンクするために使用します。 |
| msApplication-PackageFamilyName | 必須。アプリの公開時に Visual Studio で作成される、アプリのパッケージ ファミリ ネームです。サイトとストアをリンクするために使用します |
| msApplication-Arguments | オプション。アプリに渡す引数の文字列です。既定では、IE は Web ページの URL を渡しますが、このタグを使ってコンテキストに合わせた文字列を渡すことができます。 |
| msApplication-MinVersion | オプション。インストール済みアプリとして最小限必要なバージョンを指定します。ユーザーが Web ページから、これより古いアプリに切り替えようとした場合、まずはアプリ更新のためのストアに移動します。 |
| msApplication-OptOut | オプション。ページで、この機能のすべてまたは一部を無効にすることを可能にします。
|
msApplication-Arguments の処理
利用者にとって最も快適なエクスペリエンスを構築するには、コンテキストを維持してサイトからアプリへ切り替わるようにすることが重要です。
たとえば上のビデオでは、Web サイトで携帯電話のレビュー記事を参照中にアプリに切り替えたとき、ユーザーはアプリ内で自動的に携帯電話のレビューに誘導されています。これにより、ユーザーはサイトからアプリへの途切れないエクスペリエンスを得られます。
msApplication-Arguments を使用すると、このような機能を実現できます。このメタ タグの content 文字列は、引数文字列としてアプリに渡されます。アプリはこのパラメーターを解析して、アプリ内の関連するコンテンツをユーザーに表示します。
次のコードは、HTML と JavaScript で作成された Metro スタイルのアプリで、このパラメーターを処理する方法を示しています。
// Developer Preview Build で提供されている Visual Studio Express 11 テンプレートの default.js ファイルで使用可能な関数
WinJS.Application.onmainwindowactivated = function (e) {
if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
// このコードを挿入して、Metro スタイルの Internet Explorer がアプリを起動したときに渡される引数を処理
if (e.detail.arguments) {
// msApplication-Arguments 文字列の値を解析
// 関連するアプリ内コンテンツにユーザーを移動
}
}
}
このコードは、XAML と C# で作成された Metro スタイルのアプリでも使用できます。
// Developer Preview Build の Visual Studio Express 11 で提供されている Visual C# テンプレートの App.xaml.js ファイルで使用可能な関数
partial class App
{
protected override void OnLaunched(LaunchActivatedEventArgs args)
{
// このコードを挿入して、Metro スタイルの Internet Explorer がアプリを起動したときに渡される引数を処理
if (!String.IsNullOrEmpty(args.Arguments))
{
// msApplication-Arguments 文字列の値を解析
// 関連するアプリ内コンテンツにユーザーを移動
}
}
}
まとめ
Metro スタイルの Internet Explorer では、ユーザーは、関連付けられた Metro スタイルのアプリを通じて Web 上の何かを見つけたり体験したりすることができます。Web 開発者は、既存のサイト利用者にアプリの使用を促すことができます。これは、ユーザーが没頭できる Windows 8 エクスペリエンスで彼らを引き付ける新たなチャンスです。
—Rahul Lalmalani (プログラム マネージャー、Internet Explorer)