windowsruntimeで通知ファーストなアプリを作る
DESCRIPTION
2014年8月の.Netラボで発表しましたTRANSCRIPT
![Page 1: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/1.jpg)
WindowsRuntime で通知ファーストなアプリを作る
栂井 良太 (@garicchi)
1
![Page 2: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/2.jpg)
自己紹介
栂井良太 (Ryota Togai)
@garicchi
Microsoft MVP for WindowsPlatformDevelopment 2014 ~
学生です
http://garicchi.com※ 息子ではない
2
![Page 3: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/3.jpg)
アジェンダ
WindowsRuntime とはWindowsRuntime の通知トースト通知タイル通知バッジ通知スケジュール通知定期的なポーリング通知Azure と連携したプッシュ通知
3
![Page 4: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/4.jpg)
WindowsRuntime とは
4
![Page 5: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/5.jpg)
WindowsRuntime
Windows8 で登場したの新しい API
Windows ストアアプリと WindowsPhone アプリを作ることができる
言語プロジェクションによって C++ 、 C# 、 VB 、 JavaScript の 4 つの言語から呼び出すことができる
5
![Page 6: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/6.jpg)
これまでとの大きな違い
セキュアアプリの隔離Windows ストアアプリのプロセスモデルの単純化電力消費効率がよいモダン UI
6
![Page 7: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/7.jpg)
よく言われる意見
Windows ストアアプリは仕事でつかわないしなぁ…まだ市場も整ってないし…将来性あると思ってるの?Windows8 は失敗作でしょ?
7
![Page 8: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/8.jpg)
そんなことはない
仕事や家庭で多く普及してる Windows がタブレットに今までとは違うあたらしいソフトウエアのスタイル個人的にかなり未来を感じる 8
![Page 9: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/9.jpg)
例えばコレ
ウチの大学の図書館図書貸し出しシステムタッチ対応 ( なぜかマウスポインタがある )レスポンス最悪 9
![Page 10: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/10.jpg)
趣味レベルから始めましょう
仕事をちょっと効率化したりマイコン制御したりWindows ストアに提出したり ( レビューしてくれます )
10
![Page 11: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/11.jpg)
Windows8 で大きく変わったものは?
11
![Page 12: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/12.jpg)
スタート画面
スタート画面を開く多だけで複数のアプリの新着情報を見れるようになった。従来→メールチェックのためにメールを開く、スケジュールチェックのためにカレンダーを開くなど
12
![Page 13: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/13.jpg)
Windows8 以降では通知が重視 !!
そのための WindowsRuntime の新しい通知API
13
![Page 14: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/14.jpg)
WindowsRuntime の通知
14
![Page 15: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/15.jpg)
今までの Windows の通知
バルーン通知表示できる情報量が少なすぎるユーザーも気づきにくい
15
![Page 16: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/16.jpg)
これからの Windows の通知
アプリ自身が自身のタイルで通知を出すどのアプリにどのような通知があるのかがすぐにわかる
16
![Page 17: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/17.jpg)
通知システム
3 種類の通知
トースト通知 タイル通知 バッジ通知
17
![Page 18: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/18.jpg)
通知のしくみ
WindowsRuntime の通知は XML として定義される何らかの方法で XML を作成、発行OS によって通知
通知発行
Windows
アプリXML
18
![Page 19: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/19.jpg)
4 つの通知更新方法
アプリはこの 4 つの方法で通知の更新を行うことができる
更新方法 適用先
フォアグラウンド更新 タイル、バッジ、トースト
スケジュール更新 タイル、トースト
定期的な更新 タイル、バッジ
プッシュ更新 タイル、バッジ、トースト
19
![Page 20: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/20.jpg)
フォアグラウンド更新
アプリが開いている状態で発行される通知( 例 ゲームのハイスコアが更新された、何かの非同期処理が完了した )
Foreground
Background
アプリの状態
通知
発行
20
![Page 21: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/21.jpg)
スケジュール更新
フォアグラウンドで通知を発行→一定時間後に通知( 例 カレンダーのリマインダー、カウントダウン )
Foreground
Background
アプリの状態
通知
発行
一定時間
21
![Page 22: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/22.jpg)
定期的な更新
定期的に HTTP サーバーにポーリングを行うHTTP サーバーは指定の xml を返すと通知が更新される( 例 天気の更新、 Web サイトの更新 )
Foreground
Background
アプリの状態
通知更新
Serverポーリング
22
![Page 23: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/23.jpg)
プッシュ通知
WNS を利用してプッシュ通知( 例 SNS の更新、メッセージの受信 )
Foreground
Background
アプリの状態WNS
Server
通知チャネル登録
プッシュ通知送信 プッシュ通知送信
23
![Page 24: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/24.jpg)
WindowsRuntime で通知が変わる
WindowsRuntime の通知は、 3 つの通知方法と 4 つの更新方法で構成される
通知自体は XML で定義される
24
![Page 25: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/25.jpg)
トースト通知
25
![Page 26: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/26.jpg)
トースト通知
ユーザーにとって重要なリアルタイムな通知( 例 メールの新着通知、カレンダーのリマインダー )一定時間で消える
26
![Page 27: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/27.jpg)
Toast 通知の種類
大まかに分けるとテキストのみと画像あり
ToastText01
ToastImageAndText01
WindowsPhone
27
![Page 28: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/28.jpg)
ループトースト通知
絶対に見逃してほしくない通知 ( アラームなど ) はトーストを出し続け、ユーザーが止めるまで音を鳴らし続ける
通知
通知発行 ユーザー操作
サウンドが鳴り続ける
通知
通知発行
サウンド
通常
ループ
28
![Page 29: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/29.jpg)
Toast 通知
29
![Page 30: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/30.jpg)
Toast 通知 ( サウンド付き )
ループサウンドの場合→ループ要素=true 、長さ =Longループでないサウンドの場合→ループ要素=false
30
![Page 31: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/31.jpg)
タイル通知
31
![Page 32: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/32.jpg)
ライブタイルがもたらすもの
今日の予定
今の時間
今日の天気
スタート画面に行けばほしい情報が一目でわかる
32
![Page 33: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/33.jpg)
タイルで変わるアプリの使用頻度
タイルサイズは大、中、小、ワイドの 4 種類ライブタイルに対応しているほどタイルサイズが大きくなる傾向 (経験談 )
ライブタイル対応
非対応
33
![Page 34: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/34.jpg)
ライブタイル対応にしよう!
ライブタイルに対応していないアプリ多すぎ !!ィせっかくの Windows8 なのでライブタイルに対応させよう
ライブタイルに対応する
アプリの使用頻度が上がる
アプリの開発が加速する
34
![Page 35: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/35.jpg)
タイル通知の種類
タイルは種類がたくさんhttp://msdn.microsoft.com/ja-jp/library/windows/apps/hh761491.aspx 35
![Page 36: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/36.jpg)
タイル通知のオプション
有効期限と通知キュー通知に有効期限を設けることで通知に信頼性を1度に最大 5 つの通知を発行することが可能
通知
通知発行 通知削除
一定時間後通知 5
通知 4
通知 3
通知 2
通知 1 通知
36
![Page 37: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/37.jpg)
タイル通知
37
![Page 38: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/38.jpg)
バッジ通知
38
![Page 39: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/39.jpg)
バッジ通知の種類
2 種類の通知数字→アプリの未読、カウントグリフ→アプリの状態をアイコンで有効期限は設定可能
バッジ通知 ( 数字 ) バッジ通知 ( グリフ )
39
![Page 40: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/40.jpg)
グリフの種類
12 種類のグリフアイコンによってさまざまなアプリの状態を通知ユーザーは一目でアプリの状態を判断することができる 40
![Page 41: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/41.jpg)
バッジ通知数字
グリフ
41
![Page 42: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/42.jpg)
定期的なポーリング通知
42
![Page 43: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/43.jpg)
ポーリング通知
HTTP サーバーに定期的にデータをポーリングHTTP サーバーのデータを更新すれば通知も更新される定期的に変更したい通知やアプリのアップデート情報など
通知更新
Http Serverポーリング
アプリ
43
![Page 44: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/44.jpg)
ユースケース
デベロッパーがアプリの新しい情報を発信したいときメルマガを送らなくても、アプリを更新しなくても、サーバーの XML を編集するだけで通知を送ることができる
アプリ
ユーザー
Http Server
XML
PC
デベロッパー
新しい情報をユーザーに通知したい
44
![Page 45: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/45.jpg)
ポーリング通知
XML を返す HTTP サーバーに定期的なポーリングを行うタイルかバッジのフォーマットに従った XML を返さなければならない
45
![Page 46: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/46.jpg)
ポーリング通知
マニフェストファイルに更新頻度と URL を指定更新頻度は 30 分、 1 、 6 、 12 時間、毎日
46
![Page 47: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/47.jpg)
Azure を利用したプッシュ通知
47
![Page 48: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/48.jpg)
プッシュ通知
WNS にプッシュ通知を送るサーバーが必要Server がアプリと同一の通知チャネルを持っておくことが必要
Foreground
Background
アプリの状態WNS
Server
通知チャネル登録
プッシュ通知送信 プッシュ通知送信
48
![Page 49: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/49.jpg)
AzureMobileServices を利用したプッシュ
WNS
Azure
App
(1)
(2)
(3)
(4)
(5)(1)WNS にチャンネル Uri を要求
(2)WNS からチャンネル Uri を取得
(3) データベーステーブルにチャンネル Uri とともにデータを挿入
(4) 送信側クライアントが通知チャネルを取得
(5)DB2 にデータを挿入
(6) スクリプトで WNS にプッシュ要求
(7)WNS からプッシュ通知送信
DB1 DB2
送信側クライアント
スクリプト実行
(6)
(7)49
![Page 50: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/50.jpg)
プッシュ通知の有用性
リアルタイムな情報を通知ユーザーがアプリを開いてくれるAzure を利用してサーバーサイドを簡易化
50
![Page 51: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/51.jpg)
Future
Windows9 のインタラクティブタイル (予定 )XAML でタイルを書けるようになる気がする ..https://www.youtube.com/watch?v=aUfMszCJSwI 51
![Page 52: WindowsRuntimeで通知ファーストなアプリを作る](https://reader036.vdocuments.mx/reader036/viewer/2022081519/55660093d8b42a2a4d8b4e42/html5/thumbnails/52.jpg)
まとめ
WindowsRuntime によって統一化された新しい通知システム3 つの通知方法4 つの通知更新方法Windows のアプリをつくろう!
52