第３回 Teamsの特徴的なインターフェース

こんにちは。マイクロソフトでカスタマーサクセスマネージャーをしております沖原です。

 前回の記事ではTeamsプラットフォーム、また業務のアプリ化のコンセプトを紹介しましたが、今回は業務をアプリ化する際に、Teamsがプラットフォームとして提供するユーザーインターフェースの機能を紹介します。

 業務をアプリ化するといっても業務ロジックをTeams上に作るわけではなく、業務ロジックは、いわゆるLOBアプリケーション、SharePoint、Power Apps、Power Automate、その他サードパーティアプリなどで動いており、Teamsはそれらの業務アプリのユーザーインターフェースを提供する、というのがTeamsプラットフォームの考え方です。ですので、いかにさまざまなシナリオに合うユーザーインターフェースを提供できるかどうかがカギになります。

  
#代表的なユーザーインターフェース
代表的なユーザーインタフェースは６つあります。

![TeamsUI.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1552184/f5238ef8-1a66-2f94-d394-55cc9fbc00a1.png)




 

**タブ：** タブはTeamsアプリ内に業務アプリの画面を表示させるための機能で、その画面上で業務アプリの作業を実行することができます。タブは、Teamsアプリ内のチャット、チャネルそして会議に追加することができます。

**ボット：** 業務アプリとのやりとりを、ボットを介して行うことができます。例えば、業務アプリからデータを取得・表示したり、逆にボットを通じて業務アプリのデータ更新を指示することもできます。ボットは、チャット、チャネルそして個人用アプリに表示させることができます。シナリオによっては、ボット上でアダプティブカードを利用するとより便利になります。

**アダプティブカード：** アダプティブカードは、文字情報や画像のほか、テキストボックスやボタンなどの入力系の要素で構成することができます。アダプティブカードはチャットやメッセージ拡張機能などに表示し、そこから業務アプリに対するアクションを実行することができます。メッセージを送るだけでなく、ちょっとしたアクションをチームメンバーに依頼する際などにとても便利です。

**メッセージ拡張機能：** チャットやチャネルでメッセージを編集中にその場で業務アプリから特定のデータを取り出してメッセージに挿入することができます。例えばメッセージの文脈を伝えるために業務アプリの関連情報が必要な時に、業務アプリに切り替えることなくデータを検索・挿入することも可能です。

**タスクモジュール：** Teamsアプリ上にポップアップ画面を表示し、そこからデータの入力や特定のアクションを実行させることができます。タスクモジュールはタブ、ボット、アダプティブカード、メッセージ拡張機能から呼び出すことができます。

**通知：** Teamsアプリのアクティビティフィードに業務アプリからの通知を表示させることができます。

 

#実際の利用例
次に具体的なTeams連携の例を見てみましょう。実際の利用例を見た方が理解が進むと思います。

ユーザーインターフェースの活用例として、Jiraというタスク管理アプリ（サードパーティアプリ）をTeamsと連携させて活用しているシナリオです。

この例では新製品ローンチに向けたプロジェクトをTeamsを使って管理しています。今度新製品のウェビナーを開催することになり、そのタスクをJiraで管理することにしました。プロジェクトはTeamsで管理しているので、Jiraの利用もTeamsから実施しています。

 

**タブの例：**

まずタスクの全体像を確認するにはJiraの課題一覧を見るわけですが、課題一覧はTeamsのタブに表示できるので、Jiraアプリを個別に立ち上げることなく、Teamsアプリ内で課題一覧を参照できます。もちろんそのまま各課題の編集作業も可能です。アプリの切り替えの必要が無くなるので、これだけでもかなりの生産性向上が見込めそうですね。




![tab.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1552184/d3a3ab66-ea38-a367-79ab-c85c05ba1478.png)




**ボット：**

作業中のタスクの情報を更新したい場合に、ボットを使うとTeamsアプリ内からJira上のタスクを検索し、検索結果からそのままデータの更新作業に取り掛かることができます。　　ボットはこの例以外にもQAボット、業務アプリからの情報提供のような一般的な使い方はもちろん、アダプティブカードと組み合わせることにより、業務アプリに対するさまざまなアクションを作りこむことができるので、柔軟性・拡張性の高いユーザーインターフェースだと言えます。



![bot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1552184/b250fb15-8591-7b98-611f-cf8f3b78810d.png)




**アダプティブカード：**

Jiraのタスクを編集する際、Teamsアプリ上のボットに表示されるアダプティブカードから直接Jiraのデータを更新することができます。　このようにアダプティブカードを使うと、Teams上からアプリに対する単純なアクションを実行できます。　承認依頼、一行コメントのリクエスト、特定URL参照を促すなど、さまざまな場面で活用でき、また受け手はすぐにアクション可能なので業務のスピード向上がのぞめます。



![adaptive card.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1552184/dee97751-b84a-0257-1937-7852b20157ab.png)



 

**メッセージ拡張機能：**

あるタスクについてチームメンバーにメッセージを送る際、文脈を伝えるためにJiraのタスク情報をリンクさせたいという時、メッセージ拡張機能のボタンからJiraタスクの検索ウィンドウを表示させ、タスクを検索・挿入することができます。　このように、メッセージ拡張機能を使うと、メッセージの編集中に業務アプリを個別に開くことなくデータにアクセスし、そのままメッセージに挿入する、という流れを実現できます。



![messaging extension.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1552184/27c48750-9814-53d8-9241-5c35c900cf01.png)



Teamsの投稿において、メッセージとともに、関連するJiraのタスク情報をリンクさせて投稿すると、このようになります。



![messaging extension 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1552184/257ef7e7-f7cf-a945-a429-8a0863bd78e0.png)



#まとめ
 

以上のように、業務シナリオに応じて最適なユーザーインターフェースを提供することができるので、業務アプリをTeamsと連携させることで多くの仕事をTeams上で効果的に実行できるようになります。Teamsを中心に業務がより円滑に進められるようになるわけですが、これがTeamsがハブアプリと呼ばれる所以です。

みなさんもぜひ、既存の業務アプリ、これから開発するアプリを問わず、Teamsとの連携を進めてみてください。

開発における参考情報はこちら： [カスタム アプリの設計 - Teams | Microsoft Docs](https://docs.microsoft.com/ja-jp/microsoftteams/platform/concepts/design/design-teams-app-overview#app-capabilities)

(本記事は2021年6月時点の情報に基づきます）

**[-- 目次に戻る --](https://qiita.com/Masa_Sawamoto/items/72cc8679a9b2ea812d70)**