JavaScript を使用して初めてのアプリを構築する
最初の Teams アプリを使用して Microsoft Teams アプリの開発を開始します。 3 つの Teams アプリ (タブ アプリ、ボット アプリ、メッセージ拡張機能アプリ) を作成します。
各アプリには、独自の UI と UX を持つ 1 つの機能があります。
注意
このチュートリアルでは、最初にタブ アプリを作成し、次にボット アプリ、その後メッセージ拡張機能アプリを作成します。 ただし、他のアプリの機能を妨げることなく、任意の機能を備えたアプリを最初にビルドすることも選択できます。
このチュートリアルでは、次の方法について学ぶことができます:
- Teams Toolkit を使用して新しいプロジェクトを設定する方法。
- それぞれ異なる機能を持つ 3 つのアプリ (タブ、ボット、およびメッセージ拡張機能) をビルドする方法。
- アプリの構造:
- React を使用した JavaScript によるタブ部分。
- Node.js を使用した残りの機能。
- アプリをデプロイする方法
前提条件
アプリをビルドしてデプロイするために必要なツールの一覧を次に示します。
| インストール | 使用するには... | |
|---|---|---|
| 必須 | ||
| Teams ツールキット | アプリのプロジェクト スキャフォールディングを作成する Microsoft Visual Studio Code 拡張機能。 | |
| Microsoft Teams | Microsoft Teams を使用して、チャット、会議、通話用のアプリを通じて共同作業を行うすべてのユーザーと 1 か所で共同作業を行うことができます。 | |
| Node.js | バックエンド JavaScript ランタイム環境。 最新の v14 LTS リリースを使用します。 | |
| Microsoft Edge (推奨) または Google Chrome | 開発者ツールを備えたブラウザー。 | |
| Visual Studio Code | JavaScript、TypeScript、または SharePoint Framework (SPFx) ビルド環境。 バージョン 1.55 以降を使用します。 | |
| Optional | ||
| Azure Tools for Visual Studio Code および Azure CLI | 保存されたデータにアクセスしたり、Azure で Teams アプリ用のクラウドベースのバックエンドをデプロイしたりするための Azure ツール。 | |
| React Developer Tools for Chrome または React Developer Tools for Microsoft Edge | オープン ソース React JavaScript ライブラリのブラウザー DevTools 拡張機能。 | |
| Microsoft Graph Explorer | Microsoft Graph エクスプローラー。Microsoft Graph データからクエリを実行できるブラウザー ベースのツール。 | |
| Teams の開発者ポータル | Teams アプリを構成、管理、組織や Teams ストアなどに配布するための Web ベースのポータル。 |
ヒント
Microsoft Graph データを操作する場合は、Microsoft Graph エクスプローラーについて学び、ブックマークする必要があります。 このブラウザー ベースのツールを使用すると、アプリの外部で Microsoft Graph に対してクエリを実行できます。
開発環境を準備する
必要なツールをインストールしたら、開発環境を設定します。
Teams Toolkit をインストールする
Teams Toolkit を使用すると、アプリのクラウド リソースのプロビジョニングとデプロイ、Teams ストアへの公開などを行うツールにより、開発プロセスを簡略化できます。
使用このツールキットは、Visual Studio Code または TeamsFx という CLI (コマンド ライン インターフェイス) で使用できます。
- Visual Studio Code を開き、[拡張機能] ビュー (Ctrl + Shift + X / ⌘⇧-X または [表示] > [拡張機能]) を選択します。
- 検索ボックスに、「Teams Toolkit」と入力します。
- Teams Toolkit の横にある [インストール] を選択します。
インストール後に Teams Toolkit アイコンが、Visual Studio Code サイド バーに表示されます。
Teams Toolkit は、Visual Studio Code Marketplace にもあります。
Teams 開発テナントを設定する
テナント とは、チャット、ファイルの共有、会議の実行を行う Teams の組織のスペースまたはコンテナーのようなものです。 このスペースは、アプリをサイドロードしてテストする場所でもあります。 テナントを使って開発する準備ができているかどうかを確認しましょう。
サイドローディング オプションを確認する
アプリを作成したら、アプリを配布せずに Teams に読み込む必要があります。 このプロセスはサイドローディングと呼ばれます。 このオプションを表示するには、Microsoft 365 アカウントにサインインします。
注意
サイドローディングは、Teams のローカル環境でアプリをプレビューおよびテストするために必要です。 有効になっていない場合は、Teams でアプリをローカルでプレビューしてテストすることはできません。
既にテナントがあり、管理者アクセス権がありますか? 実際にそうかどうかを確認しましょう。
Teams でアプリをサイドロードできるかどうかを確認します。
Teams クライアントで、[ストア] アイコンを選択します。
[アプリの管理] を選択します。
[アプリ の発行] を選択します。
[カスタム アプリのアップロード] オプションを探します。 オプションが表示された場合は、アプリのサイドローディングが有効です。
注意
カスタム アプリをアップロードするオプションが表示されない場合は、Teams 管理者にお問い合わください。
無料の Teams 開発者テナントを作成する (省略可能)
Teams 開発者アカウントをお持ちでない場合は、無料で取得できます。 Microsoft 365 開発者プログラムに参加します。
Microsoft 365 開発者プログラムに移動します。
[今すぐ参加] を選択し、画面の指示に従います。
ようこそ画面で、[E5 サブスクリプションの設定] を選択します。
管理者アカウントを設定します。 完了すると、次の画面が表示されます。
設定した管理者アカウントを使用して Teams にサインインします。 Teams に [カスタム アプリのアップロード] オプションがあることを確認します。
無料の Azure アカウントを取得します。
アプリをホストする場合、または Azure でリソースにアクセスする場合は、Azure サブスクリプションが必要です。開始する前に、無料アカウントを作成 してください。
これで、すべてのツールを入手し、アカウントを設定しました。 次に、開発環境を設定し、ビルドを開始しましょう。 最初に実行するアプリを選択します。
タブ アプリ用のプロジェクト ワークスペースを作成する
最初のアプリを作成して、Microsoft Teams アプリ開発を開始します。 このアプリは、タブ機能を使用します。
このページでは、次のことについて説明します。
タブ プロジェクト ワークスペースを作成する
前提条件が整っている場合、始めましょう。
注意
表示される Visual Studio Code UI は Mac のものです。 オペレーティング システム、Teams Toolkit バージョン、環境によって異なる場合があります。
Visual Studio Code を開きます。
Visual Studio Code のサイド バーで Teams Toolkit
アイコンを選択します。[新しい Teams アプリを作成] を選択します。
![Teams ツールキットのサイド バーにある [新しいプロジェクトの作成] リンクの位置](assets/images/teams-toolkit-v2/first-tab/create-project.png)
。[新しい Teams アプリを作成] を選択して、Teams Toolkit を使用してアプリを作成します。
アプリでビルドする機能として [タブ] が選択されていることを確認します。 [OK] を選択します。
プログラミング言語として [JavaScript] を選択します。
アプリケーション名として
helloworldと入力します。 英数字のみを使用してください。 Enter キーを押します。
数秒で Teams タブ アプリが作成されます。
アプリが作成されると、Teams Toolkit に、プロジェクト ワークスペースが作成された場所を示すメッセージが表示されます。 このフォルダーは、Visual Studio Code の設定で指定した既定の場所です。
このメッセージには、次の 2 つのオプションがあります。
- 場所の変更
- ローカル デバッグ
このチュートリアルでは、これらのオプションを使用する必要はありません。
注意
ワークスペースの場所を変更する場合、Visual Studio Code の再読み込み後に作成したプロジェクトにのみ、その変更が反映されます。 既存のプロジェクトの場所は変更されません。
Teams アプリの作成に関する簡単なまとめ。
Teams アプリの作成に関する簡単なまとめをご覧ください。
タブ アプリのソース コードのツアーを開始する
Teams Toolkit には、アプリをビルドするためのすべてのコンポーネントが備わっています。 プロジェクトを作成した後、プロジェクトのフォルダーとファイルを、Visual Studio Code の エクスプローラー 領域で確認できます。
任意の UI フレームワークを自由に選択できますが (またはまったく使用しないように選択することもできますが)、このサンプル テンプレート コードでは、React コンポーネントを使用したスキャフォールディングが提供されます。
Toolkit では、このディレクトリ構造内の項目のうち、次の項目を保持します。
| フォルダー名 | コンテンツ |
|---|---|
.fx/configs |
ユーザーが Teams アプリ用にカスタマイズできる構成ファイル。 |
- .fx/configs/config.<envName>.json |
環境すべての構成ファイル。 |
- .fx/configs/azure.parameters.<envName>.json |
すべての環境に対する Azure BICEP プロビジョニングのパラメーター ファイル。 |
- .fx/configs/projectSettings.json |
すべての環境に適用されるグローバル プロジェクト設定。 |
- .fx/states |
Teams Toolkit によって生成されるプロビジョニング出力。 アプリのリソースをプロビジョニングした後にこのフォルダーが Toolkit によって作成されます。 |
- .fx/states/state.<envName>.json |
すべての環境のプロビジョニング出力ファイル。 |
- .fx/states/<env>.userdata |
すべての環境のプロビジョニング出力の機密ユーザー データ。 |
tabs |
プライバシーに関する通知、使用条件、構成タブなど、実行時に必要なタブ機能のためのコード。 |
- tabs/src/index.jsx |
メインのアプリ コンポーネントが ReactDOM.render() によってレンダリングされる、フロントエンド アプリのエントリ ポイント |
- tabs/src/components/App.jsx |
アプリで URL ルーティングを処理するためのコード。 Microsoft Teams JavaScript client SDK を呼び出して、アプリと Teams の間の通信を確立します。 |
- tabs/src/components/Tab.jsx |
アプリの UI を実装するコード。 |
- tabs/src/components/TabConfig.jsx |
アプリを構成する UI を実装するコード。 |
templates/appPackage |
アプリ マニフェスト テンプレート ファイルとアプリ アイコン: color.png および outline.png。 |
- templates/appPackage/manifest.template.json |
ローカルまたはリモートの環境でアプリを実行するためのアプリ マニフェスト。 |
templates/azure |
BICEP テンプレート ファイル |
クラウド機能を追加すると、Teams Toolkit によって、必要なフォルダーがプロジェクトに追加されます。 api フォルダーに、ユーザーが書き込んだ Azure Functions のコードが格納されます。
最初のタブ アプリをビルドして実行する
Teams Toolkit を使用してプロジェクト ワークスペースを設定したら、次にタブ プロジェクトをビルドします。 Microsoft 365 アカウントにサインインする必要があります。
Microsoft 365 アカウントにサインインする
Microsoft 365 アカウントを使用して Teams にサインインします。 Microsoft 365 開発者プログラム テナントを使用している場合は、Microsoft 365 アカウントは、登録中に設定した管理者アカウントです。
Visual Studio Code を開きます。
サイド バーで Teams Toolkit
アイコンを選択します。[M365 にサインイン (Sign in to M365)] を選択します。
既定の Web ブラウザーが開き、アカウントにサインインできます。
資格情報を使用して Microsoft 365 アカウントにサインインします。
メッセージが表示されたらブラウザーを閉じて、Visual Studio Code に戻ります。
Visual Studio Code 内の Teams Toolkit に戻ります。
サイドバーの [アカウント] セクションに、Microsoft 365 アカウント名が表示されます。 Microsoft 365 アカウントでサイドローディングが有効になっている場合、Teams Toolkit に [サイドローディングが有効] と表示されます。
これで、アプリをビルドし、ローカル環境で実行する準備が整いました。
Visual Studio Code でアプリをローカルにビルドして実行する
アプリをローカルに構築して実行するには、以下のようにします。
Visual Studio Code で、F5 を選択して、アプリケーションをデバッグ モードで実行します。
デバッガーでアプリをローカルに実行した場合に発生することを説明します。
気にかかる点がある場合、F5 キーを押すと、Teams Toolkit によって以下が行われます。
- 次の前提条件を確認します。
- Microsoft 365 アカウントでログインしています。
- Microsoft 365 アカウントに関してサイドローディングが有効になっています。
- サポートされている Node.js バージョンがインストールされています。
- タブ アプリの NPM パッケージがインストールされています。
- localhost の開発証明書がインストールされています。
- タブ アプリでポートが使用できます。
注意
Teams Toolkit によって特定の前提条件が確認できない場合は、確認を求めるメッセージが表示されます。
- アプリを Azure AD に登録し、アプリを構成します。
- Teams 開発者ポータルにアプリを登録し、アプリを構成します。
- タブ アプリを起動します。
- Web ブラウザーで Teams を開始し、タブ アプリをサイドロードします。
注意
アプリを初めて実行すると、すべての依存関係がダウンロードされ、アプリがビルドされます。 ビルドが完了すると、ブラウザー ウィンドウが開きます。 この処理には 3 ～ 5 分かかります。
必要に応じて、Toolkit によってローカル証明書のインストールを求めるメッセージが表示されます。 この証明書により、Teams は
https://localhostからアプリケーションを読み込むことができます。以下のダイアログが表示されたら、[はい] を選択します:
または、オペレーティング システムによっては、[続行] を選択します。
Teams Web クライアントがブラウザー ウィンドウで開きます。
メッセージが表示されたら、Microsoft 365 アカウントを使用してサインインします。
ローカル マシン上の Teams にアプリをサイドロードするように求められたら、[追加] を選択します。
おめでとうございます。最初のアプリが Teams で実行されています。
ページ内を移動して、ユーザーの詳細を表示します。
[承認] を選択して、Microsoft Graph を使用してアプリがユーザーの詳細を取得できるようにします。
アプリは、ユーザーの詳細を表示するためのアクセス権を付与するアクセス許可を要求します。
[同意する] を選択して、アプリがユーザーの詳細情報にアクセスできるようにします。
写真と詳細が個人タブに表示されます。
他の Web アプリケーションと同様に、プレークポイントの設定など通常のデバッグ作業を行うことができます。 このアプリはホット リロードをサポートしています。 プロジェクト内のファイルを変更すると、ページが再読み込みされます。
アプリがローカルで実行されない場合のトラブルシューティング方法について説明します。
Teams でアプリを正常に実行するには、Teams アカウントでサイドローディングが有効になっていることを確認します。 「前提条件」セクションで、サイドローディングの詳細について確認できます。
Toolkit を使用してタブ アプリを設定し、ローカルで実行する方法について把握しました。 次に、Toolkit を使用して会話型チャット ボットをビルドする方法について説明します。
ボット アプリ用のプロジェクト ワークスペースを作成する
タブ アプリを作成しました。 次に、最初のボット アプリを作成しましょう。
Teams アプリのボット機能により、チャットボットまたは会話型ボットが作成されます。 カスタマー サービスの提供など、簡単で自動化されたタスクを実行するときに使用します。 ボットは Web サービスと対話し、対象サービスを使用できるようにします。 天気予報、予約、または会話型ボットを使用して提供されるその他のサービスを取得できます。
これらのアプリを作成する準備は既に整っているので、ボット アプリを作成するための新しいTeams プロジェクトを設定できます。
このチュートリアルでは、次の方法について学ぶことができます:
重要
現在、ボットは Government Community Cloud (GCC) で利用できますが、GCC-High および国防総省 (DOD) では使用できません。
ボット プロジェクト ワークスペースを作成する
前提条件が整っている場合、始めましょう。
注意
表示される Visual Studio Code UI は Mac のものです。 オペレーティング システム、Teams Toolkit バージョン、環境によって異なる場合があります。
Visual Studio Code を開きます。
Visual Studio Code のサイド バーで Teams Toolkit
アイコンを選択します。[新しい Teams アプリを作成] を選択します。
。[新しい Teams アプリを作成] を選択して、Teams Toolkit を使用してアプリを作成します。
。[ボット] を選択し、[タブ] の選択を解除して、[OK] を選択します。
。[プログラミング言語] セクションで [JavaScript] を選択します。
hellobotのように、アプリに適した名前を入力します。 アプリの名前が英数字であることを確認します。 Enter キーを押します。
ボット機能を備えた Teams アプリが、数秒で作成されます。
アプリが作成されると、Teams Toolkit に、プロジェクト ワークスペースが作成された場所を示すメッセージが表示されます。 このフォルダーは、Visual Studio Code の設定で指定した既定の場所です。
このメッセージには、次の 2 つのオプションがあります。
- 場所の変更
- ローカル デバッグ
このチュートリアルでは、これらのオプションを使用する必要はありません。
注意
ワークスペースの場所を変更する場合、Visual Studio Code の再読み込み後に作成したプロジェクトにのみ、その変更が反映されます。 既存のプロジェクトの場所は変更されません。
Teams アプリの作成に関する簡単なまとめ。
Teams アプリの作成に関する簡単なまとめをご覧ください。
ボット アプリのソース コードのツアーを開始する
スキャフォールディングが完了した後、プロジェクトのディレクトリとファイルを Visual Studio Code のエクスプローラー領域で確認できます。
| フォルダー名 | コンテンツ |
|---|---|
.fx/configs |
ユーザーが Teams アプリ用にカスタマイズできる構成ファイル。 |
.fx/configs/config.<envName>.json |
環境すべての構成ファイル。 |
.fx/configs/azure.parameters.<envName>.json |
すべての環境に対する Azure BICEP プロビジョニングのパラメーター ファイル。 |
.fx/configs/projectSettings.json |
すべての環境に適用されるグローバル プロジェクト設定。 |
.fx/states |
Toolkit によって生成されるプロビジョニング出力。 アプリのリソースをプロビジョニングした後にこのフォルダーが Toolkit によって作成されます。 |
.fx/states/state.<envName>.json |
すべての環境のプロビジョニング出力ファイル。 |
.fx/states/<env>.userdata |
すべての環境のプロビジョニング出力の機密ユーザー データ。 |
bot |
実行時に必要なボット機能のコード。 |
bot/teamsBot.js |
ボット アプリのメイン エントリ ポイント。 |
templates/appPackage |
アプリ マニフェスト テンプレート ファイル、アプリ アイコン、color.png と outline.png。 |
templates/appPackage/manifest.template.json |
ローカルおよびリモートの環境でアプリを実行するためのアプリ マニフェスト。 |
templates/azure |
BICEP テンプレート ファイル |
ヒント
Teams 内で最初のボットを統合する前に、Teams 外のボットに慣れておきましょう。
最初のボット アプリをビルドして実行する
Teams Toolkit を使用してプロジェクト ワークスペースを設定したら、次にボット プロジェクトをビルドします。 Microsoft 365 アカウントにサインインしていることを確認します。
Microsoft 365 アカウントにサインインする
このアカウントを使用して、Teams にサインインします。 Microsoft 365 開発者プログラム テナントを使用している場合は、Microsoft 365 アカウントは、登録中に設定した管理者アカウントです。
Visual Studio Code を開きます。
サイド バーで Teams Toolkit
アイコンを選択します。[M365 にサインイン (Sign in to M365)] を選択します。
既定の Web ブラウザーが開き、アカウントにサインインできます。
資格情報を使用して Microsoft 365 アカウントにサインインします。
メッセージが表示されたらブラウザーを閉じて、Visual Studio Code に戻ります。
Visual Studio Code 内の Teams Toolkit に戻ります。
このアカウントを使用して、Teams にサインインします。 Microsoft 365 開発者プログラム テナントを使用している場合は、Microsoft 365 アカウントは、登録中に設定した管理者アカウントです。
これで、アプリをビルドし、ローカルで実行する準備が整いました。
最初のボット アプリをローカルでビルドして実行する
ローカル環境でアプリをビルドして実行するには次のようにします。
Visual Studio Code で F5 を選択して、アプリをデバッグ モードで実行します。
デバッガーでアプリをローカルに実行した場合に発生することを説明します。
気にかかる点がある場合、F5 キーを押すと、Teams Toolkit によって以下が行われます。
- 次のすべての前提条件を確認します。
- Microsoft 365 アカウントでログインしています。
- Microsoft 365 アカウントに関してサイドローディングが有効になっています。
- サポートされている Node.js バージョンがインストールされています。
- ボット アプリの NPM パッケージがインストールされています。
- Ngrok がインストールされています。
- ボット アプリで必要なポートを使用できます。
注意
Teams Toolkit によって特定の前提条件が確認できない場合は、確認を求めるメッセージが表示されます。
- Ngrok を起動して HTTP トンネルを作成します。
- アプリを Azure AD に登録し、アプリを構成します。
- ボット アプリを Bot Framework に登録し、ボット アプリを構成します。
- Teams 開発者ポータルにアプリを登録し、アプリを構成します。
- ボット アプリを起動します。
- Web ブラウザーで Teams を開始し、ボット アプリをサイドロードします。
注意
アプリを初めて実行すると、すべての依存関係がダウンロードされ、アプリがビルドされます。 ビルドが完了すると、自動的にブラウザー ウィンドウが開きます。 この処理には 3 ～ 5 分かかります。
Teams によって Web ブラウザーでアプリが実行されます。
メッセージが表示されたら、Microsoft 365 アカウントを使用してサインインします。
ローカル マシン上の Teams にアプリをサイドロードするように求められたら、[追加] を選択します。
これで、ボットは Teams で正常に実行されるようになりました。 アプリが読み込まれると、ボットを使用したチャット セッションが表示されます。
welcomeを入力すると概要カードが表示され、learnと入力するとアダプティブ カードとボット コマンド ドキュメントが示されます。
他の Web アプリケーションと同様に、プレークポイントの設定など通常のデバッグ作業を行うことができます。
bot/teamsBot.jsファイルを開き、onMessage()メソッドを探します。 どの場合にもブレークポイントを設定します。 次に、テキストを入力します。
アプリがローカルで実行されない場合のトラブルシューティング方法について説明します。
Teams でアプリを正常に実行するには、Teams アカウントでサイドローディングが有効になっていることを確認します。 「前提条件」セクションで、サイドローディングの詳細について確認できます。
重要
現時点では、サイドローディング アプリは Government Community Cloud (GCC)、GCC-High、および DOD で利用できます。
ヒント
アプリ認証ツールを使用して、アプリをサイドロードする前に問題がないか確認します。 このツールは Toolkit に含まれています。 エラーを修正して、アプリをサイドロードします。
メッセージ拡張機能アプリ用のプロジェクト ワークスペースを作成する
ボット アプリをビルドしました。 次に、最初のメッセージ拡張機能アプリを作成しましょう。
メッセージ拡張機能機能を使用すると、Web サービスを操作できます。 Teams クライアントの作成領域、コマンド ボックス、またはメッセージングを使用して、外部システムを検索したり、外部システムで操作を開始したりできます。
Teams メッセージ拡張機能 には、以下の 2 種類があります。
- 検索コマンド: 外部システムを検索できます。 次に、その結果をカード形式でメッセージに挿入できます。
- 操作コマンド: 情報を収集または表示するためのモーダル ポップアップをユーザーに表示できます。その後、対話を処理し、Teams に情報を送り返すことができます。
検索コマンド を使用してメッセージ拡張機能アプリを作成しましょう。 それを使用して、外部データを検索し、結果を Teams クライアント内のメッセージに挿入します。
これらのアプリを作成する準備は既に整っているので、メッセージ拡張機能アプリを作成するための新しい Teams プロジェクトを設定できます。
注意
メッセージ拡張機能は、ユーザーとコードの間のダイアログを提供するボットに依存しています。
このチュートリアルでは、次の方法について学ぶことができます:
メッセージ拡張機能プロジェクト ワークスペースを作成する
前提条件を満たしている場合は、始めましょう。
注意
表示される Visual Studio Code UI は Mac のものです。 オペレーティング システム、Toolkit バージョン、環境によって異なる場合があります。
Visual Studio Code を開きます。
Visual Studio Code のサイド バーで Teams Toolkit
アイコンを選択します。Toolkit の左側にある [新しいプロジェクトの作成] を選択します。
。[新しいプロジェクトの作成] を選択して、Teams Toolkit を使用してアプリを作成します。
。[メッセージ拡張機能] を選択し、[タブ] の選択を解除して、[OK] を選択します。
。プログラミング言語として [JavaScript] を選択します。
アプリに適した名前を入力します。 アプリの名前が英数字であることを確認します。 Enter キーを押します。
数秒で、Teams Toolkit によりアプリが作成されます。
アプリが作成されると、Teams Toolkit に、プロジェクト ワークスペースが作成された場所を示すメッセージが表示されます。 これは、Visual Studio Code の設定で指定した既定の場所です。
このメッセージには、次の 2 つのオプションがあります。
- 場所の変更
- ローカル デバッグ
このチュートリアルでは、これらのオプションを使用する必要はありません。
注意
ワークスペースの場所を変更する場合、Visual Studio Code の再読み込み後に作成したプロジェクトにのみ、その変更が反映されます。 既存のプロジェクトの場所は変更されません。
Teams アプリの作成に関する簡単なまとめ。
Teams アプリの作成に関する簡単なまとめをご覧ください。
メッセージ拡張機能アプリのソース コードのツアーを開始する
メッセージ拡張機能では Bot Framework を使用します。 これを使用して、会話を介してサービスと対話します。 スキャフォールディングが完了した後、プロジェクトのディレクトリとファイルを Visual Studio Code のエクスプローラー領域で確認できます。
| フォルダー名 | コンテンツ |
|---|---|
.fx/configs |
ユーザーが Teams アプリ用にカスタマイズできる構成ファイル。 |
.fx/configs/config.<envName>.json |
環境すべての構成ファイル。 |
.fx/configs/azure.parameters.<envName>.json |
すべての環境に対する Azure BICEP プロビジョニングのパラメーター ファイル。 |
.fx/configs/projectSettings.json |
すべての環境に適用されるグローバル プロジェクト設定。 |
.fx/states |
Toolkit によって生成されるプロビジョニング出力。 アプリのリソースをプロビジョニングした後にこのフォルダーが Toolkit によって作成されます。 |
.fx/states/state.<envName>.json |
すべての環境のプロビジョニング出力ファイル。 |
.fx/states/<env>.userdata |
すべての環境のプロビジョニング出力の機密ユーザー データ。 |
bot |
実行時に必要なボットのコード。 |
bot/messageExtensionBot.js |
メッセージ拡張機能のメイン エントリ ポイント。 |
templates/appPackage |
アプリ マニフェスト テンプレート ファイル、アプリ アイコン、color.png と outline.png。 |
templates/appPackage/manifest.template.json |
ローカルおよびリモートの環境でアプリを実行するためのアプリ マニフェスト。 |
templates/azure |
BICEP テンプレート ファイル |
ヒント
Teams 内でアプリを統合する前に、Teams 外のボットとメッセージ拡張機能に慣れておきましょう。
最初のメッセージ拡張機能をビルドして実行する
Teams Toolkit を使用してプロジェクト ワークスペースを設定したら、次にプロジェクトをビルドします。 Microsoft 365 アカウントにサインインする必要があります。
Microsoft 365 アカウントにサインインする
このアカウントを使用して、Teams にサインインします。 Microsoft 365 開発者プログラム テナントを使用している場合は、Microsoft 365 アカウントは、登録中に設定した管理者アカウントです。
Visual Studio Code を開きます。
サイド バーで Teams Toolkit
アイコンを選択します。[M365 にサインイン (Sign in to M365)] を選択します。
既定の Web ブラウザーが開き、アカウントにサインインできます。
Microsoft 365 アカウントにサインインします。
メッセージが表示されたらブラウザーを閉じて、Visual Studio Code に戻ります。
Visual Studio Code 内の Teams Toolkit に戻ります。
サイドバーの [アカウント] セクションに、Microsoft 365 アカウント名が表示されます。 Microsoft 365 アカウントでサイドローディングが有効になっている場合、Teams Toolkit に [サイドローディングが有効] と表示されます。
これで、アプリをビルドし、ローカルで実行する準備が整いました。
ローカル環境でアプリをビルドして実行する
メッセージ拡張機能を使用すると、Web サービスを操作できます。 メッセージング機能とボットのセキュリティで保護された通信を利用します。 メッセージ拡張機能アプリは、ボットとして登録された Web サービスに追加されます。
アプリをローカルでビルドして実行する
Visual Studio Code で F5 を選択して、アプリケーションをデバッグ モードで実行します。
デバッガーでアプリをローカルに実行した場合に発生することを説明します。
F5 を選択すると、Teams Toolkit によって以下の処理が行われます。
- 次のすべての前提条件を確認します。
- Microsoft 365 アカウントでログインしています。
- Microsoft 365 アカウントに関してサイドローディングが有効になっています。
- サポートされている Node.js バージョンがインストールされています。
- ボット アプリの NPM パッケージがインストールされています。
- Ngrok がインストールされています。
- ボット アプリで必要なポートを使用できます。
注意
Teams Toolkit によって特定の前提条件が確認できない場合は、確認を求めるメッセージが表示されます。
- Ngrok を起動して HTTP トンネルを作成します。
- アプリを Azure AD に登録し、アプリを構成します。
- Bot Framework にボット アプリを登録し、アプリを構成します。
- Teams 開発者ポータルにアプリを登録し、アプリを構成します。
- ローカルでホストされているメッセージ拡張機能アプリを起動します。
- Web ブラウザーで Teams を起動し、Teams アプリをサイドロードします。
注意
アプリを初めて実行すると、すべての依存関係がダウンロードされ、アプリがビルドされます。 ビルドが完了すると、ブラウザー ウィンドウが開きます。 この処理には 3 ～ 5 分かかります。
Teams により、Web ブラウザーでアプリが実行されます。
メッセージが表示されたら、Microsoft 365 アカウントを使用してサインインします。
[追加] を選択して、アプリを自分のアカウントに追加します。
Toolkit には、アプリが Teams に追加されることを示すメッセージが表示されます。
- [OK] を選択した場合、サイドロードされたアプリの一覧から後でアプリを試すことができます。
- [試してみる] を選択した場合、Teams によってアプリが読み込まれます。
[試してみる] を選択します。
メッセージ拡張機能アプリが、チャット ボット アプリに読み込まれます。
メッセージ拡張機能アプリは、ユーザーと Web サービス間の通信を有効にする点でボットに依存しているため、アプリはボットのチャット機能に読み込まれます。
- メッセージ拡張機能アプリを作成する前にボット アプリを作成した場合は、作成したのと同じボット アプリに読み込まれていることがわかります。 以前のチャット メッセージが表示されます。
- 最初にメッセージ拡張機能を作成した場合、アプリは、Teams で開かれているすべてのチャットに読み込まれます。
アプリのテスト
アプリが初めて読み込まれると、テストを行うためにメッセージ拡張機能アプリが開きます。 このサンプル アプリを使用すると、ソフトウェア レジストリからオープンソースの npm パッケージを検索できます。
検索クエリを実行するには
検索ボックスに検索文字列 ("cli" など) を入力します。 一致する項目の一覧が表示されます。
検索結果からいずれかを選択します。 作成領域に表示されるので、結果をチャネルに送信できます。
[送信] の手順を選択します。
これで、基本的なメッセージ拡張機能アプリをビルドして実行する方法について学習できました。
オプションのシナリオ
基本的なメッセージ拡張機能アプリの検索機能をテストしました。 次に、このアプリの他の機能を試すことができます。 これらは、このアプリの省略可能なシナリオです。
カードを作成するには
[カードの作成] を選択します。
示されているようにカードの詳細を入力し、[送信] を選択します。
作成領域にカードの詳細が表示されます。
作成領域にある [送信] アイコンを選択します。
アプリによって、ボット チャットでカードが送信されます。
作成領域からアプリを開くには
以下のいずれかの方法を選択してアプリを開きます。
@mentionの使用:
アプリのコマンド領域に
@your-app-nameと入力します。アプリによって検索ボックスが表示され、それを使用してクエリを実行できます。
検索文字列を入力し、検索結果からいずれかを選択します。
コマンド領域にカードとして表示されます。
カードをコピーして、作成領域に貼り付けます。
作成領域を使用してカードを送信します。
- 3 つのドット アイコンの使用:
作成領域の下部にある 3 つのドットからメッセージ拡張機能を起動します。
メッセージ拡張機能アプリを選択します。
メッセージ拡張機能アプリが、検索を実行してアダプティブ カードを作成するオプションとともに読み込まれます。
サイドロードされたアプリからアプリを実行する
サイドロードされたアプリの一覧からサイドロードされた Teams アプリを開くことができます。
Teams サイドバーから [ストア] アイコンを選択します。
[アプリを管理] を選択します。
アプリの 3 つのドット アイコンを選択してから、[詳細を表示] を選択します。 また、アプリへのリンクをコピーし、それを使用してアプリを開くこともできます。
[開く] を選択してアプリを読み込み、[試してみる] を選択します。
アプリが Teams で読み込まれます。
アプリがローカルで実行されない場合のトラブルシューティング方法について説明します。
Teams でアプリを実行するには、アプリのサイドロードを許可する Microsoft 365 開発アカウントが必要です。 「前提条件」セクションで、サイドローディングの詳細について確認できます。
最初の Teams アプリをデプロイする
タブ、ボット、メッセージ拡張機能の機能を使用して Teams アプリを作成、ビルド、実行する方法について学習しました。 最後の手順は、アプリを Azure に展開することです。
Teams Toolkit を使用して、タブ機能を備えた最初のアプリを Azure にデプロイしましょう。
Azure アカウントにサインインする
このアカウントを使用して、Microsoft Azure potral にアクセスし、アプリをサポートする新しいクラウド リソースをプロビジョニングします。
Visual Studio Code を開きます。
タブ アプリを作成したプロジェクト フォルダーを開きます。
サイド バーで Teams Toolkit
アイコンを選択します。[Azure にサインイン] を選択します。
ヒント
Azure アカウント拡張機能がインストールされ、同じアカウントを使用している場合は、この手順をスキップできます。 他の拡張機能で使用しているのと同じアカウントを使用します。
既定の Web ブラウザーが開き、アカウントにサインインできます。
資格情報を使用して Azure アカウントにサインインします。
メッセージが表示されたらブラウザーを閉じて、Visual Studio Code に戻ります。
サイドバーの [アカウント] セクションに、2 つのアカウントが個別に表示されます。 また、使用可能な Azure サブスクリプションの数も一覧表示されます。 使用可能な Azure サブスクリプションが少なくとも 1 つあることを確認します。 ない場合は、サインアウトして別のアカウントを使用します。
これで、アプリを Azure にデプロイする準備が整いました。
おめでとうございます。3 種類の Teams アプリを作成できました。 次に、Teams Toolkit を使用していずれかのアプリを Azure にデプロイする方法について説明します。
アプリを Azure に展開する
展開は 2 つの手順で構成されます。 まず、必要なクラウド リソースが作成されます (プロビジョニングとも呼ばれる)。 次に、アプリのコードが作成されたクラウド リソースにコピーされます。 このチュートリアルでは、タブ アプリを展開します。
プロビジョニングと展開の違いは何ですか?
[プロビジョニング] 手順では、Azure とアプリの Microsoft 365 にリソースを作成しますが、コード (HTML、CSS、JavaScript など) はリソースにコピーされません。 [ 展開] 手順では、アプリのコードをプロビジョニング 手順で作成したリソースにコピーします。 新しいリソースをプロビジョニングせずに複数回展開するのが一般的です。 プロビジョニング 手順の完了には時間がかかる場合があります。展開手順とは別の手順です。
Visual Studio Code のサイド バーで Teams Toolkit
アイコンを選択します。
[クラウド でプロビジョニング] を選択します。
Azure リソースに使用するサブスクリプションを選択します。
注意
アプリのホスティングに使用される Azure リソースは常にいくつかある。
Azure でリソースを実行するときにコストが発生する可能性があるという警告がダイアログで表示されます。
[プロビジョニング ] を選択します。
プロビジョニング プロセスによって、Azure クラウドにリソースが作成されます。 時間がかかる場合があります。 右下隅のダイアログを見て、進行状況を監視できます。 数分後、次の通知が表示されます。
必要な場合は、プロビジョニングされたリソースを表示できます。 このチュートリアルでは、リソースを表示する必要があります。
プロビジョニングされたリソースが [環境] セクション に表示 されます。
プロビジョニング が完了したら、[展開] パネル から [クラウドへの展開] を選択します。
プロビジョニングと同様に、展開には時間がかかる場合があります。 右下隅のダイアログを見て、プロセスを監視できます。 数分後、完了通知が表示されます。
これで、同じプロセスを使用してボットアプリとメッセージ拡張機能アプリを Azure に展開できます。
展開されたアプリを実行する
プロビジョニングと展開の手順が完了したら、次の手順を実行します。
[デバッグ] パネル (Ctrl + Shift + D / ??-D または View >実行) を開Visual Studio Code。
[起動 構成] ドロップダウンから [リモートの起動 ] (エッジ) を選択します。
[再生] ボタンを選択して、Azure からアプリを起動します。
[追加] を選択します。
アプリが Azure サイトに読み込まれます。
おめでとうございます! これで、タブ アプリは Azure からリモートで実行されています。
アプリを Azure に展開した場合に発生することを説明します
展開前は、このアプリケーションは以下のようにローカルで動作しています。
- バックエンドは、Azure Functions Core Tools を使用して実行します。
- アプリケーションの HTTP エンドポイントは、Microsoft Teams がアプリケーションを読み込む場所でローカルに実行されます。
デプロイは、2 つの手順で構成されるプロセスです。 アクティブな Azure サブスクリプションにリソースをプロビジョニングし、その後アプリケーションのバックエンド コードとフロントエンド コードを Azure にデプロイまたはアップロードします。
- バックエンドが構成済みの場合、Azure App Service や Azure Storage など、さまざまな Azure のサービスが使用されています。
- フロントエンド アプリケーションは、静的な Web ホスティング用に構成された Azure Storage アカウントに展開されます。
おめでとうございます!
これで完了です。
それぞれ異なる機能を持つ 3 つのアプリ (タブ アプリ、ボット アプリ、メッセージ拡張機能アプリ) を作成しました。
基本的なアプリの作成について学習したので、より複雑なアプリの作成に進むことができます。 まず、既存のアプリに機能を追加してみてください。
既存のアプリに機能を追加するには:
Teams Toolkit サイドバーの [開発] セクションで [機能の追加] を選択します。
アプリに追加する機能を選択します。
手順は以上です。 Teams Toolkit によって、アプリのディレクトリ構造に新しい機能のスキャフォールディングが追加されます。 手順に従ってアプリをビルドしてデプロイします。アプリには複数の機能を含めます。
JavaScript を使用してアプリをビルドするためのチュートリアルを完了しました。
このセクションに問題がある場合 このセクションを改善できるよう、フィードバックをお送りください。