[Windowsストアアプリ開発]バッジを更新する

目次に移動

バッジって何？

スタートスクリーンでタイルの右下に数字やアイコンが表示されていることがありますが、これをバッジといいます。
以下はストアのタイルですが更新可能なアプリの数をバッジで表しています。

数字は最大で99まで表示でき、99以上の場合は99+と表示されます。0の場合は何も表示されません。
バッジには数字の他にグリフといってアイコンのようなものを表示することも可能です。

実装する

それではアプリ起動時にバッジを更新する簡単なサンプルを作ってみます。
新しいプロジェクトを作成してMain.xaml.cs の OnNavigatedTo メソッドにバッジを更新する処理を入れます。
まずは以下の名前空間をusingディレクティブに追加してください。

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

次に以下のソースコードのように実装してみて下さい。
BadgeUpdateManagerクラスのGetTemplateContentメソッドの引数にテンプレートの種類を指定します。
テンプレートのXMLオブジェクトが戻されますので、DOMを使って編集後、BadgeUpdaterクラスのUpdateメソッドで更新します。

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }
    
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        BadgeUpdate();
    }

    private void BadgeUpdate()
    {
        // 数値を表示する場合
        XmlDocument xml = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeNumber);
        XmlElement element = (XmlElement)xml.SelectSingleNode("/badge");
        element.SetAttribute("value", "12");

        // グリフを表示する場合
        /*
        XmlDocument xml = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeGlyph);
        XmlElement element = (XmlElement)xml.SelectSingleNode("/badge");
        element.SetAttribute("value", "attention");
        */
        BadgeNotification notification = new BadgeNotification(xml);
        BadgeUpdater updater = BadgeUpdateManager.CreateBadgeUpdaterForApplication();
        updater.Update(notification);
    }
}

実装できたので動かしてみましょう。バッジはシミュレーターでは確認できないので、ローカル環境で実行してみてください。
BadgeUpdateManager、BadgeUpdater などのクラスを使ってアプリケーション内でバッジを更新しますので、最低１回はアプリを起動する必要があります。実行後、スタートスクリーンを見ると、アプリのタイルに設定した情報が表示されていると思います。

グリフを表示する際はSetAttributeの第2引数に文字列を指定しますが、以下のサイトにグリフと文字列の対応表が載っています。
サンプルでは注意(attention)のグリフを表示してみました。
バッジの概要 (Windows ストア アプリ) (Windows)

定期的に更新する

バッジのサンプルはできましたが、更新されるのは起動時のみなので面白くありません。
次はアプリが停止中でも定期的に更新するバッジを実装してみましょう。

定期的にタイルを更新するにはまずWebサーバが必要になります。
受信するデータはBadgeUpdateManagerのGetTemplateContentメソッドで返されるXMLと同様の形式でなくてはいけません。
私は以下のような何分かを返すPHPファイルを作成して試しました。
badge要素のvalue属性をnewMessage, attention などの文字列にすると、数値ではなくグリフが表示されます。

<badge value="<?php echo date("i"); ?>"/>

次にプログラムを修正します。BadgeUpdateメソッド以外は先ほどと同じなので省略します。。
先ほどは更新時にBadgeUpdateクラスのUpdateメソッドを使いましたが、代わりにStartPeriodicUpdateというメソッドを使っています。
このメソッドは第1引数が接続先、第2引数が間隔です。ここでは30分間隔にしています。
他に指定できる間隔は1時間、6時間、12時間、1日などになります。

private void BadgeUpdate()
{
    BadgeUpdater updater = BadgeUpdateManager.CreateBadgeUpdaterForApplication();
    updater.StartPeriodicUpdate(new Uri("http://localhost/sample.php"), PeriodicUpdateRecurrence.HalfHour);
}

実装できたので1度実行してから、アプリをシャットダウン後、ちょっと時間を置いてみてみます。
・起動直後

・2回目の更新

なぜか2回目の更新が10分後でしたが3回目は50だったので間隔はピッタリ30分でした。

目次に移動