Windows ストアにリンクする Web ページの作り方

先月末にようやく1本目の Windows ストア・アプリを公開できました。 まぁ、 @IT の連載記事のネタなんですけどね f(^^;

さて、 せっかくストアに載ったからには、 Web ページからリンクを張って宣伝したいわけですな。 で、 ストアの Web ページへのリンクは、 開発者用のダッシュボードを見れば分かるので、 普通に a タグを書けばよろし (左上の画像に付けてあります)。

では、 Windows 8 で Web ページを見ているときに、 ストア・アプリの該当ページを直接開くことはできないか?
⇒ はい、できます♪

てことで、ここから本題。
こんな↓サポートページを作りました。 Windows 8 の Metro 版 IE 10 で表示したところ。

アプリ・バーの [ページツール/利用可能なアプリ] ボタン (右から 2番目) を押すと出てくるポップアップに、 [このサイトのアプリを手に入れる] というメニューがあって、 それを選ぶとストア・アプリに切り替わります。 また、 ページの左側には [Windows ストアで表示] というアンカーが用意してあって、 ここをクリックしてもストア・アプリに切り替わります。 なお、 このアンカーは Windows 8 デスクトップ上の IE や Firefox でも動作します。

まず、 IE 10 のアプリ・バーに認識させる方法。 次のような meta タグを仕込んでおきます。 いじょ。

<meta name="msApplication-ID"
      content="BluewaterSoft.7013A988D958" />
<meta name="msApplication-PackageFamilyName"
      content="BluewaterSoft.7013A988D958_48977ph8920gm" />

ここで、 msApplication-ID というのは、 Package.appxmanifest の [パッケージ化] タブの [パッケージ名]、 msApplication-PackageFamilyName は同じく [パッケージ ファミリ名] です。

次に、 html のリンクとして表現するには、 次のように記述します。

<a href="ms-windows-store:PDP?PFN=BluewaterSoft.7013A988D958_48977ph8920gm" >Windows ストアで表示</a>

ここの PFN というのも、 パッケージファミリ名です。
このリンクは、 ms-windows-store: というプロトコルを理解できないブラウザに表示しても迷惑なだけですから、 http リクエストの UserAgent に "Windows NT 6.2" 以上が含まれていること (=Windows 8 以降) を確認して出すようにします。

[2012/12/3 追記] アクションは PDP の他に、 Updates と Search があります。
ms-windows-store:Updates --- 「更新」ページを開く
ms-windows-store:Search?query=BluewaterSoft --- 検索結果を表示する例
参照: MSDN: アプリへのリンク (Windows)

ついでに。
Windows 8 の Metro 版 IE 10 で、 このサポートページをスタート画面にピン留めしてみてください (アプリ・バーの右から3番目 [サイトをピン留め] ボタン)。 すると、 こんな風になります。

右下の 「TDD.NET」 は、 favicon も持っていないページ。 左下の 「biac の それさえもおそらくは幸せ…」 は、 favicon だけを装備しているページ。
そして上段の 2つは、 Win8 用のタイルイメージを提供しているページです。 favicon よりも大きく、 またタイルの色も指定できます。

Web ページから Win8 用のタイルイメージを提供するには、 次のような meta タグを記述します。

<meta name="msapplication-TileImage" content="/images/Download/ClaudiaTimer/IE10icon.png" />
<meta name="msapplication-TileColor" content="#03a0eb" />

msapplication-TileImage に指定する png 画像のサイズは 144 x 144 ピクセルです。 詳しくは、 「IEBlog 日本語」 の記事をどうぞ。 ⇒ IEBlog 日本語: Windows 8 のピン留めサイトの高画質なビジュアル (2012年6月14日)