チュートリアル: Power Apps から Azure AI Search インデックスにクエリを実行する

2025-04-14

Power Apps のRAD (Rapid Application Development)環境を使用して、Azure AI Search で検索可能なコンテンツ用のカスタムアプリを作成します。

このチュートリアルでは、次の作業を行う方法について説明します。

Azure AI Search に接続する
クエリ要求を設定する
キャンバスアプリで結果を視覚化する

Azure サブスクリプションをお持ちでない場合は、開始する前に無料アカウントを作成してください。

前提条件

Premium ライセンスを持つ Power Apps アカウント (アプリごとの Power Apps プランやユーザーごとの Power Apps プランなど)。
検索サービスでホストされている Hotels-sample インデックス。
クエリ API キー。

1 - カスタムコネクタを作成する

Power Apps のコネクタは、データソース接続です。この手順では、クラウド内の検索インデックスに接続するカスタムコネクタを作成します。

Power Apps にサインインします。
左側の [カスタムコネクタ] を選択します。
[+ New custom connector](+ 新しいカスタムコネクタ) を選択し、[一から作成] を選択します。
カスタムコネクタに名前 (たとえば AzureSearchQuery) を付けて、[続行] を選択します。
[全般] ページで情報を入力します。
- [アイコンの背景色] (たとえば、#007ee5)
- 説明 (例: 「Azure AI Search へのコネクタ」)
- [ホスト] には、検索サービスの URL (たとえば <yourservicename>.search.windows.net) を入力します
- [ベース URL] には「/」と入力します
[セキュリティ] ページで、 [認証の種類] として [API キー] を設定し、パラメーターラベルとパラメーター名の両方を「api-key」に設定します。 [パラメーターの場所] で、次のスクリーンショットに示すように [ヘッダー] を選択します。
[定義] ページで [+ 新しいアクション] を選択して、インデックスに対してクエリを実行するアクションを作成します。概要および操作 ID の名前として「Query」という値を入力します。 「検索インデックスに対してクエリを実行する」 のような説明を入力します。
下へスクロールします。 [要求] で [+ サンプルからのインポート] ボタンを選択し、検索サービスへのクエリ要求を構成します。
- 動詞を選択してください GET
- [URL] には、検索インデックスに対するサンプルクエリを入力します (search=* ではすべてのドキュメントが返され、$select= ではフィールドを選択できます)。 API バージョンは必須です。完全に指定された URL は、次の例のようになります。 https:// プレフィックスが省略されていることに注意してください。
```
mydemo.search.windows.net/indexes/hotels-sample-index/docs?search=*&$select=HotelName,Description,Address/City&api-version=2024-07-01
```
- [ヘッダー] には、「Content-Type application/json」と入力します。
  
  Power Apps は、URL の構文を使用して、クエリからパラメーターを抽出します。検索、選択、および api-version パラメーターは、ウィザードの進行に応じて構成可能になります。
[インポート] を選んで、要求を自動入力します。各パラメータの横にある ... シンボルをクリックして、パラメーターのメタデータの設定を完了します。各パラメーターの更新後、[戻る] を選択して、要求ページに戻ります。
search では: * をに設定し、 [必須] を [いいえ] に設定して、 [可視性] を [なし] に設定します。
select では、次のようにします。 HotelName,Description,Address/City をに設定し、 [必須] を [いいえ] に設定して、 [可視性] を [なし] に設定します。
api-version では: 2024-07-01 をに設定し、 [必須] を [はい] に設定して、 [可視性] を [内部] に設定します。
[Content-Type] では、application/json を設定します。

これらの変更を行った後、Swagger エディター ビューに切り替えます。 [parameters] セクションには、次の構成が表示されます。

parameters:
  - {name: search, in: query, required: false, type: string, default: '*'}
  - {name: $select, in: query, required: false, type: string, default: 'HotelName,Description,Address/City'}
  - {name: api-version, in: query, required: true, type: string, default: '2024-07-01',
    x-ms-visibility: internal}
  - {name: Content-Type, in: header, required: false, type: string}

ウィザードに戻り、[3. 定義] 手順に戻ります。 [応答] セクションまで下へスクロールします。 [既定の応答を追加する] を選択します。この手順は Power Apps に応答のスキーマを理解させるのに役立つため、非常に重要です。

応答のサンプルを貼り付けます。サンプルの応答をキャプチャする簡単な方法は、Azure portal の Search エクスプローラーを使用することです。 Search エクスプローラーでは、要求と同じクエリを入力する必要がありますが、$top = 2 を追加して、結果を 2 つのドキュメントのみに制限します (search=*&$select=HotelName,Description,Address/City&$top=2)。

Power Apps では、スキーマを検出するために必要な結果はわずかです。 hotels-sample-index を使用している場合、次の応答をここでウィザードにコピーできます。

{
    "@odata.context": "https://mydemo.search.windows.net/indexes('hotels-sample-index')/$metadata#docs(*)",
    "value": [
        {
            "@search.score": 1,
            "HotelName": "Happy Lake Resort & Restaurant",
            "Description": "The largest year-round resort in the area offering more of everything for your vacation – at the best value!  What can you enjoy while at the resort, aside from the mile-long sandy beaches of the lake? Check out our activities sure to excite both young and young-at-heart guests. We have it all, including being named “Property of the Year” and a “Top Ten Resort” by top publications.",
            "Address": {
                "City": "Seattle"
            }
        },
        {
            "@search.score": 1,
            "HotelName": "Grand Gaming Resort",
            "Description": "The Best Gaming Resort in the area.  With elegant rooms & suites, pool, cabanas, spa, brewery & world-class gaming.  This is the best place to play, stay & dine.",
            "Address": {
                "City": "Albuquerque"
            }
        }
    ]
}

ヒント

入力できる JSON 応答には文字の制限があるため、貼り付ける前に JSON を簡略化することができます。応答のスキーマと形式は、値自体よりも重要です。たとえば、[説明] フィールドは、最初の文だけに単純化することができます。

[インポート] を選択して、既定の応答を追加します。
右上の [コネクタの作成] を選択して、定義を保存します。
[閉じる] を選択してコネクタを閉じます。

2 - 接続をテストする

コネクタが最初に作成されたときに、それをテストするには、[カスタムコネクタ] の一覧から再度開く必要があります。後でさらに更新する場合は、ウィザード内からテストできます。

このタスクにクエリ API キーを指定します。テストの実行でもアプリへの組み込みでも、接続が作成されるたびに、コネクタには Azure AI Search への接続に使用されるクエリ API キーが必要です。

左端の [カスタムコネクタ] を選択します。
一覧でコネクタ (このチュートリアルでは "AzureSearchQuery") を探します。
コネクタを選択し、アクションの一覧を展開して、 [ビューのプロパティ] を選択します。
操作のドロップダウンリストで、6 を選択 します。テストします。
[テスト操作] で、[+ 新しい接続] を選びます。
クエリ API キーを入力します。これは、インデックスへの読み取り専用アクセスのための Azure AI Search クエリです。 Azure portal でキーを確認できます。
[操作] で、[テスト操作] ボタンを選択します。成功した場合は、200 状態が表示され、応答の本文では検索結果を示す JSON を確認できます。

テストが失敗した場合は、入力を再確認します。特に、サンプル応答を見直し、適切に作成されていることを確認します。コネクタ定義には、応答に必要な項目が表示されます。

データ損失防止 (DLP) ポリシーエラーによってブロックされている場合は、エラーメッセージでガイダンスを確認してください。ポリシーを変更したり、コネクタをブロック不可にしたりできます。

3 - 結果を視覚化する

この手順では、検索ボックス、検索ボタン、および結果の表示領域を備えた Power App を作成します。 Power App は先ほど作成したカスタムコネクタに接続して、Azure Search からデータを取得します。

左側で、[アプリ]>[新しいアプリ]>[ページデザインから始める] を展開します。
[電話レイアウト] で [空白のキャンバス] を選びます。アプリに "Hotel Finder" などの名前を付けます。 ［作成］ を選択します [Power Apps Studio] が表示されます。
スタジオで、[データ] タブを選び、[データの追加] を選んで、作成した新しいコネクタを見つけます。このチュートリアルでは、AzureSearchQuery という名前です。 [Add a connection (接続の追加)] を選択します。

クエリ API キーを入力します。

これで AzureSearchQuery が、アプリケーションから使用できるデータソースとなりました。
[挿入] タブで、キャンバスにいくつかのコントロールを追加します。
次の要素を挿入します。
- 「Query:」という値を持つテキストラベル
- テキスト入力要素 (txtQuery と呼びます。既定値は「*」です)
- 「検索」というテキストが表示されたボタン
- 呼び出された垂直ギャラリー (galleryResults と呼びます。)
キャンバスは次のようになります。
[検索] ボタンにクエリを実行させるには、次のアクションを OnSelect に貼り付けます。
```
If(!IsBlank(txtQuery.Text),
    ClearCollect(azResult, AzureSearchQuery.Query({search: txtQuery.Text}).value))
```
次のスクリーンショットは、OnSelect アクションの数式バーを示しています。

このアクションにより、[txtQuery] テキストボックス内のテキストをクエリ語句として使用した検索クエリの結果によって、azResult という名前の新しいコレクションが更新されます。
メモ

"The function 'ClearCollect' has some invalid functions (関数 'ClearCollect' に無効な関数が含まれています)" という式の構文エラーが表示される場合は、次のようにしてください。
- まず、コネクタ参照が正しいことを確認します。コネクタ名をクリアし、コネクタの名前の入力を開始します。 Intellisense によって、適切なコネクタと動詞が提示されるはずです。
- 問題が解決されない場合は、コネクタを削除して、再作成してください。コネクタのインスタンスが複数ある場合、アプリが間違ったインスタンスを使用している可能性があります。
前の手順を完了したときに作成された azResult コレクションに垂直ギャラリーコントロールをリンクします。

ギャラリーコントロールを選択し、[プロパティ] ペインで次の操作を実行します。
- [データソース] を azResult に設定します。
- インデックス内のデータの種類に基づいて、適切な [レイアウト] を選択します。この例では、 [Title, subtitle and body](タイトル、サブタイトル、および本文) レイアウトを使用しています。
- [フィールド] を編集し、視覚化するフィールドを選択します。
コネクタを定義したときにサンプルの結果を提供しているため、アプリによりインデックスで使用できるフィールドが認識されます。
F5 キーを押して、アプリをプレビューします。