Teams アプリにタブ機能を追加する

[アーティクル]
12/17/2024

タブは、Microsoft Teamsに埋め込まれた Web ページです。タブは、アプリマニフェスト (以前は Teams アプリマニフェスト) で宣言されたドメインを指す単純な HTML iframe タグとして機能します。個々のユーザーのチーム、グループチャット、または個人用アプリ内のチャネル内の Teams アプリにタブを機能として追加できます。アプリにカスタムタブを含めて独自の Web コンテンツを Teams に埋め込んだり、Teams 固有の機能を Web コンテンツに追加したりできます。詳細については、「 Teams のビルドタブ」を参照してください。

開始する前に、タブアプリを作成して実行することをお勧めします。詳細については、「 Teams Toolkit を使用してタブアプリを作成する」を参照してください。

前提条件

Teams アプリでタブ機能を構成するには、次の前提条件が満たされていることを確認します。

Teams アプリとそのアプリマニフェストファイル
アプリをテストするための Microsoft 365 アカウント
Microsoft Azure アカウント

Teams アプリの [構成] タブ

次の手順は、Teams アプリでタブ機能を構成するのに役立ちます。

アプリマニフェストの更新
ローカルデバッグ環境のセットアップ
アプリを Azure にプロビジョニングする

ヒント

サーバー側のタブアプリを開発する場合は、フォルダー構造、デバッグプロファイル、または bicep インフラストラクチャを更新する必要はありません。ボットサービスのタブに新しいルートを追加し、Teams Toolkit でアプリマニフェストを更新します。詳細については、「サンプルアプリ」を参照してください。

アプリマニフェストの更新

個人用チャット、グループチャット、またはチャネル内でタブを構成するには、 manifest.json ファイルを次のコードで更新します。

  "staticTabs": [
      {
          "entityId": "index",
          "name": "Personal Tab",
          "contentUrl": "${{TAB_ENDPOINT}}/index.html#/tab",
          "websiteUrl": "${{TAB_ENDPOINT}}/index.html#/tab",
          "scopes": [
              "personal",
              "groupChat",
              "team"
          ]
      }
  ],

タブのドメインで validDomains の値を更新します。
```
"validDomains": [
    "${{TAB_DOMAIN}}"
],
```
注:

TAB_ENDPOINT と TAB_DOMAIN は Teams Toolkit の組み込み変数です。これらは、現在の環境に基づいて実行時に真のエンドポイントに置き換えられます。

ローカルデバッグ環境のセットアップ

Visual Studio Code でタブアプリコードをプロジェクトに取り込みます。ない場合は、 Teams Toolkit を使用して新しいタブアプリを作成し、ソースコードを現在のプロジェクトにコピーできます。既定では、タブアプリのフォルダー構造は次のようになります。
```
    |-- appPackage/
    |-- env/
    |-- infra/
    |-- tab/            
    |   |-- src/
    |   |   |-- app.ts
    |   |-- package.json
    |-- index.ts        
    |-- package.json
    |-- teamsapp.yml
```

フォルダー構造を次のように再構成します。

    |-- appPackage/
    |-- infra/
    |-- tab/           <!--tab app source code-->
    |   |-- src/
    |   |   |-- app.ts
    |   |-- package.json
    |-- bot/            <!--move your current source code to a new sub folder-->
    |   |-- index.ts
    |   |-- package.json
    |-- teamsapp.yml

フォルダー構造に合わせて、 teamsapp.yml ファイルと teamsapp.local.yml ファイルの次のコードを更新します。

    deploy:
      # Run npm command
      - uses: cli/runNpmCommand
        with:
          args: install --no-audit
          workingDirectory: ./bot

タブプロジェクトのデバッグプロファイルを構成するには、 tasks.json ファイルに次のコードを追加します。

{
    "label": "Start application",
    "dependsOn": [
        "Start bot",
        "Start frontend"
    ]
},
{
    "label": "Start bot",
    "type": "shell",
    "command": "npm run dev:teamsfx",
    "isBackground": true,
    "options": {
        "cwd": "${workspaceFolder}/bot"
    },
    "problemMatcher": {
        "pattern": [
            {
                "regexp": "^.*$",
                "file": 0,
                "location": 1,
                "message": 2
            }
        ],
        "background": {
            "activeOnStart": true,
            "beginsPattern": "[nodemon] starting",
            "endsPattern": "restify listening to|Bot/ME service listening at|[nodemon] app crashed"
        }
    }
},
{
    "label": "Start frontend",
    "type": "shell",
    "command": "npm run dev:teamsfx",
    "isBackground": true,
    "options": {
        "cwd": "${workspaceFolder}/tab"
    },
    "problemMatcher": {
        "pattern": {
            "regexp": "^.*$",
            "file": 0,
            "location": 1,
            "message": 2
        },
        "background": {
            "activeOnStart": true,
            "beginsPattern": ".*",
            "endsPattern": "Compiled|Failed|compiled|failed"
        }
    }
}

デバッグプロファイルを構成する方法の詳細については、「サンプルアプリ」を参照してください。

タブプロジェクトで Teams Toolkit を操作できるようにするには、 teamsapp.local.yml ファイルに次のアクションを追加します。

provision:
  - uses: script # Set TAB_DOMAIN for local launch
    name: Set TAB_DOMAIN for local launch
    with:
      run: echo "::set-output TAB_DOMAIN=localhost:53000"
  - uses: script # Set TAB_ENDPOINT for local launch
    name: Set TAB_ENDPOINT for local launch
    with:
      run: echo "::set-output TAB_ENDPOINT=https://localhost:53000"
deploy:
  - uses: devTool/install # Install development tool(s)
    with:
      devCert:
        trust: true
    writeToEnvironmentFile: # Write the information of installed development tool(s) into environment file for the specified environment variable(s).
      sslCertFile: SSL_CRT_FILE
      sslKeyFile: SSL_KEY_FILE
  - uses: cli/runNpmCommand # Run npm command
    with:
      args: install --no-audit
      workingDirectory: ./tab
  - uses: file/createOrUpdateEnvironmentFile # Generate runtime environment variables for tab
    with:
      target: ./tab/.localConfigs
      envs:
        BROWSER: none
        HTTPS: true
        PORT: 53000
        SSL_CRT_FILE: ${{SSL_CRT_FILE}}
        SSL_KEY_FILE: ${{SSL_KEY_FILE}}

F5 キーを選択して、アプリをローカルでデバッグします。

アプリを Azure にプロビジョニングする

サーバー側のタブアプリを作成するには、bicep ファイルや Azure インフラストラクチャを更新する必要はありません。タブアプリは、ボットと同じAzure App Serviceでホストできます。

タブアプリ用に Azure Static Web アプリをプロビジョニングするには、次のコードを azure.bicep ファイルに追加します。

@maxLength(20)
@minLength(4)
param resourceBaseName string
param storageSku string
param staticWebAppName string = resourceBaseName

// Azure Static Web Apps that hosts your static web site
resource swa 'Microsoft.Web/staticSites@2022-09-01' = {
  name: staticWebAppName
  // SWA do not need location setting
  location: 'centralus'
  sku: {
    name: staticWebAppSku
    tier: staticWebAppSku
  }
  properties: {}
}
var siteDomain = swa.properties.defaultHostname

output AZURE_STATIC_WEB_APPS_RESOURCE_ID string = swa.id
output TAB_DOMAIN string = siteDomain
output TAB_ENDPOINT string = 'https://${siteDomain}'

必要なパラメーターが正しく設定されていることを確認するには、 azure.parameters.json ファイルを次のように更新します。

{
  "$schema": "https://schema.management.azure.com/schemas/2015-01-01/deploymentParameters.json#",
  "contentVersion": "1.0.0.0",
  "parameters": {
    "resourceBaseName": {
      "value": "helloworld${{RESOURCE_SUFFIX}}"
    },
    "storageSku": {
      "value": "Free"
    },
  }
}

タブアプリをAzure Static Web Appsでホストするには、teamsapp.yml ファイルでazureStaticWebApps/getDeploymentToken アクションを定義します。アクションは、bicep デプロイの出力である AZURE_STATIC_WEB_APPS_RESOURCE_IDに依存します。 arm/deploy アクションの後に次のコードを追加します。
```
 provision:
   ...
   - uses: arm/deploy
     ...
   # Add this action
   - uses: azureStaticWebApps/getDeploymentToken
     with:
       resourceId: ${{AZURE_STATIC_WEB_APPS_RESOURCE_ID}}
       writeToEnvironmentFile:
         deploymentToken: SECRET_TAB_SWA_DEPLOYMENT_TOKEN
   ...
```
[表示>コマンドパレット.... に移動するか、Ctrl + Shift + P キーを押します。
コマンド Teams: Provision 入力して、bicep を Azure に適用します。

タブアプリのビルドとデプロイを自動化するには、次の build アクションと deploy アクションを teamsapp.yml ファイルに追加します。

  - uses: cli/runNpmCommand # Run npm command
    with:
      args: install
      workingDirectory: ./tab
  - uses: cli/runNpmCommand # Run npm command
    with:
      args: run build
      workingDirectory: ./tab
  # Deploy bits to Azure Storage Static Website
 - uses: cli/runNpxCommand
     name: deploy to Azure Static Web Apps
     with:
       args: '@azure/static-web-apps-cli deploy ./build -d ${{SECRET_TAB_SWA_DEPLOYMENT_TOKEN}} --env production'

[表示>コマンドパレット.... に移動するか、Ctrl + Shift + P キーを押します。
「 Teams: Deploy 」と入力して、タブアプリコードを Azure にデプロイします。
[ 実行とデバッグ] で、[ リモートの起動 (Edge)] または [ リモートの起動 (Chrome)] を選択します。
F5 キーを選択して、Teams アプリをデバッグしてプレビューします。

次の手順

機能を追加するためのハウツーガイド

次の方法で共有

Teams アプリにタブ機能を追加する

前提条件

Teams アプリの [構成] タブ

アプリマニフェストの更新

ローカルデバッグ環境のセットアップ

アプリを Azure にプロビジョニングする

次の手順

関連項目

その他のリソース

次の方法で共有

Teams アプリにタブ機能を追加する

前提条件

Teams アプリの [構成] タブ

アプリ マニフェストの更新

ローカル デバッグ環境のセットアップ

アプリを Azure にプロビジョニングする

次の手順

関連項目

その他のリソース

アプリマニフェストの更新

ローカルデバッグ環境のセットアップ