Windowsストアアプリの起動を促すタイルと通知

速習 Windowsストアアプリケーション 第8回

通知

　通知はトースト通知とも呼ばれ、画面右上に細長いバーの形で情報を表示できる機能です。

通知を実行した場面

　ライブタイルがスタート画面のタイルの表示を変更するのとは異なり、トースト通知はデスクトップがほかのアプリを起動している場合でも強制的に表示されます。つまり、より「強く」ユーザーに情報を通知することになります。

　そのためトースト通知の利用は、ストアアプリのコンセプトの「ユーザーに没入させる」という状態を妨げる必要性がある情報かどうかを、十分に吟味した上で行いましょう。

トースト通知の表示パターン

　トースト通知もライブタイル同様に、テンプレートから表示形式を選択します。トースト通知のテンプレート一覧は、トーストテンプレートカタログを参考にしてください。

トースト通知の表示方法

　トースト通知には、下記の形式の表示が可能です。

1. ローカル通知：ストアアプリの起動時に通知を行う機能です。ストアアプリ起動中は、ストアアプリ上で情報を表示することもできるので、利用シーンがあまりありません。
2. スケジュール通知：一定時間後に通知を行う機能です。
3. プッシュ通知：サーバーから情報をプッシュして通知を行う方法です。

トースト通知の実装

　それではトースト通知の一つ、ローカル通知を見てみましょう。ローカル通知は基本的な通知で、タイルのローカル更新同様、すぐに動作が確認できます。

　ローカル通知のコードは以下のとおりです。

ローカル通知

// トースト用のテンプレートを選択
ToastTemplateType toastTemplate = ToastTemplateType.ToastImageAndText01;
XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(toastTemplate);

// テンプレートの各要素を指定
XmlNodeList toastTextElements = toastXml.GetElementsByTagName("text");
toastTextElements[0].AppendChild(toastXml.CreateTextNode("トースト更新"));

XmlNodeList toastImageAttributes = toastXml.GetElementsByTagName("image");
((XmlElement)toastImageAttributes[0]).SetAttribute("src", "http://coelacanth.het　eml.jp/blog/wp-content/uploads/2013/06/Logo.png");
((XmlElement)toastImageAttributes[0]).SetAttribute("alt", "profile icon");

// 表示間隔をロングに(デフォルトはショート)
IXmlNode toastNode = toastXml.SelectSingleNode("/toast");
((XmlElement)toastNode).SetAttribute("duration", "long");

// トースト表示時の音声をオフに
toastNode = toastXml.SelectSingleNode("/toast");
XmlElement audio = toastXml.CreateElement("audio");
audio.SetAttribute("silent", "true");

toastNode.AppendChild(audio);

// トーストをクリックした場合にアプリを起動する
// ローカル通知の場合はあまり関係ない
// 下記のようにパラメーターを渡すこともできる
((XmlElement)toastNode).SetAttribute("launch", "{\"type\":\"toast\",\"param1\":\"sample\",\"param2\":\"sample2\"}");

// 表示
ToastNotification toast = new ToastNotification(toastXml);
ToastNotificationManager.CreateToastNotifier().Show(toast);

　こちらはNotificationsExtensionsを利用しないコードです。

　タイルのコードで紹介したNotificationsExtensionsを使った場合と比較すると、NotificationsExtensionsではクラスのプロパティとして画像や文字を指定していたのに対して、こちらはXMLの操作として記述しているのが分かると思います。この場合はXMLとしてどのような値をとるのかをコードが補完してくれないので、NotificationsExtensionsを使った場合より手間が多くなっています。

　最後の方で、launch属性にトースト通知をクリックした際の動作を指定しています。これによって、画面に表示されたトースト通知からストアアプリを起動させることが可能です。

　新着メッセージをトースト通知で表示したのちに、ユーザーのクリックによってストアアプリを起動するというシナリオが考えられるでしょう。

トースト通知はマニフェストへの記述が必要

　上記のコードだけでは、トースト通知は行われません。

　Package.appxmanifestの「アプリケーションUI」タブのトースト対応を「はい」に設定する必要があります。

トースト通知を有効にする

　これでトースト通知が表示されるはずです。

トースト通知まとめ

　トースト通知は、タイルよりも強い通知であると最初に紹介しました。

　だからこそ適切な表示を行うことで、ユーザーがあなたのストアアプリを起動するための起点になりうる機能とも言えます。

　トースト通知を有効に利用して、より起動されるストアアプリを目指しましょう。