Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

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

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

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

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

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

Bot作成手順

 手順の概要は次のようになります。

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

GitHubからAdoption BotのZipをダウンロード

 ここにアクセスしてAdoption BotのZipをダウンロードします(資料作成時のファイル名はAdoptionBot2021_1_0_0_4.zip)。
GitHub - OfficeDev/microsoft-teams-apps-adopt-bot
 

Adoption Bot用チームの作成

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

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

ダミーのアプリを作る

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

 画面下の「アプリ」をクリックしPower Apps を追加します
image.png
↓↓↓↓↓
image.png
↓↓↓↓↓
image.png
※上記の「追加」ボタンを押します。


 新しいアプリをクリックして、とりあえずダミーのアプリを作ります。
image.png
↓↓↓↓↓
image.png※これが出るのでちょっと待つ
↓↓↓↓↓
image.png※このポップアップが出れば完了。
↓↓↓↓↓
image.png※名前は何でも良い

Adoption BotのZipをインポート

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

 Teamsに導入されたPower Appsの「ビルド」タブをクリック。対象チームをクリックしたあと「全て表示」をクリック。
image.png
 画面がこのように遷移するため、インポートボタンを押し、GitHub - OfficeDev/microsoft-teams-apps-adopt-botよりダウンロードしたZipをインポート。
image.png
 インポートできたら次へ。
image.png
 何インポートするか聞かれるが、そのまま次へ。
image.png
 Microsoft Teams / Office 365 Users 共に新しい接続(Flow connections)を求められた場合は、接続設定を行います。公式ではFlow connectionsの作成をおすすめしているため、以下手順に沿って作成。

 こうすると、
image.png
Webブラウザが立ち上がり接続を作るかどうか聞かれるので作成。
image.png
image.png

Teams側に戻って更新を押す。
image.png

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

 両方とも作成すると、Power Apps上は次のような表示に。
image.png

 Teams側は以下のような表示となる。インポートをクリック。
image.png

 インポート中表示が出るので待つ。数分ぐらいで終わるので一服してくると良い。
image.png
↓↓↓
image.png

Adoption Botの設定・調整

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

 Teamsアプリに戻り、クラウド フローをクリックするとこのような画面に。フローが2つ表示されるのでAdpotBot Submit Feedbackを編集。
image.png

フローが表示されるので、"Post your own adaptive card as the Flow bot to a channel (Preview)"アクションをクリックし、チームID・チャネルIDを入力して保存(チーム名・チャネル名ではないことに注意)。
image.png

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

Adoption Botのテスト

 上記手順から続ける場合は、左上の「←」をクリックし、以下のようなビルドメニューを表示させる。チャットボットメニューよりAdoption Bot PVA 2021をクリック。
image.png

 Power Virtual Agentsの導入が求められた場合は、追加。
image.png

 少し待っていると次のような画面になる。完了ボタンを押して下の余計な吹き出しを消す。
image.png

通常チャットのテスト

 そのままチャットを始める。サンプル通り"Guests in Teams"とチャットしてみる。応答が帰ってくればOK。(※まだ何も仕込んでいないので、日本語には対応していない)
image.png
※間違ってテストチャットのウィンドウを閉じてしまった場合は画面左下のここから再開可能。image.png

エキスパートへのエスカレーションテスト

 Agentと入力すると、エキスパートにエスカレーションする挙動になります。Ask An Expertをクリックし、問い合わせ概要・詳細を入力すると、以下のような流れでBotが応答してくれる。
image.png
 このとき、Adoption Bot Ask an Expertチャネルには以下のようにエキスパート向けの問い合わせがあったことが表示される。
image.png

Adoption Botのカスタマイズ

 利用する組織に合わせてアイコンを変更するなどの対応。左側メニューの管理→詳細とクリックするとボットの名前とアイコンを変更可能です。
image.png

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

参考:

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?