クイック スタート: 通知をセカンダリ タイルに送信 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
注 JavaScript を使わない場合は、「クイック スタート: 通知をセカンダリ タイルに送信 (XAML)」をご覧ください。
このクイック スタートでは、ローカル通知を送ってアプリのセカンダリ タイルを更新する方法を示します。 セカンダリ タイルへの通知の送信は、最後の手順を除き、アプリのメイン タイルへの通知の送信と同じです。2 つの操作の唯一の違いは、セカンダリ タイルに通知を送信する場合は、セカンダリ タイル固有のタイル アップデーター (CreateTileUpdaterForSecondaryTile) を使う点です。
このトピックで紹介するコードを完全なサンプルで確認するには、セカンダリ タイルのサンプルをご覧ください。このサンプルには、JavaScript、C#、C++、Visual Basic のバージョンが用意されています。
アプリの起動時には、常にセカンダリ タイルを列挙する必要があります。セカンダリ タイルの追加や削除を把握していない場合があるためです。ユーザーがセカンダリ タイルを削除すると、Windows はタイルを単純に削除します。セカンダリ タイルによって使われていたリソースは、アプリ自体で解放する必要があります。クラウドを通じてセカンダリ タイルがコピーされた場合、セカンダリ タイル上のタイルまたはバッジの現在の通知、スケジュールされた通知、プッシュ通知チャネル、定期的な通知で使われる Uniform Resource Identifier (URI) はタイルと共にコピーされないので、再設定する必要があります。
注 このクイック スタートでは、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. 空白のタイル テンプレートを取得する
セカンダリ タイルには任意のタイル テンプレートを使うことができます。ここでは、テキストのみのシンプルなテンプレート TileWide310x150Text04 を使います。
var wideTemplate = notifications.TileTemplateType.tileWide310x150Text04;
var tileXml = notifications.TileUpdateManager.getTemplateContent(wideTemplate);
3. テキストを通知に割り当てる
TileWide310x150Text04 テンプレートには単一のテキスト要素が格納されます。この要素に文字列を割り当てます。
var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("This text was delivered through a notification"));
4. 普通サイズ バージョンの通知を提供する
タイルに送信されるすべての通知ペイロードで、アプリがサポートしている各タイル サイズ用のバインディングを常に用意することをお勧めします。ユーザーはピン留め操作の一部として、用意されているオプションの中からセカンダリ タイルのサイズを選ぶことができます。これらの各サイズ オプションのためのバインディングを各通知で用意すると、タイルのサイズに関係なく、確実に通知を表示できます。また、大きいセカンダリ タイルもサポートしている場合は、大サイズのテンプレートのいずれかのために、この手順と次の手順を繰り返します。
注 Windows Phone 8.1 では、セカンダリ タイルも含むすべてのタイルが、普通サイズのタイルとしてピン留めされ、その後、ユーザーがサイズを変えることができます。
var squareTemplate = notifications.TileTemplateType.tileSquare150x150Text04;
var squareTileXml = notifications.TileUpdateManager.getTemplateContent(squareTemplate);
var squareTileTextAttributes = squareTileXml.getElementsByTagName("text");
squareTileTextAttributes[0].appendChild(squareTileXml.createTextNode("This text was delivered through a notification"));
5. 普通サイズの通知をワイド通知のペイロードに追加する
var node = tileXml.importNode(squareTileXml.getElementsByTagName("binding").item(0), true);
tileXml.getElementsByTagName("visual").item(0).appendChild(node);
6. 最終的な XML をタイル通知としてパッケージ化する
var tileNotification = new notifications.TileNotification(tileXml);
7. セカンダリ タイル アップデーターを作成する
この手順までは、標準のタイル通知の場合と同じです。ただし、この手順では、セカンダリ タイルに固有の createTileUpdaterForSecondaryTile メソッドを使います。このメソッドを実行するには、対象となるセカンダリ タイルの一意の ID が必要です。この例では、現時点で、appbarTileId 変数に格納された ID を持つセカンダリ タイルがスタート画面にピン留めされているものとします。
var updater = notifications.TileUpdateManager.createTileUpdaterForSecondaryTile(appbarTileId);
8. 通知をセカンダリ タイルに送信する
updater.update(tileNotification);
9. セカンダリ タイルのロゴを更新する (省略可能)
セカンダリ タイルを作るときは、ロゴ イメージを提供する必要があります。ロゴ イメージは、通知が何も届いていないときにタイルに表示され、タイル全体を占める画像です (通常はアプリのロゴを表示するため、こう呼ばれています)。タイルは、通知が削除されるか通知の期限が切れるとロゴ イメージに戻ります。状況によっては、既定のロゴ イメージを変更した方がよい場合があります。たとえば、通知更新全体は送信せず、ピン留めされたコンテンツの変更を示す場合などです。この手順では、アプリのローカル ストレージにある画像を使って、appbarTileId 変数に格納された ID を持つセカンダリ タイルのロゴを変更する方法を示します。この例は、Windows.Foundation.Uri クラスを参照しています。
var tileToUpdate = new Windows.UI.StartScreen.SecondaryTile("SecondaryTile.01");
var uriUpdatedLogo = new Windows.Foundation.Uri("ms-appdata:///local/NewSecondaryTileDefault.png");
tileToUpdate.logo = uriUpdatedLogo;
tileToUpdate.updateAsync();
要約と次のステップ
このクイック スタートでは、アプリに関連付けられたセカンダリ タイルに通知を送信しました。アプリのメイン タイルに通知を送信する操作とそのセカンダリ タイルの 1 つに通知を送信する操作では小さな違いがたった 1 つあるだけということを確認しました。この他、セカンダリ タイルの既定のロゴ イメージの更新も行いました。
このクイック スタートでは、ローカル通知としてセカンダリ タイルの更新を送りました。その他の通知配信の方法 (スケジュール、定期的、プッシュ) を調べることもできます。詳しくは、「通知の配信」をご覧ください。