基本的なタブアプリをビルドする

[アーティクル]
06/22/2023

タブは、Microsoft Teams に埋め込まれた Teams 対応 Web ページであり、Teams の開発を開始するための優れた方法です。チーム内のチャネルの一部、グループチャット、個々のユーザーの個人用アプリとして追加できます。

Teams クライアントの概念タブアプリを示すスクリーンショット。

このチュートリアルでは、次のいずれかの方法で基本的な Teams タブアプリについて説明します。

GitHub Codespaces: codespace インスタンスを使用すると、Teams アプリを瞬時に体験できます。 Visual Studio Code (VS Code) が開きます。Teams Toolkit 拡張機能、アプリのソースコード、およびすべての依存関係が事前にパッケージ化されています。
ステップバイステップガイド: 開発環境を設定し、最初から Teams アプリを作成できます。

GitHub Codespaces
ステップバイステップのガイド

codespace を作成する前に、次の前提条件があることを確認してください。

codespace インスタンスを作成するための GitHub アカウント
カスタムアプリのアップロードアクセス許可を持つ Microsoft 365 アカウント
Microsoft 365 テナント

ヒント

GitHub Codespaces では、1 か月あたりの使用量が固定された無料プランが提供されます。空き領域を増やす必要がある場合は、 github.com/codespaces に移動し、不要になった codespace を削除します。

GitHub Codespaces を使用して Teams タブアプリを作成するには、次の手順に従います。

次のボタンを選択して、GitHub Codespaces を開きます。

まだサインインしていない場合は、GitHub アカウントにサインインするように求められる場合があります。
[ Create new codespace]\(新しい codespace の作成\) を選択します。

[ codespace のセットアップ] ページが表示されます。

Teams Toolkit はタブアプリプロジェクトを準備し、ブラウザーの VS Code で開きます。 VS Code のアクティビティバーに Teams Toolkit アイコンが表示されます。
[ Microsoft 365 にサインイン] を選択し、[ Azure にサインイン] を 選択して Microsoft 365 アカウントでサインインします。

注:

アプリをビルドすると、GitHub Codespaces によって新しいタブで Teams クライアントに読み込まれます。ブラウザーでポップアップタブまたはウィンドウがブロックされている場合は、アプリのポップアップを開くことを許可する必要があります。
[ Preview your Teams App (F5)] を選択してタブアプリをビルドします。

GitHub Codespaces はタブアプリをビルドし、Teams クライアントに読み込み、別のブラウザータブで開きます。
アプリダイアログが表示されたら、[ 追加 ] を選択して Teams にタブアプリをインストールします。

タブアプリが Teams クライアントにインストールされ、開きます。

タブアプリが正常に作成され、Teams クライアントに読み込まれました。