標準的なコーディング方法と、あるライブラリを使った簡易な方法の2通りを解説。Insider.NET連載目次スタート画面に表示されるアプリのタイルは、動的に切り替わる「ライブ・タイル」にできる。ここに有用な情報を提供することで、ユーザーの満足度を高めることができるだろう。ライブ・タイルのコーディングはけっこう面倒だ。そこで本稿では、標準的なコーディングと、「NotificationsExtensionsライブラリ」を使った簡易な方法の2通りを紹介する。#22」からダウンロードできる。2012)が必要である。これらを準備するには、第1回のTIPSを参考にしてほしい。●ライブ・タイルの仕組みライブ・タイルを管理する「通知キュー」がシステムに用意されている。そこに「タイル通知」(=Windows.UI.Notifications名前空間のTileNotificationクラスのオブジェクト)を登録することで、自動的にライブ・タイルが表示/更新される仕組みだ。通知キューにはタイル通知が5つまで登録できる(それ以上は、原則として古いものから消される)。キューに複数のタイル通知があるときは自動的に切り替えて表示されるが、表示順は登録順ではなくランダムになる。カタログ」から、使いたいタイル・テンプレートを選ぶ。MSDNのタイル・テンプレート・カタログの一部これは「TileWideText03」という名前のテンプレート。カタログの各テンプレートには、説明とサンプル画像、そしてタイル通知を生成するためのXMLの例が載っている。サンプル画像を見て当たりを付け、それから説明を読んで選ぶとよい。上の画像はカタログの一部を抜粋したもので、「TileWideText03」という名前のテンプレートである。横長のワイド・タイルに文字だけが表示されるシンプルなものだ。今回はこれを使ってみよう。2012で作ったプロジェクトは、既定のままではライブ・タイルにワイド・タイルが使えない。利用できるようにするには、既定のタイル(=インストール直後に表示されるタイル)にもワイド・タイルを設定しておかねばならない。310×150ピクセルのワイド・タイル用の画像を用意し、プロジェクトのAssetsフォルダに「WideLogo.png」というファイル名で保存し、プロジェクトに追加しておく。ロゴ]の欄に「Assets\WideLogo.png」と入力する。ビルドして、スタート画面のタイルがワイド・タイルに変更できるようになったことを確認しておいてほしい*1。標準のサイズは310×150ピクセル。画面の解像度によってシャープさが損なわれるのを避けるには、80%・140%・180%のサイズの画像も用意する(第9回参照)。スタート画面でタイルのサイズを変更するには、タイルを下方向にスワイプするか、マウスで右クリックすると画面下端から出てくるアプリ・バーで、[小さくする]または[大きくする]コマンドを選ぶ。2012でワイド・タイルを追加する前にビルドしてしまうと、スタート画面には正方形タイルで登録されてしまうので、このようにしてワイド・タイルに切り替えてほしい。●ライブ・タイルを登録するには?まず、通知キューを有効にし、それからタイル通知を生成して通知キューに登録する。通知キューを有効にするには、次のコードを記述する。アプリの起動時に1回実行すればよいので、Appクラスのコンストラクタで行えばよいだろう。Runtime(WinRT)に変更があった場合に対応できない。そこで、次のようにしてシステムからXMLのテンプレートを取得してくる。Windows.UI.Notifications.TileUpdateManager.GetTemplateContent(Windows.UI.Notifications.TileTemplateType.TileWideText03)タイル通知を作るためのXMLを取得するコード(上:C#、下:VB)前述の「TileWideText03」テンプレートを取得している。上記のコードで得られたtileXmlオブジェクトに内包されているXMLの中身は次のようになっている。カタログに記載された「XMLの例」と見比べてほしい。id="1"></text></binding></visual></tile>取得したテンプレートの中身(XML)実際にはこのコード例のように改行されていないが、見やすくするために整形してある。id="1"></text>」の中に、ライブ・タイルに表示したい文字列を埋め込めばよいのだ。それだけではライブ・タイルの左下隅に「小さいロゴ」が表示されてしまう。そこにアプリ名を出すには、「binding」要素に「branding="name"」という属性を追加する必要がある。そのコードを次に示す。"標準的な方法で設定したタイル"テンプレートに必要なデータを埋め込むコード(上:C#、下:VB)上のコードを実行した後では、tileXmlオブジェクトに内包されているXMLコードは次のようになっている。id="1">標準的な方法で設定したタイル</text></binding></visual></tile>テンプレートに必要なデータを埋め込んだ(XML)実際には改行されていないが、見やすくするために整形してある。XMLが用意できたので、最後にタイル通知を生成して通知キューに送る。そのコードは次のようになる。_.Update(tileNotification)タイル通知を生成して通知キューに送るコード(上:C#、下:VB)以上で完了だ。ビルドして確かめてほしい。2012のシミュレータではライブ・タイルは動作しないようである。2012から実行した場合にはうまくいかないことがある。確実に検証するには、アプリ・パッケージを作成してインストールしてほしい。実行結果(その1)「TileWideText03」のライブ・タイルなお、ここではワイド・タイルしか登録しなかった。このままでは、正方形タイルは既定のままだ。本来は、ワイド・タイルに正方形タイルをマージしたうえで通知キューに登録しなければならない(その方法について、ここでは説明を割愛しているが、次のNotificationsExtensionsライブラリの解説の中で説明する)。●タイル通知を楽に生成するには?上のようにしてXmlDocumentオブジェクトの中身を変更するのは面倒だ。どこをどのように変えればよいのかも分かりにくい。先の例ではテキストを1つ挿入するだけだったが、複雑なテンプレートには複数の画像と複数のテキストをセットするものもある。そこで、NotificationsExtensionsライブラリを利用すると、とても楽にコーディングできるようになる。パッケージの管理]で表示されるダイアログ)を使ってオンラインで「NotificationsExtensions」を検索し、プロジェクトにNuGetパッケージを導入する。次にコーディングするのだが、今度はちょっと複雑なテンプレートを使ってみよう。下記のコードは、NotificationsExtensionsライブラリを利用するコード例だ。正方形の画像、テキストなし。その下に、最大で3行まで折り返される標準テキストの1つの文字列。その下に、最大で4行まで折り返される標準テキストの1つの文字列。正方形の画像、テキストなし。