Teams の タブ、ボット、拡張機能を使いこなす
By Mirko Peters ·
ポッドキャストへようこそ。日々のコラボレーション基盤を生産性の高いエンジンに変えたいと考えたことがある方は、ぜひ読み進めてください。今回は前回のエピソードを発展させ、Microsoft Teams アプリ開発の基礎を掘り下げます。タブ、ボット、メッセージング拡張機能という中核となる 3 つの要素を組み合わせることで、チームのワークフローを効率化し、コンテキストの切り替えによる手間を解消できます。
Automatically translated with AI from the original post. Read the English original
ポッドキャストへようこそ。日々のコラボレーション基盤を生産性の高いエンジンに変えたいと考えたことがある方は、ぜひ読み進めてください。今回は前回のエピソードを発展させ、Microsoft Teams アプリ開発の基礎を掘り下げます。タブ、ボット、メッセージング拡張機能という中核となる 3 つの要素を組み合わせることで、チームのワークフローを効率化し、コンテキストの切り替えによる手間を解消できます。
関連する音声エピソードをまだお聴きでない方は、Build Microsoft Teams Apps with Bots, Tabs, and Extensions もぜひご覧ください。そのエピソードでは、Microsoft 365 エコシステムを活用する実際のシナリオを解説しています。本ブログ記事では、それらの概念を掘り下げ、開発の手順を追うとともに、セキュリティ、デプロイ、UI/UX デザインのベストプラクティスを見ていきます。
経験豊富なエンタープライズ開発者の方も、チームのプロセスを自動化したいローコードの愛好者の方も、これらの基礎コンポーネントを習得すれば、組織の仕事の進め方が変わるはずです。
Microsoft Teams アプリ開発の概要
Microsoft Teams は、単純なチャットおよび会議クライアントの枠を大きく超えています。現在では、現代的な働き方のための包括的なプラットフォームです。カスタムアプリ開発により、組織は社内ツールと日常的なコミュニケーションの間のギャップを埋めることができます。従業員に 10 もの Web アプリケーションを行き来させる代わりに、データ、ダッシュボード、自動化されたアクションを会話の流れの中に直接届けることができます。
Teams 向けのアプリを構築するということは、豊富なエコシステムを活用するということです。Web ページを常設のタブとして公開したり、定型的な依頼に対応する会話型 AI エージェントをデプロイしたり、作成ボックスを離れることなく外部データベースへの照会をユーザーに許す、高機能なメッセージング拡張機能を作成したりできます。最新の開発者向けツールキットにより、スキャフォールディング、ローカルデバッグ、合理化されたクラウドへのデプロイが提供され、この取り組みはこれまで以上にスムーズになっています。
カスタムアプリ構築の前提条件
最初のコードを書く前に、開発環境を構成し、適切な管理者権限を確保しておく必要があります。カスタムアプリの開発では、コンプライアンスを確保し、テストを円滑に進めるために、計画的なアプローチが求められます。
Microsoft 365 アカウントと管理者の設定
Microsoft Teams の開発者向けプラットフォームにアクセスするには、職場または学校の Microsoft 365 アカウントが必要です。さらに、組織の IT 管理者が、カスタムアプリのアップロードを許可するポリシーを有効にしておく必要があります。テナントの設定を確認または変更するには、次の手順に従ってください。
- Teams 管理センターにサインインします。
- [Teams アプリ] に移動し、[セットアップ ポリシー] を選択します。
- 新しいポリシーを追加するか、既存のポリシーを編集します。
- [カスタム アプリのアップロード] オプションを有効にします。
- ポリシーを保存し、対象のユーザー グループに適用します。
ヒント: プロジェクトの初期段階で必ず IT 管理者と調整し、サイドロードおよびカスタムパッケージのテストに必要な権限がアカウントに付与されていることを確認してください。
必要なツールとソフトウェア
ローカルマシンには、Teams アプリのコンパイル、パッケージ化、デバッグに必要な特定のツールが必要です。以下の表に、必須のソフトウェア構成を示します。
| ツール | 用途 |
|---|---|
| Visual Studio Code | JavaScript、TypeScript、または Web フレームワーク開発に使用する必須のコードエディター。 |
| Microsoft Teams Toolkit | プロジェクトのスキャフォールディング、ローカルデバッグ、クラウドリソースのプロビジョニングを簡素化します。 |
| Node.js | ローカルのアプリサービスを実行するために必要な、バックエンド向け JavaScript ランタイム環境です。 |
| ngrok (または同等のトンネリングツール) | Teams の Webhook 連携のために、ローカルの開発サーバーを安全にインターネットへ公開します。 |
Teams アプリの主要機能を理解する
すべてのカスタムソリューションは、プラットフォームが提供する 1 つ以上の中核機能に依存しています。適切な機能を選ぶことで、アプリをビジネス要件に合わせることができます。
- タブ: チームのチャネル、チャット、または個人用アプリのスコープに直接埋め込まれる Web ベースのビューです。ダッシュボード、プロジェクトトラッカー、社内 Web ポータルの掲載に適しています。
- ボット: ユーザーの問い合わせに応答し、自動化されたタスクを実行し、プロアクティブな通知を送信する会話型インターフェイスです。
- メッセージ拡張機能: 作成ボックスに組み込まれたショートカットで、外部システムの検索、インタラクティブなフォームへの入力、共有されたリンクのプレビュー表示をユーザーが行えるようにします。
これらの機能を1つのアプリ パッケージにまとめることで、複数のユースケースを同時に処理する、一貫性のあるユーザー エクスペリエンスを構築できます。
Teams のメッセージ拡張機能を使いこなす
メッセージ拡張機能は、会話を外部のデータ ソースと結び付けることで、通常のチャット操作をさらに便利にします。実装できる主な拡張機能は 3 種類です。
- 検索コマンド: CRM や在庫データベースなどの外部システムに問い合わせ、構造化された結果をチャット メッセージに直接埋め込みます。
- アクション コマンド: モーダル ポップアップ フォームを表示して、ユーザー入力の収集、データの送信、動的なコンテンツの生成を行います。
- リンクのプレビュー: チャットで共有されたプレーン テキストの URL を、詳細なプレビューを備えたリッチでインタラクティブなカードに自動的に変換します。
Microsoft Teams のメッセージ拡張機能のようなソリューションでは、非同期のリンクのプレビューと検索コマンドによって、社内に散在する複数のシステムで情報を探す時間を大幅に削減できることがわかります。
開発の段階別プロセス
最初の Teams アプリケーションの作成は、初期化からパッケージ化、テストまで、予測可能なライフサイクルに従って進みます。
- プロジェクトの雛形作成: Visual Studio Code の Teams Toolkit 拡張機能を使用して、スターター プロジェクトのテンプレートを生成します。
- マニフェストの構成: JSON マニフェスト ファイルで、アプリの ID、アイコン、機能を定義します。
- コア機能の開発: React または一般的な Web テクノロジを使用してフロントエンドのタブを開発し、Bot Framework SDK を使用してボットのロジックを実装します。
- ローカルでのテスト: ローカル サーバーを起動し、ngrok トンネルを確立して、アプリ パッケージを個人用の Teams クライアントにサイドロードします。
- 配布用のパッケージ化: マニフェストとアイコンを .zip ファイルに圧縮し、テナント全体への展開やアプリ ストアへの提出に備えます。
Microsoft Graph と API の統合
カスタム アプリを真にインテリジェントにするには、Microsoft Graph に接続することをお勧めします。Graph は単一のエンドポイントを提供し、ユーザー プロファイル、予定表のイベント、ファイル、チャット履歴など、Microsoft 365 全体の組織データにアクセスできます。
Graph API エンドポイントを活用すると、アプリは新しいチャネルを自動的にプロビジョニングしたり、チャット スレッドにシステム アラートを投稿したり、Azure AD 認証を通じてエンタープライズ レベルのセキュリティ ポリシーを適用したりできます。外部の REST API もボットのワークフローに組み込めるため、Teams を、社内のすべてのエンタープライズ ソフトウェアを一元的に扱う窓口として活用できます。
ローカルでのテストとデバッグ
本番環境にコードを公開する前に、ローカルでのテストは不可欠です。Teams はクラウド上で動作し、Webhook を介してアプリと通信するため、ngrok のような安全なトンネリング ツールを使用して、ローカル環境を公開 HTTPS URL にマッピングする必要があります。
テスト中は、構成の競合を防ぐために、開発者それぞれがアプリ パッケージの独自のインスタンスをサイドロードする必要があります。Microsoft Edge または Google Chrome のブラウザー開発者ツールを使用して、ネットワーク トラフィックを調べたり、クライアント側のスクリプトをデバッグしたり、レスポンシブ レイアウトを調整したりしてください。
デプロイと配布の戦略
アプリの十分なテストが完了したら、ユーザーへの配布方法を決定する必要があります。
- サイドローディング: 初期テストや小規模な開発チームに最適です。
- 組織のアプリ カタログ: 社内のガバナンスと広範な展開のために、アプリ パッケージをテナントのプライベート アプリ ストアにアップロードします。
- Microsoft Teams ストア: パブリックな検索と世界規模のエンタープライズ配布のために、ソリューションを Partner Center に提出します。
正式なレビューにアプリを提出する前に、必要なプライバシー ポリシー、利用規約、サポート リンクがすべて公開され、誰でもアクセスできる状態になっていることを確認してください。
UI と UX のベスト プラクティス
優れたユーザー インターフェイスは、組織全体での高い採用率につながります。アプリを Teams にネイティブに溶け込ませるため、次のデザイン ガイドラインに従ってください。
- Segoe UI のタイポグラフィを使用し、ライト、ダーク、ハイコントラストのテーマに対応することで、Microsoft のデザイン標準に準拠します。
- タブやタスク モジュールには Fluent UI React コンポーネントを活用し、Teams の他の部分と視覚的な一貫性を保ちます。
- メッセージや通知には Adaptive Cards を使用し、デスクトップ、Web、モバイルのいずれのクライアントでも UI が正しく表示されるようにします。
- スクリーン リーダーへの対応、キーボード操作、画像への適切な代替テキストの設定など、アクセシビリティ機能を組み込みます。
セキュリティ、コンプライアンス、認証
エンタープライズ アプリケーションは、厳格なセキュリティ プロトコルに従う必要があります。アプリは常に Microsoft Entra ID (旧称 Azure AD) を使用して保護し、トークンベースの認証には OAuth 2.0 を実装してください。
最小特権の原則を徹底し、アプリが実際に必要とする Graph のアクセス許可だけを要求してください。すべてのデータについて、転送中と保存時の両方で暗号化されていることを確認してください。また、GDPR、HIPAA、ISO フレームワークなど、組織が遵守すべきコンプライアンス標準についても理解しておいてください。
Teams アプリの保守と更新
アプリ開発はデプロイで終わりではありません。長期的に成功させるには、継続的な保守、パフォーマンスの監視、ユーザーのフィードバックに基づく反復的な改善が欠かせません。
新機能の追加やバグ修正を行うたびに、アプリ マニフェストでバージョン管理の方針を明確に定めてください。Azure Application Insights を活用してテレメトリを追跡し、エラー率を監視し、機能の利用状況を測定しましょう。最後に、ユーザーが提案を共有したり問題を報告したりしやすいよう、Teams 内の専用フィードバック チャネルなど、わかりやすいサポート手段を用意してください。
まとめ
タブ、ボット、メッセージ拡張機能を使いこなせば、組織のコラボレーションの在り方を変える大きな可能性が開けます。構造化された開発プラクティスを守り、セキュリティを優先し、直感的なユーザー インターフェイスを設計することで、日々のワークフローを実際に効率化するカスタム ソリューションを構築できます。
実践的な実装についてさらに深く学ぶには、関連するポッドキャスト エピソード Build Microsoft Teams Apps with Bots, Tabs, and Extensions をぜひお聴きください。Microsoft 365 の開発者向けリソースを確認し、開発ツールキットを準備して、今日から最初のカスタム Teams アプリの構築を始めてみてください。