🧙‍♂️

無料でノーコードなAzureネイティブのチャットボットを作ってSlackから使えるようにしてみる

2023/06/14に公開

Azure

タイトルが渋滞していますね。
最近チャットボット関連の調べ物をたくさんしていたので、やってみた記事。

構成＆コンポーネント

構成

Azure Bot Service（以下、Bot Service）

チャットツールとbot間のメッセージングを仲介するサービスです。

Azure App Service（以下、App Service）

botをホストするためのPaaSプラットフォームです。
今回はC#でbotが作成されるため、C#のアプリケーションコードをホストします。

Bot Framework Composer（以下、Composer）

メッセージを元に返答を生成するbotです。
Bot Framework ComposerはノーコードでBot Framework(MSのbot構築用SDK)に沿ったbotを作れるツールです。
なお、Composerのツール内で必要なAzureリソースを自動でデプロイしてくれる機能もありますが、~~エラー吐いて失敗したので~~仕組みを理解するために全て手動で構築します。
Composerの機能を使った自動デプロイは以下を参考にしてください。

前提

ローカルPC(Windows環境。Composer、Azure CLIをインストールします)
任意のAzureサブスクリプション（使っていない方はまずは登録）
Azureにおける所有者ロール、Azure ADにおけるグローバル管理者ロールを持つアカウント

手順

Bot Serviceのデプロイ

Azure Portalの検索ボックスからbotと入力しBot Serviceを選択
作成を押下
下のほうにあるAzure Botを選択
作成を押下
基本から以下のパラメータを指定


ボットハンドル	botの任意のリソース名※全世界で一意
サブスクリプション	任意のサブスクリプション
リソースグループ	任意(新規作成でもOK)
データ所在地	グローバル
価格レベル	F0 Free
アプリの種類	マルチテナント
作成の種類	新しい Microsoft アプリ ID の作成

タグは無視、確認と作成から作成を押下(Azure ADにサービスプリンシパルを作成するため、Azure ADの権限がないと失敗します)
デプロイ完了後、リソース画面から構成に移動してMicrosoft App IDを控えておく（後でComposerの埋め込みに使用します）
7からパスワードの管理に移動し新しいクライアントシークレット→追加を押下(Bot Service作成時にシークレットが作成されますが、値を知る術がないので新しく作成します。Composerの埋め込みに使用します)
8で作成された値をコピーして控えておく(閉じると二度と確認できなくなるため、取り損ねた場合は削除して再作成を)

ローカルでComposerからbotを作成

オウム返しbotを作成します。

以下からComposerをローカルにインストール(.Net Core SDK,Node.jsが必要)

2. Composerを起動し、Create newを押下、C#が選択されていることを確認してEmpty Botを選択した状態でNextを押下

3. Nameに任意の名前、Runtime typeにAzure Web App、Locationに任意のパスを選択してCrateを押下

4. 作成完了後、Unknown IntentのSend a responseを押下してAdd alternativeを押下して以下のテキストを入力(オウム返しする変数)

${turn.activity.text}

5. 元からあったSorry, I didn't get that.は右にあるゴミ箱アイコンから削除
6. プロジェクトのルートの…からStart this botをクリックしてbotを起動してから、右上のTest your botをクリックしてチャットウィンドウを開き、適当な文字を送信してオウム返ししてくれれば成功

7. 左側のConfigureブレードからDevelopment resourcesのタブに移動し、Microsoft App IDの項目に、『Bot Serviceのデプロイ』の7,9で控えたMicrosoft App Idとクライアントシークレットを入力しておく

App Serviceのデプロイ

Azure Portalの検索ボックスからappと入力しApp Serviceを選択
作成-Web アプリを押下
基本から以下のパラメータを指定（今回はC#でbotを作成するため、.Netを指定します）


名前	botの任意のリソース名※全世界で一意
公開	コード
ランタイムスタック	.Net 7(STS)
オペレーティングシステム	Windows
地域	任意(今回はJapan East)
Windows プラン	デフォルトの値
価格プラン	Free F1(共有インフラストラクチャ)

デプロイ、ネットワーク、監視、タグはデフォルトのままを選択
確認と作成から作成を押下
デプロイ完了後、リソースのページに移動し、構成ブレードに移動、新しいアプリケーション設定をクリックし以下の名前と値のペアを追加して保存-->続行を押下

名前	値
MicrosoftAppId	『Bot Serviceのデプロイ』の7で控えた値
MicrosoftAppPassword	『Bot Serviceのデプロイ』の9で控えた値
MicrosoftAppType	MultiTenant

ローカルPCにAzure CLIをインストール

以下を参考に、インストール用のワンライナーが用意されているのでPowerShellを開き、以下のコマンドをそのまま実行

$ProgressPreference = 'SilentlyContinue'; Invoke-WebRequest -Uri https://aka.ms/installazurecliwindows -OutFile .\AzureCLI.msi; Start-Process msiexec.exe -Wait -ArgumentList '/I AzureCLI.msi /quiet'; Remove-Item .\AzureCLI.msi

インストール後に以下のコマンドを実行し、azureを利用するアカウントで認証を通しておく

az login

App Serviceにbotをデプロイ

PowerShellを開いてComposerのbotのプロジェクトフォルダのルート直下に移動

cd <botのプロジェクトフォルダのパス>

パスはComposerのホーム画面からわかります（デフォルトはCドライブ直下）

ローカルで以下のコマンドを実行(直下に.deploymentが作成されます)

az bot prepare-deploy --lang Csharp --code-dir "." --proj-file-path ".\<bot名>.csproj"

エクスプローラで1と同じパスに移動して、全てのファイルを選択した状態でzip圧縮する
3で作成したzipをAzure CLIでApp Serviceにデプロイ

az webapp deployment source config-zip --resource-group 'リソースグループ名' --name 'App Service名' --src 'zipのパス'

期待値

Starting zip deployment. This operation can take a while to complete ...
Deployment endpoint responded with status code 202
{
  "active": true,
  "author": "N/A",
  "author_email": "N/A",
  "complete": true,
  "deployer": "ZipDeploy",
  "end_time": "************",
  "id": "************",
  "is_readonly": true,
  "is_temp": false,
  "last_success_end_time": "************",
  "log_url": "https://koo-chatbot.scm.azurewebsites.net/api/deployments/latest/log",
  "message": "Created via a push deployment",
  "progress": "",
  "provisioningState": "Succeeded",
  "received_time": "************",
  "site_name": "koo-chatbot",
  "start_time": "************",
  "status": 4,
  "status_text": "",
  "url": "https://koo-chatbot.scm.azurewebsites.net/api/deployments/latest"
}

ブラウザでhttps://<App Serivceリソース名>.azurewebsites.netにアクセスして以下のようなページが表示されていれば成功

Bot ServiceとApp Serviceを接続する

作成したBot Serviceのリソースに移動し、構成ブレードからメッセージングエンドポイントに以下の値を入力して適用を押下

https://<App Serivceリソース名>.azurewebsites.net/api/messages

2.Web チャットでテストブレードに移動し、適当なメッセージを入れてオウム返ししてくれればチャットボットの完成！

Slackと連携する

ここまででチャットボットとしては完成していますが、外部から呼び出せるようにSlackと連携します(Teamsは検証用テナントを持ち合わせていないので省略)。

Bot ServiceではSlackのチャンネル、Slackではカスタムアプリを作成。以下のガイドの通り通り設定すれば問題ないはず

2. DMしたりチャンネルに追加してメンションしたり

(応用編)りんなチャットボットに改造する

オウム返しは味気なさすぎるので、rinna developersに登録してAPIキーを手に入れてから、りんなになってもらいましょう。Composerでbotの修正と同じApp Serviceへの再デプロイまで。

1.ComposerでrinnaのCharacter Conversation API (Japanese)に沿ったHTTPリクエストを送るアクションを作成

ポイント

Send an HTTP requestでAPIクライアントになってもらう
Bodyの質問が入る部分を${turn.activity.text}にしメッセージをrinna APIに中継
Result properyで結果を格納する変数名をdialog.api_responseと定義、Response typeをjsonに指定
Send a responseで、dialog.api_responseからcontent.answerプロパティを抽出（JSONを受け取ると勝手にパースされる仕様）

Compooserから会話ウィンドウを開いて動確。ヨシ！（会話は成立していない）
先ほどの『App Serviceにbotをデプロイ』の3~4と同じ方法でプロジェクトフォルダをzip化、Azure CLIで再デプロイする
(App Serviceを停止していた場合は再度開始する)
もう一度Slackから声かけ。完成！

とはいえ今回の作り方だとぱっと思いつくだけでも以下の課題がありますので、本番運用を考えるともう少し作りこみが必要です。ハンズオンということでご了承ください。

メンションも含めてAPIに渡される(除去が必要)
改行入りのメッセージだと返答が返ってこない(改行コードのエスケープが必要？？)
APIキーの管理方法(今回はハードコーディング)
エラーハンドルが考慮されていない

感想

ここまで書いておきながらアレですが、まったく初学の状態からComposerで実運用に耐えるbotを作るのはかなり苦戦しそうです。公式含めとにかく資料が少なかったです。
体系立って説明された資料が少ないのでMSの断片的な資料から情報を探る必要があります。

ComposerのUIはPower Automateライクなので開発自体は慣れれば何とかなりそうな印象はあります。外部のAPIを叩いて回答を持ってくるアプリくらいであれば作りこみはできそうです。

参考にさせていただいた記事

説明は省いていますが、コンポーネント間の認証認可やメッセージングの仕組みはそれなりに複雑です。今回参考にさせていただいた記事をご紹介させていただきます。

https://tech-lab.sios.jp/archives/28734