CodeZine(コードジン)

特集ページ一覧

Windowsストアアプリの起動を促すタイルと通知

速習 Windowsストアアプリケーション 第8回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/07/04 14:00

目次

ローカル更新

 本記事では、最もシンプルなローカルでのタイル更新の方法について紹介します。

 ローカル更新はストアアプリの起動時に処理を実行でき、動作確認もすぐに行えるため、ライブタイルの動作を見る一番簡単な更新方法です。

 ローカル更新は、以下のように行ってください。

タイルのローカル更新
var content = NotificationsExtensions.TileContent.TileContentFactory.CreateTileSquarePeekImageAndText01();

content.Image.Src = "http://coelacanth.heteml.jp/blog/wp-content/uploads/2013/06/Logo.png";

content.TextHeading.Text = "ライブタイル更新";
content.TextBody1.Text = "line1";
content.TextBody2.Text = "line2";
content.TextBody3.Text = "line3";
content.Branding = NotificationsExtensions.TileContent.TileBranding.Logo;

TileNotification tileNotification = content.CreateNotification();
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

 ストアアプリを実行した後にタイルを確認すると、切り替わるライブタイルになっていることが分かります。

ライブタイルの結果
ライブタイルの結果

 プログラムコードの一行目で、更新するタイルのテンプレートを選択しています。

 CreateTileSquarePeekImageAndText01というメソッドで、タイルテンプレートカタログのTileSquarePeekImageAndText01に相当するテンプレートを生成します。

バッジの追加

 ライブタイルには1から99までの数字ないし、いくつかの記号を表示することができます。これらをバッジと呼びます。

 今回のサンプルに、バッジを追加する処理を追記してみます。

タイルのローカル更新
var content = NotificationsExtensions.TileContent.TileContentFactory.CreateTileSquarePeekImageAndText01();

content.Image.Src = "http://coelacanth.heteml.jp/blog/wp-content/uploads/2013/06/Logo.png";

content.TextHeading.Text = "ライブタイル更新";
content.TextBody1.Text = "line1";
content.TextBody2.Text = "line2";
content.TextBody3.Text = "line3";
content.Branding = NotificationsExtensions.TileContent.TileBranding.Logo;
TileNotification tileNotification = content.CreateNotification();
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

var badge = new BadgeGlyphNotificationContent(GlyphValue.NewMessage);
BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badge.CreateNotification());

 プログラムを実行すると、ライブタイルの右下に新着メッセージを表すメールマークが表示されました。

バッジの表示
バッジの表示

 バッジとして表示可能な記号(グリフ)の一覧は、以下のサイトを参考にしてください。

セカンダリタイル

 1つのストアアプリで複数のタイルを利用することができます。

 この2つめ以降のタイルを、セカンダリタイルといいます。例えば、ゲームのセーブデータをタイルとして表示し、そのタイルをクリックすることで、素早くゲームを再開できるといった機能に利用できます。

 セカンダリタイルは、以下のコードで追加できます。

タイルのローカル更新
var second = new Windows.UI.StartScreen.SecondaryTile();
second.TileId = "ユニークID";
second.ShortName = "ショートネーム";
second.DisplayName = "表示名";
second.Arguments = "sample";
second.Logo = new Uri("ms-appx:///Assets/Logo.png");

await second.RequestCreateAsync();

 上記コードを実行すると、画面にセカンダリタイルを表示するためのポップアップが表示されます。セカンダリタイルの表示には、ユーザーの操作が必要になります。

セカンダリタイルの表示
セカンダリタイルの表示

 Argumentsプロパティに渡した値は、セカンダリタイルから起動時に取得できます。この値によって、ストアアプリの表示を制御するとよいでしょう。

 セカンダリタイルの表示個数には制限はありません。ただし、1つのストアアプリであまりにも多くのセカンダリタイルを表示すると、ユーザーに煩雑な印象を与える可能性もありますので、注意してください。

タイルまとめ

 本記事ではライブタイルの基礎と、ローカル更新、バッジ、セカンダリタイルについて紹介しました。

 ライブタイルにそのストアアプリに適した情報を表示することで、文字通りストアアプリがライブ(生きた)ものになります。ぜひ工夫して、あなただけのライブタイルを実装しましょう。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

修正履歴

  • 2013/07/03 16:48 画像が入れ違っていたので修正

バックナンバー

連載:速習 Windowsストアアプリケーション

もっと読む

著者プロフィール

  • 西村 誠(ニシムラ マコト)

     Microsoft MVP Windows Platform Development。  Flash、PHPの開発経験もあり国産ECサイト構築フレームワーク「EC-CUBE」の公式エバンジェリストでもある。  ブログ:眠るシーラカンスと水底のプログラマー  著書:基礎から学ぶ Windows...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5