編集長ブログ―安田英久
Windows 8のIE 10向けにサイト管理者が知っておくといい3つの新しいこと

Windows 8に搭載されたIE 10の新機能にサイト側で対応するための情報

今日は、先週発売された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ではない場合は、指定した画像は利用されず、サイトのファビコンが表示されます。


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

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


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

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

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 10にはFlash Playerが同梱されていて、Windows 8スタイルのIE 10でも特定のサイトでは同梱のFlash Playerが動作するようになっています。

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

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


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

var hasTouch = navigator.msMaxTouchPoints > 0;

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

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

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

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

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

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

tweet74このエントリーをはてなブックマークに追加
日本赤十字社 東日本大震災 義援金募集
Web担メルマガでラクラク情報ライフを
注目記事が毎週手もとに届いて見逃さない
要チェックのセミナー情報もゲットできる
編集長コラムを一足先に読める
―― 10万人が読んでいる、Web担必読メルマガです

今日の用語

GRP
テレビCMにおいて、広告出稿回数ごとの視聴率を足した数値。 放送局が定めた ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスHP Softwareトランスコスモス株式会社株式会社ハイパーボックスDomain Keeperアドビ システムズ 株式会社
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社SitecoreYahoo!プロモーション広告Oracle