読者です 読者をやめる 読者になる 読者になる

Yuta Watanabe's Blog

開発周りと、その他諸々

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 にアクセス

f:id:yuwata:20130809162252p:plain

 

 

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

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

f:id:yuwata:20130809162447p:plain

 

3. RSS フィードを指定

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

f:id:yuwata:20130809162413p:plain

 

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

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

f:id:yuwata:20130809162650p:plain

 

このような形で、運営されている Web サイトを簡単にライブ 対応することが出来ます。新しく用意された API を活用すると、通知の内容や仕方に工夫の余地が多くあり、Web サイトのアクセス増加にも良い効果がありそうです。