Web サイトをライブタイルに対応させる～ Internet Explore 11 Preview ～

Internet Explore 11 Preview では、Web サイトがスタートスクリーンにピン留された際に、ライブタイルを使用することが出来るようになりました。Windows 8.1 で追加された小さいサイズや大きいサイズのタイルも利用可能なのはもちろんのこと、Web サイトの新着情報をライブタイルに表示することも可能です。

例. microsoft.com をスタート画面にピン留すると

f:id:yuwata:20130809163502p:plain 　 f:id:yuwata:20130809163813p:plain

タイルを定義するためのmetadataの仕様や、通知とライブタイル更新を行うためにサポートされた、新しいメソッドおよび関数を利用して、Web サイトのライブタイル対応を実現することができます。

ここでは、簡単にこの機能を実装・お試ししたい方向けのコード生成ツールを用いて、Web サイトをライブタイルに対応する方法をご紹介します。

1. Build my pinned site にアクセス

2. タイトル、背景色、タイルで使用する画像を指定

① Build your own site tile をクリックして、タイトル、背景色、タイルで使用する画像を指定します。タイトル、画像は任意です。タイルの各サイズに合わせてトリミングできます。見え方は右側に表示される Live Preview で確認しましょう。

3. RSS フィードを指定

もし RSS フィードをお持ちであれば、タイルへの通知を自動生成してくれます。URL を入力して Get feed をクリックします。

f:id:yuwata:20130809162413p:plain

4. コードを head タグ内に貼り付け

head タグ内に貼り付けるコードが生成されますので、コピーして貼り付けます。タイルにしようするPNG 画像もアップロードすれば完了です ( パスは適宜修正します )。もしくは、browserconfig.xml を含むファイルをダウンロードしていただき、それらを Web サイトのルートに設置したのち、meta タグを１行追加する形でも構いません。

f:id:yuwata:20130809162650p:plain