前回まででChatGPT APIの応答・要求や仕組みなどを解説しまして、カスタムコネクタを生成するところまでいきました。
次はいよいよPower Apps アプリを作成して、言葉のキャッチボールをしてみましょう。
Power Apps キャンバスアプリを作成する
①Power Appsホーム画面から「アプリ」→「新しいアプリ」→「キャンバス」を選択します。
②アプリ名を入力して「作成」をクリックし、しばらく待ちます。
③ユーザーがメッセージを入力するための「テキスト入力」と送信ボタンとして利用する「ボタン」を配置します。
テキスト入力のプロパティを変更します。必要そうなのは既定を空白にすることと、モードを「複数行」にすることぐらいでしょうか。文字のサイズなどは任意に設定ください。
④ボタンのテキストは「送信」に変更しておきます。
大きさや位置を変更して配置します。
カスタムコネクタに接続する
画面の左側に並んでいるアイコンのうち「データベース型」のアイコンをクリックし、データの追加をクリックします。
データソースの選択のほうの検索テキストに、前回作成したコネクタの名前を入力します。
作成したコネクタが出てきますので（2回）クリックします。
これでこのアプリからカスタムコネクタが利用可能になりました。
ギャラリーを作成する
実際にやりとりを表示するためのエリアを作成します。今回の場合「ユーザーとGPTの言葉のキャッチボール」を表示したいので、複数のテキストを表示したいです。またテキストの量は各contentによって変わります。そこで、今回は「高さが伸縮可能な空のギャラリー」を利用します。
①挿入から「レイアウト」を展開して「高さが伸縮可能な空のギャラリー」をクリックします。
以下のように表示されますが、まだメッセージを格納する領域（コレクション）が用意されていないので、いったん配置だけして次に進みます。
ボタンを押したらGPTにメッセージを送信する
次は、送信ボタンを押したらテキスト入力の内容をカスタムコネクタに送信する部分を実装します。
ボタンのOnSelectを以下のように記述します。
コードは以下のようになります。
Set(varResponse,ChatGPTTestConnector.SendUserMessage("gpt-3.5-turbo",Collect(colChat,{role:"user",content:TextInput1.Text})));
Collect(colChat,First(varResponse.choices).message);
Reset(TextInput1)
Set(varResponse,ChatGPTTestConnector.SendUserMessage(〇〇));
この部分はカスタムコネクタChatGPTTestConnectorのアクションであるSendUserMessageを実行して、実行結果を変数であるvarResponseに入れる、という意味です。作成したコネクタ名とアクション名によってこの部分は変わります。〇〇の中身については以下のようになります。
～～.SendUserMessage("gpt-3.5-turbo",Collect(△△));
作成したアクションは model とmessage を要求としています。 model と role と content じゃないの？と思いますが、 role と model は合わせて messages でした。なのでここでは messages として{user:●● , content:▲▲} を必要とします。
Collect(colChat,{role:"user",content:TextInput1.Text})
さらに前回説明した通り、今までの会話のやり取りやシステムもメッセージとして複数、要求に含めることができます。
これをPower Apps で記載する場合は「コレクション」が利用できます。
この分は今までのやり取りが入っているcolChatに新しく{role:"user",content:TextInput1.Text}を追加している、という意味です。
ここまでが1行目の意味になります。
Collect(colChat,First(varResponse.choices).message);
2行目では応答として得られた内容をさらにコレクションに追加しています。
Reset(TextInput1)
3行目は次のテキストを入力しやすくするため、リセット（空白にする）しています。
ギャラリーのデータソースにコレクションを設定する
上記のコードによって、colChatというコレクションに複数のメッセージが入るというところまでできました。これをギャラリーのデータソースとして設定します。
ギャラリーをクリックして「データソースの選択」でcolChatをクリックします。
鉛筆アイコンをクリックします。
一つのデータ当たりの表示内容を設定できるようになります。必要な表示はroleとcontentなのでラベルを2つ配置します。
ギャラリーの中にラベルが2つあることを確認します。
一つ目のラベルは枠の左上に配置し、TextをThisItem.roleに変更します。
２つ目のラベルは左側は1つ目のラベルと被らない位置に配置し、右側は枠につくかつかないかぐらいまで伸ばします。
TextをThisItem.content に変更します。
さらに2つ目のラベルはプロパティを垂直方向の配置を「上」に変更し、高さの自動調整をオンにします。
このようになります
##動作確認をする
プレビュー実行をし、メッセージのやり取りができるか確認しましょう。
「じゃあ2番目は？」という質問を、最初の質問を踏まえて回答していることがわかります。
まとめ
カスタムコネクタを使ってPower AppsでChatGPTと言葉のキャッチボールができるアプリを作成しました。
メッセージリセット機能（Clearするだけ）やデザインを変えたり、やり取りの内容をどこかのデータソースに入れる機能を追加してもいいかもしれません。
おまけ
システムメッセージを追加するドロップダウンも作れます。
DropdownのOnChangeに以下のようなコードを書くだけです。
Collect(colChat,{role:"system",content:"次のメッセージは"& Dropdown1.Selected.Value & "口調でお願いします。"})
ちょっと信濃川の周辺を一緒に散歩して来ます（多分、川に突き落とされるやつ）