LINE Bot を Bot Framework Composer でローコード開発する : その 1 環境の準備

16743 ワード
LINEmessagingAPI Composer BotFramework Composer テキストリンク

※2020/5/23 Bot Framework Composer が GA したため一部追記。
※ Azure へのリリースで問題があるということで参考記事をリンク。

LINE Bot を開発する方法は複数ありますが、現時点で私が勝手に最強だと思う Microsoft Bot Framework Composer を使って、ローコードで開発する方法を紹介します。

今回は環境の準備とオウム返しボットがつながるまでを説明します。

Bot Framework Composer とは

元々 Microsoft は Bot Framework というボット開発フレームワークを提供しています。C#, Node.js, Python, Java 向けの SDK があり高度なボットを開発する事ができます。また開発したボットアプリケーションは Azure に展開し、Facebook Messenger や　LINE など複数のチャンネルに同時展開できます。

これまでは開発者が Visual Studio などの IDE を使いコーディングすることでのみ開発ができましたが、Bot Framework Composer は GUI でほぼすべての開発が行えるツールであり、開発言語の知識がなくてもボット開発ができるようになりました。また開発者もこのツールを使うことで、迅速に品質の高いボットが開発できるため、多くの人が活用できるソリューションとなっています。

画面イメージ

メリットとデメリット

メリット

  • 会話フローの開発が GUI で行えるため開発言語の知識が不要
  • ブラウザでの開発でき、誰が作っても品質が一定になる
  • 自然言語処理機能がある
    • 自然言語処理はサービスとして独立しているため、柔軟性と透明性が高い
  • 柔軟文章作成機能がある
  • コードとして結果が生成される
    • バージョン管理
    • CI/CD
  • 外部サービスとの連携機能が標準である
    • OAuth サポート (Bot Service 経由)
    • QnAMaker サポート
    • HTTP 連携サポート
  • Azure Bot Service と連携する
    • 複数チャネルのサポート
    • 使用状況解析など複数のビルトイン機能
  • 関連するサービスの独立性 (デメリットもある)
    • サービスの一部として利用する CosmosDB や LUIS は個別にアクセスも可能なためブラックボックスではない

デメリット

  • 現状ローカルで開発環境が必要
  • 開発者が普段つかう git 等のツールをある程度触る必要がある
  • ボット開発に必要な、ある程度の学習コスト
  • Azure サービスが必須
    • Bot Connector
    • App Service
    • ストレージ
    • Cosmos DB
    • Application Insights
    • LUIS (オプション)
  • 関連するサービスの独立性 (メリットもある)
    • 独立しているため、個別に管理が必要
  • 現時点でプレビューでありドキュメントの大半が英語
  • 既定の展開先が北米リージョンになる
    • Azure の詳細を知っていると別のリージョンに移すことは可能

基本的には Microsoft Azure を利用できる環境で使うことが前提となるため、そこをクリアできる場合で、プレビューでもいいよという場合に適したソリューションです。

環境のセットアップ

Azure サブスクリプション

まだ Microsoft Azure サブスクリプションをお持ちでない場合は、Azure の無料アカウント を作成してください。

ローカル環境

ローカルの開発環境は 2 つあります。

  • インストーラーで構築
  • GitHub よりソースをダウンロードして実行

いずれの場合も以下のツール類が必要です。

開発ツール

Azure 展開用ツール

  • Azure CLI: Azure 用コマンドラインツール
  • PowerShell 7: Azure への展開で利用
  • LuBuild: 自然言語処理用ファイルのコンパイルツール。以下手順でインストール。
npm install -g https://botbuilder.myget.org/F/botbuilder-declarative/npm/lubuild/-/1.0.3-preview.tgz
  • botframework-cli: Bot Framework 用のコマンドラインツール。以下手順でインストール。
npm i -g @microsoft/botframework-cli

インストーラーで構築

GitHub 上の BotFramework Composer リリース に各 OS 用のインストーラーがあります。ダウンロードして実行してください。

GitHub よりソースをダウンロードして実行

最新のものやコードを直接使いたい場合は、ソースをダウンロードして使えます。
ローカルでの開発に必要なパッケージやツールをインストールします。

1. Bot Framework Composer のソースを GitHub よりクローン。

git clone https://github.com/microsoft/BotFramework-Composer.git
cd BotFramework-Composer

2. 現在のブランチが stable ブランチになっているか確認。

>git branch
* stable

3. 利用したいバージョンを tag を使って指定。以下は v1.0.0 を使いたい場合。

git checkout v1.0.0

4. 以下コマンドで依存関係のインストールとソリューションのビルド。

cd Composer
yarn install
yarn build
yarn startall

※15 分くらいかかるので、以下ビデオでも見ててください。

5. ブラウザで http://localhost:3000 に接続。

上記で手順でエディターが表示されたらローカル環境の構築は完了です。

オウム返しボットの作成

※ GA により一部画面が変わり、新しいダイアログやトリガーは「Add」メニューが別途用意されました。一部古い画面のままで説明を勧めますが、適宜読み替えてください。

まずは定番のオウム返しを作ります。

1.「New」をクリック。「Create from template」より「Echo Bot」を選択して「Next」をクリック。

2. 任意の名前と説明を付けて「Next」をクリック。

3.「Unknown intent」を選択。これはユーザーの意図が分からない場合にトリガーされる。応答メッセージとして「You said '${turn.activity.text}'」が設定されていることを確認。

4. 画面右上の「Start Bot」をクリック。

5. しばらくすると横に表示される「Test in Emulator」をクリック。Emulator のインストールやアップデートのポップアップが出た場合は「OK」をクリック。

6. エミュレーターが起動するので、メッセージを送信して、オウム返しされる事を確認。
※たまに初回起動失敗するので、動かない場合は「Restart Conversation - New User ID」ボタンをクリック。

7. 応答を日本語に変更。

8. 「Restart Bot」をクリック後、再度エミュレーターからテスト。

Azure リソースの準備

Bot Framework Composer は Azure の以下のリソースを作成します。

  • ボットチャンネル登録: ボットと LINE や Messenger などのクライアントをつなぐサービス
  • App Service プラン: ボットをホストする App Service 用のプランを設定
  • App Service: ボットをホストするサービス
  • Application Insights: ボットの利用状況やリソースをモニタリング
  • Azure Cosmos DB: ボットのメモリオブジェクト保存用
  • ストレージアカウント: ボットとユーザーのやり取り保存用
  • Cognitive Services: 自然言語処理を使う場合に LUIS を利用

※ GA により手順が大幅に変わったため、過去の情報は削除して新しいものに入れ替えています。

まずは、以下の手順でリソースを作成してください。

1. Settings | Bot Settings より luis の言語を ja-jp に変更。

2. ボットを作成したフォルダー配下の Script フォルダに移動。npm install を実行。

cd C:\users\kenakamu\documents\composer\myfirstlinebot\scripts
npm install

3. 各種パラメーターを自身のものに変更して provisionComposer.js を実行。

  • パスワードは 16文字以上
  • リソースグループ名は name と environment を合わせたものになる
node provisionComposer.js --subscriptionId=<Azure サブスクリプション ID> --name=<リソースグループ名> --appPassword=<任意のアプリのパスワード> --environment=<任意の環境名。既定は DEV>

※うまくいかない場合、Bot Framework ComposerでAzure リソースの準備時にエラーが発生する件への対処 参照

4. Azure へのログインを促されるため、ログインを実行。ログイン完了後、プロビジョンが終わるまで待機。（10分くらいかかります）

5. スクリプト完了後、表示された結果は利用するためそのままにしておき、Azure ポータルにて作成されたリソースを確認。

6. App Service プランを開き、無償の開発プランに変更しておく。他のプランも無償または一番安いプランになっているか確認。

ボットの展開

次に、作成したリソースにボットのコードを展開します。

1. Composer の Publish メニューより、「Add new profile」を選択。

2. プロファイル名と発行先として WebApp を選択。

3. リソース作成スクリプトの結果を「Publish Configuration」に反映し、「Save」をクリック。

4. 作成したプロファイルを選択して「Publish to selected profile」をクリック。

5. コメントを入れて「Okay」をクリック。

6. 進捗が画面に表示される。完了するまで待機。

7. Azure ポータルよりボットチャンネル登録を開き、「Web チャットでテスト」をクリック。ボットに話かけて展開ができているか確認。

これで Azure への展開は完了です。今後の展開も同じ手順で行えます。

LINE との接続

最後に LINE と接続します。

1. LINE 開発者ポータル よりプロバイダーを選択。プロバイダーが無い場合は画面に沿って作成。

2.「新しいチャネル作成」より「Messaing API」を追加。

3. ウィザードに従ってチャネルを登録。登録後、「チャネル基本設定」タブから「チャネルシークレット」をコピー。

4.「Messaging API 設定」より「チャネルアクセストークン」を発行してコピー。

5. Azure ポータルに戻り、ボットチャンネル登録より「チャンネル」を選択。LINE をクリック。

6. 取得したキーを設定し、コールバックアドレスをコピーして、「保存」をクリック。

7. LINE 開発者ポータルに戻り、取得したコールバックアドレスを設定。

8. その後表示される「Webhook の利用」を有効にする。

9. 応答メッセージ右にある「編集」をクリック。

10. Greeting message と Auto-response を無効に設定。

11. LINE クライアントよりボットを QR で読み込んで追加。

あとは LINE クライアントよりメッセージを送信して、オウム返しができるか確認してください。

まとめ

今回は Bot Framework Composer のインストールと LINE ボットに接続するまでを説明しました。次回はデバッグ環境の設定とダイアログの開発について紹介します。

次の記事へ

参考

Bot Framework ComposerでAzure リソースの準備時にエラーが発生する件への対処