MRが楽しい

MRやVRについて学習したことを書き残す

公式チュートリアルの「Azure Notification Hubs を使用してユニバーサル Windows プラットフォーム アプリに通知を送信する」を試す 後編

本日は HoloLens2 の公式チュートリアルの実施枠です。
公式チュートリアルの「Azure Notification Hubs を使用してユニバーサル Windows プラットフォーム アプリに通知を送信する」を試します。
f:id:bluebirdofoz:20210602005659j:plain

以下の公式ページを参考に、実施キャプチャを元に実施記録を記事にします。
docs.microsoft.com

前回記事の続きになります。
bluebirdofoz.hatenablog.com

サンプルのUWPアプリを作成する

本項目では通知を受け取る UWP アプリを作成します。

1. Visual Studio を起動してメニューから[ファイル -> 新規作成 -> プロジェクト]を選択します。
f:id:bluebirdofoz:20210602005719j:plain

2. [新しいプロジェクトの作成] ダイアログで以下の手順を行います。
2-a. 検索ボックスに「UWP」と入力します。
2-b. 検索結果で [空白のアプリ (ユニバーサル Windows)] を選択して [次へ] を選択します。
f:id:bluebirdofoz:20210602005747j:plain

2-c. [新しいプロジェクトの構成] ダイアログで [プロジェクト名] と、プロジェクトファイルの [場所] を入力します。
2-d. [作成] ボタンを実行します。
f:id:bluebirdofoz:20210602005759j:plain

3. プラットフォームの[ターゲットバージョン] と [最小バージョン] を確認して [OK] を選択します。
f:id:bluebirdofoz:20210602005811j:plain

4. [ソリューションエクスプローラー] でアプリプロジェクトを右クリックし、 [公開 -> アプリケーションをストアと関連付ける] を選択します。
f:id:bluebirdofoz:20210602005824j:plain

5. アプリケーションを Windows ストアと関連付けるウィザードが表示されるので Microsoft アカウントでサインインします。
f:id:bluebirdofoz:20210602005836j:plain

6.[Windowsストアのアプリを作成する] で登録したアプリを選択して [次へ] を選択します。
f:id:bluebirdofoz:20210602005855j:plain

7. 関連付けの確認ダイアログが表示されるので[関連付け] を選択します。
この操作により、必要な Windows ストア登録情報がアプリケーションマニフェストに追加されます。
f:id:bluebirdofoz:20210602005906j:plain

8. Visual Studio でソリューションを右クリックして [NuGet パッケージの管理] を選択します。
[NuGet パッケージの管理] ウィンドウが開きます。
f:id:bluebirdofoz:20210602005918j:plain

9. [参照]タブを開き、検索ボックスに [WindowsAzure.Messaging.Managed] と入力して [インストール] を選択します。
f:id:bluebirdofoz:20210602005934j:plain

10. インストールの内容確認とライセンスの同意を行うと Windows 用 Azure Notification Hubs ライブラリがインストールされます。
合わせてライブラリへの参照が追加されます。
f:id:bluebirdofoz:20210602005945j:plain

ライブラリの取得には Microsoft.Azure.NotificationHubs NuGet パッケージが使用されます。
www.nuget.org

11. App.xaml.cs ファイルを開き、次のステートメントを追加します。

using Windows.Networking.PushNotifications;
using Microsoft.WindowsAzure.Messaging;
using Windows.UI.Popups;

f:id:bluebirdofoz:20210602010011j:plain

10. 次に App.xaml.cs ファイルの App クラス内に、次の InitNotificationsAsync メソッドの定義を追加します。
このコードにより WNS からアプリケーションのチャネル URI が取得され、そのチャネル URI が Notification Hubs に登録されます。

private async void InitNotificationsAsync()
{
    var channel = await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();

    var hub = new NotificationHub("<your hub name>", "<Your DefaultListenSharedAccessSignature connection string>");
    var result = await hub.RegisterNativeAsync(channel.Uri);

    // Displays the registration ID so you know it was successful
    if (result.RegistrationId != null)
    {
        var dialog = new MessageDialog("Registration successful: " + result.RegistrationId);
        dialog.Commands.Add(new UICommand("OK"));
        await dialog.ShowAsync();
    }
}

<your hub name> には、Azure portal で作成した Notification Hubs の名前(名前空間含まず)を指定します。
<Your DefaultListenSharedAccessSignature connection string> には Notification Hubs の [アクセス ポリシー] ページから取得した DefaultListenSharedAccessSignature 接続文字列を指定します。
f:id:bluebirdofoz:20210602010023j:plain

11. App.xaml.cs 内で OnLaunched イベントハンドラーの先頭に、次に示す InitNotificationsAsync メソッドの呼び出しを追加します。
これにより、アプリケーションが起動するたびに必ずチャネル URI が Notification Hubs に登録されます。

InitNotificationsAsync();

f:id:bluebirdofoz:20210602010034j:plain

12. Package.appxmanifest を右クリックし、[コードの表示](F7キー) を選択します。
f:id:bluebirdofoz:20210602010046j:plain

13. <Identity .../> を見つけ、その値が登録したアプリの[Application Identity]で置き換えられていることを確認します。
f:id:bluebirdofoz:20210602010058j:plain

14. アプリを実行するためにメニューから[デバッグ -> デバッグの開始](F5キー)を選択します。
f:id:bluebirdofoz:20210602010109j:plain

15. [Registration successful] が表示されれば登録成功です。登録キーを示すダイアログボックスが表示されます。
[OK] をクリックしてダイアログボックスを閉じ、アプリケーションも終了します。
f:id:bluebirdofoz:20210602010119j:plain

これでトースト通知を受信する準備が整いました。

テスト通知を送信する

Azure Portal から通知を送信することで通知の受信をテストします。

1. Azure Portal にサインインします。
portal.azure.com
f:id:bluebirdofoz:20210602010138j:plain

2. Notification Hubs のページを開き、[概要] タブのツールバーにある [テスト送信] を選択します。
f:id:bluebirdofoz:20210602010149j:plain

4. [テスト送信] ウィンドウで、次のアクションを実行します。
4-a. [プラットフォーム]に [Windows] を選択します。
4-c. [通知の種類]に [Toast](トースト) を選択します。
4-c. [送信] ボタンを実行します。
f:id:bluebirdofoz:20210602010201j:plain

5. 通知またはウィンドウの一番下の [結果] 一覧で [送信] 操作の結果を確認できます。
f:id:bluebirdofoz:20210602010212j:plain

6. 送信が成功した場合、登録を行ったデスクトップ上に通知メッセージが表示されます。
f:id:bluebirdofoz:20210602010223j:plain