[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
注 JavaScript を使わない場合は、「クイック スタート: バッジの更新の送信 (XAML)」をご覧ください。
このトピックでは、バッジの作成またはタイル上のバッジの更新を行う方法を示します。グリフまたは数値を含むバッジ通知を送ります。また、タイルからバッジを削除する方法も確認します。
バッジは、アプリの状態をなんらかの方法で示すためにタイル上に表示される数値またはグリフです。バッジは、タイル上のオーバーレイです (タイル自体の一部ではありません)。次のように、タイル上のいくつかの場所に表示できます。
- 英語のように左から右に表示される言語を使っている Windows で、右下隅
- アラビア語のように右から左に表示される言語を使っている Windows で、左下隅
- 左から右に表示される言語を使っている Windows Phone 8.1 で、右上隅
- 右から左に表示される言語を使っている Windows Phone 8.1 で、左上隅
バッジは独自の API とスキーマを使って操作され、独自の通知を使って更新されます。このトピックでは、バッジ コンテンツを定義し、通知を介してこのコンテンツを送り、不要になった時点でコンテンツを削除する手順について説明します。これらの操作をローカル通知を使って説明します。これは、最も簡単に実装できる通知です。
注 このトピックでは、XML ドキュメント オブジェクト モデル (DOM) を使って通知コンテンツを直接操作します。XML コンテンツを Intellisense などのオブジェクト プロパティとして表示する、NotificationsExtensions ライブラリを使ったオプションのアプローチも利用できます。詳しくは、「クイックスタート: コードでの NotificationsExtensions ライブラリの使用」をご覧ください。NotificationsExtenstions を使って表されるこのトピックのコードを確認するには、アプリのタイルとバッジのサンプルをご覧ください。
必要条件
このトピックを理解するための要件:
- バッジと通知に関する用語と概念についての実用的知識。詳しくは、「タイル、バッジ、通知」をご覧ください。
- バッジの XML スキーマに関する知識。詳しくは、「バッジのスキーマ」をご覧ください。
- Windows ランタイム API を使って JavaScript で基本的な Windows ストア アプリを作成できること。詳しくは、「JavaScript を使った初めての Windows ストア アプリの作成」をご覧ください。
- XML と、ドキュメント オブジェクト モデル (DOM) API を使った XML の操作に関する知識。
手順
1. 名前空間変数を宣言する (省略可能)
この手順では、名前空間の完全な名前の代わりに使う短い名前を用意します。C# の "using" ステートメント、または Visual Basic の "Imports" ステートメントと同等であり、コードを簡素化できます。
注 このトピックの残りのコードでは、この変数が宣言されていることを前提としています。
var notifications = Windows.UI.Notifications;
2. 数値とグリフのどちらを表示するかを選ぶ
バッジには、0 ～ 99 の数字、またはシステムで定義されている状態グリフの 1 つを表示できます。選ぶべきバッジは状況によって異なります。たとえば、電子メール プログラムは未開封メールの数を表示することもあれば、新しいメールが到着するときに "新しいメッセージ" グリフを表示することもあります。使用できるグリフについて詳しくは、「バッジの概要」をご覧ください。数値またはグリフを使う状況については、「タイルとバッジのガイドラインとチェック リスト」をご覧ください。
注 Windows Phone 8.1 では、"警告" と "注意" の状態グリフと数値だけが電話バッジでサポートされています。その他のグリフを電話に送信すると、バッジがクリアされます。
数値バッジとグリフ バッジは、それぞれに固有のバッジ テンプレートを通じて定義されます。決定したバッジ タイプに適したテンプレートを取得する必要があります。この例では、数値バッジ用のテンプレートを取得しています。
var badgeType = notifications.BadgeTemplateType.badgeNumber;
var badgeXml = notifications.BadgeUpdateManager.getTemplateContent(badgeType);
この例では、グリフ バッジ用のテンプレートを取得しています。
var badgeType = notifications.BadgeTemplateType.badgeGlyph;
var badgeXml = notifications.BadgeUpdateManager.getTemplateContent(badgeType);
3. バッジに値を割り当てる
この例では、テンプレートから badge 要素を取得し、この要素に数値を割り当てています。
var badgeAttributes = badgeXml.getElementsByTagName("badge");
badgeAttributes[0].setAttribute("value", "7");
この例では、バッジにグリフ値を割り当てています。
var badgeAttributes = badgeXml.getElementsByTagName("badge");
badgeAttributes[0].setAttribute("value", "newMessage");
4. バッジ通知を作成して、バッジに送信する
この例では、定義した XML を通知としてパッケージ化し、これをバッジに送っています。
var badgeNotification = new notifications.BadgeNotification(badgeXml);
notifications.BadgeUpdateManager.createBadgeUpdaterForApplication().update(badgeNotification);
5. 無効になったバッジを消去する (省略可能)
バッジ数値またはグリフによって通知された情報が古くなるか、または役に立たなくなった場合は、バッジを削除する必要があります。次のコードは、呼び出し元のアプリのタイルから現在のバッジを削除します。また、Clear メソッドを呼び出す代わりに、バッジの更新として値 "none" を送ることもできます。
注 タイルとは異なり、バッジはクラウドを通じてクリアできます。
notifications.BadgeUpdateManager.createBadgeUpdaterForApplication().clear();
要約と次のステップ
このクイック スタートでは、新しいコンテンツを定義してアプリのタイル上のバッジに送り、無効になった時点でこのコンテンツを削除しました。
このクイック スタートでは、ローカル通知としてバッジの更新を送りました。その他の通知配信の方法 (スケジュール、定期的、プッシュ) を調べることもできます。詳しくは、「通知の配信」をご覧ください。