Xamarin 日本語情報

Xamarin(ザマリン) の代理店だったエクセルソフト田淵のブログです。主に Xamarin に関するエントリーをアップしていきます。(なるべく正しい有益な情報を掲載していきたいと考えていますが、このブログのエントリーは所属組織の公式見解ではありませんのでご注意ください)

Bot Framework Composer でチャットボットを作成し Xamarin アプリから接続する~その2

こんにちは。エクセルソフトの田淵です。

前回は Bot Framework Composer で作成した Bot をローカルでテストするところまでをやりました。

blog.ytabuchi.dev

今回は作成した Bot を Azure にアップしてみましょう。

本エントリーは

の 11日目の投稿です。

Azure Bot Service

基本的には、Bot を運用できる(特殊な?)App Service である、Azure Bot Service にアップすることになると思います。

azure.microsoft.com

Azure Bot Service は、Bot が動く App Service と、LINE、Teams、facebook などとの接続口をもつ、Web アプリボットがセットになったものです。(だと理解していますが、ちょっとまだ不鮮明…)

個人としておすすめなのは、手動で必要な Azure のリソースを作成し、リポジトリに MyBots 以下のプロジェクトをアップして、デプロイスロットの設定でリポジトリを指定して自動ビルドすることです。本エントリーの後半で紹介します。

が、まずは、公式ドキュメント Deploy a bot に沿ってやってみる場合の手順をご紹介します。Azure Portal の操作に慣れていない方はこの方法がやりやすいと思います。

前提条件

npm install -g https://botbuilder.myget.org/F/botbuilder-declarative/npm/lubuild/-/1.0.3-preview.tgz

余談ですが、今は Mac でも PowerShell 使えるんですね!上記の PowerShell 6.0 説明ページ にも記載がありますが、以下のコマンドでインストールできます。素敵…!!

$ dotnet tool install --global PowerShell
次のコマンドを使用してツールを呼び出せます。pwsh
ツール 'powershell' (バージョン '6.2.3') が正常にインストールされました。

Bot Framework Composer からのデプロイ

左側のバーの下にある歯車アイコンから、「Publish」をクリックします。

f:id:ytabuchi:20191210144531p:plain:w600

Azure に Resource がない場合(全部スクリプトで一気に作りたい場合)、「Create Azure Resouce」ボタンをクリックして、必要事項を入力します。

以下のように設定してみました。

f:id:ytabuchi:20191210151601p:plain:w600

そのまま「Next」をクリックして、スクリプトに渡すパラメーターなどをコピーします。

f:id:ytabuchi:20191210151649p:plain:w600

シェル/コマンドプロンプトで実行します。

実際には、「Bot Display Name」と「Environment Name」を「-(ハイフン)」で繋げた名前で、リソースグループや App Service プラン、App Service、Cosmos DB アカウントなどを作成するようです。

作成途中に Azure Portal で見てみたら、以下のようなリソースが作成されようとしていました。

f:id:ytabuchi:20191210153154p:plain:w600

Azure Portal の操作に慣れている方ならすぐ気がつくと思いますが、一部のサービスでは URL が生成されるため、名前は一意の必要があります。そのため、今回指定した「Echobot-Sample-test」という単純な名前はすでに使われていて、エラーで弾かれてしまいましたw

Deployment failed. Correlation ID: 30b24561-09c1-4397-8b5c-d5371680118d. {
  "error": {
    "code": "InvalidBotData",
    "message": "Bot is not valid. Errors: The bot name is already registered to another bot application..  See https://aka.ms/bot-requirements for detailed requirements."
  }
}
! Deployment failed. Review the log for more information.
! Error:
! Log: /Users/ytabuchi/BotFramework-Composer/MyBots/echobot-sample/Scripts/../create_log.txt
+ To delete this resource group, run 'az group delete -g echobot-sample-test --no-wait'

ということで、一度リソースグループを削除してもう一度やり直しです。

上記の az group delete ... のコマンドは削除命令を Azure に投げるだけなのですぐに終了するのですが、実際にリソースグループが削除されるまではそれなりに時間が掛かりそうです。

f:id:ytabuchi:20191210153020p:plain:w600

(しかも、私の環境では Cosmos DB アカウントだけ消えなくて、リソースグループがいつまで経っても削除できないので、結局手動で削除しましたw)

ということで気を取り直してもう一度

  • yt-bot-sample
  • test1210

と、一意になるように設定してスクリプトを実行します。App Password はレギュレーションが厳しいですが、指示通りに指定してください。

$ pwsh ./Scripts/create.ps1 -name yt-bot-sample -environment test1210 -location WestUS -appPassword 'APP_PASSWORD'
> Creating resource group ...
> Validating Azure deployment ...
> Deploying Azure services (this could take a while)...
> Updating appsettings.json ...
Set UserSecretsId to 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX' for MSBuild project 'XXX/MyBots/echobot-sample/BotProject.csproj'.
Successfully saved MicrosoftAppPassword = APP_PASSWORD to the secret store.
> Done.
- App Id: 1030bf71-a507-4959-b10f-44749f59d909
- App Password: APP_PASSWORD
- Resource Group: yt-bot-sample-test1210
- ServicePlan: yt-bot-sample-test1210
- Bot Name: yt-bot-sample
- Web App Name : yt-bot-sample

やった!

全部のリソースを作成して、ビルドしてデプロイするまでに 8分くらい掛かりました。(このエントリー用の何も Dialog を作っていないプレーンなプロジェクトなので、大きいプロジェクトであればビルドにもう少し掛かるかもしれないですね。)

f:id:ytabuchi:20191210164232p:plain:w600

Composer のウィンドウに戻り、「Next」をクリックして次の「Deploy your bot」のスクリプトをコピーして実行しましょう。

f:id:ytabuchi:20191210160839p:plain:w600

$ pwsh ./Scripts/deploy.ps1 -name yt-bot-sample -environment test1210
Command group 'bot' is in preview. It may be changed/removed in a future release.
The MSBuild project 'XXX/MyBots/echobot-sample/BotProject.csproj' has already been initialized with a UserSecretsId.
Building models for environment [ytabuchi] targeting [westus] authoring region
NOTE: You will need to add luis:endpointKey setting to your environment for these models to work.
For dotnet:
    dotnet user-secrets set luis:endpointKey XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
For node, add to .env file:
    luis:endpointKey=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
lubuild succeeded
Getting Luis accounts...
> Publishing to Azure ...                                                                                                 Publish Success

Luis のキーも自動で生成して取得して設定してくれるみたい。便利ですね…w

デプロイされた Bot を Web チャットでテスト

Azure Portal を開き、作成されたリソースグループ内の「ボットチャネル登録」を開きましょう。

f:id:ytabuchi:20191210161351p:plain:w600

動いてますね!

f:id:ytabuchi:20191210163930p:plain:w600

スクリプトで作成されるリソースについて

自動で作成してくれるのは便利ですが、融通が効きません。

例えば作成される App Service プランは「Standard S1」です。

f:id:ytabuchi:20191210164526p:plain:w600

Cosmos DB も作成する Bot によっては不要ですね。

まずは動かしてみたい。という方以外は Azure Bot Service を学ぶためにも自分でリソースグループから作る方が良いかもしれません。

手動で作成する場合は、以下の手順を参考にしてください。

手動で Azure Bot Service を作成する

冒頭にお伝えしたように、全て手動で作って作成された Bot をデプロイしても全く問題ありません。

最低限作成が必要なリソースは、

  • Resource Group
  • Web アプリ ボット

です。一つずつ作っていきましょう。

リソースグループ作成

なんでもどこでも良いので作りましょう。

f:id:ytabuchi:20191210173820p:plain:w600

Web アプリボット作成

リソースグループで「+追加」をクリックして

f:id:ytabuchi:20191210174001p:plain:w600

「ボット」または「Bot」と検索して出てくる「Web App Bot」を作成します。

f:id:ytabuchi:20191210192221p:plain:w600

新規作成ブレードで

  • 任意のボットハンドル
  • 上記で作ったリソースグループ
  • 任意の場所
  • 任意の価格レベル(F0だと無料です)
  • 任意のアプリ名(一意の名前を付けましょう!)
  • ボットテンプレート(C#)
  • 任意の App Service プラン/場所

などを設定して「作成」をクリックします。

f:id:ytabuchi:20191210192508p:plain:w300

作成された Web アプリボットは、そのまま試すことができます。良いですね。

f:id:ytabuchi:20191210193957p:plain:w600

この時に、App Service も一緒に作られていますので、Web アプリボットのブレードの下の方にある「すべての App Service 設定」をクリックすると作成された App Service を確認できまます。

f:id:ytabuchi:20191210194459p:plain:w600

デプロイセンターを使用したデプロイ

Web アプリボットで作成されたボットは C# プロジェクトなので、デプロイセンターでリポジトリを指定すれば上書きビルド→デプロイをしてくれます。

つまり、Bot Framework Composer で作成した MyBots のプロジェクトを GitHub とかに置いて、そのリポジトリを指定すればよいでよね!

App Service のブレードで「デプロイセンター」を開きます。

f:id:ytabuchi:20191210195249p:plain:w750

お好きなリポジトリに接続し、「続行」をクリックします。ビルドプロバイダーは今回は「App Service のビルド サービス」を選択しました。

f:id:ytabuchi:20191210195617p:plain:w600

Bot プロジェクトを配置したリポジトリを選択して、「続行」をクリック!

f:id:ytabuchi:20191210200008p:plain:w600

完了をクリックすれば、後はリポジトリからプロジェクトを引っ張ってきてビルド、デプロイしてくれます!!!

f:id:ytabuchi:20191210200200p:plain:w600

やったね!!!

f:id:ytabuchi:20191210200332p:plain:w750

Web アプリボットの Web チャットでテストをしてみましょう。

ちゃんと変更されてますね!

f:id:ytabuchi:20191210200514p:plain:w750

後は、ローカルの Bot Framework Composer で開発を続け、配下のプロジェクトを GitHub とかに同期しておけば、半自動的にアップデートできます。

チャンネルの接続

ボットが Azure で動くようになったので、チャンネルに接続してみましょう!!

Web アプリボットのブレードから「チャンネル」をクリックします。

f:id:ytabuchi:20191210201022p:plain:w750

色々なチャンネルがありますが、各チャンネルへの接続方法などは、別の良いエントリーや公式ドキュメントがありますので、そちらに譲りますw

docs.microsoft.com

docs.microsoft.com

docs.microsoft.com

docs.microsoft.com

LINE のコネクタについては大森さんが詳しく書いてくださっているので、併せて参照してください!

qiita.com

色々試してみてくださいねー。

Direct Line API

さて、みなさんは忘れているかもしれませんが、このエントリーの目的は Xamarin から接続すること ですw

一般的なクライアントアプリや Web ページ(かつ、埋め込みビューではなくかっこいいビューを作りたいとか)からアクセスする場合は、「Direct Line API」を使います。

docs.microsoft.com

「Direct Line」アイコンをクリックして、表示されるシークレットキーをコピーしておきましょう。

f:id:ytabuchi:20191210202502p:plain:w750

Direct Line を使えるようにしたところで、今回はここまで。

次回はやっと Xamarin.Forms のアプリからのアクセスをやってみます。

エクセルソフト | ダウンロード | 学習用リソース | JXUG リンクページ | ブログ購読