Windows 8のIE 10向けにサイト管理者が知っておくといい3つの新しいこと

今日は、先週発売されたWindows 8に搭載されているInternet Explorer 10（IE 10）の新機能にサイト側で対応するための情報をお届けします。

Windows 8のスタート画面にサイトをピン留めされたときのアイコン指定

Windows 8のスタート画面ではアプリケーションやコンテンツを「ピン留め」できますが、IE 10でサイトをピン留めしたときにどんなアイコンがスタート画面に表示されるようにするかは、サイト側のHTMLで指定できます。

1つは、32ピクセル四方のアイコン（ファビコン）をlink要素で指定する方法。

<link href="favicon.ico" rel="shortcut icon" />

もう1つは、144ピクセル四方の画像をmeta要素で指定する方法。この方法では、高解像度の画像を使えるだけでなく、タイルの背景色も指定できます。

<meta name="msapplication-TileImage" content="example-image-144.png"/>
<meta name="msapplication-TileColor" content="#d83434"/>

meta要素で指定した画像が144ピクセル四方より大きい場合、144ピクセル四方に縮小して表示されます。

meta要素で指定した画像が144ピクセル四方未満の場合や、144ピクセル四方より大きくても縦横比が1:1ではない場合は、指定した画像は利用されず、サイトのファビコンが表示されます。

• Windows 8 のピン留めサイトの高画質なビジュアル（IEBlog日本語）
• Windows 8 のピン留めサイト（IEBlog日本語）
  ※上記記事で像が壊れている部分は英語版記事を参照
  → Pinned Sites in Windows 8（IEBlog英語）

Facebook用にOGPを指定していても、残念ながらピン留めでは利用してくれないようです。まぁ、ソーシャルメディアでの共有とOSのスタート画面でのピン留めでは利用用途が違うので、異なる画像を指定する仕組みを用意しておくという判断は悪くないのかもしれませんが、代替でファビコンを使うぐらいならOGPを参照してくれてもいいのに、とは思いますよね。

ちなみに、Windows 8のシェア機能でソーシャルメディアなどに共有される情報は、title要素やOGPのog:imageなどを利用してくれます。

• Sharing Links from IE10 on Windows 8（IEBlog英語）

また、このスタート画面でのピン留めでは、Windows 8が定期的にサーバーに情報をとりにいって、新しい情報があることなどのメッセージをバッジとしてスタート画面に表示する仕組みも用意されています。

詳細は以下のドキュメントを参考にしてください。

• Windows 8 でのピン留めされたサイトの通知 (Windows)（IEデベロッパーセンター）

IE 10には「Windows 8スタイル」と「デスクトップ版」がある

まずWindows 8のIE 10は2種類あることを理解しておきましょう。1つはWindows 8スタイルのIE（新しいタイプのアプリ）で、もう1つはデスクトップ版のIE 10（今までと同様のアプリ）で、基本は同じなのですが微妙に違います。

最も大きな違いとしては、Windows 8スタイルのIEはプラグイン非対応である点があります（デスクトップ版はプラグイン対応）。

FlashやSilverlightなどのプラグインを使っているサイトでは、Windows 8スタイルのIEでアクセスされた際に、デスクトップ版IEで開くことを促すポップアップを表示できます。

デスクトップ版への誘導ポップアップを表示するには、HTMLドキュメント内に以下のタグを記載しておきます。

<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true" />

また、サーバー側でHTTPレスポンスヘッダーとして以下のように出力することでも同じことができます。

X-UA-Compatible: requiresActiveX=true

• プラグイン フリー閲覧を準備する（IEデベロッパーセンター）

とはいうものの、実はIE 10にはFlash Playerが同梱されていて、Windows 8スタイルのIE 10でも特定のサイトでは同梱のFlash Playerが動作するようになっています。

どうしてもFlashを利用する必要があり、デスクトップ版への誘導は使いたくない場合は、その「互換表示 (CV) 一覧」（CVList）に自社サイトを登録するように手続きをしておくといいでしょう（個人サイトは登録不可）。

CVListへの登録は、ガイドラインを読んで把握し、コンテンツをテストしてから、必要事項をメールで送る流れです。現在、申請から登録まで6週間ぐらいかかるということです。

• Windows 8 の Adobe Flash Player 用のコンテンツを含む Web サイトに関する開発者向けガイダンス（IEデベロッパーセンター）
• 最新のCVList

ちなみにWindows 8スタイルのIE 10でタッチ機能を利用できるかどうかを判定するには、JavaScriptでnavigator.msMaxTouchPointsを調べます。

var hasTouch = navigator.msMaxTouchPoints > 0;

• msMaxTouchPoints property（IEデベロッパーセンター）

また、それぞれのバージョンでユーザーエージェント（UA）名も違っています。各IEのUA名については以下のドキュメントを参照してください。

• ユーザー エージェント文字列 (Windows)（IEデベロッパーセンター）

サイト訪問者をWindowsストアアプリへ誘導する

自社のWindowsアプリを提供しているのならば、自社サイトを訪問したIE 10ユーザーに対して、Windowsストアアプリのページへと誘導するメニューを表示するようにもできます。

具体的には、アプリ情報を次のようなmetaタグでページ内に記述しておきます。

<meta name="msApplication-ID"content="アプリ ID"/>
<meta name="msApplication-PackageFamilyName"content="アプリ のパッケージ ファミリ名"/>

• Web サイトを Windows ストア アプリに接続する（Internet Explorer デベロッパー センター）

その他、IE 10に関する情報は、以下のサイトなどを参考にしてください。

• Windows 8 での Internet Explorer 10
• Internet Explorer デベロッパー センター
• IEBlog 日本語
• InternetExplorer10に関する調査結果書（野村総研）