ライブ タイルは、ユーザーにアプリを継続的に使ってもらうようにするための優れた手段の 1 つです。この記事では、ポーリングとローカル API を使ってアプリのライブ タイルを更新し、Windows 8 のスタート画面上でアプリの魅力を直接アピールする方法について説明します。タイルを通して、アプリ側で発生している最も重要なことを最前線で伝えることができます。アプリ タイルはアプリの非常に重要な要素であり、ユーザーの目に最も多くさらされる部分でもあります。タイルを最大限に活用して、ユーザーに使い続けてもらえるアプリを作りましょう。

この記事では、サンプル アプリを通して次の方法について説明します。

  1. タイルの更新を設計する
  2. タイルのコンテンツに最適なテンプレートを選択する
  3. アプリが実行されていない場合は、クラウドからポーリング通知を実行してタイルを更新する
  4. アプリの実行中は、SDK (「Windows 8 SDK: アプリのタイルおよびバッジのサンプル」(英語)) に含まれる NotificationsExtensions ライブラリを使ってタイルを更新する

Contoso Food Trucks アプリについて

では、サンプル アプリ Contoso Food Trucks について説明しましょう。ユーザーはこのアプリを使って、移動中のフード トラック (移動型レストラン) の情報を確認することができます。このアプリは、Metro スタイル アプリ用 Web サイトの事例 (英語) として紹介したものと同じアプリです。今回の記事では、このアプリにライブ タイルを追加する方法について説明します。

スタート画面のさまざまなタイルの 1 つとして Food Trucks アプリが表示されている

アプリの一番のセールス ポイントを知る

タイルに表示すべきコンテンツの内容や、更新頻度を決めるうえで有効なことは、アプリの一番の長所を知ることです。

Contoso Food Trucks アプリが最も得意とするのは、ユーザーのお気に入りのフード トラックを探して追跡することと、ユーザーの近くにいるトラックを見つけることです。そこで、Contoso Food Trucks タイルの目標を次のように設定しましょう。

  • 特定の場所の近くにいるフード トラックを知らせる
  • ユーザーのお気に入りのフード トラックを追跡する

アプリ タイルは広告スペースとして使わないでください。Windows アプリ ストアの使用条件により、タイルを広告表示に使うことは、ほとんどの場合において許可されません。

既定のタイルとタイル サイズ

それぞれのアプリには既定のタイルがあります。これは、皆さんのアプリをユーザーが最初にインストールしたときに表示されるタイルです。タイルの既定のロゴ画像は、ユーザーがアプリを簡単に見分けることができるように、アプリのロゴやその他のブランド情報を表すものにします。

タイルの既定のロゴ画像はアプリ マニフェストで定義され、タイルが最初の通知を受信して更新されるまで、Windows にはこのロゴ画像が表示されます。また、表示中の通知の有効期限が切れた場合や、ユーザーがアプリのライブ タイルの更新を無効にした場合など、タイルに表示する通知がないときは、タイルを既定の画像に戻すことができます。

タイルがサポートするサイズも既定のタイル画像によって決定されます。利用できるタイルのサイズには正方形とワイドの 2 種類があります。正方形タイルのサポートはすべてのアプリで必須ですが、ワイド タイルをサポートするかどうかはアプリで選択できます。アプリに既定のタイル用のワイド ロゴ画像が用意されていない場合、アプリ タイルのサイズをワイド タイルに合わせて変更することはできません。つまり、そのタイルでワイド通知を受信することはできません。アプリにワイド ロゴ画像が含まれている場合、Windows は既定でワイド形式のタイルを表示します。

Contoso Food Trucks アプリでは、少なくとも 1 日に 1 回はタイルを更新するのに加えて、アプリが提供するコンテンツに広いスペースが必要となるので、ワイド タイルをサポートすることにします。タイルの既定の画像として使う画像を次に示します。

Contoso Food Trucks というタイトルが表示された長方形のタイルと、Food Trucks というタイトルと大きいトラックのロゴが表示された小さめの正方形のタイル

正方形タイルとワイド タイルの両方が通知を受信できます。通知を送信するときは、正方形バージョンとワイド バージョンの 2 つを通知先に含めます。こうすることで、ユーザーがタイルのサイズを小さく変更しても更新データが常に表示されるようになります。

アプリの既定の画像を作成する方法の詳細については、「クイック スタート: Microsoft Visual Studio 11 Manifest Editor を使って既定のタイル画像を作成する」(英語) を参照してください。タイルのサイズに関する考え方の詳細については、「タイルと通知の概要」(英語) を参照してください。

タイルの更新を設計する

近くにいるフード トラックを知らせる

私たちのアプリで最も役に立つ機能の 1 つは、ユーザーが立ち寄ることのできるフード トラックを案内する機能です。このためには、どのフード トラックが近くにいるかをアプリが認識できなければなりません。そこで、このアプリでは、ランチを探す既定の場所をユーザーに設定してもらいます。ユーザーが場所を設定している状態であれば、現在その場所の近くにいるフード トラックを表示します。このタイルの更新用には、画像のないテンプレートを使うことにします。

タイルの更新は、システム定義のテンプレートに合わせてアプリのコンテンツを流し込むことで行われます。このため、最初のタスクとして、私たちのコンテンツに適したテンプレートを選択する必要があります。私は、デベロッパー センターでテンプレートのカタログに目を通して (「タイル テンプレートを選択する」(英語) を参照)、ワイド タイル用に TileWideText01 テンプレートを選びました。正方形タイルのテンプレートは TileSquareText03 にしましょう。更新するのはタイルのテキストだけなので、2 つともテキスト専用のテンプレートを選んでいます。

最終的にテンプレートを決定する前に、私は「Windows 8 SDK: アプリのタイルおよびバッジのサンプル」(英語) を使って、さまざまな異なるテンプレートのオプションを試しました。このサンプルを使用すると、さまざまな文字列と画像を簡単に入れ替えて、最終的なタイルのデザインを決めていくことができます。たとえば、サンプルでテンプレートをテストしたところ、正方形のテンプレートにテキストを適切に収めるには、フード トラックの名前を短くする必要があることがわかりました。

長方形のワイド タイル。表示は "Food Trucks Near You / Nom Nom Barbecue Truck / Sushi Truck / Macaroni Makin' Wagon"    正方形タイル。表示は "Near You / Nom Nom / Sushi Truck"

タイルの更新は、通知を送信することによって行われます。通知とは、タイル スキーマに従って入力される、単なる XML スニペットです。この XML を作成するには、コード内で TileUpdateManager.getTemplateContent() (英語) 関数または NotificationsExtension ライブラリ (この記事のパート 2 で詳しく説明します) を使用します。通知のレンダリングに使うタイル テンプレートと、テンプレートのレイアウトに従って表示するテキストと画像は、通知によって指定されます。

先ほどのタイルの更新には、次のタイル XML を使いました。

タイル XML

<?xml version="1.0" encoding="utf-8" ?>
<tile>
<visual>
<binding template="TileWideText01">
<text id="1">Food Trucks Near You</text>
<text id="2">Nom Nom Barbecue Truck</text>
<text id="3">Sushi Truck</text>
<text id="4">Macaroni Makin' Wagon</text>
</binding>
<binding template="TileSquareText03">
<text id="1">Near You</text>
<text id="2">Nom Nom</text>
<text id="3">Sushi Truck</text>
</binding>
</visual>
</tile>

この XML にある 2 つの <binding> 要素は、それぞれワイド タイル用と正方形タイル用です。私たちのアプリはワイド タイルをサポートするので、どのタイル通知でも、常にワイド タイル テンプレートと正方形タイル テンプレートの両方のバインドを設定します。これでユーザーがタイルのサイズをどちらに設定していても、通知による更新コンテンツがタイルに表示されるようになります。正方形タイルにはトラックの名前が 2 語でしか表示されていませんが、これは正方形タイルが小さくて 3 語目が入らないためです。

お気に入りのフード トラック

私たちのアプリでは、ユーザーがお気に入りのフード トラックの場所を把握できるようにしたいと思っています。同じ情報をタイルでも確認できるようにしましょう。この場合、情報は数行の短いテキストにまとめます。さらに、それぞれのフード トラックの画像を使って、タイルをより魅力的に見せたいと思います。

タイルの更新は、システム定義のテンプレートに合わせてアプリのコンテンツを流し込むことで行われます。このため、最初のタスクとして、私たちのコンテンツに適したテンプレートを選択する必要があります。私は、デベロッパー センターでテンプレートのカタログに目を通して (「タイル テンプレートを選択する」(英語) を参照)、ワイド タイル用に TileWideImageAndText02 テンプレートを選びました。これは、1 枚の画像と 2 行の短いテキスト文字列をサポートするテンプレートです。正方形タイル用のテンプレートは、画像とテキストの両方をタイルに表示できる TileSquarePeekImageAndText04 にしましょう。Peek テンプレートでは、通常のタイル領域に表示できる量よりも多くのコンテンツを提供できます。Peek テンプレートは Windows によってアニメーション表示され、テンプレートに設定した画像とテキストの両方を見せることができます。つまり、正方形タイルの上部と下部のフレームが、タイル上で交互に切り替わって表示されます。Peek タイルは、タイル領域内でコンテンツを上下にスクロールすることで、提供されたコンテンツ全体を表示するようになっています。

グリルで焼かれている肉の画像、トラックのロゴ、更新テキスト "Nom Nom Barbecue Truck Washer Ave and 3rd until 3" を表示    グリルで焼かれている肉の画像、トラックのロゴ、更新テキスト "Nom Nom @ Washer Ave and 3rd until 3" を表示

タイル XML

<?xml version="1.0" encoding="utf-8" ?>
<tile>
<visual>
<binding template="TileWideImageAndText02">
<image id="1" src="http://www.contoso.com/foodtrucks/nomnombbq.png"/>
<text id="1">Nom Nom Barbecue Truck</text>
<text id="1">Washer Ave and 3rd until 3</text>
</binding>
<binding template="TileSquarePeekImageAndText04">
<image id="1" src=" http://www.contoso.com/foodtrucks/nomnombbq-square.png"/>
<text id="1">Nom Nom @ Washer Ave and 3rd until 3</text>
</binding>
</visual>
</tile>

前の例と同様に、タイルに表示される項目は、XML ペイロードとして定義される通知を使って決定しています。最初のタイルと今回のタイルが異なるのは、通知で画像を使っている点です。通知内の画像は XML ペイロードには含まれません。これらの画像は別の場所にあり、ペイロードから参照されます。画像は今回のように Web サービス上にあるものでも、ローカル マシンに置かれているものでも、どちらでもかまいません。Windows が通知を受信すると、Web サービスから画像がダウンロードされてユーザーに表示されます。タイルに画像を含める方法の詳細については、デベロッパー センターの「タイル テンプレートに画像を追加する方法」(英語) を参照してください。

画像コンテンツのサイズには KB およびピクセル数の制限があります。画像が大きすぎるとタイル通知が表示されないため、これらの制限を満たす画像を使用してください。また、タイルでは JPG と PNG 画像だけがサポートされる点にもご注意ください。タイルに画像を含める方法の詳細については、デベロッパー センターの「タイルの画像サイズ」(英語) を参照してください。

今後の予定

これでタイルの表示方法はわかったので、次のステップとして、タイルを更新するタイミングを決める必要があります。この記事のパート 2 では、Contoso Food Trucks アプリでポーリングとローカル タイルの更新を行う方法について見ていきます。タイルの更新をアプリからポーリングする方法について説明し、ポーリング用の Web サービスの構築に使うことができる ASP.NET と PHP の例を紹介します。さらに、アプリにセカンダリ タイルを追加し、そのタイルを NotificationsExtension ライブラリを使って更新する方法についてもお話しします。それまでは、ライブ タイルを使って皆さんのアプリをより魅力的にする最初の一歩として、今回の記事をご活用いただければさいわいです。

-- Windows プログラム マネージャー Kevin Michael Woley

今回の記事作成にあたっては、Tyler Donahue 氏と Nazia Zaman 氏にご協力いただきました。ありがとうございました。