良いWindowsストア アプリの作り方 vol.05 ~ワイドタイルはライブタイルとして実装する~


マイクロソフトの田中達彦です。
本連載では、良いWindowsストア アプリを作るために、知っておくべきポイントを紹介します。
[タイルについて]
Windowsストアアプリは、スタート画面にタイルとして配置されます。
このタイルには、正方形のタイルと横長のタイルの2種類あります。
正方形タイルは、必ず用意しないといけないタイルです。
ワイドタイルと呼んでいる横長のタイルは、オプションです。
このワイドタイルを実装するときは、ライブタイルという情報を表示させる形式のタイルとして実装します。
なお、正方形タイルもライブタイルとして実装できます。

スタート画面にライブタイルとして表示させるかどうかは、ユーザーが決めます。
アプリ側で勝手にライブタイルの機能をONにすることはできません。
正方形のタイルとワイドタイルのどちらをスタート画面に置くかも、ユーザーが決めます。
スタート画面に正方形タイルが置かれているとき、アプリ側で勝手にワイドタイルに変更することもできません。
どの大きさのタイルをスタート画面に置くか、ライブタイルにするかどうかは、以下のようにタイルを選択して決めます。




[ライブタイルの種類]

ライブタイルには、いくつかの種類があります。
例えば文字のみを表示するものや、画像と文字を合成するもの、画像のみを表示するものなどです。

以下の例では、4種類のライブタイルを見ることができます。




左上のぐるなびのタイルは、大きな画像とその下に文字を表示しています。

左下の今日の運勢では、同じ大きさの文字の文章が3行で表示されています。
右上の楽天市場では、左側に正方形の画像を表示し、右側に文字を表示しています。
右下の朝日新聞では、大きな文字の文章が1行あり、その下に小さな文字の文章があります。

ライブタイルの種類については、下記サイトをご参照ください。

http://msdn.microsoft.com/ja-jp/library/windows/apps/hh761491.aspx


[ワイドタイルの用意]
ワイドタイルを実装するには、まず310×150ピクセルの画像を.png形式で作成します。
Visual StudioでPackge.appxmanifestを表示し、アプリケーションUIタブにあるワイドロゴの部分に画像を指定します。
正方形タイルも、この部分で変更できます。




[ライブタイルの実装]

ライブタイルを実装するには、まずどのテンプレートを使うかを決めます。
テンプレートはXML形式で書かれているので、その中を変更することで表示内容を変えられます。
以下の例は、TileWideText03というテンプレートの中身を変えて、ライブタイルとして表示しています。

private void UpdateTiles(string text)
{
    var updater = TileUpdateManager.CreateTileUpdaterForApplication();
    updater.Clear();
    updater.EnableNotificationQueue(true);

    var tileTemplate =
        TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);

    var xDocument = System.Xml.Linq.XDocument.Parse(tileTemplate.GetXml());

    xDocument.Root.Element("visual").Element("binding").Element("text").Value = text;

    Windows.Data.Xml.Dom.XmlDocument xmlDocument =
        new Windows.Data.Xml.Dom.XmlDocument();
    xmlDocument.LoadXml(xDocument.ToString());

    var tileNotification = new TileNotification(xmlDocument);
    updater.Update(tileNotification);
}

このコードを実装するときは、

using Windows.UI.Notifications;

の宣言もしてください。
このUpdateTilesメソッドを呼び出せば、引数として渡した文字列がタイルに表示されます。

[タイルの詳細]
タイルとバッジのガイドラインとチェックリスト
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh465403.aspx

タイルとタイル通知の概要
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh779724.aspx

[前後の記事]
vol.04 : 「もっと見る」を置かない
vol.06 : 多言語対応

マイクロソフト
田中達彦

※ 「Metroスタイル アプリ」は、「Windowsストア アプリ」に名前が変わりました。

Skip to main content