Windows8 スタート画面用の自サイトタイルをカスタマイズして更新をPushする

Windows8 スタート画面用の自サイトタイルをカスタマイズして更新をPushする

Windows8を使っていると、スタート画面(Modern UI)のタイルに情報が更新されるタイプがある事に気づきます。自分のサイトRSSをそこに埋め込めるというのでやってみました。

マイクロソフトのエバンジェリストの方のTweetで発見。

ただ、最初に認識する必要があるのは「動くタイルが有効なのはIEを既定のブラウザにし、Win8モード(フル画面)で使ってる人のみ」という事。タイルを留めるのも更新するのもWin8モードである必要があります。デスクトップモードで使っている人(含む自分)でもタイル留めをする方法を探したけれど見つかりませんでした。

作り方

サイト(Web サイトを Windows 8.1 のタイルにしよう – Web サイトをピン留めする – Microsoft Internet Explorer)を開くと3つのステップがあるので順に実行するのみ。

20130309-01  やっつけ感あふるゝロゴをこの場でも使用。画像ファイルはひとつですが、4つのタイルサイズに合わせてトリミングを行います。タイル留めするときは270x568pxが使われました。

RSSの指定を行います。Wordpressを使っている場合、デフォルトでは

http://サイトURL/?feed=rss2

となります。カテゴリ別RSSなんてのもあるのでお好みで。

20130309-023つ設定が終わるとサイトのヘッダーに貼り付けるソースコードと、画像をまとめたzipファイルがダウンロードできます。このzipファイルを解凍し、中身(画像ファイル+.xmlの5つ)をサイトのルートディレクトリにアップロード。
ルートに画像を置きたくない場合はサブフォルダを作ってソースコードとxmlファイルの画像パスを書き換えます。

元ファイル

<?xml version="1.0" encoding="utf-8"?><browserconfig><msapplication><tile><square70x70logo src="tiny.png"/><square150x150logo src="square.png"/><wide310x150logo src="wide.png"/><square310x310logo src="large.png"/>

変更後

<?xml version="1.0" encoding="utf-8"?><browserconfig><msapplication><tile><square70x70logo src="win8pin/tiny.png"/><square150x150logo src="win8pin/square.png"/><wide310x150logo src="win8pin/wide.png"/><square310x310logo src="win8pin/large.png"/>

ソースコードも同様に

<meta name="msapplication-square70x70logo" content="win8pin/tiny.png"/>
<meta name="msapplication-square150x150logo" content="win8pin/square.png"/>
<meta name="msapplication-wide310x150logo" content="win8pin/wide.png"/>
<meta name="msapplication-square310x310logo" content="win8pin/large.png"/>

準備完了。

留め方

冒頭の通り、IE10を既定のブラウザへ。そのまま起動するとデフォルトではフルスクリーンモードになります。20130309-05

あとは自分のサイトを開いたのち、ブックマークボタン→ピンボタンで「スタート画面にピン留めする」を選べばOK。

20130309-04できました!

この情報はデフォルトでは24時間ごとに取りに行く様です。

以上、しつこい様ですが「IE10のWin8モード必須」という事で、これが使われるかどうかはModern UIの普及に全てかかってると言えます。未だ実用には使えないと思ってるんですが、みなさんWindows8はどちらがメインなんでしょうか。あとは設置した側としても、「タイルで情報更新知らせるよ!留めてね!」ってアピールが必要。ブクマはあるかもしれないけれど、タイル留めしてもらえる個人サイトにはなれそうにないなぁ。

PCカテゴリの最新記事