演習 - Microsoft Teams タブ アプリを構築する

• 10 分

このユニットでは、Teams Toolkit for Visual Studio Code 拡張機能を使用して、Microsoft Teams 用のタブ アプリを作成します。

Teams タブ アプリを作成する

1. Visual Studio Code を開きます。

2. サイドバーで、 Microsoft Teams アイコンを選択して TEAMS TOOLKIT パネルを開きます。

3. [ 新しいアプリの作成] を選択し、[タブ] を選択 します。

   

4. 使用可能なオプションの一覧から [基本タブ] を 選択します。

   

5. プログラミング言語の場合は、 JavaScript を選択します。

6. [ ワークスペース フォルダー ] メニューの [ 既定のフォルダー] を選択します。 Teams Toolkit によってプロジェクトがこのフォルダーにスキャフォールディングされます。

7. [ アプリケーション名] に「 CustomerTicketingTool」と入力します。

   

   すべてのフォルダーとファイルが正常にスキャフォールディングされると、通知が表示されます。

プロジェクトのスキャフォールディングが成功すると、Visual Studio Code の新しいインスタンスが新しいプロジェクトに開きます。

エクスプローラー パネルの src フォルダーには、アプリのソース コードが含まれています。 src フォルダーの下にあるすべてのフォルダーはブラウザー コードに固有であり、フロントエンド アプリのエントリ ポイントとして機能します。 src フォルダーの外部にあるファイルは、ボットなどのサーバー関連です。

Teams タブ アプリをテストしてデバッグする

1. Visual Studio Code で、 Microsoft Teams アイコンを選択して TEAMS TOOLKIT パネルを開きます。

   

   ここには複数のセクションがあります。 タブをデバッグするには、[ アカウント] セクションと [ 環境 ] セクションに焦点を当てます。

2. [ ACCOUNTS ] セクションで、[ Azure にサインイン] を選択します。 開いたダイアログ で、[サインイン ] ボタンを選択し、Microsoft 365 資格情報を入力します。

   Teams Toolkit には、グローバル管理者特権を持つ Microsoft 365 職場または学校アカウントが必要です。

3. 次のいずれかの方法を使用して、デバッガーをアタッチしてアプリの実行を開始します。

   • F5 キーを選択します。
   • Visual Studio Code で、[デバッグの開始の実行>] を選択します。
   • Teams Toolkit の [ 環境 ] セクションで、 ローカル フォルダーを開き、任意のブラウザーを選択します。

4. Visual Studio Code でいくつかのチェックが実行されると、[ コンソール ] タブにアクションが表示され、新しいブラウザー ウィンドウが開きます。 [ CustomerTicketingTool ] ダイアログで、[ 追加 ] ボタンを選択して、プレビュー用にアプリを Teams にインストールします。

   

   CustomerTicketingTool アプリがサイドバーに表示されるようになりました。 アプリは、 個人用タブ と バージョン情報の 2 つのタブで事前構成されています。

   

個人用タブが Teams に正常に追加されました。

[Teams] タブをカスタマイズする

これで、個人用タブでテキストをカスタマイズできます。

1. src>views フォルダーを開き、hello.html ファイルを開きます。
2. Hello、World のテキストを検索し、[おめでとう] に変更します。

Teams で変更を表示するには、デバッガー セッションが実行されているブラウザーに戻ります。 コードに加えた変更を表示するためにブラウザーを更新する必要はありませんでした。 個人用タブのテキストに [おめでとう] と表示されるようになりました。

Teams Toolkit for Visual Studio Code には、アプリの実行中に変更が適用されるホット リロード機能が用意されています。