JavaScript を使用して初めてのタブ アプリを構築する
最初の Teams アプリを使用して Microsoft Teams アプリの開発を開始します。 Teams を使用してタブ アプリを作成します。
アプリには、独自の UI と UX が付属する機能があります。
注意
このチュートリアルでは、Javascript を使用してタブ アプリを作成します。
このチュートリアルでは、次の方法について学ぶことができます:
- Teams Toolkit を使用して新しいプロジェクトを設定する方法。
- タブ アプリをビルドする方法。
- アプリの構造:
- React を使用した JavaScript によるタブ部分。
- Node.js を使用した残りの機能。
- アプリをデプロイする方法。
前提条件
アプリをビルドしてデプロイするために必要なツールの一覧を次に示します。
| インストール | 使用するには... | |
|---|---|---|
| 必須 | ||
| Visual Studio Code | JavaScript、TypeScript、または SharePoint Framework (SPFx) ビルド環境。 バージョン 1.55 以降を使用してください。 | |
| Teams ツールキット | アプリのプロジェクト スキャフォールディングを作成する Microsoft Visual Studio Code 拡張機能。 4.0.0 バージョンを使用します。 | |
| Node.js | バックエンド JavaScript ランタイム環境。 最新の v16 LTS リリースを使用します。 | |
| Microsoft Teams | Microsoft Teams を使用して、チャット、会議、通話用のアプリを通じて共同作業を行うすべてのユーザーと 1 か所で共同作業を行うことができます。 | |
| Microsoft Edge (推奨) または Google Chrome | 開発者ツールを備えたブラウザー。 | |
| 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 に次のメッセージが表示されます。
[ローカル デバッグ] を選択して、プロジェクトをプレビューできます。
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 で実行されています。
SSO 機能を追加して、ユーザーの詳細を取得できます。 他の Web アプリケーションと同様に、プレークポイントの設定など通常のデバッグ作業を行うことができます。 このアプリはホット リロードをサポートしています。 プロジェクト内のファイルを変更すると、ページが再読み込みされます。
アプリがローカルで実行されない場合のトラブルシューティング方法について説明します。
Teams でアプリを正常に実行するには、Teams アカウントでサイドローディングが有効になっていることを確認します。 「前提条件」セクションで、サイドローディングの詳細について確認できます。
最初の Teams アプリをデプロイする
Tab アプリを使用して 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 にデプロイする準備が整いました。
おめでとうございます。Teams アプリを作成しました。 次に、Teams Toolkit を使用していずれかのアプリを Azure にデプロイする方法について説明します。
アプリを Azure にデプロイする
デプロイは 2 つの手順で構成されます。 まず、必要なクラウド リソースが作成されます (プロビジョニングとも呼ばれます)。 その後、アプリのコードが作成されたクラウド リソースにコピーされます。 このチュートリアルでは、タブ アプリをデプロイします。
プロビジョニングとデプロイの違いは何ですか?
プロビジョニング手順では、アプリの Azure と Microsoft 365 にリソースが作成されますが、コード (HTML、CSS、JavaScript など) はリソースにコピーされません。 [デプロイ] ステップでは、プロビジョニング 手順中に作成したリソースにアプリのコードをコピーします。 新しいリソースをプロビジョニングせずに複数回デプロイするのが一般的です。 プロビジョニング手順は完了するまでに時間がかかる可能性があるため、デプロイ手順とは別です。
Visual Studio Code のサイド バーで Teams Toolkit
アイコンを選択します。
[クラウドにプロビジョニング] を選択します。
Azure リソースに使用するサブスクリプションを選択します。
注意
アプリをホストするために使用される Azure リソースは常にあります。
ダイアログでは、Azure でリソースを実行するときにコストが発生する可能性があることを警告します。
[ プロビジョニング] を選択します。
プロビジョニング プロセスによって、Azure クラウドにリソースが作成されます。 時間がかかる場合があります。 右下隅にあるダイアログを見て、進行状況を監視できます。 数分後、次の通知が表示されます。
必要に応じて、プロビジョニングされたリソースを表示できます。 このチュートリアルでは、リソースを表示する必要はありません。
プロビジョニングされたリソースが [環境 ] セクションに表示されます。
プロビジョニングが完了したら、[デプロイ] パネルから [クラウドにデプロイ] を選択します。
プロビジョニングと同様に、デプロイには時間がかかります。 プロセスを監視するには、右下隅にあるダイアログを確認します。 数分後、完了通知が表示されます。
これで、同じプロセスを使用して、ボットアプリとメッセージ拡張機能アプリを Azure にデプロイできます。
デプロイされたアプリを実行する
プロビジョニングとデプロイの手順が完了したら、次の手順を実行します。
Visual Studio Code からデバッグ パネル (Ctrl + Shift + D / ⌘⇧-D または View > Run) を開きます。
起動構成ドロップダウンから [ Launch Remote (Edge)] を選択します。
デバッグの開始 (F5) を選択して、Azure からアプリを起動します。
アプリを Teams にサイドロードするように求められたら、[ 追加] を選択します。
おめでとうございます。最初のタブ アプリは Azure 環境で実行されています。
アプリを Azure に展開した場合に発生することを説明します
展開前は、このアプリケーションは以下のようにローカルで動作しています。
- バックエンドは、Azure Functions Core Tools を使用して実行します。
- アプリケーションの HTTP エンドポイントは、Microsoft Teams がアプリケーションを読み込む場所でローカルに実行されます。
デプロイは、2 つの手順で構成されるプロセスです。 アクティブな Azure サブスクリプションにリソースをプロビジョニングし、その後アプリケーションのバックエンド コードとフロントエンド コードを Azure にデプロイまたはアップロードします。
- バックエンドが構成済みの場合、Azure App Service や Azure Storage など、さまざまな Azure のサービスが使用されています。
- フロントエンド アプリケーションは、静的な Web ホスティング用に構成された Azure Storage アカウントに展開されます。
おめでとうございます!
これで完了です。
タブ アプリを作成しました。
基本的なアプリの作成を学習したので、より複雑なアプリの作成に進むことができます。 まず、既存のアプリに機能を追加してみてください。
既存のアプリに機能を追加するには:
Teams Toolkit サイドバーの [開発] セクションで [機能の追加] を選択します。
アプリに追加する機能を選択します。
手順は以上です。 Teams Toolkit によって、アプリのディレクトリ構造に新しい機能のスキャフォールディングが追加されます。 手順に従ってアプリをビルドしてデプロイします。アプリには複数の機能を含めます。
JavaScript を使用してタブ アプリをビルドするためのチュートリアルを完了しました。
このセクションに問題がある場合 このセクションを改善できるよう、フィードバックをお送りください。