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