クイックスタート: バッジの更新の送信 (HTML) - Windows app development

[アーティクル]
12/22/2015

[ この記事は、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();

要約と次のステップ

このクイックスタートでは、新しいコンテンツを定義してアプリのタイル上のバッジに送り、無効になった時点でこのコンテンツを削除しました。

このクイックスタートでは、ローカル通知としてバッジの更新を送りました。その他の通知配信の方法 (スケジュール、定期的、プッシュ) を調べることもできます。詳しくは、「通知の配信」をご覧ください。

次の方法で共有