1. Windowsストア アプリケーショ
ン概要
タイルと通知編

2. Agenda
• タイルと通知の概要
• タイル
• 通知
• Windows Azure Mobile Service
• 参考資料

3. タイルと通知の概要

4. タイルと通知の概要
本セッションではユーザーに情報を提供するための
・タイル
・通知
の2つの方法について紹介します。

5. タイルと通知の概要
タイル
アプリケーションの起点となるショートカット兼新着情報などを
表示するエリア

6. タイルと通知の概要
通知
おもにトーストを用いた通知
新着メールなどロック画面に出す通知もある

7. タイルと通知の概要
タイルと通知を上手く使うことで
最新の情報を提供できる
アプリに興味を持ってもらえる
ユーザーにより起動される頻度の高いアプリケーションを作るこ
とができる

8. タイル

9. タイル
タイルの種類
タイルには2つの大きさと、2つの形態がある
・150×150と310×150ピクセル
・動きのないタイルと、ライブタイル

10. タイル
大きさ
・150×150と310×150ピクセル
・マニフェストファイルで指定
・150×150は必須
・正方形タイルと正方形タイルの間は10ピクセル

11. タイル
大きさ
・どちらのサイズで表示するかはユーザーが変更可能
・両方のサイズが指定されている場合はデフォルトは310×150表
示
・310×150のタイルは基本ライブタイル

12. タイル
形態
・動きがあるライブタイルと動きのないタイルがある
・2つめ以降のタイル=セカンダリタイル

13. タイル
ライブタイル
・タイルを更新することで情報を通知できる
・更新方法は以下
ローカル
スケジュール
定期更新
プッシュ

14. タイル
ライブタイル-ローカル
・アプリの実行中にタイルの更新を設定する一番シンプルな方法
・タイルの表示はテンプレート(後述)から選択
・TileNotification、TileUpdateManager
・画像はサーバーでもローカルでもOK
・複数登録する場合は
TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);

15. デモ：ローカルのタイル更新

16. タイル
// タイルのテンプレート選択
XmlDocument tileXml =
TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideIma
geAndText01);
// 2つの大きさがあるので両方指定する場合は2つ指定
XmlDocument squareTileXml =
TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareT
ext04);
XMLでタイルのテンプレートを取得する

17. タイル
テンプレートの内容を定義していく・・・
XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].InnerText = this.tileText.Text;
XmlNodeList tileImageAttributes = tileXml.GetElementsByTagName("image");
((XmlElement)tileImageAttributes[0]).SetAttribute("src", "ms-
appx:///Assets/wideTile.png");

18. タイル
最後に設定
TileNotification tileNotification = new TileNotification(tileXml);
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

19. タイル
ライブタイル-スケジュール
・タイルの定義はアプリ起動時に行う
・タイルの更新時刻を指定して一定時間後に更新する
・更新時にサーバーに通信などはしない(アプリ実行時に定義して
しまう)

20. デモ：スケジュールされたタイ
ル更新

21. タイル
テンプレートを設定するぐらいまでは同じ流れ
以下が違ってくる
Int16 dueTimeInSeconds = 15;
DateTime dueTime = DateTime.Now.AddSeconds(dueTimeInSeconds);
ScheduledTileNotification tileNotification = new
ScheduledTileNotification(tileXml,dueTime);
tileNotification.Tag = this.tileText.Text;
TileUpdateManager.CreateTileUpdaterForApplication().AddToSchedule(tileNotificatio
n);

22. タイル
ライブタイル-定期的
・定期的に外部サーバーからデータを取得
・サーバー側はテンプレート形式のXMLを返す
・テンプレート形式ではないXMLやJSONなどを利用したい場合
は
バックグラウンドタスクを使うこともできるが、
この場合ユーザーにダイアログで許可をもらう必要がある

23. デモ：定期的な更新
外部サービスの利
用

24. タイル
テンプレートを設定するぐらいまでは同じ流れ
以下が違ってくる
// タイル更新の設定
PeriodicUpdateRecurrence recurrence = PeriodicUpdateRecurrence.HalfHour;
TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);
TileUpdateManager.CreateTileUpdaterForApplication().Clear();
// ローカルにある画像ファイルをタイル更新に利用します。
//TileUpdateManager.CreateTileUpdaterForApplication().StartPeriodicUpdate(new
Uri("http://coelacanth.heteml.jp/win8/tilesample/titleUpdateLocalImage.html"), recurrence);
// サーバーにある画像ファイルをタイル更新に利用します。
TileUpdateManager.CreateTileUpdaterForApplication().StartPeriodicUpdate(new
Uri("http://coelacanth.heteml.jp/win8/tilesample/titleUpdateRemoteImage.html"), recurrence);

25. タイル
プッシュ
・Windows通知サーバー(WNS)から通知してもらう
・WNSへの通知依頼は自分のサーバーから
・Windows 8/マルチデバイス + Windows Azure スターター キッ
ト
http://msdn.microsoft.com/ja-jp/windowsazure/jj677081
プッシュについては最後に
Windows Azure Mobile Servicesで紹介

26. タイル
セカンダリタイル
・2つ目以降のタイルを設置できる
・セカンダリタイルのピン留めはユーザー操作のみ
・セカンダリタイルに親アプリを操作する機能を持たせない

27. デモ：セカンダリタイル

28. タイル
ロックスクリーン
・アプリケーションのロック時に表示する
・テキスト表示できるアプリは1つ、バッジを表示できるアプ
リは7つ
・特定のバックグラウンド動作するアプリのみ可能
・バッジやテキストはタイルの情報を表示

29. デモ：ロックスクリーン

30. タイル
タイルのパターン
MSDN:タイル テンプレートの選択
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh761491.aspx#TileSquareText03

31. 通知
通知とは
・基本的にトースト通知を指す
・タイルとの違いはほかのアプリが起動中でも表示されること
・タイルは更新してからしばらく表示しておけるが通知は短期間
のみ
・実装はタイルと似ている

32. 通知
通知の方法
・ローカル
・スケジュール
・プッシュ

33. 通知
ローカル
・実行と同時にトースト通知を表示する
・package.appxmanifestの記載を忘れずに
・タイルと同じく表示はXMLのテンプレートから選択

34. デモ:通知

35. 通知
スケジュール
・実行時間を指定してトースト通知を表示する
・それ以外はローカルと同じ

36. 通知
プッシュ
・タイル同様WNSを利用する
・スケジュールではなく実行時にそのタイミングのデータを利用
してタイル更新やトースト通知を出すことはできないのか？
バックグラウンドタスクでタイマートリガーを使えば可能

37. デモ:Windows Azure Mobile
Service

38. Windows Azure Mobile Service
Windows Azure Mobile Serviceとは
・WindowsAzureを用いてデータを保存などを簡単にできる仕組
み
・認証の仕組みと、通知も可能
・

39. まとめ
・タイルと通知は共通点も多い
・バックグラウンドタスクの理解が必要なことも
・起動中だけがアプリの価値じゃない！！

40. まとめ

41. Windows Azure Mobile Service
Windows Azure Mobile Serviceとは
・WindowsAzureを用いてデータを保存などを簡単にできる仕組
み
・認証の仕組みと、通知も可能

42. 参考資料

43. サンプルURL
今回使用したサンプルは以下のURLからダウンロードできます
https://github.com/coelacanth77

44. ドキュメントURL
主にMSDNへのリンクです
通知配信方法の選択 (Metro スタイル アプリ)
http://msdn.microsoft.com/ja-JP/library/windows/apps/hh779721.aspx
トースト テンプレート カタログ (JavaScript と HTML を使った Metro スタイル
アプリ)
http://msdn.microsoft.com/ja-jp/library/windows/apps/xaml/hh761494.aspx
タイル テンプレートの選択 (JavaScript と HTML を使った Metro スタイル アプ
リ)
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh761491.aspx

45. ドキュメントURL
主にMSDNへのリンクです
クイック スタート: ロック画面上のタイルの更新とバッジの更新
の表示
http://msdn.microsoft.chttp://msdn.microsoft.com/ja-jp/library/windows/apps/xaml/hh868216.aspxom/ja-
JP/library/windows/apps/hh779721.aspx
ロック画面の概要 (Metro スタイル アプリ)
http://msdn.microsoft.com/ja-jp/library/windows/apps/xaml/hh779720.aspx
バックグラウンド タスクによるアプリのサポート
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh977046.aspx

46. ドキュメントURL
主にMSDNへのリンクです
セカンダリ タイルのガイドラインとチェック リスト
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh465398.aspx
セカンダリ タイルの概要
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh465372.aspx
トースト通知をスケジュールする方法
http://msdn.microsoft.com/ja-JP/library/windows/apps/hh465417.aspx

47. for Windowsアプリプラン |
お名前.comデスクトップクラウ
ド

48. ドキュメントURL
Windows8がリモートデスクトップ接続で利用できるサービス