You are on page 1of 48

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
・複数登録する場合は
TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);

デモ:ローカルのタイル更新

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

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

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

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

デモ:スケジュールされたタイル更新

タイル
テンプレートを設定するぐらいまでは同じ流れ
以下が違ってくる
Int16 dueTimeInSeconds = 15;
DateTime dueTime = DateTime.Now.AddSeconds(dueTimeInSeconds);

ScheduledTileNotification tileNotification = new
ScheduledTileNotification(tileXml,dueTime);
tileNotification.Tag = this.tileText.Text;
TileUpdateManager.CreateTileUpdaterForApplication().AddToSchedule(tileNot
ification);

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

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

タイル
テンプレートを設定するぐらいまでは同じ流れ
以下が違ってくる
// タイル更新の設定
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);

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

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

デモ:セカンダリタイル

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

デモ:ロックスクリーン

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

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

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

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

デモ:通知

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

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

デモ:Windows Azure Mobile Service

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

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

まとめ

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

参考資料

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

ドキュメント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

ドキュメントURL
主にMSDNへのリンクです
クイック スタート: ロック画面上のタイルの更新とバッジの更新の表示
http://msdn.microsoft.chttp://msdn.microsoft.com/ja-jp/library/windows/apps/xaml/hh868216.aspxom/jaJP/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

ドキュメント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

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

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