新米が「Microsoft Learn：Web API を Power Appsで使用する」をやってみた

はじめに

本記事は、新米社員がMicrosoft Learnの「Web API を Power Appsで使用する」に挑戦し、格闘した軌跡を記しています。躓いたポイントも備忘録として記載しています。初学者に共感して貰えたり、同じことを挑戦して上手く行かない方の参考になればという想いを込めて投稿しています。（※本記事は2023年9月14日時点での情報になります)

本ハンズオンで行うこと

Azure API Management からAPI をエクスポートすることで、カスタムコネクタを作成し、キャンバスアプリで使用するまでの一連の流れを学習します。ハンズオンは、下記の5つのステップで構成されています。

１. 必要なファイルを API Management にプロビジョニングする
２. API Management からカスタム コネクタへの Web API のエクスポート
３. カスタムコネクタへの接続を作成する
４. カスタムコネクタをテストする
５. Power Apps キャンバスアプリでカスタムコネクタを使用する

ステップ１：必要なファイルを API Management にプロビジョニングする

最初から難しそうなお題が待っていました。API Management？プロビジョニング？
聞きなれない言葉があるだけで難しさ2倍になるのは、新米あるあるですよね。

さらに、こういう事前準備に関する内容はドキュメント内に詳細な説明がないことが多く、嫌な予感がしました。「どれどれ、事前準備の手順をみてみよう！」

やはり少ない（笑）とりあえずわからない言葉を理解することから、一つ一つ始めることにしました。

Azure API Managementは、既存のバックエンドサービスに対してAPIのゲートウェイを作成するクラウドサービスで、企業内で管理しているAPIの数が多い場合や、APIに対して変更が加えられることが多い場合に使用されます。

プロビジョニングは、必要なものを準備することで、「サーバープロビジョニング」のように〇〇プロビジョニングのように使用されることが多いです。サーバープロビジョニングと言えば、サーバーを利用可能な状態にするための準備を意味します。

単語の意味を理解したところで、手順通りに進めていきます。

1. Web APIのダウンロード
まずは、Web API のダウンロードをします。
「Github から Web API をダウンロードをして」の文言がURLにリンクされているので、クリックします。

Github に保管されている ZIP ファイルをダウンロードし、ZIP ファイルを解凍します。

artifacts ファイルの中にあるREADME ファイルを開き、内容を確認します。

次の手順として、
① Azure CLIでAzureにログインする
② bashスクリプトを実行する
がありました。ここからも躓き要素がたくさんありました、、。

まずは、「① Azure CLIでAzureにログインする」を行います。
最初に、Azure CLI をローカル環境にダウンロードします。私はmacユーザーなので、Homebrewというパッケージ管理ツールを用いて Azure CLI をダウンロードしました。

(※ Windows・Linuxユーザーは、ダウンロード方法が異なる為、宜しければ下記資料からダウンロード方法をご確認下さい）

2. Homebrewのダウンロード

Homebrewのダウンロード方法は、Homebrew 公式ページにあるシェルコマンドをそのままコピーして、ターミナルで実行するだけです。

私は以前、Homebrew をダウンロードしたことがあったので、Homebrew のバージョンのアップデートをしました。今回初めてダウンロードする方は次の内容を読み飛ばして頂いて構いません。

Homebrewのアップデート

Homebrewのアップデートは、アップデート前後で差分が大きいとアップデートエラーが発生します。アップデート前後で差分が大きい場合に、Homebrewの更新ファイル取得元のGitHubに対する負荷が高くなるのを防ぐためのようです。このエラーを解消する方法は2つあります。

① unshallow でアップデート手法を変更する

これは GitHub から Homebrew の更新ファイルを取得する際に使用される shallow clone 機能を無効化することでエラーを解消する方法です。shallow clone は最新ファイルのみを取得するための機能のため、重たい処理になってしまいます。Homebrew をアップデートする度に重たい処理が実行されるを避けるため、GitHubの要請で unshallow オプションを使用することが必要になりました。

② depth でリポジトリの履歴を取得する数を段階的にする

これは fetch をする際にdepthオプションを使用することでリポジトリの履歴の取得数を変更する方法です。エラーの原因は、Homebrewのアップデート前後で差分が大きいことなので、徐々にfetchすることによりエラーを解消します。

①だけでも上手くいく場合もあるようですが、私は①のやり方で上手くいかず②の方法を実施しました。

3. Azure CLI のダウンロード

Homebrew をダウンロードしたら、Homebrewを用いてAzure CLIをダウンロードします。
macOSにインストールする際は、brewリポジトリを更新し、installコマンドを実行します。

4. bashスクリプトの実行

artifacts ファイル下のsetup.shファイルを実行します。
拡張子のshは、処理を実行する複数のコマンドを実行するシェルスクリプトを意味します。

setup.sh

#!/bin/bash

RESOURCE_NAME="InventoryManagement-$(openssl rand -hex 2)"
RESOURCE_GROUP_NAME=$(az group list --query "sort_by([], &name)[0].name" -o tsv)

printf "Provisioning Resources ... (1/4)\n\n"

#Provision Resources
az deployment group create
--resource-group $RESOURCE_GROUP_NAME
--name powerappsexcercise
--template-file ./azuredeploy.json
--parameters resourceName=$RESOURCE_NAME
--parameters location=westus2
--verbose

printf "Deploying Web API ... (2/4)\n\n"

#Deploy Web API
az webapp deploy
--resource-group $RESOURCE_GROUP_NAME
--name apiapp-$RESOURCE_NAME
--src-path ./publish.zip
--type zip
--verbose

printf "Importing Web API to Azure API Management ... (3/4)\n\n"

#Import Web API to API Management
az apim api import
--resource-group $RESOURCE_GROUP_NAME
--service-name apim-$RESOURCE_NAME
--api-id 'inventory-management'
--display-name 'Inventory Management'
--path inventory
--api-type http
--protocols https
--service-url https://apiapp-$RESOURCE_NAME.azurewebsites.net
--specification-format OpenApiJson
--specification-path ./openapi.json
--subscription-required true
--verbose

printf "Linking API with Product ... (4/4)\n\n"

#Link API with Product
az apim product api add
--resource-group $RESOURCE_GROUP_NAME
--service-name apim-$RESOURCE_NAME
--product-id development
--api-id 'inventory-management'
--verbose

printf "Setup complete!\n\n"
printf "*********************** IMPORTANT INFO *********************\n\n"
printf "Deployed Resource Group: $RESOURCE_GROUP_NAME\n\n"
printf "Web API URL: https://apiapp-$RESOURCE_NAME.azurewebsites.net\n\n"
printf "OpenAPI UI URL: https://apiapp-$RESOURCE_NAME.azurewebsites.net/swagger\n\n"

setup.sh を言われるがまま実行すると、以下の実行結果が返ってきました。
(※必要に応じ、一部情報を????で記載しています）

setup.sh 実行結果１

????noMacBook-puro:artifacts ????$ ./setup.sh 
Provisioning Resources ... (1/4)

{"code": "InvalidTemplateDeployment", "message": "The template deployment 'powerappsexcercise' is not valid according to the validation procedure. The tracking id is '????'. See inner errors for details."}

Inner Errors: 
{"code": "ValidationForResourceFailed", "message": "Validation failed for a resource. Check 'Error.Details[0]' for more information."}

Inner Errors: 
{"code": "SubscriptionIsOverQuotaForSku", "message": "This region has quota of 0 instances for your subscription. Try selecting different region or SKU."}
Command ran in 1.940 seconds (init: 0.111, invoke: 1.828)
Deploying Web API ... (2/4)

・・・（省略)

Setup complete!

***********************   IMPORTANT INFO   *********************

Deployed Resource Group: ????

Web API URL: https://apiapp-InventoryManagement-????.azurewebsites.net

OpenAPI UI URL: https://apiapp-InventoryManagement-????.azurewebsites.net/swagger

上記の結果からエラー情報を抜粋したものが以下です。

"code": "InvalidTemplateDeployment", "message": "The template deployment 'powerappsexcercise' is not valid according to the validation procedure.

Validation failed for a resource

This region has quota of 0 instances for your subscription. Try selecting different region or SKU

1つ目のエラーは、無効なテンプレートを使用することにより発生するエラーです。構文エラー、無効なパラメーター値、環境依存の関係など、いくつかの理由から発生します。「テンプレート配置「powerappsexcercise」は、検証手順に従って有効ではありません」という旨のエラーが出ているが、--name powerappsexcercise　では、リソースグループを作成する際のデプロイ名を定義しているだけです。なぜこのエラーが出ているのかが分からなかったため、後回しにしました。

3つ目のエラー内容から、リソースをプロビジョニングするリージョンを westus2 から japanwest に変更しました。

再度実行します。
今度は、以下の実行結果が返ってきました。

setup.sh 実行結果２

????noMacBook-puro:artifacts ????$ ./setup.sh 
Provisioning Resources ... (1/4)

{
  "id": "/subscriptions/????/resourceGroups/?????/providers/Microsoft.Resources/deployments/powerappsexcercise",
  "location": null,
  "name": "powerappsexcercise",
  "properties": {
    "correlationId": "????",
    "debugSetting": null,
    "dependencies": [
      {
        "dependsOn": [
          {
            "id": "/subscriptions/????/resourceGroups/????/providers/Microsoft.Web/serverfarms/asplan-InventoryManagement-8181",
            "resourceGroup": "????",
            "resourceName": "asplan-InventoryManagement-????",
            "resourceType": "Microsoft.Web/serverfarms"
          }

・・・(省略)

Setup complete!

***********************   IMPORTANT INFO   *********************

Deployed Resource Group: ????

Web API URL: https://apiapp-InventoryManagement-????.azurewebsites.net

OpenAPI UI URL: https://apiapp-InventoryManagement-????.azurewebsites.net/swagger

先程のエラーは消え、json 形式の値が取得できました。
先程のエラーの原因であるデプロイ名の部分も、json の結果に反映されていることが確認できます。

さらに、Azure ポータルのアクティビティログでもデプロイが成功していることが確認できました。

リソースも作成されていることが確認できました。

結果的に上手くいった感じもしますが、リソースを作成するリージョンの設定を修正したことでエラーが全て解消されました。

以上で、本ハンズオンを行うための準備が完了です。

ステップ２：API Management からカスタム コネクタへの Web API のエクスポート

1. サブスクリプションキーの確認
Power Appsで API Management でホストされている任意の Web API にアクセスするには、サブスクリプションキーが必要です。ステップ１で作成した API Management サービスの「サブスクリプション」を選択し、画面最右部の３点リーダーから「キーの表示/非表示」を押下します。

サブスクリプションキーは、API Managementで管理しているAPIを使用する際の暗証番号のようなものです。主キー(プライマリキー）と２次キー（セカンダリキー）の２種類のキーが存在し、セキュリティの観点から暗証番号(サブスクリプションキー）を変更する際に、ダウンタイムを回避するために使用されます。

次に主キーと2次キーをコピーします。

2. API ManagementサービスからAPIをエクスポート
画面左部のメニューで「API」を選択し、エクスポート対象である「Inventory Management」横の３点リーダーから「Export」を選択します。

エクスポート先に「Power Platform and Power Automate」を選択します。

3. コネクタの作成
「コネクタの作成」ボタンを押下します。

作成するコネクタの詳細を設定します。
Power Platform の環境はコネクタを使用する環境に設定し、「作成」ボタンを押下します。

スクリーンショットを撮り損ねたのですが、数秒後に「コネクタの作成が完了しました」という旨のポップアップが画面右上にでます。

以上で、コネクタの作成が完了しました。

ステップ３：カスタムコネクタへの接続を作成する

1. Power Apps 画面でのカスタムコネクタの確認
ステップ２で作成したカスタムコネクタを Power Apps から確認します。
画面左部のメニューで「カスタムコネクタ」を選択すると、カスタムコネクタの一覧が確認できます。
先程作成した「Inventory Management」コネクタが確認できました。

2. データの接続
次に、カスタムコネクタのデータに接続をするため、サブスクリプションキーを使用しPower Appsで設定をします。カスタムコネクタ名の右側にある「＋」ボタンを押下します。

先程コピーしたプライマリキーを「サブスクリプションキー」にペーストし「作成」ボタンを押下します。

データ接続が成功すると自動的に接続一覧の画面に遷移します。カスタムコネクタの変更履歴が更新され、接続済みになっていることが確認できました。

以上で、カスタムコネクタの接続が完了しました。

ステップ４：カスタムコネクタをテストする

1. カスタムコネクタの編集
ステップ３で作成したカスタムコネクタが期待通り動作するかテストします。
カスタムコネクタ名の右側にある「編集」アイコンを押下します。

2. テスト画面への遷移とテストの実行
画面上部の「5.テスト」タブに移動し、「テスト操作」ボタンを押下します。

画面左部の「操作（１）」でコネクタが期待通りに動作したことを確認できました。

ステップ５：Power Apps キャンバスアプリでカスタムコネクタを使用する

(※この内容はMicrosoft公式の資料に詳細な手順説明があるため、ポイントを絞って解説しています。より詳細な手順を確認したい方はこちらをご覧下さい)

1. カスタムコネクタの追加
Power Apps で任意のアプリを作成します。
ツリービューの「データ」アイコン選択し、「データの追加」ボタンを押下します。

検索窓で「Inventory」と検索すると、「Invemtory Management」コネクタが表示されるので、選択します。

カスタムコネクタが接続されたことが確認できます。

2. コントロールの配置
次に、ボタンコントロールとギャラリーコントロールを使用してカスタムコネクタからデータ取得できるか確認します。ボタン押下時に「warehouses」という名前のコレクション(テーブル）にカスタムコネクタから取得したデータをギャラリーに表示します。
3. 実行
ボタンを押下します。

先程まで空だったコレクションに取得データが投入されました。
以上で、Power Appsでカスタムコネクタを使用できるようになりました。

まとめ

今回は、Microsoft Learnの「Web API を Power Appsで使用する」をハンズオン形式で学習しました。
Azure API Management からAPI をエクスポートすることで、カスタムコネクタを作成し、キャンバスアプリで使用するまでの一連の流れを確認しました。