タブは、Microsoft Teamsに埋め込まれた Teams 対応の Web ページであり、Teams の開発を開始するための適切な方法です。 チーム内のチャネルの一部、グループ チャット、個々のユーザーの個人用アプリとして追加できます。
このチュートリアルでは以下を学習します。
-
Microsoft 365 Agents Toolkit (以前は Teams Toolkit と呼ばれる) を使用して新しいプロジェクトを設定する方法。
- タブ アプリをビルドする方法
-
アプリの構造
- Reactを使用した JavaScript のタブ部分
- 残りの機能と Node.js
- アプリをデプロイする方法
このステップ バイ ステップ ガイドは、Agents Toolkit を使用してタブを構築するのに役立ちます。 このガイドを完了すると、次の出力が表示されます。
前提条件
アプリをビルドして展開するための次のツールを必ずインストールしてください。
| インストール | 使用するには... | |
|---|---|---|
| 必須 | ||
| Visual Studio Code | JavaScript、TypeScript、または SharePoint Framework (SPFx) ビルド環境。 最新バージョンを使用します。 | |
| Microsoft 365 Agents Toolkit | アプリのプロジェクト スキャフォールディングを作成する Microsoft Visual Studio Code 拡張機能。 最新バージョンを使用します。 | |
| Node.js | バックエンド JavaScript ランタイム環境。 詳細については、「 プロジェクトの種類Node.js バージョン互換性テーブル」を参照してください。 | |
| Microsoft Teams | Microsoft Teams、チャット、会議、通話を 1 か所で行うためにアプリを通じて作業するすべてのユーザーと共同作業を行うことができます。 | |
| Microsoft Edge (推奨) または Google Chrome | 開発者ツールを備えたブラウザー。 | |
| Optional | ||
| Azure Tools for Visual Studio Code および Azure CLI | 保存されたデータにアクセスしたり、Azure で Teams アプリ用のクラウドベースのバックエンドをデプロイしたりするための Azure ツール。 | |
| React Chrome 用開発者ツールまたは Microsoft Edge 用 React 開発者ツール | オープン ソース React JavaScript ライブラリのブラウザー DevTools 拡張機能。 | |
| Microsoft Graph Explorer | Microsoft Graph エクスプローラー。Microsoft Graph データからクエリを実行できるブラウザー ベースのツール。 | |
| Teams の開発者ポータル | OrganizationやMicrosoft Teams ストアなど、Teams アプリを構成、管理、発行するための Web ベースのポータル。 |
ヒント
Microsoft Graph データを操作する場合は、Microsoft Graph エクスプローラーについて学び、ブックマークする必要があります。 このブラウザー ベースのツールを使用すると、アプリの外部で Microsoft Graph に対してクエリを実行できます。
開発環境を準備する
必要なツールをインストールしたら、開発環境を設定します。
Microsoft 365 Agents Toolkit のインストール
Microsoft 365 Agents Toolkit (以前は Teams Toolkit) は、アプリのクラウド リソースをプロビジョニングしてデプロイし、Teams ストアに発行するツールを使用して開発プロセスを簡素化するのに役立ちます。
エージェント ツールキットは、Visual Studio Code または Microsoft 365 Agents Toolkit CLI (以前は TeamsFx CLI) と呼ばれるコマンド ライン インターフェイスで使用できます。
Visual Studio Code を開き、 拡張機能 (Ctrl + Shift + X または ビュー>Extensions) を選択します。
検索ボックスに「 Microsoft 365 Agents Toolkit」と入力します。
[インストール] を選択します。
Microsoft 365 Agents Toolkit
アイコンが Visual Studio Code アクティビティ バーに表示されます。
Visual Studio Code Marketplace からエージェント ツールキットをインストールすることもできます。
Teams 開発テナントを設定する
テナントは、Teams のorganizationのスペースまたはコンテナーであり、チャット、ファイルの共有、会議の実行を行います。 この領域は、アプリをアップロードしてテストする場所でもあります。 テナントを使って開発する準備ができているかどうかを確認しましょう。
アプリのアップロード オプションを確認する
カスタム アプリを作成したら、[カスタム アプリのアップロード] オプションを使用してアプリを Teams に アップロードする 必要があります。 このオプションが有効になっている場合は、Microsoft 365 アカウントにサインインしてチェックします。
次の手順は、Teams でアプリをアップロードできるかどうかを確認するのに役立ちます。
Teams クライアントで、[ アプリ ] アイコンを選択します。
[アプリの管理] を選択します。
[ アプリのアップロード] を選択します。
[カスタム アプリのアップロード] オプションを探します。 オプションが表示されている場合は、カスタム アプリをアップロードできます。
注:
カスタム アプリをアップロードするオプションが見つからない場合は、Teams 管理者に問い合わせてください。
無料の Teams 開発者テナントを作成する (省略可能)
Teams 開発者アカウントをお持ちでない場合は、Microsoft 365 開発者プログラムに参加してください。
Microsoft 365 開発者プログラムに移動します。
[今すぐ参加] を選択し、画面の指示に従います。
ようこそ画面で、[E5 サブスクリプションの設定] を選択します。
管理者アカウントを設定します。 完了すると、次の画面が表示されます。
設定した管理者アカウントを使用して Teams にサインインします。 Teams に [カスタム アプリのアップロード] オプションがあることを確認します。
無料の Azure アカウントを取得します。
アプリをホストするか、Azureのリソースにアクセスする場合は、Azure サブスクリプションが必要です。 開始する前に無料でアカウントを作成してください。
これで、アカウントを設定するためのツールがすべて揃いました。 次に、開発環境を設定し、ビルドを開始しましょう。 最初に作成するアプリを選択します。
タブ アプリ用のプロジェクト ワークスペースを作成する
最初のアプリを作成して、Microsoft Teams アプリ開発を開始します。 このアプリは、タブ機能を使用します。
タブ プロジェクト ワークスペースを作成する
前提条件が整っている場合、始めましょう。
注:
表示される Visual Studio Code UI は Mac のものです。 エージェント ツールキットのバージョンと環境は、オペレーティング システムによって異なる場合があります。
Visual Studio Code を開きます。
Visual Studio Code アクティビティ バーの [Microsoft 365 Agents Toolkit
] アイコンを選択します。[Create a New Agent/App>Teams App]\(新しいエージェント/アプリTeams アプリの作成\) を選択します。
![スクリーンショットは、Teams Toolkit サイドバーの [新しいプロジェクトの作成] リンクの場所を示しています。](../assets/images/toolkit-v2/first-tab/create-project.png)
その他の Teams 機能を選択する
この例では、アプリ機能として [Tab] を選択します。
[既定のフォルダー] を選択して、プロジェクトのルート フォルダーを既定の場所に格納します。
既定の場所を変更するには、次の手順に従います。
[ 参照] を選択します。
![[ストレージの参照] を選択するスクリーンショット。](../assets/images/toolkit-v2/first-tab/select-browse.png)
プロジェクト ワークスペースの場所を選択します。
[ フォルダーの選択] を選択します。
アプリに適した名前を入力し、[Enter] を選択 します。
Teams タブ アプリは数秒で作成されます。
アプリが作成されると、エージェント ツールキットに次のメッセージが表示されます。
[ ローカル デバッグ ] を選択して、プロジェクトをプレビューできます。
Teams アプリを作成する簡単な要約。
Teams アプリを作成するためのこの短い要約をご覧ください。
タブ アプリのソース コードのツアーを開始する
Agents Toolkit には、アプリをビルドするためのすべてのコンポーネントが用意されています。 プロジェクトを作成したら、Visual Studio Code の エクスプローラー でプロジェクト フォルダーとファイルを表示できます。
![スクリーン ショットは、[構造] タブを示しています。](../assets/images/toolkit-v2/first-tab/folder-structure-tab-app.png)
任意の UI フレームワークを自由に選択できますが (またはまったく使用しないように選択することもできますが)、このサンプル テンプレート コードでは、React コンポーネントを使用したスキャフォールディングが提供されます。
Toolkit では、このディレクトリ構造内の項目のうち、次の項目を保持します。
| フォルダー | コンテンツ |
|---|---|
.vscode |
デバッグ用の VSCode ファイル |
appPackage |
アプリケーション マニフェストのテンプレート |
env |
環境ファイル |
infra |
Azure リソースをプロビジョニングするためのテンプレート |
src |
アプリケーションのソース コード |
次のファイルをカスタマイズし、実装例を示して作業を開始できます。
| File | コンテンツ |
|---|---|
index.html |
HTML ファイル。 |
src/Tab/App.css |
アプリの CSS ファイル。 |
src/Tab/App.tsx |
Tab ソース ファイル。
teamsjs SDK を呼び出して、アプリが実行されている Microsoft 365 アプリケーションのコンテキストを取得します。 |
src/index.ts |
Microsoft Teams SDK を使用してアプリを起動する。 |
vite.config.js |
Vite ビルド ツールの構成。 |
nodemon.json |
Nodemon がサーバーを監視して再起動するための構成。 |
Microsoft 365 Agents Toolkit 固有のプロジェクト ファイルを次に示します。 Github の完全なガイドにアクセスして、Microsoft 365 Agents Toolkit のしくみを理解できます。
| File | コンテンツ |
|---|---|
m365agents.yml |
これは、Microsoft 365 Agents Toolkit のメイン プロジェクト ファイルです。 プロジェクト ファイルには、プロパティと構成ステージ定義という 2 つの主要な要素が定義されています。 |
m365agents.local.yml |
これにより、ローカル実行とデバッグを有効にするアクションで m365agents.yml がオーバーライドされます。 |
最初のタブ アプリをビルドして実行する
Agents Toolkit を使用してプロジェクト ワークスペースを設定したら、タブ プロジェクトをビルドします。 Microsoft 365 アカウントにサインインする必要があります。
Microsoft 365 アカウントにサインインする
Microsoft 365 アカウントを使用して Teams にサインインします。 Microsoft 365 開発者プログラム テナントを使用している場合は、Microsoft 365 アカウントは、登録中に設定した管理者アカウントです。
- Visual Studio Code を開きます。
- サイドバーで [Microsoft 365 Agents Toolkit ] アイコンを選択します。
- [資格情報 を使用して M365 にサインインする ] を選択します。 既定の Web ブラウザーが開き、アカウントにサインインできます。
- メッセージが表示されたらブラウザーを閉じて、Visual Studio Code に戻ります。
- Visual Studio Code 内の Agents Toolkit に戻ります。
サイドバーの [アカウント] セクションに、Microsoft 365 アカウントの名前が表示されます。 Microsoft 365 アカウントでカスタム アプリのアップロードが有効になっている場合、エージェント ツールキットには カスタム アプリのアップロードが有効になっていると表示されます。
これで、アプリをビルドし、ローカル環境で実行する準備が整いました。
Visual Studio Code でアプリをローカルにビルドして実行する
アプリをローカルに構築して実行するには、以下のようにします。
Visual Studio Code で、F5 を選択して、アプリケーションをデバッグ モードで実行します。
デバッガーでアプリをローカルで実行した場合の動作について説明します。
疑問に思う場合は、 F5 キーを押すと、Agents Toolkit:
- 次の前提条件を確認します。
- Microsoft 365 アカウントでログインしています。
- カスタム アプリのアップロードは、Microsoft 365 アカウントで有効になっています。
- サポートされている Node.js バージョンがインストールされています。
- localhost の開発証明書がインストールされています。
- タブ アプリでポートが使用できます。
注:
エージェント ツールキットが特定の前提条件をチェックできない場合は、チェックするように求められます。
- NPM パッケージをインストールします。
- アプリをMicrosoft Entra IDに登録し、アプリを構成します。
- Teams 開発者ポータルにアプリを登録し、アプリを構成します。
- タブ アプリを起動します。
- Web ブラウザーで Teams を起動し、タブ アプリをアップロードします。
注:
アプリを初めて実行すると、すべての依存関係がダウンロードされ、アプリがビルドされます。 ビルドが完了すると、ブラウザー ウィンドウが開きます。 この処理には 3 ～ 5 分かかります。
必要に応じて、Toolkit によってローカル証明書のインストールを求めるメッセージが表示されます。 この証明書により、Teams は https://localhost からアプリケーションを読み込むことができます。
以下のダイアログが表示されたら、[はい] を選択します:
または、オペレーティング システムによっては、[続行] を選択します。
Teams Web クライアントがブラウザー ウィンドウで開かれます。
注:
ツールキットで証明書のインストールを求められない場合は、証明書を手動でインストールする必要があります。 詳細については、「 手動証明書の追加」を参照してください。
- メッセージが表示されたら、Microsoft 365 アカウントを使用してサインインします。
- カスタム アプリをローカル コンピューター上の Teams にアップロードするように求められたら、[ 追加] を選択します。
- おめでとうございます。最初のアプリが Teams で実行されています。
注:
アプリを Outlook と Microsoft 365 に拡張する場合は、Visual Studio Code の [実行とデバッグ] ドロップダウンから、Outlook と Microsoft 365 を使用してアプリをデバッグできます。
SSO 機能を追加して、ユーザーの詳細を取得できます。 他の Web アプリケーションと同様に、プレークポイントの設定など通常のデバッグ作業を行うことができます。 このアプリはホット リロードをサポートしています。 プロジェクト内のファイルを変更すると、ページが再読み込みされます。
アプリがローカルで実行されない場合のトラブルシューティング方法について説明します。
Teams でアプリを正常に実行するには、Teams アカウントでカスタム アプリのアップロードが有効になっていることを確認します。 カスタム アプリのアップロードの詳細については、「前提条件」セクションを参照してください。
最初の Teams アプリをデプロイする
Tab アプリを使用して Teams アプリを作成、ビルド、実行する方法について学習しました。 最後の手順は、アプリを Azure に展開することです。
エージェント ツールキットを使用して、Tab 機能を持つ最初のアプリをAzureにデプロイしましょう。
Azure アカウントにサインインする
このアカウントを使用して、Microsoft Azure potral にアクセスし、アプリをサポートする新しいクラウド リソースをプロビジョニングします。
- Visual Studio Code を開きます。
- タブ アプリを作成したプロジェクト フォルダーを開きます。
- サイドバーで [Microsoft 365 Agents Toolkit ] アイコンを選択します。
- [サインイン] を選択して、資格情報を使用してAzureします。
ヒント
AZURE ACCOUNT 拡張機能がインストールされていて、同じアカウントを使用している場合は、この手順をスキップできます。 他の拡張機能で使用しているのと同じアカウントを使用します。
既定の Web ブラウザーが開き、アカウントにサインインできます。
- メッセージが表示されたらブラウザーを閉じて、Visual Studio Code に戻ります。
サイドバーの [アカウント] セクションに、2 つのアカウントが個別に表示されます。 また、使用可能な Azure サブスクリプションの数も一覧表示されます。 使用可能な Azure サブスクリプションが少なくとも 1 つあることを確認します。 ない場合は、サインアウトして別のアカウントを使用します。
これで Teams アプリが作成されました。 次に、エージェント ツールキットを使用して、いずれかのアプリをデプロイしてAzureする方法について説明します。
アプリを Azure にデプロイする
デプロイは、2 つの手順で構成されます。 まず、必要なクラウド リソースが作成されます (プロビジョニングとも呼ばれます)。 次に、アプリのコードが作成されたクラウド リソースにコピーされます。 このチュートリアルでは、タブ アプリをデプロイします。
プロビジョニングとデプロイの違いは何ですか?
[プロビジョニング] ステップでは、アプリのAzureと Microsoft 365 にリソースが作成されますが、コード (HTML、CSS、JavaScript など) はリソースにコピーされません。 [デプロイ] ステップでは、プロビジョニング 手順中に作成したリソースにアプリのコードがコピーされます。 新しいリソースをプロビジョニングせずに複数回デプロイするのが一般的です。 プロビジョニング手順の完了には時間がかかる場合があるため、デプロイ手順とは別です。
Visual Studio Code サイドバーの [Microsoft 365 Agents Toolkit ] アイコンを選択します。
[プロビジョニング] を選択します。
既存のサブスクリプションのすべてのユーザーを選択します。
Azure リソースに使用するリソース グループを選択します。
注:
- アプリは、Azure リソースを使用してホストされます。
- 詳細については、「 リソース グループの作成」を参照してください。
Azureでリソースを実行するときにコストが発生する可能性があることを警告するダイアログが表示されます。
[プロビジョニング] を選択します。
プロビジョニング プロセスでは、Azure クラウドにリソースが作成されます。 時間がかかる場合があります。 進行状況を監視するには、右下隅にあるダイアログを確認します。 数分後に、次の通知が表示されます。
必要に応じて、プロビジョニングされたリソースを表示できます。 このチュートリアルでは、リソースを表示する必要はありません。
プロビジョニングされたリソースが [環境 ] セクションに表示されます。
プロビジョニングが完了したら、[ライフサイクル] パネルから [デプロイ] を選択します。
プロビジョニングと同様に、デプロイには時間がかかります。 プロセスを監視するには、右下隅にあるダイアログを確認します。 数分後に完了通知が表示されます。
これで、同じプロセスを使用して、ボットとメッセージ拡張機能アプリをAzureにデプロイできます。
注:
アプリは、Azure リソースを使用してホストされます。
デプロイされたアプリを実行する
プロビジョニングとデプロイの手順が完了したら、次の手順を実行します。
Visual Studio Code からデバッグ パネル (Ctrl + Shift + D / ⌘⇧-D または ビュー > Run) を開きます。
[起動構成] ドロップダウンから [ リモートの起動 (Edge)] を選択します。
[デバッグの開始 ] (F5) を選択して、Azureからアプリを起動します。
アプリを Teams にアップロードするように求められたら、[ 追加] を選択します。
これで、最初のタブ アプリがAzure環境で実行されます。
アプリを Azure にデプロイした場合の動作について説明します
展開前は、このアプリケーションは以下のようにローカルで動作しています。
- バックエンドは、Azure Functions Core Tools を使用して実行します。
- アプリケーションの HTTP エンドポイントは、Microsoft Teams がアプリケーションを読み込む場所でローカルに実行されます。
デプロイは、2 つの手順で構成されるプロセスです。 アクティブな Azure サブスクリプションにリソースをプロビジョニングし、その後アプリケーションのバックエンド コードとフロントエンド コードを Azure にデプロイまたはアップロードします。
- バックエンドが構成済みの場合、Azure App Service や Azure Storage など、さまざまな Azure のサービスが使用されています。
- フロントエンド アプリケーションは、静的 Web ホスティング用に構成されたAzureストレージ アカウントにデプロイされます。
おめでとうございます
これで完了です。
タブ アプリを作成しました。
基本的なアプリの作成について学習したので、より複雑なアプリの作成に進むことができます。 手順に従ってアプリをビルドしてデプロイします。アプリには複数の機能があります。
JavaScript を使用してタブ アプリをビルドするチュートリアルを完了しました。
GitHub で Microsoft と共同作業する
このコンテンツのソースは GitHub にあります。そこで、issue や pull request を作成および確認することもできます。 詳細については、共同作成者ガイドを参照してください。
Platform Docs