[Windows ストア アプリ] バッジとトースト

こんにちは、うりるーです。

前回前々回はタイルとライブタイルについて書きました。
今回はバッジとトーストを Visual Basic で実装していきます。バッジ、トースト、そして前回書いたライブタイルの 3つは Windows ストア アプリの代表的な通知機能としてあげられ、それぞれ伝えられる量やタイミングなどが異なります。

バッジについてですが、これはスタート画面のタイルに表示されるものでアプリの状態情報を通知するために使われます。通知できる情報量はライブタイルやトーストに比べ、非常に少なくなります。バッジの次に書く「トースト」はアプリからユーザーに対し一時的なメッセージをすぐに伝えるために使われ、情報量はライブタイルより少なく、バッジより多くなります。

表にまとめるとこのようになります。

情報量即時性 主な用途
ライブタイル 多い なし 即時性はなく、多くの情報の通知
バッジ 少ない なし 即時性はなく、少ない情報の通知
トースト やや多い あり 即時性のある通知

バッジ


まず、バッジについてですが、バッジの表示位置はタイルの右下(RTL言語の場合は左下)で 数値バッジ と グリフ バッジ の 2種類があります。数値バッジは 0 以上の数値を設定することができ、グリフ バッジは状態のアイコンを 12個の中から選んで設定できます。なお、数値バッジとグリフ バッジを両方選択することはできません。また、バッジを表示すると、そのタイルはライブタイル状態になります。つまり、ユーザーがライブタイルをオフにしてしまうとバッジも表示されなくなります。

数値バッジもグリフ バッジも値が異なるだけで基本的な構造は共通です。

数値バッジは 0以上の数値を設定できますが、設定される数値によって 3つのパターンがあります。

表示
0 (なし)
1 ~ 99
99 ~

グリフ バッジは 12個のパターンがあります。

表示 表示
none (なし) activity
alert available
away busy
newMessage paused
playing unavailable
error attention

参考: バッジの概要 (Windows ストア アプリ) (Windows)

では今回は前回のライブタイルのコードにグリフ バッジの「activity」を追加しようと思います。
別のバッジを表示させたい場合は activity のところを上の表を参考にして別の値に書き換えてください。

MainPage.xaml.vb
Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
 
    TileUpdate() '前回追加したコード
    BadgeUpdate()
 
End Sub

'バッジの表示
Private Sub BadgeUpdate()
    Dim BadgeXml As XmlDocument
    Dim BadgeXmlElement As XmlElement
    Dim Notification As BadgeNotification
    Dim Updater As BadgeUpdater

    BadgeXml = BadgeUpdateManager.GetTemplateContent(Windows.UI.Notifications.BadgeTemplateType.BadgeGlyph)
    BadgeXmlElement = BadgeXml.SelectSingleNode("/badge")
    BadgeXmlElement.SetAttribute("value", "activity")

    Notification = New BadgeNotification(BadgeXml)
    Updater = BadgeUpdateManager.CreateBadgeUpdaterForApplication()
    Updater.Update(Notification)

End Sub

実行するとこのように右下にバッジが表示されます。


では次にトーストの実装に移ります。

トースト


次にトーストについてですが、これは画面の右上(RTL言語の場合は左上)に表示されます。トーストは命令が実行されると、スタート画面、デスクトップ画面、ロック画面、別のアプリの画面など、トーストを命令しているアプリではない画面であってもすぐに割り込んで通知を表示させたり、通知音を鳴らすことができます。(ロック画面の場合は別に宣言を変更する必要があります)

このように強力な機能であるゆえ、トーストを使うときは使うことを宣言しないといけません。宣言するとトースト機能が使えるようになり、PC設定の通知項目にアプリが追加されます。この設定画面でユーザーはアプリごとに通知を無効にすることができます。Windows 8 のトーストはそれをタップ(またはクリック)すると関連付けられたアプリが起動する仕組みになっており、トースト自体は Windows ストア アプリの他にも制限付ではありますが、デスクトップ アプリからも使うことができます。

トーストのプログラムはライブタイルによく似ています。ライブタイルのようにテンプレート(トーストのテンプレートカタログ)に準じた形にする必要がありますが、他にも表示時間や通知音も設定することができ、それらのコードも追加することで意図したとおり表示させることができます。

トースト テンプレートの種類は次の 8つがあります。
どのように表示されるのかについてはトーストのテンプレートカタログを参照してください。

  • ToastText01
  • ToastText02
  • ToastText03
  • ToastText04
  • ToastImageAndText01
  • ToastImageAndText02
  • ToastImageAndText03
  • ToastImageAndText04

表示時間については表示させたい時間を直接指定することはできず、2種類の中から 1つ選びます。

  • short
  • long

short(標準トースト)は約 7秒、long(長期間トースト)は約 25秒表示されます。基本的に short を使いますが、ユーザーにとって非常に重要で切迫している状況であることを通知するときは long を使うようにします。表示時間について何もコードを書かなかった場合は自動的に short が使われます。

通知音については音の種類とループにするかどうか、サイレントがどうかを選択できます。
通知音の種類は 9種類あります。

  • ms-winsoundevent:Notification.Default
  • ms-winsoundevent:Notification.IM
  • ms-winsoundevent:Notification.Mail
  • ms-winsoundevent:Notification.Reminder
  • ms-winsoundevent:Notification.SMS
  • ms-winsoundevent:Notification.Looping.Alarm
  • ms-winsoundevent:Notification.Looping.Alarm2
  • ms-winsoundevent:Notification.Looping.Call
  • ms-winsoundevent:Notification.Looping.Call2

ループかどうかとサイレントかどうかは true か false のどちらかしか選べません。
ループにした場合はトーストが表示されている間中通知音が鳴り続けます。通知音について何もコードを書かなかった場合は何も音はなりません。

上の項目で説明したバッジの続きとして次の条件のトーストも追加していきます。

  • ToastImageAndText02
  • long
  • ms-winsoundevent:Notification.Default
  • ループする

まず、ライブタイルのときと同じように Assets フォルダーにトーストに使う画像を追加します。
既定の設定では画像の大きさは 90 x 90 ピクセルです。

toast.png


トーストのデータ構造については次のサイトも参考にしてください。
参考: トーストのオーディオ オプション カタログ
参考: toast (Windows)

MainPage.xaml.vb
Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
 
    TileUpdate() '前回追加したコード
    BadgeUpdate() '記事前半で追加したコード
    ToastUpdate()
 
End Sub

'トーストの表示
Private Sub ToastUpdate()
    Dim ToastXml As XmlDocument
    Dim ToastNode As XmlNodeList
    Dim Updater As ToastNotifier
    Dim ToastXmlElement As XmlElement
    Dim ToastAudioElement As XmlElement

    ToastXml = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastImageAndText02)
    ToastNode = ToastXml.GetElementsByTagName("image")
    ToastNode(0).Attributes.GetNamedItem("src").InnerText = "ms-appx:///Assets/toast.png"

    ToastNode = ToastXml.GetElementsByTagName("text")
    ToastNode(0).InnerText = "トースト"
    ToastNode(1).InnerText = "ここに詳細が表示されます"

    ToastXmlElement = ToastXml.SelectSingleNode("/toast")
    ToastXmlElement.SetAttribute("duration", "long")

    ToastAudioElement = ToastXml.CreateElement("audio")
    ToastAudioElement.SetAttribute("src", "ms-winsoundevent:Notification.Default")
    ToastAudioElement.SetAttribute("loop", "true")

    ToastXmlElement.AppendChild(ToastAudioElement)

    Updater = ToastNotificationManager.CreateToastNotifier()
    Updater.Show(New ToastNotification(ToastXml))
End Sub

次にトーストを使うと宣言します。
ソリューション エクスプローラーの中にある「Package.appxmanifest」を開き、アプリケーションUI タブ内にある「すべてのイメージ資産」をクリックし、その中の トースト対応 の項目を (設定なし) から「はい」に変更します。


変更を保存して実行すると画面の右上にトーストが表示されます。
アプリを停止してもトーストは表示され続けます。


以上で通知機能の説明を終わりにします。
今後も Windows ストア アプリについても説明していきます。

0 件のコメント:

コメントを投稿