トップ > Power Apps > カスタムコネクタを使ったPower AppsとAzure OpenAI Serviceの連携

カスタムコネクタを使ったPower AppsとAzure OpenAI Serviceの連携

Power Apps Azure OpenAI カスタムコネクタ

Power AppsとAzure OpenAI Serviceが連携したアプリを構築する際、よくあるのがPower AutomateのHttpアクション（API要求を送信できるアクション）を使用することです。

しかし、Httpアクションは外部へのアクセスが自由にできてしまうことから、社内運用上で制限されるケースがあります。

今回は、その制限を回避する形でPower AppsとAzure OpenAI Serviceをカスタムコネクタ経由で連携する方法をご紹介します。

アーキテクチャと完成イメージ

本記事で作成するアプリのアーキテクチャは以下となります。

また、本記事のハンズオンを実施した後の完成系は以下となります。

入力欄に質問を入れ、[送信ボタン]を押下するとAIからの返答が表示されます。

ハンズオンを始める前に

実際にハンズオンを始める前に以下のものを準備してください。

  • Power Apps Premium ライセンス
  • Azure サブスクリプション
  • Azure OpenAI Serviceの利用申請（申請先のリンクはこちら）

準備ができたら早速ハンズオンをしていきましょう。

Azure OpenAI Serviceの準備

リソースの作成

まずは、Azure OpenAI Serviceのリソースを作成していきます。

1. Azure Portal（ホーム - Microsoft Azure）を開き、[Azure OpenAI]をクリックします。

もし、以下のような一覧に表示されていない場合は、画面の上部にある[検索]から検索してください。

2. Azure OpenAI Serviceのリソース画面に遷移したら、[作成]をクリックします。

3. Azure OpenAI Service作成の[基本]画面に遷移したら、以下のように設定します。

  • サブスクリプション：<リソースを作成するサブスクリプション>
  • リソースグループ：<リソースを作成するリソースグループ>
  • リージョン：<リソースのリージョン>
  • 名前：<リソースの名前>
  • 価格レベル：Standard S0

設定箇所をすべて埋めたら、[次へ]をクリックします。

4. [ネットワーク]画面に遷移したら、今回はそのまま[次へ]をクリックします。

5. [タグ]画面に遷移したら、必要であればタグを設定し、[次へ]をクリックします。

6. [レビューおよび送信]画面に遷移したら、内容を確認し、[作成]をクリックします。

7. "デプロイが完了しました"と表示されたら、[リソースに移動]をクリックします。

8. 作成したリソースの概要画面に遷移したら、OKです。

これでAzure OpenAIリソース作成は完了です。

Azure OpenAI ServiceをAzure ポータルから利用する

リソースを作成したら、実際に触ってみます。

1. 概要画面にある左メニュー内の[モデルデプロイ]をクリックし、[展開の管理]をクリックします。

2. Azure AI Studioが開かれたら、左メニュー内の[デプロイ]をクリックし、[新しいデプロイの作成]をクリックします。

3. [モデルのデプロイ]が表示されたら、[モデル],[モデル バージョン],[デプロイ名]をそれぞれ選択し、[作成]をクリックします。

※今回は詳細設定オプションは既定のままとします。

4. デプロイが作成されたら、作成されたデプロイにチェック（選択）した状態で、[･･･] > [プレイグランドで開く]をクリックします。

5. [チャット プレイグラウンド]が開いたら、以下の赤枠の部分で動作を確認します。

6. 問題なく動いていることを確認したら、[コードの表示]をクリックします。

7. 以下の緑枠を[json]に切り替え、赤枠の部分（コードの部分・エンドポイント・キー）をそれぞれコピーし、メモしておきます。　

※カスタムコネクタ作成時に使用します。

Power AppsとAzure OpenAI Serviceが連携したアプリを作成する

カスタムコネクタの作成

続いて、カスタムコネクタを作成します。

1. Power Appsを開きます（https://make.powerapps.com/）。

2. 上記の手順にて表示された画面内にある左メニューから[カスタムコネクタ]をクリックします。
→https://make.powerapps.com/customconnectors

3. 画面右上にある[カスタムコネクタの新規作成]をクリックし、[一から作成]をクリックします。

4. 適当なコネクタ名を入力し、[続行]をクリックします。

5. カスタムコネクタの全般情報画面に遷移したら、[ホスト]の部分にAzure OpenAIのエンドポイント（"https://xxx.com/"の"xxx"の部分）を入力します。

※Azure OpenAIのエンドポイントは、作成したAzure OpenAIリソース画面内にある左メニューの[キーとエンドポイント]をクリックすると画面に表示されます（以下画像2つ目参照）。

★ 実際に入力した画面がこちらです。

6. 次に[セキュリティ]を設定します。

[セキュリティ]画面に遷移したら、各設定値を以下のように入力してください。

  • 認証タイプ：APIキー
  • パラメーターのラベル：APIキー
  • パラメーター名：api-key

7. 次に[定義]を設定します。

[定義]画面に遷移したら、[新しいアクション]をクリックします。

8. [全般]設定画面が開いたら、各設定値を以下のように入力してください。

入力したら、[要求]にある[サンプルからのインポート]をクリックします。

  • 概要：AzureOpenAIQuery
  • 説明：AzureOpenAIのQueryです
  • 操作ID：AzureOpenAIQuery

9. [サンプルからのインポート]では以下のように設定します。

  • 動詞：POST
  • URL：<Azure OpenAI ServiceをAzure ポータルから利用する の手順7でメモしたエンドポイント>
  • ヘッダー：Content-type application/json
  • 本文：<Azure OpenAI ServiceをAzure ポータルから利用する の手順7でメモしたコードの部分>

10. すべて入力したら[インポート]をクリックします。

インポート後、[要求]に自動で値が設定されたことを確認します。

11. [ヘッダー] > [Content-type]の右にある∨アイコンをクリックし、[編集]をクリックします。

12. [既定値]の部分に"application/json"を記入し、左上にある[戻る]をクリックします。

13. 画面右上にある[コネクタの作成]をクリックします。

14. 作成に成功したらOKです。

→以下の赤枠が[コネクタの更新]に切り替わっていたらOKです。

※もし、[コネクタの作成]をクリックした際に、"Description must be supplied"というエラーが出てしまった場合...

14-1. [全般]に戻り、[説明]に英語で値を入力します。

14-2. 再度[コネクタの作成]をクリックします。

15. [テスト]に遷移し、[新しい接続]をクリックします。

16. APIキー入力ポップアップが表示されたら、Azure OpenAI ServiceをAzure ポータルから利用する の手順7でメモした"キー"を入力し、[作成]をクリックします。

17. 正常に作成されると、Power Appsの[接続]画面に遷移するため、再度カスタムコネクタの画面（以下の画面）に遷移します。（https://make.powerapps.com/customconnectors）

画面内で、今回作成したカスタムコネクタが一覧に表示されていることを確認します。

18. 作成したカスタムコネクタの[編集]アイコンをクリックします。

19. カスタムコネクタ編集画面に遷移したら、[テスト]に遷移します。

[接続]（以下の赤枠）が設定されていることを確認します。

20. 以下の赤枠の部分に、それぞれ値を入力します。

  • api-version：<Azure OpenAI ServiceをAzure ポータルから利用する の手順7でメモしたエンドポイントの末尾に記載されている値>　※https://~~?api-version=xxx
  • Content-type：application/json
  • role：user
  • content：<質問したい内容>

21. [テスト操作]をクリックします。

22. 画面を下にスクロールすると、実行結果が表示されます。
[状態]が”200”であれば成功しています。

※エラーが出てしまう場合は、少し時間をおいて再度お試しください。

これでカスタムコネクタの作成は完了です。

Power Apps 簡易アプリの作成

最後に、カスタムコネクタと接続するアプリを作成していきます。

1. まずは空のキャンバスアプリを作成します。※作成方法は割愛

2. 以下のようなアプリを作成します。

3. アプリ画面の左側にあるアイコン群から[データ]をクリックし、[データの追加]をクリックします。

検索バーに、作成したカスタムコネクタ名を入れ、一覧に表示されたら選択します。

4. [データ]に追加されることを確認します。

5. [送信]アイコンのOnSelectプロパティに以下の関数を記載します。

//質問内容をコレクションに格納
Collect(colConversationHist,
    {
        role:"user",
        content:txtQuestion.Text
    }
);
//Azure OpenAIに質問を投げ、回答をconversationHist変数に格納
Set(conversationHist,
    JBSTechBlog_CustomConnector.AzureOpenAIQuery(
        {
            'api-version':"2023-07-01-preview",
            'Content-type':"application/json",
            'messages':{
                role:"user",
                content:txtQuestion.Text
            }
        }
    )
);
//回答結果をコレクションに格納
Collect(colConversationHist,
    {
        role:Text(First(conversationHist.choices).message.role),
        content:Text(First(conversationHist.choices).message.content)
    }
);

6. ギャラリーのItemプロパティに"colConversationHist"を記載します。

7. ギャラリー内のTitle1内のプロパティをそれぞれ以下のように記載します。

  • Textプロパティ：ThisItem.content
  • Alignプロパティ：If(ThisItem.role = "user",Align.Right,Align.Left)

8. ギャラリー内のimgRobot（ロボットの画像）のプロパティをそれぞれ以下のように記載します。

  • Visibleプロパティ：If(ThisItem.role <> "user",true,false)
  • DisplayModeプロパティ：DisplayMode.View

9. ギャラリー内のicoUser（人のアイコン）のプロパティをそれぞれ以下のように記載します。

  • Visibleプロパティ：If(ThisItem.role = "user",true,false)
  • DisplayModeプロパティ：DisplayMode.View

10. f5キーを押し実行モードに切り替え、質問内容を入れて送信ボタンをクリックします。

11. うまくギャラリー上に表示されていればOKです。

おわりに

今回は、カスタムコネクタ経由でPower Apps とAzure OpenAI Serviceを連携する方法についてご紹介しました。

カスタムコネクタは複雑そうで避けていたのですが、今回の実装を機に少しは歩み寄れた気がします。

ハンズオンを実施いただいた皆さんにとっても、カスタムコネクタへの歩み寄りに少しでもお役に立てば幸いです！

執筆担当者プロフィール
茶谷 亮佑

茶谷 亮佑（日本ビジネスシステムズ株式会社）

クラウドソリューション事業本部に所属。 現在はPower Platform（特にPower Apps、Power Automate）を活用したアプリ開発業務に従事しています。好きなアーティストは星野源です。

担当記事一覧