More Related Content What's hot (20)
PDF
ユニットテストの保守性を作りこむ, xpjugkansai2011
H Iseri ?
Similar to Microsoft Teamsを使ったメッセージ通知開発 (11) PDF
【de:code 2020】 Azure Bot Services を使って Teams bot を開発する
日本マイクロソフト株式会社 ?
PDF
[Japan M365 Dev UG] Teams Toolkit v4 を使ってみよう！
Tomomi Imura ?
PPTX
Azure Bot!! Microsoft Bot Framework で簡単Bot開発
Yuki Hattori ?
PDF
[TL08] 50 分で Bot 開発者になれる！～実践的ノウハウと、 Azure や Office 365 を組み合わせたアーキテクチャの伝授～
de:code 2017 ?
PDF
【de:code 2020】 開発者が語る！ Microsoft Teams アプリケーション開発の実例とコツ
日本マイクロソフト株式会社 ?
3. 自己紹介
? 小張 叁枝(こばり みえ)
? アドバンスド?ソリューション株式会社 在籍
年齢はベテランですが開発メインでしています。
ありがたい会社です。
? SharePointをはじめとしたM365周りを触
るようになってから約3年
? Teams関連の開発は今年に入ってから
? それまでの経歴は主に以下の感じです
? 基幹システムの開発（物流?販売?輸出入 など転々と）
? 自社アプリの開発?サポート（得意分野は住所です）
? Qiita(https://qiita.com/miesque)
? 埼玉西武ライオンズと写真を撮ることが好きです。
14. Office365 コネクタカード
?Office 365 コネクタカードには、複
数のセクション、フィールド、画像、およ
びアクションを備えた柔軟なレイアウトが
用意されています。“
https://docs.microsoft.com/ja-jp/microsoftteams/platform/task-
modules-and-cards/cards/cards-reference#office-365-connector-
card
Incoming Webhook
動作確認
16. Bot と プロアクティブメッセージ送信
Bot とは？
?会話ボットを使用すると、ユーザーは、テキスト、対話型
カード、タスク モジュールで Web サービスとのやり取りが
できるようになります。会話型ボットの機能は非常に柔軟
性があり、単純なコマンドだけでなく、複雑で人工知能を
搭載した自然言語処理の仮想アシスタントを処理できるよ
うにスコープを設定することができます。?
https://docs.microsoft.com/ja-jp/microsoftteams/platform/webhooks-
and-connectors/how-to/add-incoming-webhook
17. Bot と プロアクティブメッセージ送信
プロアクティブメッセージ送信 とは？
“プロアクティブメッセージ とは、Bot が会話を開始するた
めに送信するメッセージです。”
https://docs.microsoft.com/ja-jp/microsoftteams/platform/bots/how-
to/conversations/send-proactive-messages?tabs=dotnet
20. Teams用Bot作成
①開発環境の作成
1. Visual Studio 2019に、
Microsoft Bot Framework v4
をインストール
① Visual Studio 2019(以降VSと記載)を
起動し、拡張機能 → 拡張機能の管理を
開く
② [Bot Framework]と入力し検索
③ [Bot Framework v4 Templates for
Visual Studio] が表示されるので、ダウン
ロードする
21. Teams用Bot作成
①開発環境の作成
2. Bot Framework Emulator
をインストール
① 下記URLより、環境に合うものをダウンロー
ドする
https://github.com/Microsoft/Bot
Framework-
Emulator/releases/tag/v4.5.2
※Windowsの場合
BotFramework-Emulator-4.9.0-
windows-setup.exe
② ダウンロードしたファイルよりインストールを行
う
③ 起動すると右記画面になる
22. Teams用Bot作成
①開発環境の作成
3. プロジェクト テンプレートよりBotを
作成し動作確認
① VSを起動し、[新しいプロジェクトの作成]
で開始
② プロジェクトテンプレートで「Bot
Framework」を検索し、
Echo Bot(Bot Framework v4
‐ .NET Core 3.1) を選択
③ プロジェクト名などを入力し、[作成]クリック
④ 作成されたプロジェクトには実行可能なソー
スコードが含まれているため、そのまま
Debug実行
⑤ 実行されるので、Webブラウザで確認する
またはWebブラウザが自動で開く
Url：http://localhost:3978/
27. Teams用Bot作成
③AzureにBotをデプロイ
1. Bot チャンネル 登録を作成
① ブラウザでAzure Portalに接続して、リ
ソースグループを開く
② [追加]をクリック
③ 検索窓に[Bot]と入力し検索すると、[Bot
Channels Registration]パネルが表示
されるのでクリックし、開いた[作成]をクリック
④ 開いた[ボット チャンネル登録]画面で 必
須項目を入力
⑤ [Microsoft アプリIDとパスワード][アプリ
IDとパスワードの自動生成]をクリックし、
[新規作成]をクリックする
⑥ [App Registration Portal でアプリ ID
を作成する]リンクをクリック
? ボット ハンドル：任意の名称
? 場所：日本
? 価格レベル：F0
? メッセージング?エンドポイント：空欄
? Application Insights：オフ
29. Teams用Bot作成
③AzureにBotをデプロイ
1. Bot チャンネル 登録を作成
⑨ [アプリケーションの概要]が開くので、[アプリ
ケーション(クライアント)ID」の値をコピーし
て保存
⑩ 左パネルの[証明書とシークレット]をクリック
? [証明書とシークレット]が開くので、[新しい
クライアントシークレット]をクリック
? [クライアント シークレットの追加]が開くので、
説明と有効期限を入力し
[追加]をクリック
? [証明書とシークレット]に戻り、クライアント
シークレットの一覧に追加したものが表示さ
れるので、値をコピーして保存
※画面移動すると消えてしまうので注意
30. Teams用Bot作成
③AzureにBotをデプロイ
1. Bot チャンネル 登録を作成
? [新しい Microsoft アプリ ID の作成]に
戻り、入力して[OK]をクリック
? [ボット チャンネル登録]に戻り、[作成]をク
リック
? [ボット チャンネル登録]作成完了
? Microsoft アプリ ID：保存したアプリケーションID
? パスワード：保存したクライアント シークレット
31. Teams用Bot作成
③AzureにBotをデプロイ
2. IDプロバイダー を作成
① Azure Portalで、[Azure Active
Directory]を選択
② 左パネルで[アプリの登録]をクリック
③ [新規登録]をクリック
④ [アプリケーションの登録]が開くので、入力
して[登録]をクリック
⑤ 作成した内容が表示されるので、アプリケー
ション(クライアント)IDとディレクトリ(テナン
ト)IDをコピーする
⑥ 左パネルの[証明書とシークレット]をクリック
IDプロバイダーについて
https://docs.microsoft.com/ja-jp/azure/bot-service/bot-
builder-concept-identity-providers?view=azure-bot-service-
4.0&tabs=adv1%2Cga2
IDプロバイダーとは：
M365にBot内からログインするために作成したので、今
回は省略します。
※シングル サインオン (SSO) 機能が有効になり、アプリ
ケーションはセキュリティで保護された複数のリソースにアク
セスできるようになる
? 名前：任意のアプリケーション名を設定(一意であることに注意)
? リダイレクトURI：[Web]を選択
https://token.botframework.com/.auth/web/redirect
33. Teams用Bot作成
③AzureにBotをデプロイ
2. IDプロバイダー を作成
⑩ Azure Portalで、作成した[Bot チャンネ
ル登録]を再度開き、左パネルの[設定]を
クリック
? [設定]が開くので、下部にある [OAuth接
続設定]の[設定の追加]をクリック
? [新しい接続設定]を開き、
サービスプロバイダー：Azure Active
Directory を選択
? 入力項目が追加で表示されるので、入力
し[保存]をクリック ? 名前：任意
? Client ID: IdプロバイダーアプリのアプリケーションID
? Client Secret：Idプロバイダーアプリに設定したクライ
アントシークレット
? Grant Type：authorization_code (固定)
? Login URL：
https://login.microsoftonline.com (固定)
? Tenant Id：IdプロバイダーアプリのテナントID
? Resource URL：
https://graph.microsoft.com/ (固定)
? スコープ：空欄
34. Teams用Bot作成
③AzureにBotをデプロイ
2. IDプロバイダー を作成
? [設定]に戻り、OAuth接続設定 に保存
した設定が表示される
? 保存した設定をクリックすると、再度設定画
面が開く
? [接続テスト]をクリックして接続テストを行う
i. アカウントを選択する画面が表示されるので、
接続するアカウントを選択
ii. 初回はアクセス許可画面が表示されるので、
[承諾]をクリック
iii. アクセス成功すると成功画面が表示される
? IDプロバイダー作成完了
37. Teams用Bot作成
③AzureにBotをデプロイ
4. Webサービスの作成とアプリの発行
⑦ Visual Studioの[公開]で
作成したApp Serviceを選択し、[発行]
をクリック
⑧ 正常に公開されたら、サイトURLを開き確
認する
⑨ Bot チャンネル登録に、Webサービスのエ
ンドポイントを登録
i. Azure Portalに接続し、
作成した[ボット チャンネル登録]を開く
ii. 左パネルの[設定]をクリック
iii. [メッセージング エンドポイント]に、
Webサービスを公開したURL ＋
/api/messages
を入力して、[保存]をクリック
41. manifest.json
5行目 id?
28行目 bots の botid ：
Bot チャンネル登録のアプリケーションId
を設定
17行目?18行目：アプリの名前(任意)
22行目?23行目：アプリの説明(任意)
30行目：scopes に
“groups” を追加すると、チームに追加
できるようになる
アプリマニフェストについて：
https://docs.microsoft.com/ja-
jp/sharepoint/dev/spfx/web-
parts/guidance/creating-team-
manifest-manually-for-webpart
48. Teams用Bot作成
⑤プロアクティブメッセージ
送信Bot作成
1. プロアクティブメッセージBot作成
② [NotifyController]クラスとは？
? ApiController属性(WebApi)
? プロアクティブメッセージを送信するためのクラ
ス
? Post/Getを受け取り実行
? １つのBotにApiController属性のクラスを
複数作成することができる
③ 送信先を特定し、メッセージ送信するため
に必要なもの
? Botアダプター
BotBuilder からチャネルに対する Activity
の送受信はアダプター経由で行う
? ConversationReference
プロアクティブメッセージを送信するユーザーと
会話の特定のために使用
会話で受信したActivityから取得
? アプリケーションId
どのアプリケーションに対して通信しているかを
示す
Post/Get
URL指定
50. Teams用Bot作成
⑤プロアクティブメッセージ
送信Bot作成
1. プロアクティブメッセージBot作成
⑤ ConversationReferenceについて
? すべての会話のConversationReference
情報を保持する
? 変数名：_conversationReferences
(ConcurrentDictionary型)
? このプログラムでは、
ActivityHandlerを継承したメインクラスの、
OnConversationUpdateActivityAsyn
c ハンドラー
(ボット以外のメンバーが会話に参加した場
合、または会話から退出した場合に実行)
内で保持
? Teamsアプリとして運用する場合は、この内
容を永続的なメモリに保存する必要がある
(Azure の Blob Storageなど) https://docs.microsoft.com/en-us/javascript/api/botframework-
schema/conversationreference?view=botbuilder-ts-latest
55. Teams用Bot作成
⑤プロアクティブメッセージ
送信Bot作成
1. プロアクティブメッセージBot作成
⑧ Teamsでチームに追加して動作確認
iv. URLにPost
v. メッセージを受信する
? チームに追加することにより、チーム全員が
Botを使えるようになる
? チャネルの投稿からだとメンション付きで投
稿する必要がある
? ここで作成したBotの仕様
? Postすることによりメッセージ送信
? すべての会話情報
(ConversationReference)の送信者
にメッセージを送る
? メッセージ内容は、テキストで
“proactive hello” 固定
? OnMembersAddedAsync ハンドラー
でWelcomeメッセージを送信
?チームに追加したときには、
Welcomeメッセージが表示されない
?Welcomeメッセージで
ConversationReferenceを取得
しているので、チーム内の誰かが一度
話しかけないとメッセージ受信しない
64. 残課題があります
? ConversationReference について
? メモリが破棄されてしまうので、Azure BlobStorage などの永続的なメモリを使用して保
存する
? 今の動作だと、Teamsにインストールして、チームに追加した状態では、誰かがBotに話し
かけるまで ConversationReferenceが保存されないため、確実に保存する方法を考え
る
? デバッグについて
? Teams固有の機能はBot Framework Emulatorでは動作しないため、Teamsにつ
なぎ、ローカルデバッグができる環境を整えたほうがよい
プロアクティブメッセージ送信Botを作ってみよう！
65. ? サンプル
? https://github.com/microsoft/BotBuilder-Samples/tree/master/samples
? Incoming Webhook
? もくだいさんのOffice365至高のレシピ ‐ Webhookを使ってTeamsに投稿する
https://mokudai.jp/knowledge-base/power-automate/post-to-teams-using-webhook/
? Bot
? Microsoft Bot Framework v4 完全制覇
https://qiita.com/kenakamu/items/6dc043cfc1f199032883
? Microsoft
? Bot Framework SDK for .NET を使用したボットの作成
https://docs.microsoft.com/ja-jp/azure/bot-service/dotnet/bot-builder-dotnet-sdk-quickstart?view=azure-bot-service-
4.0&tabs=vs
? ボットのしくみ
https://docs.microsoft.com/ja-jp/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0&tabs=csharp
? 会話ボットとは(Teamsボットについての説明)
https://docs.microsoft.com/ja-jp/microsoftteams/platform/bots/what-are-bots
? Microsoft Teams 用にボットを作成する
https://docs.microsoft.com/ja-jp/microsoftteams/platform/bots/how-to/create-a-bot-for-teams
? プロアクティブ メッセージを送信する
https://docs.microsoft.com/ja-jp/microsoftteams/platform/bots/how-to/conversations/send-proactive-
messages?tabs=dotnet
? アプリマニフェスト
https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/web-parts/guidance/creating-team-manifest-manually-for-webpart
参考にしました
Editor's Notes #2: はじめまして、アドバンスド?ソリューション 小張と申します。
本日は、「Microsoft Teamsを使ったメッセージ通知開発」についてお話させていただきます。
どうぞよろしくお願いいたします。#4: 改めまして、小張 叁枝と申します。
アドバンスド?ソリューション株式会社に在籍しておりまして、
諸々の開発を担当しております。
ちなみにですが、私の若いころには、プログラマー30歳定年説というのがありまして、いつまで仕事を続けられるのだろうかとおびえていましたが、気づいたら30歳は一回り以上超えていますが何とかなっており今にいたります。
Microsoft365周りの開発は、弊社に入った3年ほど前から行っています。
Teamsの開発は今年に入ってからぼちぼちいただいています。
それまでは、ご覧いただいているようなことを粛々とやっておりました。
今回、登壇ははじめてなので大変緊張しておりますが
どうぞよろしくお願いいたします。#5: ある日、あるお客様からこんな依頼がありました。
Teamsあてにメッセージを送りたいんだけど、できますか？
基幹システムやSharePointのワークフロー、 Microsoft Power Automate(Flow）などいろいろなシステムから 例えば完了通知などをPushで送りたいです
各ユーザーに手間はかけない方法で。
と言われました。
まず、TeamsのIncoming Webhook(受信Webhook)で実現できるかも？と思いついたので、試してみることにしました。#6: Incoming Webhook とは、マイクロソフトの説明だとスライドの通りとなります。
Teamsの外部から、チャネルに簡単に投稿できるようなコネクタとご認識いただけたらよいかなと思います。#7: 導入手順
?
?
?
?
上から3つ目までが設定となります。 設定後、JSONペイロードをPOSTすることによりTeamsのチャネルに投稿できます。#8: 早速ですが、コネクタ設定方法をご案内します。
１
２#9: ３#10: ４
#11: ５ ここで設定した名前が、メッセージの送信者として表示されますので、わかりやすい名前にすることをお勧めします。 #12: ７ この保存したURLが、JSONをPostする先のURLになります。#14: このように受信できます。
コネクタカード形式で再度送信してみたいと思います。
この内容は、Microsoftのサンプルをコピーしたものです。#15: 説明は省略しますが、今ご覧いただいた通り、翱蹿蹿颈肠别365コネクタカード形式で様々なレイアウトで送信できます。
#16: ここまで作り、説明しました。
そうしたら、
?個人宛にチャットで送りたいな
という要望があることがわかりました。
ほかにもいろいろ野望があることが感じ取れましたので、Teams Botでできるかを検討することにしました。#17: Botとは？ Microsoftの説明はご覧の通りですが、皆さまご存じと思いますので、詳細は省かせていただきます。#18: プロアクティブメッセージ送信とは？
プロアクティブメッセージとはBotが会話を開始するために送信するメッセージです。
とありますが、
通常、Botは、こちらから話しかけた内容に返信するという動作が多いと思いますが、
プロアクティブメッセージとは、Botから会話を開始するためのメッセージ送信となります。#19: 顺をおって进めていきたいと思います。#20: スライドのような環境で進めていきます。
Webサービスはとりあえずお手軽にAzureを選びました。#21: まず開発環境を作成します。
本題とはちょっとそれますので、申し訳ないですが駆け足で進めます。
VisualStudio2019に、拡張機能 Microsoft Bot Framework v4 をインストールします。#22: 次に、デバッグ実行などに使用する、Bot Framework Emulator をインストールします。
いわゆるエミュレーターです。#23: 両方インストールできたら、簡単に動作確認をしてみます。
VisualStudioから、Bot Framework v4 の テンプレート、Echo Botを使用して新しくプロジェクトを作成します。
実行可能なソースコードが含まれているので、そのままDebug実行します。
(IIS等必要となります)
実行されるので、Webブラウザで確認します。#24: 実行したら、 Bot Framework Emulator を起動します。
真ん中あたりの[Open Bot]をクリックします
Bot URL に、先ほど実行画面として立ち上がったURL ＋ api/messages/ と入力して
Connect と入力すると、[Live Chat] タブが立ち上がり、Botからのメッセージが表示されます。
Welcomeメッセージとか言ったりします。
開発環境作成はここまでとします。#25: 次に、Bot開発をします。
プロアクティブメッセージ送信の前に、ごく簡単なものを作ってみます。
まず、同じように Bot Framework v4のテンプレート Empty Bot を使い、新しいプロジェクトを作成します。#26: EmptyBot.csにオーバーライドのメソッドを追加して、 スライドのような処理を書き足します。#27: デバッグ実行し、BotFramework Emulatorで動作確認します。
次では、このBotをデプロイしていきます。#28: AzureにBotをデプロイします。
まず、Azureのリソースグループに、[Bot Channels Registration（Bot チャンネル登録)]を追加します。
手順をいろいろ書いていますが、
Bot チャンネル登録 を登録して、#29: 础锄耻谤别に新しくアプリの登録をして、
#30: アプリの登録ができたら、クライアントシークレットを作成して、 #31: Bot チャンネル 登録に設定して、作成完了です#32: 次は、滨顿プロバイダー作成です。#36: Botプロジェクト内のappsetting.json に 作成したアプリケーションIDとクライアントシークレットを追加します。#37: Webサービスの作成とアプリの発行を行います。
ここもいろいろ手順がありますが、Azure上にAppServiceを新しく作り、#38: その作成した AppServiceに、Bot作成したプロジェクトを「発行」します
正常に公開されたら、ブラウザが開きますのでURLを確認します。
Bot チャンネル登録に、エンドポイントを登録します。#39: 次に、Botチャンネル登録をTeamsに接続します。
Botチャンネル登録の「チャンネル」を開き、Teamsのアイコンをクリックして進めていきます。
Teamsに接続できると、「チャンネルに登録」の一覧にTeamsが表示されます。#40: 叠辞迟チャンネル登録から、动作确认ができます。#41: 最後、Teamsにインストールです。 アプリマニフェストと言われるファイルを作成する必要があります。
こちらは、ドキュメント参照しながら書いていくのがもちろんベターなのですが、
時間短縮したいため今回はサンプルからいただきました。#42: サンプル内のmanifest.jsonを開き、修正していきます。
ID,BotIDにはアプリケーションIDを設定します。
アプリの名前?説明は、Teamsに表示されるので適宜修正してください。
Scopeに この画面ではPersonal となっていますが、
“groups” と追加すると、Botをチームに追加できるようになりますので追加します。#43: 先ほどサンプルから取得し、修正したファイルを含めた3ファイルを１つのZipファイルにします。
ここでやっとTeamsが登場です。
まず、Teamsにインストールします。
Teamsクライアントを開きます。ブラウザからでも大丈夫です。
左パネル下部にある、[アプリ]アイコンをクリックします。
パネルが開きますので、そのパネルの下部にある[カスタム アプリをアップロード]をクリックします。#44: 先ほど作成した、manifest.jsonが含まれるZipファイルをアップロードします。
アプリ一覧にアプリが追加されますので、追加されたアプリをクリックします。#45: 確認画面が開きますので、[追加]をクリックします。
すると、Teamsにアプリが追加されます。これは、個人に追加された形となります。
左パネルにアプリが表示されますので、クリックして表示し、動作確認を行います。
無事Teamsで動作するBotアプリを作成することができました。#46: さて、いまは個人にインストールしましたが、チームにアプリを追加するときはご覧のような手順で行います。 アプリの一覧からインストールしたアプリを選択し、ドロップダウンリストから[チームに追加]を選択して進めていけばOKです。
問題なく追加できましたら、アプリを追加したチームの[チームの管理]画面からアプリ参照できます。
長くて申し訳ありませんが、ここまでが下準備になります。#47: さて、諸々準備もできたところで、やっとプロアクティブメッセージ送信Botを作ってみようと思います。
Githubにサンプルアプリがいろいろおいてありますので、参考にしながら作成していきます。
具体的には上記2つを使いました。#48: それでは、さっそくサンプルプログラムの中の、その名も proactive_messagesというプロジェクトを使用して新しいプロジェクトを作ります。
作成すると、例によってそのまま実行できるソースコードが入っていますので、中身を少し詳しく見ていきます。#49: まず、今までのプロジェクトと一番違うのは、NotifyControllerというクラスがあることです。
このクラスは、 WebApiのApicontroller属性のクラスとなります。 PostまたはGetを受け取り、実行されます。
ここでPostまたはGetを受けたらプロアクティブメッセージを送信するような作りになります。
一つのBotにApiController属性のクラスを複数作成することができるので、
内容や条件、状況に合わせていろいろなメッセージ送信を作ることが可能です。
そして、プロアクティブメッセージを送るために必要なものが、ここではコンストラクタの引数となっています。
この中で、ConversationReference が後から何度も出てくるので説明します。
これは、プロアクティブメッセージを送信するときに、どの会話、どのユーザーに対して送信するかを特定するために使います。プログラム内に、理論的にすべての会話の情報
例えば、わたしとBotが話した
AさんとBotが話した
BさんとBotが話した みたいな情報を保持しています。
#50: 次に、このクラスに含まれるメソッドについてお話します。
Get メソッドというのが含まれています。
PostまたはGetを受け取ったときに動くメソッドです。ここでは、Postのみとしたかったので、メソッド名がGetのままでかっこ悪いのですが、[HttpPost]属性を追加しています。
先ほど申し上げた、複数あるConversationReferenceの、すべての会話情報からとれる送信先にメッセージを送信するような処理をしています。
そして、BotAdapterのContinueConversationAsyncメソッドが、プロアクティブメッセージを送信します。
実際の送信内容は、BotCallbackメソッドの中で設定しているような形になります。#51: ConversationReferenceについて、もう少しご説明します。 ユーザーとBotが会話をしたときに取得できるので、このプロジェクトでは、 「OnConversationUpdateActivityAsync」ハンドラー、「ボット以外のメンバーが会話に参加または退出した場合」に取得してConcuurentDictionary型で保持しています。
理論的にはすべての会話情報を保持することになります。 同時に複数のスレッドからアクセスできる、スレッド セーフなキーと値のペア
中身を見るとスライドのような形で値が含まれています
#52: そんな感じで、Postをうけたら proactive hello と返信するようなアプリとなっているので、実行してみます。
デバッグ実行し、Bot Frameworkを起動します。#53: UrlにPostすると、メッセージが届きます。
これを公開し、Teamsにつなげて動作確認をしていきます。#54: 罢别补尘蝉にインストール后、同じように鲍搁尝に笔辞蝉迟すると、メッセージが届きます。#55: 次に、このBotをチームに追加して動作確認をしてみます。
アプリマニフェストのスコープにTeamsが追加されていることをかくにんして、チームにアプリを追加します。
追加した後、そのチャネルに移動します。
Welcomeメッセージは、Bot以外のメンバーが追加されたときに送信しているため
ここでは送信されませんが、
Botにメンションしてメッセージ送信すると、アプリが追加されていることがわかります。
#56: 同じく、URLにPostして動作確認してみます。
無事にメッセージ受信することがわかりました。
ここまでの動作で、
?チームにアプリを追加すると、チームの全員がBotを使えるようになること
?チャネルの投稿時は、Botに話しかけるにはメンション付きで話しかける必要がある
ことがわかります。
また、 Welcomeメッセージは、Bot以外のメンバーが追加されたときに送信しているため表示されないと先ほど言いましたが、
そのタイミングでConversationReferenceを取得している（または会話したとき）ので、一度誰かが話しかけないと ConversationReferenceを取得できず、メッセージ送信対象となりません。#57: ここまでのBotは、Postすると全員にメッセージを送信していたので、
?個人を特定して
?チャットでメッセージを送信できる
ように手を入れていきます。見た目も少しだけ整えていきます。
#58: まず、個人を特定できるようにしていきます。
?Postの時に、引数で送信したいメンバーを指定するようにします。
ここでは、特にチェックなどしていませんがUserPrincipalNameでの指定として進めます。 ?プログラムに入りまして、 会話タイプが “チャネル” のConversationReferenceからは、チームに所属するメンバー全員をとれるので1件取得します。#59: TeamsInfoクラスのGetMembersAsyncメソッドでチームメンバー全体を取得できます。 取得したチームメンバー全体から、Post時に指定したメンバーのみを送信対象とするような動作にします。 使っているメソッドや内容は若干とっつきにくいですが、要はチームのメンバー全員をループしつつ、送信する人リストにあるメンバーにだけ順次送信するようなよくある動作です。#60: 次に、送信するときにメッセージをチャットで送る方法です。
プロアクティブメッセージを送信するときは、前に申し上げた通り
ContinueConversationAsync メソッドを使い、その引数のコールバックで送信内容を設定します。 そのコールバックで、CreateConversationAsyncメソッドを使用して送信メッセージを指定していくことにより、メッセージを個人宛チャットに送信することができます。 ここでもややこしいことを申し上げまして、ソースコードもややこしそうですが 赤く囲ったあたりは、スライドのサンプルをほぼそのまま使っていますので、
私自身、こう書けばチャット送信できるんだ、くらいの理解で進めています。#61: こちらサンプルのソースコードです。#62: さて、最後にメッセージの見た目も整えたいというご要望もありましたので、
AdaptiveCardに少しだけ触れます。
AdaptiveCardは、AdaptiveCardで検索すると、AdaptiveCard.io というサンプル盛沢山のMSのサイトが出てきますので、詳しいことはそちらをご参考にしてください。
というわけで、BotではAdaptiveCardが使えますので、 Jsonで保存して、また難しいことかいていますが、メッセージ送信時の引数に指定することにより送信できます。#63: ここまでできましたので、動作確認を行います。
赤文字で書いていますが、Teams固有の機能は BotEmulatorでは確認することができません。ここでは、チームメンバーの取得をしていますので、その部分が動作しないことになります。
従いまして、AzureにデプロイしてTeamsにインストールしてしまいます。
ちなみに、一度デプロイ?インストールが住んでいたら、VSで[発行]するだけでアプリ更新されます。
発行が住みましたら、URLにPostしてみます。 無事表示されて、とりあえず完成となります。#64: というわけでここまでをご覧顶いたら、この感じで进めることになりました。#65: 実は少し残念ですが課題があります。
しつこくてすみませんが、ConversationRerecenceのディクショナリは、メモリが破棄されてしまうので、このように使う場合は永続的なメモリに保存するほうが良いです。
また、今の作りだと、誰かがBotに話しかけないとConversationReferenceを取得できないので、確実に保存する方法を考える必要があります。運用かプログラム内かどちらかですね。
また、デバッグについてですが 本気で開発するにあたっては、Teamsにつなぎ、かつ、ローカルデバッグができる環境を整えたほうが良いです。
きのう探しましたら、ちょまどさんがqiitaに書いていましたので、そのあたり参照にしてみると私の話よりよっぽど分かりやすくてよいかなと思います。#66: このあたりを参考にしてすすめました。#67: ありがとうございました。
![Incoming Webhook
コネクタ設定
1. メッセージを送信したいチャネルに移
動して、トップナビゲーションバーから
[(…)] をクリック
2. ドロップダウンメニューから[コネクタ]を
選択](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-7-320.jpg)
![3. コネクタの一覧から、「Incoming
Webhook」を選択し、[追加]をク
リック
※すでに追加されている場合は、
[構成]ボタンをクリック
Incoming Webhook
コネクタ設定](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-8-320.jpg)
![4. Incoming Webhookの[追加]
をクリック
※すでに追加済みの場合は、この
画面は省略
Incoming Webhook
コネクタ設定](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-9-320.jpg)
![7. URLが表示されているので、コピー
して保存する
8. [完了]ボタンをクリック
9. 構成済みとして表示されることを確
認したら、コネクタ設定完了
Incoming Webhook
コネクタ設定](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-11-320.jpg)
![Teams用Bot作成
①開発環境の作成
1. Visual Studio 2019に、
Microsoft Bot Framework v4
をインストール
① Visual Studio 2019(以降VSと記載)を
起動し、拡張機能 → 拡張機能の管理を
開く
② [Bot Framework]と入力し検索
③ [Bot Framework v4 Templates for
Visual Studio] が表示されるので、ダウン
ロードする](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-20-320.jpg)
![Teams用Bot作成
①開発環境の作成
3. プロジェクト テンプレートよりBotを
作成し動作確認
① VSを起動し、[新しいプロジェクトの作成]
で開始
② プロジェクトテンプレートで「Bot
Framework」を検索し、
Echo Bot(Bot Framework v4
‐ .NET Core 3.1) を選択
③ プロジェクト名などを入力し、[作成]クリック
④ 作成されたプロジェクトには実行可能なソー
スコードが含まれているため、そのまま
Debug実行
⑤ 実行されるので、Webブラウザで確認する
またはWebブラウザが自動で開く
Url：http://localhost:3978/](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-22-320.jpg)
![Teams用Bot作成
①開発環境の作成
3. プロジェクト テンプレートよりBotを
作成し動作確認
⑥ Bot Framework Emulatorを起動し、
[Open Bot]をクリック
⑦ Bot URLに下記入力し、[Connect]をク
リック
Bot URL：
http://localhost:3978/api/messages/
(起動したサイトURL ＋ “api/messages/“)
⑧ [Live chat]タブが開き、Botからのメッ
セージが表示される
⑨ 開発環境完成！](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-23-320.jpg)
![Teams用Bot作成
③AzureにBotをデプロイ
1. Bot チャンネル 登録を作成
① ブラウザでAzure Portalに接続して、リ
ソースグループを開く
② [追加]をクリック
③ 検索窓に[Bot]と入力し検索すると、[Bot
Channels Registration]パネルが表示
されるのでクリックし、開いた[作成]をクリック
④ 開いた[ボット チャンネル登録]画面で 必
須項目を入力
⑤ [Microsoft アプリIDとパスワード][アプリ
IDとパスワードの自動生成]をクリックし、
[新規作成]をクリックする
⑥ [App Registration Portal でアプリ ID
を作成する]リンクをクリック
? ボット ハンドル：任意の名称
? 場所：日本
? 価格レベル：F0
? メッセージング?エンドポイント：空欄
? Application Insights：オフ](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-27-320.jpg)
![Teams用Bot作成
③AzureにBotをデプロイ
1. Bot チャンネル 登録を作成
⑦ [アプリの登録]が開くので、[新規登録]をク
リック
⑧ [アプリケーションの登録]が開くので、入力
し[登録]ボタンをクリック
? 名前：ボット ハンドルと同じ
? サポートされているアカウントの種類：適切なものを選択
? リダイレクトURI：省略](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-28-320.jpg)
![Teams用Bot作成
③AzureにBotをデプロイ
1. Bot チャンネル 登録を作成
⑨ [アプリケーションの概要]が開くので、[アプリ
ケーション(クライアント)ID」の値をコピーし
て保存
⑩ 左パネルの[証明書とシークレット]をクリック
? [証明書とシークレット]が開くので、[新しい
クライアントシークレット]をクリック
? [クライアント シークレットの追加]が開くので、
説明と有効期限を入力し
[追加]をクリック
? [証明書とシークレット]に戻り、クライアント
シークレットの一覧に追加したものが表示さ
れるので、値をコピーして保存
※画面移動すると消えてしまうので注意](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-29-320.jpg)
![Teams用Bot作成
③AzureにBotをデプロイ
1. Bot チャンネル 登録を作成
? [新しい Microsoft アプリ ID の作成]に
戻り、入力して[OK]をクリック
? [ボット チャンネル登録]に戻り、[作成]をク
リック
? [ボット チャンネル登録]作成完了
? Microsoft アプリ ID：保存したアプリケーションID
? パスワード：保存したクライアント シークレット](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-30-320.jpg)
![Teams用Bot作成
③AzureにBotをデプロイ
2. IDプロバイダー を作成
① Azure Portalで、[Azure Active
Directory]を選択
② 左パネルで[アプリの登録]をクリック
③ [新規登録]をクリック
④ [アプリケーションの登録]が開くので、入力
して[登録]をクリック
⑤ 作成した内容が表示されるので、アプリケー
ション(クライアント)IDとディレクトリ(テナン
ト)IDをコピーする
⑥ 左パネルの[証明書とシークレット]をクリック
IDプロバイダーについて
https://docs.microsoft.com/ja-jp/azure/bot-service/bot-
builder-concept-identity-providers?view=azure-bot-service-
4.0&tabs=adv1%2Cga2
IDプロバイダーとは：
M365にBot内からログインするために作成したので、今
回は省略します。
※シングル サインオン (SSO) 機能が有効になり、アプリ
ケーションはセキュリティで保護された複数のリソースにアク
セスできるようになる
? 名前：任意のアプリケーション名を設定(一意であることに注意)
? リダイレクトURI：[Web]を選択
https://token.botframework.com/.auth/web/redirect](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-31-320.jpg)
![Teams用Bot作成
③AzureにBotをデプロイ
2. IDプロバイダー を作成
⑦ [証明書とシークレット]画面が開くので、
[新しいクライアントシークレット]をクリック
⑧ [クライアントシークレットの追加]をが開くの
で入力し、[追加]をクリック
⑨ 作成したクライアントシークレットが表示され
るので、値をコピーする](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-32-320.jpg)
![Teams用Bot作成
③AzureにBotをデプロイ
2. IDプロバイダー を作成
⑩ Azure Portalで、作成した[Bot チャンネ
ル登録]を再度開き、左パネルの[設定]を
クリック
? [設定]が開くので、下部にある [OAuth接
続設定]の[設定の追加]をクリック
? [新しい接続設定]を開き、
サービスプロバイダー：Azure Active
Directory を選択
? 入力項目が追加で表示されるので、入力
し[保存]をクリック ? 名前：任意
? Client ID: IdプロバイダーアプリのアプリケーションID
? Client Secret：Idプロバイダーアプリに設定したクライ
アントシークレット
? Grant Type：authorization_code (固定)
? Login URL：
https://login.microsoftonline.com (固定)
? Tenant Id：IdプロバイダーアプリのテナントID
? Resource URL：
https://graph.microsoft.com/ (固定)
? スコープ：空欄](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-33-320.jpg)
![Teams用Bot作成
③AzureにBotをデプロイ
2. IDプロバイダー を作成
? [設定]に戻り、OAuth接続設定 に保存
した設定が表示される
? 保存した設定をクリックすると、再度設定画
面が開く
? [接続テスト]をクリックして接続テストを行う
i. アカウントを選択する画面が表示されるので、
接続するアカウントを選択
ii. 初回はアクセス許可画面が表示されるので、
[承諾]をクリック
iii. アクセス成功すると成功画面が表示される
? IDプロバイダー作成完了](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-34-320.jpg)
![Teams用Bot作成
③AzureにBotをデプロイ
4. Webサービスの作成とアプリの発行
※ここではVSで行います
① VSでBotプロジェクトを開き、ソリューション
エクスプローラでプロジェクトを左クリック →
発行 をクリック
② [公開]windowが開くので、[Azure]をク
リックして[次へ]
③ [Azure App Service(Windows)]をク
リックして[次へ]
④ [新しい Azure App Serviceを作成]を
クリック
⑤ 必要な項目を入力し、[作成]をクリック
⑥ 再度[公開]の画面が表示されるので、作
成したサービスを選択して[完了]をクリック
? サブスクリプションを選択
? リソースグループを選択(Bot チャンネル登録と同じリソースで問題ない)
ホスティングプランを選択または作成
※プランは Freeで問題ない](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-36-320.jpg)
![Teams用Bot作成
③AzureにBotをデプロイ
4. Webサービスの作成とアプリの発行
⑦ Visual Studioの[公開]で
作成したApp Serviceを選択し、[発行]
をクリック
⑧ 正常に公開されたら、サイトURLを開き確
認する
⑨ Bot チャンネル登録に、Webサービスのエ
ンドポイントを登録
i. Azure Portalに接続し、
作成した[ボット チャンネル登録]を開く
ii. 左パネルの[設定]をクリック
iii. [メッセージング エンドポイント]に、
Webサービスを公開したURL ＋
/api/messages
を入力して、[保存]をクリック](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-37-320.jpg)
![Teams用Bot作成
③AzureにBotをデプロイ
4. Webサービスの作成とアプリの発行
⑩ Bot チャンネル登録 を Teamsに接続
i. Bot チャンネル登録 左パネルの 「チャンネ
ル」をクリック
ii. Teamsのアイコンをクリックする
iii. Microsoft Teamsを構成 画面が開くの
で、[保存]をクリック
iv. [サービス条件]という画面が出たら
[Agree]をクリック
v. Teamsに接続していることを確認](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-38-320.jpg)
![Teams用Bot作成
④Teamsにインストール
1. アプリマニフェストを作成
① 下記サンプル内の、
[TeamsAppManifest]フォルダと配下の
ファイルを取得し、プロジェクトに追加する
https://github.com/microsoft/Bot
Builder-
Samples/tree/master/samples/cs
harp_dotnetcore/46.teams-auth
② manifest.json を修正 (次ページ参照)
③ iconは必要に応じて変更する
※ここではこのまま使用
サンプル](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-40-320.jpg)
![Teams用Bot作成
④Teamsにインストール
2. Teamsにインストール
① Botプロジェクトに追加した
[TeamsAppManifest]フォルダに含まれ
る下記3ファイルを1つのZipファイルにする
? manifest.json
? icon-color.png
? icon-outline.png
② 上記3つのファイルを選択して、1つのZip
ファイルにする
③ Teamsクライアントを開く
④ 左パネルの下部にある[アプリ]アイコンをク
リック
⑤ 開いたパネルの下部にある[カスタム アプリ
をアップロード]をクリック](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-42-320.jpg)
![Teams用Bot作成
④Teamsにインストール
2. Teamsにインストール
⑧ 確認画面が開くので、[追加]をクリック
⑨ Teamsにアプリが追加される
⑩ 左パネルからクリックして表示し、動作確認
を行う](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-44-320.jpg)
![Teams用Bot作成
④Teamsにインストール
2. Teamsにインストール
⑩ チームにアプリを追加する場合は、以下手
順で行う
i. [アプリ]からインストールしたアプリをクリック
ii. [開く]のドロップダウンリストを開く
iii. [チームに追加]が表示されるのでクリック
iv. インストールするチャネルを入力
v. [ボットを設定]をクリック
? アプリを追加したチームの[チームの管理]画
面で、インストールしたアプリが参照できるこ
とを確認](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-45-320.jpg)
![Teams用Bot作成
⑤プロアクティブメッセージ
送信Bot作成
1. プロアクティブメッセージBot作成
② [NotifyController]クラスとは？
? ApiController属性(WebApi)
? プロアクティブメッセージを送信するためのクラ
ス
? Post/Getを受け取り実行
? １つのBotにApiController属性のクラスを
複数作成することができる
③ 送信先を特定し、メッセージ送信するため
に必要なもの
? Botアダプター
BotBuilder からチャネルに対する Activity
の送受信はアダプター経由で行う
? ConversationReference
プロアクティブメッセージを送信するユーザーと
会話の特定のために使用
会話で受信したActivityから取得
? アプリケーションId
どのアプリケーションに対して通信しているかを
示す
Post/Get
URL指定](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-48-320.jpg)
![Teams用Bot作成
⑤プロアクティブメッセージ
送信Bot作成
1. プロアクティブメッセージBot作成
④ [NotifyController]クラスのメソッド
? Get メソッド
? Post/Getを受け取ったときに起動
? ここでは、Postのみ有効とするため
[HttpPost]属性を追加
? ConversationReferenceが一致する
送信先にメッセージ送信するよう処理
? BotAdapterの
ContinueConversationAsyncメソッド
が、プロアクティブメッセージを送信する
? BotCallBack メソッド
? 特定した送信先に、メッセージ送信
(ここでは proactive hello 固定)](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-49-320.jpg)
![Teams用Bot作成
⑤プロアクティブメッセージ
送信Bot作成
2. 個人を特定してメッセージを送る
Bot作成
② メッセージをチャットで送るには？
? プロアクティブメッセージを送信するメソッド、
ContinueConversationAsync の
コールバックで
CreateConversationAsync メソッドを
使用してメッセージを指定する
? [チャットで送信する]部分は、以下サンプル
のソースコードから作成しています
/csharp_dotnetcore/57.teams-
conversation-
bot/Bots/TeamsConversationBot.c
s](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-59-320.jpg)
![Teams用Bot作成
⑤プロアクティブメッセージ
送信Bot作成
2. 個人を特定してメッセージを送る
Bot作成
④ 動作確認
? Teams固有の機能はBot Framework
Emulator では確認することができません
i. Azureにデプロイする
ii. Teamsにインストールする
iii. デプロイ?インストールが済んでいてコードの
修正をした場合は、ⅰ、ⅱは飛ばしてVS
で再度[発行]を行う
iv. URLにPostする
v. Teamsで動作確認をする
⑤ 完成！](https://image.slidesharecdn.com/0819teams-200819143341/85/Microsoft-Teams-62-320.jpg)
