SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

ローカル更新

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

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

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

タイルのローカル更新
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つのストアアプリであまりにも多くのセカンダリタイルを表示すると、ユーザーに煩雑な印象を与える可能性もありますので、注意してください。

タイルまとめ

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

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

次のページ
通知

修正履歴

この記事は参考になりましたか?

速習 Windowsストアアプリケーション連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/7231 2013/07/04 14:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー