Windowsストア アプリケーション概要            タイルと通知編
Agenda•   タイルと通知の概要•   タイル•   通知•   Windows Azure Mobile Service•   参考資料
タイルと通知の概要
タイルと通知の概要本セッションではユーザーに情報を提供するための・タイル・通知の2つの方法について紹介します。
タイルと通知の概要タイルアプリケーションの起点となるショートカット兼新着情報などを表示するエリア
タイルと通知の概要通知おもにトーストを用いた通知新着メールなどロック画面に出す通知もある
タイルと通知の概要タイルと通知を上手く使うことで最新の情報を提供できるアプリに興味を持ってもらえるユーザーにより起動される頻度の高いアプリケーションを作ることができる
タイル
タイルタイルの種類タイルには2つの大きさと、2つの形態がある・150×150と310×150ピクセル・動きのないタイルと、ライブタイル
タイル大きさ・150×150と310×150ピクセル・マニフェストファイルで指定・150×150は必須・正方形タイルと正方形タイルの間は10ピクセル
タイル大きさ・どちらのサイズで表示するかはユーザーが変更可能・両方のサイズが指定されている場合はデフォルトは310×150表示・310×150のタイルは基本ライブタイル
タイル形態・動きがあるライブタイルと動きのないタイルがある・2つめ以降のタイル=セカンダリタイル
タイルライブタイル・タイルを更新することで情報を通知できる・更新方法は以下  ローカル  スケジュール  定期更新  プッシュ
タイルライブタイル-ローカル・アプリの実行中にタイルの更新を設定する一番シンプルな方法・タイルの表示はテンプレート(後述)から選択・TileNotification、TileUpdateManager・画像はサーバーでもローカルでもOK・複数登...
デモ:ローカルのタイル更新
タイル// タイルのテンプレート選択XmlDocument tileXml =TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideImageAndText01);// 2つ...
タイルテンプレートの内容を定義していく・・・XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");tileTextAttributes[0].InnerTex...
タイル最後に設定TileNotification tileNotification = new TileNotification(tileXml);TileUpdateManager.CreateTileUpdaterForApplicatio...
タイルライブタイル-スケジュール・タイルの定義はアプリ起動時に行う・タイルの更新時刻を指定して一定時間後に更新する・更新時にサーバーに通信などはしない(アプリ実行時に定義してしまう)
デモ:スケジュールされたタイル更新
タイルテンプレートを設定するぐらいまでは同じ流れ以下が違ってくるInt16 dueTimeInSeconds = 15;DateTime dueTime = DateTime.Now.AddSeconds(dueTimeInSeconds);S...
タイルライブタイル-定期的・定期的に外部サーバーからデータを取得・サーバー側はテンプレート形式のXMLを返す・テンプレート形式ではないXMLやJSONなどを利用したい場合は  バックグラウンドタスクを使うこともできるが、  この場合ユーザーにダ...
デモ:定期的な更新      外部サービスの利用
タイルテンプレートを設定するぐらいまでは同じ流れ以下が違ってくる// タイル更新の設定PeriodicUpdateRecurrence recurrence = PeriodicUpdateRecurrence.HalfHour;TileUpd...
タイルプッシュ・Windows通知サーバー(WNS)から通知してもらう・WNSへの通知依頼は自分のサーバーから・Windows 8/マルチデバイス + Windows Azure スターター キット http://msdn.microsoft....
タイルセカンダリタイル・2つ目以降のタイルを設置できる・セカンダリタイルのピン留めはユーザー操作のみ・セカンダリタイルに親アプリを操作する機能を持たせない
デモ:セカンダリタイル
タイルロックスクリーン ・アプリケーションのロック時に表示する ・テキスト表示できるアプリは1つ、バッジを表示できるアプリは7つ ・特定のバックグラウンド動作するアプリのみ可能 ・バッジやテキストはタイルの情報を表示
デモ:ロックスクリーン
タイルタイルのパターンMSDN:タイル テンプレートの選択http://msdn.microsoft.com/ja-jp/library/windows/apps/hh761491.aspx#TileSquareText03
通知通知とは・基本的にトースト通知を指す・タイルとの違いはほかのアプリが起動中でも表示されること・タイルは更新してからしばらく表示しておけるが通知は短期間のみ・実装はタイルと似ている
通知通知の方法・ローカル・スケジュール・プッシュ
通知ローカル・実行と同時にトースト通知を表示する・package.appxmanifestの記載を忘れずに・タイルと同じく表示はXMLのテンプレートから選択
デモ:通知
通知スケジュール・実行時間を指定してトースト通知を表示する・それ以外はローカルと同じ
通知プッシュ・タイル同様WNSを利用する・スケジュールではなく実行時にそのタイミングのデータを利用してタイル更新やトースト通知を出すことはできないのか? バックグラウンドタスクでタイマートリガーを使えば可能
デモ:Windows Azure MobileService
Windows Azure Mobile ServiceWindows Azure Mobile Serviceとは・WindowsAzureを用いてデータを保存などを簡単にできる仕組み・認証の仕組みと、通知も可能・
まとめ・タイルと通知は共通点も多い・バックグラウンドタスクの理解が必要なことも・起動中だけがアプリの価値じゃない!!
まとめ
Windows Azure Mobile ServiceWindows Azure Mobile Serviceとは・WindowsAzureを用いてデータを保存などを簡単にできる仕組み・認証の仕組みと、通知も可能
参考資料
サンプルURL今回使用したサンプルは以下のURLからダウンロードできますhttps://github.com/coelacanth77
ドキュメントURL主にMSDNへのリンクです通知配信方法の選択 (Metro スタイル アプリ)http://msdn.microsoft.com/ja-JP/library/windows/apps/hh779721.aspxトースト テンプ...
ドキュメントURL主にMSDNへのリンクですクイック スタート: ロック画面上のタイルの更新とバッジの更新の表示http://msdn.microsoft.chttp://msdn.microsoft.com/ja-jp/library/win...
ドキュメントURL主にMSDNへのリンクですセカンダリ タイルのガイドラインとチェック リストhttp://msdn.microsoft.com/ja-jp/library/windows/apps/hh465398.aspxセカンダリ タイル...
for Windowsアプリプラン |お名前.comデスクトップクラウド
ドキュメントURLWindows8がリモートデスクトップ接続で利用できるサービス
Upcoming SlideShare
Loading in …5
×

Windowsストア アプリケーション概要(通知編)

1,570 views

Published on

  • Be the first to comment

  • Be the first to like this

Windowsストア アプリケーション概要(通知編)

  1. 1. Windowsストア アプリケーション概要 タイルと通知編
  2. 2. Agenda• タイルと通知の概要• タイル• 通知• Windows Azure Mobile Service• 参考資料
  3. 3. タイルと通知の概要
  4. 4. タイルと通知の概要本セッションではユーザーに情報を提供するための・タイル・通知の2つの方法について紹介します。
  5. 5. タイルと通知の概要タイルアプリケーションの起点となるショートカット兼新着情報などを表示するエリア
  6. 6. タイルと通知の概要通知おもにトーストを用いた通知新着メールなどロック画面に出す通知もある
  7. 7. タイルと通知の概要タイルと通知を上手く使うことで最新の情報を提供できるアプリに興味を持ってもらえるユーザーにより起動される頻度の高いアプリケーションを作ることができる
  8. 8. タイル
  9. 9. タイルタイルの種類タイルには2つの大きさと、2つの形態がある・150×150と310×150ピクセル・動きのないタイルと、ライブタイル
  10. 10. タイル大きさ・150×150と310×150ピクセル・マニフェストファイルで指定・150×150は必須・正方形タイルと正方形タイルの間は10ピクセル
  11. 11. タイル大きさ・どちらのサイズで表示するかはユーザーが変更可能・両方のサイズが指定されている場合はデフォルトは310×150表示・310×150のタイルは基本ライブタイル
  12. 12. タイル形態・動きがあるライブタイルと動きのないタイルがある・2つめ以降のタイル=セカンダリタイル
  13. 13. タイルライブタイル・タイルを更新することで情報を通知できる・更新方法は以下 ローカル スケジュール 定期更新 プッシュ
  14. 14. タイルライブタイル-ローカル・アプリの実行中にタイルの更新を設定する一番シンプルな方法・タイルの表示はテンプレート(後述)から選択・TileNotification、TileUpdateManager・画像はサーバーでもローカルでもOK・複数登録する場合は TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);
  15. 15. デモ:ローカルのタイル更新
  16. 16. タイル// タイルのテンプレート選択XmlDocument tileXml =TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideImageAndText01);// 2つの大きさがあるので両方指定する場合は2つ指定XmlDocument squareTileXml =TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText04);XMLでタイルのテンプレートを取得する
  17. 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. 18. タイル最後に設定TileNotification tileNotification = new TileNotification(tileXml);TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
  19. 19. タイルライブタイル-スケジュール・タイルの定義はアプリ起動時に行う・タイルの更新時刻を指定して一定時間後に更新する・更新時にサーバーに通信などはしない(アプリ実行時に定義してしまう)
  20. 20. デモ:スケジュールされたタイル更新
  21. 21. タイルテンプレートを設定するぐらいまでは同じ流れ以下が違ってくるInt16 dueTimeInSeconds = 15;DateTime dueTime = DateTime.Now.AddSeconds(dueTimeInSeconds);ScheduledTileNotification tileNotification = newScheduledTileNotification(tileXml,dueTime);tileNotification.Tag = this.tileText.Text;TileUpdateManager.CreateTileUpdaterForApplication().AddToSchedule(tileNotification);
  22. 22. タイルライブタイル-定期的・定期的に外部サーバーからデータを取得・サーバー側はテンプレート形式のXMLを返す・テンプレート形式ではないXMLやJSONなどを利用したい場合は バックグラウンドタスクを使うこともできるが、 この場合ユーザーにダイアログで許可をもらう必要がある
  23. 23. デモ:定期的な更新 外部サービスの利用
  24. 24. タイルテンプレートを設定するぐらいまでは同じ流れ以下が違ってくる// タイル更新の設定PeriodicUpdateRecurrence recurrence = PeriodicUpdateRecurrence.HalfHour;TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);TileUpdateManager.CreateTileUpdaterForApplication().Clear();// ローカルにある画像ファイルをタイル更新に利用します。//TileUpdateManager.CreateTileUpdaterForApplication().StartPeriodicUpdate(newUri("http://coelacanth.heteml.jp/win8/tilesample/titleUpdateLocalImage.html"), recurrence);// サーバーにある画像ファイルをタイル更新に利用します。TileUpdateManager.CreateTileUpdaterForApplication().StartPeriodicUpdate(newUri("http://coelacanth.heteml.jp/win8/tilesample/titleUpdateRemoteImage.html"), recurrence);
  25. 25. タイルプッシュ・Windows通知サーバー(WNS)から通知してもらう・WNSへの通知依頼は自分のサーバーから・Windows 8/マルチデバイス + Windows Azure スターター キット http://msdn.microsoft.com/ja-jp/windowsazure/jj677081プッシュについては最後に Windows Azure Mobile Servicesで紹介
  26. 26. タイルセカンダリタイル・2つ目以降のタイルを設置できる・セカンダリタイルのピン留めはユーザー操作のみ・セカンダリタイルに親アプリを操作する機能を持たせない
  27. 27. デモ:セカンダリタイル
  28. 28. タイルロックスクリーン ・アプリケーションのロック時に表示する ・テキスト表示できるアプリは1つ、バッジを表示できるアプリは7つ ・特定のバックグラウンド動作するアプリのみ可能 ・バッジやテキストはタイルの情報を表示
  29. 29. デモ:ロックスクリーン
  30. 30. タイルタイルのパターンMSDN:タイル テンプレートの選択http://msdn.microsoft.com/ja-jp/library/windows/apps/hh761491.aspx#TileSquareText03
  31. 31. 通知通知とは・基本的にトースト通知を指す・タイルとの違いはほかのアプリが起動中でも表示されること・タイルは更新してからしばらく表示しておけるが通知は短期間のみ・実装はタイルと似ている
  32. 32. 通知通知の方法・ローカル・スケジュール・プッシュ
  33. 33. 通知ローカル・実行と同時にトースト通知を表示する・package.appxmanifestの記載を忘れずに・タイルと同じく表示はXMLのテンプレートから選択
  34. 34. デモ:通知
  35. 35. 通知スケジュール・実行時間を指定してトースト通知を表示する・それ以外はローカルと同じ
  36. 36. 通知プッシュ・タイル同様WNSを利用する・スケジュールではなく実行時にそのタイミングのデータを利用してタイル更新やトースト通知を出すことはできないのか? バックグラウンドタスクでタイマートリガーを使えば可能
  37. 37. デモ:Windows Azure MobileService
  38. 38. Windows Azure Mobile ServiceWindows Azure Mobile Serviceとは・WindowsAzureを用いてデータを保存などを簡単にできる仕組み・認証の仕組みと、通知も可能・
  39. 39. まとめ・タイルと通知は共通点も多い・バックグラウンドタスクの理解が必要なことも・起動中だけがアプリの価値じゃない!!
  40. 40. まとめ
  41. 41. Windows Azure Mobile ServiceWindows Azure Mobile Serviceとは・WindowsAzureを用いてデータを保存などを簡単にできる仕組み・認証の仕組みと、通知も可能
  42. 42. 参考資料
  43. 43. サンプルURL今回使用したサンプルは以下のURLからダウンロードできますhttps://github.com/coelacanth77
  44. 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. 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. 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. 47. for Windowsアプリプラン |お名前.comデスクトップクラウド
  48. 48. ドキュメントURLWindows8がリモートデスクトップ接続で利用できるサービス

×