[ストアアプリ][入門] Step53. バッジを表示する ~数字の表示~

バッジとは、スタートスクリーンでタイルの右下に表示される数字やアイコンのことです。

バッジの例

今回はこのバッジに数字を表示する方法について見ていきます。次回はグリフ(グリフとは右下に表示するアイコンのことです)を表示する方法について説明します。

数字は最大で99まで表示でき、99を超えた場合は99+と表示されます。

最初にストアアプリのプロジェクトを作成したら、以下のコードを記述します。

バッジ表示用のメソッドとしてShowBadge()を作成し、ページがロードされたときにShowBadgeメソッドを呼ぶようにします。

以下にコードを示します。

VBの例

Imports Windows.UI.Notifications
Imports Windows.Data.Xml.Dom

Private Sub Page_Loaded(sender As Object, e As RoutedEventArgs)
    ShowBadge()
End Sub

Private Sub ShowBadge()
    'バッジを表示するためのテンプレートの選択
    Dim xml = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeNumber)
    Dim element = DirectCast(xml.SelectSingleNode("/badge"), XmlElement)
    'バッジとして表示する数字の設定
    element.SetAttribute("value", "17")

    'バッジを表示する
    Dim notification = New BadgeNotification(xml)
    Dim updater = BadgeUpdateManager.CreateBadgeUpdaterForApplication()
    updater.Update(notification)
End Sub

C#の例

using Windows.UI.Notifications;
using Windows.Data.Xml.Dom;

private void Page_Loaded(object sender, RoutedEventArgs e)
{
    ShowBadge();
}

private void ShowBadge()
{
    // バッジを表示するためのテンプレートの選択
    XmlDocument xml = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeNumber);
    XmlElement element = (XmlElement)xml.SelectSingleNode("/badge");
    // バッジとして表示する数字の設定
    element.SetAttribute("value", "17");

    // バッジを表示する
    BadgeNotification notification = new BadgeNotification(xml);
    BadgeUpdater updater = BadgeUpdateManager.CreateBadgeUpdaterForApplication();
    updater.Update(notification);
}

ShowBadgeメソッドを見ていきましょう。最初にBadgeUpdateManagerでバッジの種類を設定します。今回は数字を表示するのでBadgeTemplateType.BadgeNumberを指定します。

次に表示する数字を指定するためにXMLのvalue属性に、表示する数字「17」を指定します。

最後にバッジを表示するコードを書きます。

表示にはBadgeUpdaterのUpdateメソッドを使用します。

実行例を以下に示します。タイル右下に数字「17」が表示されます。

バッジ表示例

[ストアアプリ][入門] Step52. ライブタイルを使用する

ライブタイルはスタートスクリーンに表示されているアプリのアイコンに対し、何らかのメッセージを動的に表示できるようにするものです。

今回はライブタイルを作成する方法について見ていきます。

まず、ライブタイルに表示するデータは、XMLファイルとして準備します。

このXMLファイルの書式は、タイルテンプレートカタログに掲載されているフォーマットを使用します。

今回はTileSquareText02というテンプレートを使用します。

作成したXMLは以下の通りです。

<tile>
  <visual>
    <binding template="TileSquareText02">
      <text id="1">予定</text>
      <text id="2">友達とランチ</text>
      <text id="3"></text>
    </binding>  
  </visual>
</tile>

プログラム側では、上記XMLのtemplate属性から使用しているテンプレートを自動で判断します。

作成したXMLファイルは、アプリが読み取りできるところに置きます。

今回はローカルのWebサーバーにToastData.phpというファイル名で上記のXMLファイルを配置しました。

次に、ストアアプリのコードを作成します。

コード例は以下の通りです。

VBの例

Imports Windows.UI.Notifications
Imports Windows.Data.Xml.Dom

Private Sub Page_Loaded(sender As Object, e As RoutedEventArgs)
    TileUpdate()
End Sub

Private Sub TileUpdate()
    Dim updater = TileUpdateManager.CreateTileUpdaterForApplication()
    updater.StartPeriodicUpdate(New Uri("http://localhost/ToastData2.php"), PeriodicUpdateRecurrence.HalfHour)
End Sub

C#の例

using Windows.UI.Notifications;
using Windows.Data.Xml.Dom;

private void Page_Loaded(object sender, RoutedEventArgs e)
{
    TileUpdate();
}

private void TileUpdate()
{
    var updater = TileUpdateManager.CreateTileUpdaterForApplication();
    updater.StartPeriodicUpdate(new Uri("http://localhost/ToastData.php"), PeriodicUpdateRecurrence.HalfHour);
}

最初にTileUpdateというメソッドを作成します(やり方はいろいろあると思います)。

TileUpdateメソッドの中では、TileUpdateManagerクラスを使用して、SatrtPeriodicUpdateメソッドを呼び出しています。

第1引数は、ライブタイルに表示するXML取得先のURLを、第2引数にはライブタイルを更新する時間の間隔を設定します。

上記の例では、更新間隔を30分ごとにしているので、30分経過するごとにWebサーバーからXMLデータを取得してライブタイルのメッセージを更新します。

作成したTileUpdateメソッドはページロード時に実行するようにしています。

このサンプルを実行すると以下のようにタイルに取得したメッセージが表示されます。

ニュースや予定など通知したい場合に活用することができますね。

ライブタイルの例

[ストアアプリ][入門] Step51. アプリ内トースト通知 ~基礎~

今回は、自作アプリにトースト通知をする方法について見ていきます。

トースト通知は、「メールを受信しましたよ」や「~が更新されましたよ」など、何らかの情報をユーザーに伝えたい場合に使用する機能です。

ストアアプリのプロジェクトを作成したら、MainPage.xamlにButtonコントロールを1つ貼り付けてください。

トースト通知の機能を実装するには、マニフェストの設定を行う必要があります。

ソリューションエクスプローラーでPackage.appxmanifestを開いたら、[アプリケーション]タブを選択して「トースト対応」で「はい」に設定をします。

トースト通知の設定

今回はButtonがクリックされた時にトースト通知をするように設定してみます。

以下に、Buttonクリック時のコードを示します。

VBの例

Imports Windows.UI.Notifications
Imports Windows.Data.Xml.Dom

Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
    'トースト通知に使用するテンプレートを選択
    Dim toastTemplate As ToastTemplateType = ToastTemplateType.ToastText01
    Dim xmlData = ToastNotificationManager.GetTemplateContent(toastTemplate)

    'テンプレートの要素を指定する
    Dim textElements As XmlNodeList = xmlData.GetElementsByTagName("text")
    textElements(0).AppendChild(xmlData.CreateTextNode("これはトースト通知です"))

    Dim toast As ToastNotification = New ToastNotification(xmlData)
    ToastNotificationManager.CreateToastNotifier().Show(toast)
End Sub

C#の例

using Windows.UI.Notifications;
using Windows.Data.Xml.Dom;

private void Button_Click(object sender, RoutedEventArgs e)
{
    // トースト通知に使用するテンプレートを選択
    ToastTemplateType toastTemplate = ToastTemplateType.ToastText01;
    XmlDocument xmlData = ToastNotificationManager.GetTemplateContent(toastTemplate);

    // テンプレートの要素を指定する
    XmlNodeList textElements = xmlData.GetElementsByTagName("text");
    textElements[0].AppendChild(xmlData.CreateTextNode("これはトースト通知です"));

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

最初にトースト通知のテンプレートを選択する必要があります。

トースト通知のテンプレートですが、トースト通知には様々な表示方法があります。あらかじめテンプレートが用意されているので、ToastTemplateTypeでどのテンプレートを使用するかを設定します。

今回使用した テンプレートのToastText01は、最大3行まで折り返して表示ができるものです。

テンプレートのサンプルは https://msdn.microsoft.com/ja-jp/library/windows/apps/hh761491.aspx を参照して下さい。

トースト通知に表示するデータは、XMLデータを使用します。

今回はXMLファイルは準備せず、コードでXMLデータを作成しています。既存のサーバーからXMLデータを受け取るように書き換えてもOKです。

XMLデータの中のText要素が、実際に表示するテキストになります。

XmlNodeList型の変数のtextElementsに代入しています。しかし、この時点ではデータの中身はありません(上記の例では、Xmlデータはこの時点で空なので、代入先のtextElementsは空になります)。

textElementsに、トースト通知に表示するテキストを設定してあげます。

VBは textElements(0).AppendChild の部分、C#はtextElements[0].AppendChild の部分です。

「これはトースト通知です」という文字を設定しているので、トースト通知が行われるとこの文字が表示されます。

最後に、実際にトースト通知を行います。

ToastNotificationで表示するXmlデータを設定し、ToastNotificationManagerを使用してトースト通知を行っています。

[F5]キーを押してアプリを起動し、Buttonをクリックするとトースト通知されます。

トースト通知の例