WebMatrix 3：サイトをライブタイルに対応させてみた
執筆日時：
Windows 8.1 で（Windows 8 は切り捨てた）http://daruyanagi.net/ をスタート画面へピン留めすると、こんな感じになるハズ。前々からやってみたかったのだけど、なかなか腰が上がらなかった。
用意するもの
- browserconfig.xml
- この名前でなくてもいいが、その場合はメタタグに名前を記述
- 通知タイルを定義した XML ファイル
- browserconfig.xml の notifications 属性に記述。必須ではないが、用意しておくとタイルがくるくる切り替わるようになる
- 今回はデータベースをもとに Notifications.cshtml で動的に生成
- 最大5つまで
<meta name="application-name" content="アプリ名"/>- レイアウトファイルに一行挿入
- browserconfig.xml の内容をメタタグとして埋め込むスタイルもあるが、今回は分離しておく。はてなブログをタイルに対応させる場合は、ヘッダーへメタタグを記述する方式がよさそう
- tiny、square、wide、large の各サイズ向けタイル画像
- 今回は青色に塗りつぶしただけのシンプルなものを用意
- タイルの背景に使う tile.jpg も準備しておいた（「画像は .JPG、.GIF、.PNG 形式のファイルであり、容量を 200 KB 未満、サイズを 1024 x 1024 ピクセル未満にする必要があります。」とのこと）
| タイルのサイズ | 標準のタイルのサイズ | 最小画像サイズ | 推奨される画像のサイズ |
| 小サイズ | 70 x 70 | 56 x 56 | 128 x 128 |
| 普通サイズ | 150 x 150 | 120 x 120 | 270 x 270 |
| ワイド サイズ | 310 x 150 | 248 x 120 | 558 x 270 |
| 大サイズ | 310 x 310 | 248 x 248 | 558 x 558 |
browserconfig.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"/> <TileColor>#007fff</TileColor> // “aliceblue”なんかは使えない鴨 </tile> <notification> // 必須ではない。まずはこれなしで動くかテストすることをお勧め <polling-uri src="http://daruyanagi.net/Notifications/0"/> <polling-uri2 src="http://daruyanagi.net/Notifications/1"/> <polling-uri3 src="http://daruyanagi.net/Notifications/2"/> <polling-uri4 src="http://daruyanagi.net/Notifications/3"/> <polling-uri5 src="http://daruyanagi.net/Notifications/4"/> <frequency>30</frequency> // 30、60、360、720、1440 のいずれか <cycle>1</cycle> // 0 ～ 7 のいずれか </notification> </msapplication> </browserconfig>
cycle 属性の値はこんな感じ。
- 0: (通知が 1 つだけの場合の既定値) 循環しません。
- 1: (通知が複数ある場合の既定値) すべてのタイルのサイズで通知を循環します。
- 2: 普通サイズのタイルに対する通知のみを循環します。
- 3: ワイド タイルに対する通知のみを循環します。
- 4: 大きいタイルに対する通知のみを循環します。
- 5: 普通サイズのタイルやワイド タイルに対する通知のみを循環します。
- 6: 普通サイズのタイルや大きいタイルに対する通知のみを循環します。
- 7: ワイド タイルや大きいタイルに対する通知のみを循環します。
ちゃんと規定値があるので、めんどくさいなら省いてもいいぐらい。
Notifications.cshtml
小・ワイド・大の3つに対応したタイルスキーマを返しておく。テンプレートについては
を参照のこと。
@{
Response.ContentType = "application/xml";
dynamic item;
using (var db = Database.Open(“***”))
{
item = db.Query("SELECT * From ***")
.ElementAt(UrlData[0].AsInt(0));
}
}
<tile>
<visual lang="en-US" version="2">
<binding template="TileSquare150x150PeekImageAndText04" branding="name">
<image id="1" src="http://daruyanagi.net/Tile.jpg"/>
<text id="1">@App.Title</text>
<text id="2">@item.Title</text>
</binding>
<binding template="TileWide310x150SmallImageAndText04" branding="logo">
<image id="1" src="http://daruyanagi.net/Tile.jpg"/>
<text id="1">@App.Title</text>
<text id="2">@item.Title</text>
</binding>
<binding template="TileSquare310x310ImageAndTextOverlay02" branding="logo">
<image id="1" src="http://daruyanagi.net/Tile.jpg"/>
<text id="1">@App.Title</text>
<text id="2">@item.Title</text>
</binding>
</visual>
</tile>
http://daruyanagi.net/Notifications/0 を叩くと
<tile> <visual lang="en-US" version="2"> <binding template="TileSquare150x150PeekImageAndText04" branding="name"> <image id="1" src="http://daruyanagi.net/Tile.jpg"/> <text id="1">@daruyanagi</text> <text id="2">Surface Pro 3：COM Surrogate や Peer Name Resolution Protcol が妙にリソースを食っている</text> </binding> <binding template="TileWide310x150SmallImageAndText04" branding="logo"> <image id="1" src="http://daruyanagi.net/Tile.jpg"/> <text id="1">@daruyanagi</text> <text id="2">Surface Pro 3：COM Surrogate や Peer Name Resolution Protcol が妙にリソースを食っている</text> </binding> <binding template="TileSquare310x310ImageAndTextOverlay02" branding="logo"> <image id="1" src="http://daruyanagi.net/Tile.jpg"/> <text id="1">@daruyanagi</text> <text id="2">Surface Pro 3：COM Surrogate や Peer Name Resolution Protcol が妙にリソースを食っている</text> </binding> </visual> </tile>
が返る。branding 属性はタイル左下に表示される項目を指定するもので、規定は name のようだ。logo にしておくと favicon が表示される。
これで準備は完了のはず。
注意する点。
- 画像へのパスが間違ってるとライブタイルは更新されない
- パスの指定はドメインを含めたすべてを指定しなければならないようだ
- タイルの version 1 は要らない
- フォールバック（fallback）属性を書くと、ライブタイルは動作しない
とくに最後の項目は タイル テンプレート カタログ (Windows ランタイム アプリ) - Windows app development からコードをコピペした場合に注意。
<tile> <visual> <binding template="TileSquarePeekImageAndText02"> <image id="1" src="image1" alt="alt text"/> <text id="1">Text Field 1 (larger text)</text> <text id="2">Text Field 2</text> </binding> </visual> </tile><tile> <visual version="2"> <binding template="TileSquare150x150PeekImageAndText02" fallback="TileSquarePeekImageAndText02"> <image id="1" src="image1" alt="alt text"/> <text id="1">Text Field 1 (larger text)</text> <text id="2">Text Field 2</text> </binding> </visual> </tile>
これをコピペしても動かない。正しくはこんな感じ。
<tile> <visual version="2"> <binding template="TileSquare150x150PeekImageAndText02"> <image id="1" src="image1" alt="alt text"/> <text id="1">Text Field 1 (larger text)</text> <text id="2">Text Field 2</text> </binding> </visual> </tile>