Teams Toolkit と Visual Studio Code を使用してアプリをビルドするBuild apps with the Teams Toolkit and Visual Studio Code

Microsoft Teams ツールキットを使用すると、Visual Studio Code 環境内で直接カスタムの Teams アプリを構築できます。The Microsoft Teams Toolkit enables you to create custom Teams apps directly within the Visual Studio Code environment. ツールキットはプロセスをガイドし、Teams アプリの構築、デバッグ、起動に必要なすべてを提供します。The toolkit guides you through the process and provides everything you need to build, debug, and launch your Teams app.

Teams ツールキットをインストールするInstalling the Teams Toolkit

Microsoft Teams Toolkit for Visual studio code は、visual Studio Marketplace からダウンロードするか、Visual studio code 内の拡張機能として直接ダウンロードできます。The Microsoft Teams Toolkit for Visual Studio Code is available for download from the Visual Studio Marketplace or directly as an extension within Visual Studio Code.

ヒント

インストール後に、Visual Studio Code アクティビティバーに Teams ツールキットが表示されます。After installation, you should see the Teams Toolkit in the Visual Studio Code activity bar. 表示されていない場合は、アクティビティバー内を右クリックし、[ Microsoft Teams ] を選択して、簡単にアクセスできるようにツールキットを固定します。If not, right-click within the activity bar and select Microsoft Teams to pin the toolkit for easy access.

ツールキットの使用Using the toolkit

新しい Teams プロジェクトをセットアップするSet up a new Teams project

  1. ローカル環境でプロジェクトのワークスペース/フォルダーを作成します。Create a workspace/folder for your project in your local environment.
  2. Visual Studio Code で、Teams アイコンを選択します。In Visual Studio Code, select the Teams icon Teams アイコン ウィンドウの左側にあるアクティビティバーから。from the activity bar on the left side of the window.
  3. [コマンド] メニューから [ Microsoft Teams Toolkit ] を選択します。Select Open the Microsoft Teams Toolkit from the command menu.
  4. [コマンド] メニューから [ 新しい Teams アプリの作成 ] を選択します。Select Create a new Teams app from the command menu.
  5. メッセージが表示されたら、ワークスペースの名前を入力します。When prompted, enter the name of the workspace . これは、プロジェクトが存在するフォルダーの名前と、アプリの既定の名前の両方として使用されます。This will be used as both the name of the folder where your project will reside, and the default name of your app.
  6. Enter キーを押すと、[機能の追加] 画面が表示され、新しいアプリのプロパティを構成します。Press Enter and you will arrive at the Add capabilities screen configure the properties for your new app.
  7. [ 完了 ] ボタンを選択して、構成プロセスを完了します。Select the Finish button to complete the configuration process.

既存の Teams アプリプロジェクトをインポートするImport an existing Teams app project

  1. Visual Studio Code で、Teams アイコンを選択します。In Visual Studio Code, select the Teams icon Teams アイコン ウィンドウの左側にあるアクティビティバーから。from the activity bar on the left side of the window.
  2. [コマンド] メニューから [ アプリパッケージのインポート ] を選択します。Select Import app package from the command menu.
  3. 既存の Teams アプリパッケージ の zip ファイルを選択します。Choose your existing Teams app package zip file.
  4. [発行パッケージの選択] ボタンを選択します。Choose the Select publishing package button. これで、ツールキットの [構成] タブにアプリの詳細が設定されます。The configuration tab of the toolkit should now be populated with your app's details.
  5. Visual studio code で、[ファイル] [ -> ワークスペースへのフォルダーの追加] を選択して、ソースコードディレクトリを visual studio code Workspace に追加します。In Visual Studio Code, select File -> Add Folder to Workspace to add your source code directory to the Visual Studio Code workspace.

アプリを構成するConfigure your app

主に、Teams アプリは3つのコンポーネントをサポートしています。At its core, the Teams app embraces three components:

  1. ユーザーがアプリを操作する Microsoft Teams クライアント (web、デスクトップ、またはモバイル)。The Microsoft Teams client (web, desktop or mobile) where users interact with your app.
  2. Teams に表示されるコンテンツの要求に応答するサーバー。たとえば、HTML タブのコンテンツや bot のアダプティブカード。A server that responds to requests for content that will be displayed in Teams, e.g., HTML tab content or a bot adaptive card .
  3. 3つのファイルで構成される Teams アプリパッケージ :A Teams app package consisting of three files:
  • manifest.jsThe manifest.json
  • パブリックまたは組織のアプリカタログに表示するための、アプリのカラーアイコンA color icon for your app to display in the public or organization app catalog
  • Teams アクティビティバーに表示するための アウトラインアイコンAn outline icon for display on the Teams activity bar.

アプリがインストールされると、Teams クライアントはマニフェストファイルを解析して、アプリの名前やサービスが配置されている URL などの必要な情報を特定します。When an app is installed, the Teams client parses the manifest file to determine needed information like the name of your app and the URL where the services are located.

  1. アプリを構成するには、Visual Studio Code の [ Microsoft Teams Toolkit ] タブに移動します。To configure your app, navigate to the Microsoft Teams Toolkit tab in Visual Studio Code.
  2. [ アプリパッケージの編集 ] を選択して、[ アプリの詳細 ] ページを表示します。Select Edit app package to view the App details page.
  3. [アプリの詳細] ページのフィールドを編集すると、最終的にアプリパッケージの一部として配布されるファイルの manifest.jsの内容が更新されます。Editing the fields in the App details page updates the contents of the manifest.json file that will ultimately ship as part of the app package. App Studio manifest Editor 」を参照See App Studio manifest editor

アプリをパッケージ化するPackage your app

アプリの publish フォルダーにある アプリの詳細 ページ、マニフェスト、または env ファイルを変更すると、 Development.zip ファイルが自動的に生成されます。Modifying the app details page, manifest, or .env files in your app's .publish folder will automatically generate your Development.zip file. 同じフォルダーに 2 つのアイコン を含める必要があります。You'll need to include two icons in that same folder.

アプリをローカルにインストールして実行するInstall and run your app locally

アプリを実行するRun your app

アプリをローカルにインストールして実行するInstall and run your app locally

アプリをパッケージ化してテストする方法の詳細については、「プロジェクトホームページのコンテンツを ビルドして実行 する」を参照してください。Refer to the *Build and Run content in your project homepage for detailed instructions on how to package and test your app. 一般に、アプリのサーバーをインストールし、実行して、トンネリングソリューションをセットアップして、Teams が localhost から実行されているコンテンツにアクセスできるようにする必要があります。In general, you need to install your app's server, get it running, then setup a tunneling solution so that Teams can access content running from localhost.

Localhost からの開発を有効にするEnable development from localhost

HTTPS を使用して localhost でタブベースのアプリをデバッグする場合は、提供元のアプリが信頼されていることをブラウザーに通知する必要があり https://localhost ます。If you wish to debug your tab based app on localhost using HTTPS, you will need to tell your browser to trust the app being served from https://localhost. https://localhost:3000/tab に移動します。Navigate to https://localhost:3000/tab. サイトが信頼されていないことを示す警告が表示された場合は、そのまま続行するオプションを選択します。If you see a warning indicating that the site isn't trusted, choose the option to proceed anyway. これで、アプリは Teams クライアントからアクセスできるようになります。Your app should now be accessible from the Teams client.

Teams でアプリを実行するRun your app in Teams

前提条件: Teams 開発者プレビューモードを有効にするPrerequisites: Enable Teams developer preview mode

  1. Visual Studio の [コード] ウィンドウの左側にあるアクティビティバーに移動します。Navigate to the activity bar on the left side of the Visual Studio Code window.
  2. [実行 ] アイコンを 選択して、[ 実行] および [デバッグ ] ビューを表示します。Select the Run icon to display the Run and Debug view.
  3. キーボードショートカットを使用することもでき Ctrl+Shift+D ます。You can also use the keyboard shortcut Ctrl+Shift+D.