クイックスタート: コードでの NotificationsExtensions ライブラリの使用 (HTML)

  • [アーティクル]

[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

注  JavaScript を使わない場合は、「クイックスタート: コードでの NotificationsExtensions ライブラリの使用 (XAML)」をご覧ください。

 

NotificationsExtensions オブジェクト モデル ライブラリを使うと、XML ドキュメント オブジェクト モデル (DOM) を使わずに、タイル、バッジ、トースト通知 XML テンプレート コンテンツを用意できます。これは、通知コンテンツを指定するための、より単純で明確で直接的な方法です。Microsoft Visual Studio でこのライブラリを使うと、次のような利点が得られます。

  • 使用可能なタグと属性をオブジェクト プロパティとして表示する IntelliSense。要素や構造についての情報をスキーマのドキュメントで調べなくて済みます。
  • ファクトリ関数。この関数を使って、スケルトン通知を作ることができます。作ったスケルトン通知には、独自のコンテンツを指定できます。
  • 通知ペイロードに複数のタイル サイズを含める簡略化された方法 (お勧めする方法です)。
  • 使用目的、サイズ、テンプレート内の位置などがよくわかる名前が付けられた、テキストと画像の属性を探して指定するための便利な方法。

注  NotificationsExtensions ライブラリは、Microsoft Limited Public License (MS-LPL) の下でリリースされます。このライブラリは、Windows ストア アプリと Web サービスで再利用でき、アプリで必要な場合にはカスタマイズもできます。

 

必要条件

  • タイルと通知に関する用語と概念についての実用的知識。詳しくは、「タイル、バッジ、通知」をご覧ください。
  • Windows ランタイム API を使って JavaScript で基本的な Windows ストア アプリを作成できること。詳しくは、「JavaScript を使った初めての Windows ストア アプリの作成」をご覧ください。
  • XML の基本的な知識があると、NotificationsExtensions ライブラリの利点をより深く理解できます。

手順

1. NotificationsExtensions ライブラリを入手する

NotificationsExtensions ライブラリは、いくつかのダウンロードできるタイル、トースト、通知のサンプルに含まれています。これらはコピーして独自に使うことができます。この手順では、メイン タイルとバッジのサンプルを使います。

注  NotificationsExtensions は C# ライブラリですが、JavaScript、C#、C++、Microsoft Visual Basic プロジェクトに読み込んで使うことができます。

 

  1. Windows デベロッパー センターから、アプリのタイルとバッジのサンプルをダウンロードします。
  2. "App tiles and badges sample.zip" ファイルを、任意のフォルダーに展開します。
  3. サンプルを展開したフォルダーに移動します。サンプルの NotificationsExtensions フォルダーを自分のプロジェクト ディレクトリにプロジェクトの .sln ファイルの兄弟としてコピーします。

2. プロジェクトにライブラリを含める

  1. Visual Studio を起動し、プロジェクトを開きます。
  2. プロジェクト エクスプローラーで、ツリーの上部のソリューションを右クリックします。
  3. [追加]、[既存のプロジェクト] の順に選択します。
  4. プロジェクトの NotificationsExtensions フォルダーに移動し、NotificationsExtensions.csproj ファイルを選びます。
  5. ソリューション内の各プロジェクトで [参照] を右クリックし、[参照の追加] を選びます。
  6. 参照マネージャーで [ソリューション] の下の NotificationsExtensions を選び、[OK] をクリックします。この時点で、NotificationsExtensions を使えるようになります。

注  ソリューションに完全な NotificationsExtensions プロジェクトを含めない場合は、NotificationsExtensions をスタンドアロン プロジェクトとしてビルドし、単に NotificationsExtensions.winmd を参照としてプロジェクトに読み込むことができます。

 

3. アプリ サーバーにライブラリを含める

ASP.NET を使ってプッシュ通知を Windows プッシュ通知サービス (WNS) に送信するか、ASP.NET サービスを実装して定期的なタイルやバッジの更新の要求を処理する場合は、アプリ サーバー コードでも NotificationsExtensions を使うことができます。この際、NotificationsExtensions プロジェクト プロパティで WINRT_NOT_PRESENT コンパイル ビルド シンボルを追加する必要があるということに注意してください。

  1. サンプルを展開したディレクトリに移動します。サンプル フォルダーを開き、その NotificationsExtensions フォルダーを任意の新しい場所にコピーします。

  2. NotificationsExtensions.csproj ファイルを選び、Visual Studio でプロジェクトを開きます。

  3. [プロジェクト] メニューの [NotificationsExtensions のプロパティ] をクリックします。

  4. DLL ファイルをビルドするために、[出力の種類] の選択を "クラス ライブラリ" に変えます。

  5. また、NotificationsExtensions のプロパティで [ビルド] タブを選びます。

  6. [全般] カテゴリで、[条件付きコンパイル シンボル] ボックスに「WINRT_NOT_PRESENT」を追加します。ボックスに既に他のシンボルが含まれている場合は、"WINRT_NOT_PRESENT" の前に区切り記号としてセミコロンを追加します。

  7. F7 キーを押すか、[ビルド]、[ソリューションのビルド] の順にクリックして、プロジェクトをビルドします。

  8. ビルドされた NotificationsExtensions.dll ファイルを、自分のフォルダー (\NotificationsExtensions\bin\Debug\ の下) から自分のアプリ サーバー コードにコピーします。

4. コードでライブラリを使う

これで、コード内で NotificationsExtensions をオブジェクトとして使うことができるようになりました。このライブラリには次の 3 つのメンバーが含まれます。

  • BadgeContent
  • TileContent
  • ToastContent

これらの各コンテンツの種類には、それぞれの種類の要素と属性を表すメンバーが含まれています。

次の例では、NotificationsExtensions を使って数値バッジに値を割り当て、それをタイルに送信します。


var badgeContent = NotificationsExtensions.BadgeContent.BadgeNumericNotificationContent(85);
var badgeNotification = badgeContent.createNotification();

Windows.UI.Notifications.BadgeUpdateManager.createBadgeUpdaterForApplication().update(badgeNotification);

比較のために、次の例では NotificationsExtensions を使うのではなく、XML DOM を直接操作した場合の同じ手順を示しています。


var notifications = Windows.UI.Notifications;                        
var badgeXml = notifications.BadgeUpdateManager.getTemplateContent(notifications.BadgeTemplateType.badgeNumber);
var badgeAttributes = badgeXml.getElementsByTagName("badge");
badgeAttributes[0].setAttribute("value", "85");
var badgeNotification = new notifications.BadgeNotification(badgeXml);

BadgeUpdateManager.createBadgeUpdaterForApplication().update(badgeNotification);

次の例では、NotificationsExtensions を使って、タイル通知のテキストを指定します。最初の手順では、NotificationsExtensions の TileContentFactory 関数を使って、特定のテンプレートに基づくオブジェクトを作ります。テンプレートごとに、個別の作成関数があります。テンプレート名に単に "create" という単語を付けたして、"createTileWide310x150ImageAndText01" のようにします。

こうすると、テンプレートに基づくオブジェクトは IntelliSense 機能によって、そのテンプレート内の使うことができる要素をユーザーに示すようになります。要素はプロパティとして、その機能に基づいた名前が表示されます (textHeading、textBodyWrap、textBody1、textColumn1Row4 など)。そのため、どの要素を割り当てるかを正確に知ることができます。

プロパティに値を割り当てたら、タイルの通知を通常どおりに送信します。


var tileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquare150x150Text01();

tileContent.textHeading.text = "Hello!";
tileContent.textBody1.text = "One";
tileContent.textBody2.text = "Two";
tileContent.textBody3.text = "Three";

var tileNotification = tileContent.createNotification();

Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

この例では、NotificationsExtentions を使って、テキストと画像を通知に割り当てます。テキストと同じように、画像要素もテンプレートでの機能に基づいた名前を持つプロパティとして表示されます (imageMain、imageSmallColumn2Row2 など)。


var tileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileWide310x150ImageAndText01();

tileContent.textCaptionWrap.text = "This tile notification uses ms-appx images";

tileContent.image.src = "ms-appx:///images/redWide.png";
tileContent.image.alt = "A red rectangle";

この例では、NotificationsExtensions を使って、タイル全体の通知を定義します。これによって、このライブラリの 1 つの特色である、テンプレート サイズをペイロードに追加する順番の問題について説明します。

  • 小サイズのテンプレート (正方形 71 x 71 — Windows Phone 8.1 のみ) は、普通サイズのテンプレートだけに追加できます。
  • 普通サイズのテンプレート (正方形 150 x 150) は、ワイド サイズのテンプレートだけに追加できます。
  • ワイド サイズのテンプレートは、大サイズのテンプレート (正方形 310 x 310 — Windows のみ) だけに追加できます。

異なる順序で追加しようとすると、必要なプロパティを使用できなくなります。


var tileLargeContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquare310x310Text09();
tileLargeContent.textHeadingWrap.text = "Lorem ipsum dolor sit amet, consectetur";
tileLargeContent.textHeading1.text = "Lorem ipsumo";
tileLargeContent.textHeading2.text = "Lorem ipsumo";
tileLargeContent.textBody1.text = "VivAmus tincidunt convallis urn";
tileLargeContent.textBody2.text = "VivAmus tincidunt convallis urn";

var tileWideContent = NotificationsExtensions.TileContent.TileContentFactory.createTileWide310x150Text04();
tileWideContent.textBodyWrap.text = "Lorem ipsum dolor sit amet, consectetur";

var tileMediumContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquare150x150Block();
tileMediumContent.textBlock.text = "24";
tileMediumContent.textSubBlock.text = "Aliquam";
        
tileWideContent.square150x150Content = tileMediumContent;
tileLargeContent.wide310x150Content = tileWideContent;

var tileNotification = tileLargeContent.createNotification();

Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

この例では、NotificationsExtensions を使って、トースト通知のコンテンツ (テキスト、画像、オーディオ、期間、起動パラメーターなど) を指定します。


var toastContent = NotificationsExtensions.ToastContent.ToastContentFactory.createToastImageAndText01();

toastContent.textBodyWrap.text = "Lorem ipsum dolor sit amet";

toastContent.image.src = "ms-appx:///images/redWide.png";
toastContent.image.alt = "A red rectangle";

toastContent.audio.content = NotificationsExtensions.ToastContent.ToastAudioContent.loopingAlarm;
toastContent.audio.loop = true;

toastContent.duration = NotificationsExtensions.ToastContent.ToastDuration.long;

toastContent.launch = '{"type":"toast","param1":"12345","param2":"67890"}';

var toast = toastContent.createNotification();
Windows.UI.Notifications.ToastNotificationManager.createToastNotifier().show(toast);

要約

このトピックでは、NotificationsExtensions を使って、バッジ、タイル、トースト通知を簡単に作る方法について説明しました。こうすることで、XML DOM を直接操作するよりも簡単に、テンプレートの内容を指定できます。