次の方法で共有

モバイル用のデバッグ

  • [アーティクル]

タブ、ボット、またはメッセージ拡張機能を含むMicrosoft Teams アプリをビルドする場合は、アプリをデバッグして、Android と iOS Microsoft Teamsモバイル クライアントの両方でアプリがどのように機能するかを把握する必要があります。 詳細については、「 Teams アプリをローカルでデバッグする」を参照してください。

モバイル クライアントで Teams アプリをデバッグする方法については、次のビデオを参照してください。

タブ アプリをデバッグする

タブ アプリをデバッグするには、次の手順に従います。

プロジェクト フォルダーとファイルは、Microsoft Visual Studio Code のエクスプローラーの下に表示できます。

  1. task.json ファイルにValidate prerequisitesした後にStart local tunnelを追加して、モバイル クライアントでタブ アプリにアクセスできるようにします。

  2. task.json ファイルの プロパティ dependsOrderの後に、次のコードを追加します。

    {
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Start Teams App Locally",
      "dependsOn": [
        "Validate prerequisites",
        "Start local tunnel", // Add this line
        "Provision",
        "Deploy",
        "Start application"
      ],
      "dependsOrder": "sequence"
    },
    {
      // Add this task
      "label": "Start local tunnel",
      "type": "teamsfx",
      "command": "debug-start-local-tunnel",
      "args": {
        "type": "dev-tunnel",
        "ports": [
          {
            "portNumber": 53000,
            "protocol": "https",
            "access": "private",
            "writeToEnvironmentFile": {
              "endpoint": "TAB_ENDPOINT",
              "domain": "TAB_DOMAIN"
            }
          }
        ],
        "env": "local"
      },
      "isBackground": true,
      "problemMatcher": "$teamsfx-local-tunnel-watch"
    }
  ]
}

    注:

    • モバイル クライアントでのみタブ アプリをプレビューするには、 access プロパティの値を private に設定します。
    • 開発トンネル のアクセス値が private に設定されている場合、Web クライアントの iframe 内にタブ アプリを表示することはできません。 ログイン ページは、X-FRAME-Options ヘッダーが DENY に設定されている login.microsoftonline.com でホストされます。
    • モバイル クライアントでタブ アプリをプレビューし、Web クライアントでデバッグするには、アクセス値を public に設定します。 アプリの URL を持つすべてのユーザーがタブにアクセスできます。

  3. teamsapp.local.yml ファイルからTAB_DOMAINとTAB_ENDPOINTを削除します。

    - uses: script 
  with:
    run:
      echo "::set-teamsfx-env TAB_DOMAIN=localhost:53000";
      echo "::set-teamsfx-env TAB_ENDPOINT=https://localhost:53000";

  4. Reactを使用している場合は、teamsapp.local.yml ファイルに構成WDS_SOCKET_PORT=0を追加して、トンネル サービスを利用した後、Reactでデバッグ中にホット リロードをアクティブにします。

      - uses: file/createOrUpdateEnvironmentFile
    with:
      target: ./.localConfigs
      envs:
        BROWSER: none
        HTTPS: true
        PORT: 53000
        SSL_CRT_FILE: ${{SSL_CRT_FILE}}
        SSL_KEY_FILE: ${{SSL_KEY_FILE}}
        REACT_APP_CLIENT_ID: ${{AAD_APP_CLIENT_ID}} 
        REACT_APP_START_LOGIN_PAGE_URL: ${{TAB_ENDPOINT}}/auth-start.html 
        WDS_SOCKET_PORT: 0

  5. デプロイされたアプリを実行する

    1. Visual Studio Code からデバッグ パネル (Ctrl + Shift + D または View > Run) を開きます。
    2. [起動構成] ドロップダウンから [ Teams でリモートの起動 (Edge)] を選択します。
    3. [デバッグの開始 (F5)] ボタンを選択します。

    アプリをリモートで起動する方法を示すスクリーンショット。

    1. カスタム アプリを Teams にアップロードするように求められます。 [追加] を選択します。

      インストールされているアプリを示すスクリーンショット。

      アプリは個人用タブとして開きます。

      個人用タブ アプリ ページを示すスクリーンショット。

モバイル クライアントでタブ アプリをテストする

  1. プレビューアプリを見つけるには、モバイル デバイスで Teams を開き、[ その他] を選択します。

    Teams モバイル クライアントのその他のオプションを示すスクリーンショット。

    注:

    以前にアプリをデバッグしたことがある場合は、モバイル デバイス上のキャッシュをクリアして、アプリの即時同期を確保することをお勧めします。 キャッシュをクリアした後、アプリの同期に時間がかかります。

Teams アプリ データをクリアするには、[設定>Teams>Clear App Data] に移動します。

[iOS モバイル クライアント] タブでアプリ データをクリアする方法を示すスクリーンショット。

  1. 開発トンネルに初めてアクセスする場合は、Microsoft 365 アカウントにサインインし、[続行] を選択 します。

    Microsoft 365 サインイン ページを示すスクリーンショット。

    注:

    デバイスごとに 1 回だけログインする必要があり、アプリをインストールするたびにフィッシング対策ページを確認する必要があります。

  2. 最初のモバイル タブ アプリが作成されます。

    モバイル タブ アプリを示すスクリーンショット。

  3. Android デバイスの場合は、 DevTools を 使用して、実行中にタブをデバッグします。

モバイル クライアントでボット アプリをテストする

  1. モバイル クライアントでボットをテストするには、「ボットの モバイル クライアントでタブ アプリをテストする」 に記載されている手順に従います。

    注:

    以前にボット アプリをデバッグしていて、アプリ マニフェスト (以前は Teams アプリ マニフェストと呼ばれる) ファイルが変更された場合は、モバイル デバイス上のキャッシュをクリアして、アプリの即時同期を確保することをお勧めします。 キャッシュをクリアした後、アプリの同期に時間がかかります。

Teams アプリ データをクリアするには、[設定>Teams>Clear App Data] に移動します。

ボット用の iOS モバイル クライアントでアプリ データをクリアする方法を示すスクリーンショット。

  1. 最初のモバイル ボット アプリが作成されます。

    モバイル クライアントのボット アプリを示すスクリーンショット。