Adoption Botを活用して爆速でTeamsのBotを作る

## この文書は？
　[GitHub \- OfficeDev/microsoft\-teams\-apps\-adopt\-bot](https://github.com/OfficeDev/microsoft-teams-apps-adopt-bot)を活用したBot作成の手順をまとめたものです。


## 背景
　前からTeamsのBotやりたかったのですが、準備と公開までが色々と大変そうでなかなか手がつけられず。しかし、MSさんがGitHubにキモになる部分が公開してくださっていて、それを取り込むだけでBotのガワは作れそうということがわかったのでチャレンジ！

　Qiitaのこの記事起こしながら作っても2時間だったので、慣れれば30分くらいで作れそうです。

　公開はこちら：[GitHub \- OfficeDev/microsoft\-teams\-apps\-adopt\-bot](https://github.com/OfficeDev/microsoft-teams-apps-adopt-bot)。なお、手順も載っているため、最新情報はそちらを参考にすると良いです（この記事は本家の手順を参考に、自分が詰まったところなどを記載しております）。

## Bot作成手順
　手順の概要は次のようになります。

1. GitHubからAdoption BotのZipをダウンロード
1. Adoption Bot用チームの作成
1. ダミーのアプリを作る
1. Adoption BotのZipをインポート
1. Adoption Botの設定・調整
1. Adoption Botのテスト
1. Adoption Botのカスタマイズ


### GitHubからAdoption BotのZipをダウンロード
　ここにアクセスしてAdoption BotのZipをダウンロードします（資料作成時のファイル名はAdoptionBot2021_1_0_0_4.zip）。
[GitHub \- OfficeDev/microsoft\-teams\-apps\-adopt\-bot](https://github.com/OfficeDev/microsoft-teams-apps-adopt-bot)
　

### Adoption Bot用チームの作成
　Adoption Bot用のチームとチャネルを作成します。チーム名とチャネルは何でも良いです。既にチームがある場合はそちらを流用するということでもOKです。今回は以下チーム・チャネルを作成しました。
　この手順の途中で使うため、対象チームとチャネルのIDを事前に確認しておきます。（管理者権限がなくとも可能。参考：[Microsoft Teams のチームID、チャネルIDの確認方法 \- Qiita](https://qiita.com/yamad365/items/e480f77e9102b132d258)

| 作成チーム・チャネル | 名称 |
|:-|:-|
| チーム | Adoption Bot |
| エキスパートへ展開するためのチャネル | Adoption Bot Ask an Expert |
| フィードバック用チャネル | Adoption Bot Feedback |


### ダミーのアプリを作る
　Adoption Bot用に使うチームで1つもPowerAppsのアプリを作っていない場合はダミーのアプリを一度作り、本命のAdoption Botのモジュールをインポートすることになります。
　以下、ダミーのチームの作成方法です。

　画面下の「アプリ」をクリックしPower Apps を追加します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/2bb09654-be46-2958-d315-763ae7d4135a.png)
↓↓↓↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/a2d16c04-0242-5314-2427-794966452291.png)
↓↓↓↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/593ac412-d830-24c8-5562-27eb06facaa8.png)
※上記の「追加」ボタンを押します。

- - -

　新しいアプリをクリックして、とりあえずダミーのアプリを作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/c8447e9d-5fcd-2ee6-8023-624442e98fd5.png)
↓↓↓↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/9126f20a-6e83-10f8-0ed5-5ab365228179.png)※これが出るのでちょっと待つ
↓↓↓↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/ea84118e-3248-c219-38c8-99a7373aea17.png)※このポップアップが出れば完了。
↓↓↓↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/5394beda-5e31-c859-b6fd-11d01e371728.png)※名前は何でも良い


### Adoption BotのZipをインポート
　続けて最初にダウンロードしたZipをインポートし、ChatbotとFlowを導入します。

　Teamsに導入されたPower Appsの「ビルド」タブをクリック。対象チームをクリックしたあと「全て表示」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/ddff0319-1e6c-ac4b-b603-3ae1afc1d365.png)
　画面がこのように遷移するため、インポートボタンを押し、[GitHub \- OfficeDev/microsoft\-teams\-apps\-adopt\-bot](https://github.com/OfficeDev/microsoft-teams-apps-adopt-bot)よりダウンロードしたZipをインポート。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/20e3e006-29a9-297b-7e73-3b53a1f38411.png)
　インポートできたら次へ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/0e02fa5d-3c29-0a82-1a3c-5aef7401aa86.png)
　何インポートするか聞かれるが、そのまま次へ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/00c1370e-b123-e979-bf6b-982bb87ca3f9.png)
　Microsoft Teams / Office 365 Users 共に新しい接続（Flow connections）を求められた場合は、接続設定を行います。公式ではFlow connectionsの作成をおすすめしているため、以下手順に沿って作成。

　こうすると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/949a0551-90eb-3fe8-4c88-ab556e4c7091.png)
Webブラウザが立ち上がり接続を作るかどうか聞かれるので作成。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/19d152cb-2cb2-c4b4-db26-57ab12e925bc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/33df2c44-1e50-3467-cfca-ab1795ac4bac.png)

Teams側に戻って更新を押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/76f26b0d-6cc5-d2e9-c0fd-3230dc7cc04f.png)

※Office365 Userも同じように接続を作るように指定されるので作る。

　両方とも作成すると、Power Apps上は次のような表示に。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/90d7696f-60d6-1de4-5883-f544cfcd1104.png)

　Teams側は以下のような表示となる。インポートをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/2b958adc-6fc2-212e-8827-91f42ba04882.png)

　インポート中表示が出るので待つ。数分ぐらいで終わるので一服してくると良い。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/9e44bb50-ecc8-189b-8515-e211875ea08b.png)
↓↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/bd3046b2-50ce-dc19-91f7-031a61a46898.png)

### Adoption Botの設定・調整
　最初に作ったAsk An Expert チャネルと Submit Feedback Flows チャネルへ、Botが手に負えない質問や、フィードバックが流れてくるようにする。

　Teamsアプリに戻り、クラウド フローをクリックするとこのような画面に。フローが2つ表示されるのでAdpotBot Submit Feedbackを編集。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/6a5b9fe7-7b96-fae7-74ac-1c7307c0fda0.png)

フローが表示されるので、"Post your own adaptive card as the Flow bot to a channel (Preview)"アクションをクリックし、**チームID・チャネルID**を入力して保存（チーム名・チャネル名ではないことに注意）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/f455f628-8539-1c3b-6c75-41a808fd3949.png)

　同様にAdoption Bot Ask An Expertフローについてもチーム名・チャネル名を編集して保存。


### Adoption Botのテスト
　上記手順から続ける場合は、左上の「←」をクリックし、以下のようなビルドメニューを表示させる。チャットボットメニューよりAdoption Bot PVA 2021をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/129af994-7c2f-1fb5-1ea3-8e88c6d80f44.png)

　Power Virtual Agentsの導入が求められた場合は、追加。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/417d4d8d-5487-dbf4-4d56-0022a05a98ec.png)

　少し待っていると次のような画面になる。完了ボタンを押して下の余計な吹き出しを消す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/e7e5326e-c5af-4e3d-f37e-aad57d9da321.png)

#### 通常チャットのテスト
　そのままチャットを始める。サンプル通り"Guests in Teams"とチャットしてみる。応答が帰ってくればOK。（※まだ何も仕込んでいないので、日本語には対応していない）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/6d25d24c-1080-1cd8-86f2-fb5feb4819f1.png)
※間違ってテストチャットのウィンドウを閉じてしまった場合は画面左下のここから再開可能。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/2463f2c5-e3fc-b254-790e-834725f082d7.png)


#### エキスパートへのエスカレーションテスト
　Agentと入力すると、エキスパートにエスカレーションする挙動になります。Ask An Expertをクリックし、問い合わせ概要・詳細を入力すると、以下のような流れでBotが応答してくれる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/5c93260f-9450-d26c-037a-80f446a01e38.png)
　このとき、Adoption Bot Ask an Expertチャネルには以下のようにエキスパート向けの問い合わせがあったことが表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/f8799428-47ee-2c92-b59b-81e9f50b059d.png)


### Adoption Botのカスタマイズ
　利用する組織に合わせてアイコンを変更するなどの対応。左側メニューの管理→詳細とクリックするとボットの名前とアイコンを変更可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151198/51d0ea7a-ac20-15fe-8763-f62fd18bfc7b.png)


 ここまでで動くBotが完成します。他ユーザに使ってもらうための公開設定はまた別で必要となるため、[OfficeDev/microsoft\-teams\-apps\-adopt\-bot](https://github.com/OfficeDev/microsoft-teams-apps-adopt-bot)の手順43.から進めると良いでしょう（試した上で別記事として掲載しようと思います）。


## 参考：
- [Microsoft Dataverse とは \- Power Apps \| Microsoft Docs](https://docs.microsoft.com/ja-jp/powerapps/maker/data-platform/data-platform-intro)
- [トピックを使用してチャットボットの会話を設計する \- Power Virtual Agents \| Microsoft Docs](https://docs.microsoft.com/ja-jp/power-virtual-agents/authoring-create-edit-topics)
- [オンライン コンテンツからトピックの提案を取得する \- Power Virtual Agents \| Microsoft Docs](https://docs.microsoft.com/ja-jp/power-virtual-agents/advanced-create-topics-from-web)
- [Microsoft Teams のチームID、チャネルIDの確認方法 \- Qiita](https://qiita.com/yamad365/items/e480f77e9102b132d258)