チャネル/グループ タブ

チャネル/グループ タブは、コンテンツをチャネルやグループのチャットに配信します。また、専用の Web ベースのコンテンツまわりに関する共同作業スペースを作成するのに優れた方法です。

Node.js を使用してカスタム チャネル/グループ タブを作成する

  1. コマンド プロンプトで、Node.js をインストールした後に次のコマンドを入力して、Yeomangulp-cli のパッケージをインストールします。

    npm install yo gulp-cli --global
    
  2. コマンド プロンプトで、次のコマンドを入力して Microsoft Teams アプリ ジェネレーターをインストールします。

    npm install generator-teams --global
    

チャネル/グループ タブを作成する手順を次に示します。

チャネル/グループ タブを使用してアプリケーションを生成する

  1. コマンド プロンプトで、チャネル/グループ タブの新しいディレクトリを作成します。

  2. 新しいディレクトリに次のコマンドを入力して、Microsoft Teams アプリ ジェネレーターを起動します。

    yo teams
    
  3. Microsoft Teams アプリ ジェネレーターによって求められる一連の質問に値を入力し、manifest.json ファイルを更新します。

    ジェネレーターを開くスクリーンショット

    manifest.json ファイルを更新するための一連の質問
    • ソリューション名は何ですか?

      ソリューション名はプロジェクト名です。 候補の名前をそのまま使用するには、Enter キーを押します。

    • ファイルをどこに保存しますか?

      現在、プロジェクト ディレクトリにいます。 Enter キーを押します。

    • Microsoft Teams アプリ プロジェクトのタイトル

      タイトルはアプリ パッケージ名であり、アプリ マニフェストと説明で使用されます。 タイトルを入力するか、Enter キーを押して既定の名前をそのまま使用します。

    • (会社) 名 (最大 32 文字)

      会社名はアプリ マニフェストで使用されます。 会社名を入力するか、Enter キーを押して既定の名前をそのまま使用します。

    • 使用するマニフェスト バージョン

      既定のスキーマを選択します。

    • クイック スキャフォールディング (Y/n)

      既定値は [はい] です。Microsoft パートナー ID を入力するには、[n] を入力します。

    • Microsoft パートナー ID (お持ちの場合): (空白のままにする)

      このフィールドは必須ではなく、既に Microsoft Partner Network に参加している場合にのみ使用する必要があります。

    • プロジェクトに何を追加しますか?

      ( * ) A タブ を選択します。

    • このソリューションをホストする URL

      既定では、ジェネレーターは Azure Web サイトの URL を提案します。 アプリをローカルでのみテストしているため、有効な URL は必要ありません。

    • アプリ/タブが読み込まれたときに、読み込みインジケーターを表示しますか?

      アプリまたはタブの読み込み時に読み込みインジケーターを含め ない ことを選択します。 既定値は [いいえ] です。[n] を入力します。

    • 個人用アプリをタブ ヘッダーバーなしでレンダリングしますか?

      タブのヘッダーバーなしで表示される個人用アプリを含め ない ことを選択します。 既定値は [いいえ] です。[n] を入力します。

    • Test フレームワークと初期テストを含めますか? (y/N)

      このプロジェクトのテスト フレームワークを含め ない ことを選択します。 既定値は [いいえ] です。[n] を入力します。

    • ESLint のサポートを含めますか? (y/N)

      ESLint サポートを含めないことを選択します。 既定値は [いいえ] です。[n] を入力します。

    • テレメトリに Azure Application Insights を使用しますか? (y/N)

      Azure Application Insights を含め ない ことを選択します。 既定値は [いいえ] です。[n] を入力します。

    • 既定のタブ名 (最大 16 文字)

      タブに名前を付けます。このタブ名は、ファイルまたは URL パス コンポーネントとしてプロジェクト全体で使用されます。

    • どのような種類のタブを作成しますか?

      方向キーを使用して [構成可能] タブを選択します。

    • タブにどのようなスコープを使用しますか?

      チームまたはグループ チャットを選択できます。

    • タブに Microsoft Azure Active Directory (Azure AD) シングル サインオンのサポートが必要ですか?

      タブに Microsoft Azure Active Directory (Azure AD) シングル サインオンのサポートを含め ない ことを選択します。既定値は [はい] です。[n] を入力します。

    • このタブを SharePoint Online で使用できるようにしますか? (Y/n)

      [n] を入力します。

重要

パス コンポーネント [yourDefaultTabNameTab] は、[既定のタブ名] のジェネレーターに入力した値に、[Tab] という単語を加えたものです。たとえば、DefaultTabName[myTab] なら、[/MyTabTab/] となります。

アプリ パッケージを作成する

Teams でアプリケーションをビルドして実行するには、アプリ パッケージが必要です。 アプリ パッケージは、manifest.json ファイルを検証し、./package ディレクトリに zip フォルダーを生成する gulp タスクを使用して作成されます。 コマンド プロンプトで、次のコマンドを入力します。

gulp manifest

アプリケーションをビルドして実行する

アプリケーションをビルドする

コマンド プロンプトで次のコマンドを入力して、ソリューションを ./dist フォルダーに移します:

gulp build

アプリケーションを実行する

  1. コマンド プロンプトで次のコマンドを入力して、ローカル Web サーバーを起動します。

    gulp serve
    
  2. ブラウザーで http://localhost:3007/<yourDefaultAppNameTab>/ を入力して、アプリケーションのホーム ページを表示します。

    既定のタブ

  3. タブ構成ページを表示するには、http://localhost:3007/<yourDefaultAppNameTab>/config.html に移動します。 以下の内容が表示されます。

    タブ構成ページ

タブへのセキュリティで保護されたトンネルを確立する

タブへのセキュリティで保護されたトンネルを確立するには、localhost を終了し、次のコマンドを入力します。

gulp ngrok-serve

重要

タブが ngrok 経由で Microsoft Teams にアップロードされ、正常に保存されたら、トンネル セッションが終了するまで Teams で表示できます。 ngrok セッションを再起動する場合は、新しい URL でアプリを更新する必要があります。

Microsoft Teams にアプリ パッケージをアップロードする

  1. Microsoft Teams に移動し、[アプリ]  [Teamsストア] を選択します。

  2. [アプリの管理] を選択し、[カスタム アプリをアップロード] を選択します。

  3. プロジェクト ディレクトリに移動し、./package フォルダーに移動し、アプリ パッケージの zip フォルダーを選択し、[開く] を選択します。

    アップロードされたチャネル タブ

  4. ダイアログで [追加] を選択します。 タブが Teams にアップロードされます。

    注意

    [追加] がダイアログ ボックスに表示されない場合は、アップロードされたアプリ パッケージ zip フォルダーのマニフェストから次のコードを削除します。 もう一度フォルダーを zip 圧縮し、Teams にアップロードします。

    "staticTabs": [],
    "bots": [],
    "connectors": [],
    "composeExtensions": [],
    
  5. 指示に従ってタブを追加します。チャネル/グループ タブのカスタム構成ダイアログがあります。

  6. [保存] を選択すると、タブがチャネルのタブ バーに追加されます。

    アップロードされたチャネル タブ

    これで、Teams でチャネル/グループ タブが正常に作成され、追加されました。

ASP.NET Core を使用してカスタム チャネル/グループ タブを作成する

  1. コマンド プロンプトで、タブ プロジェクトの新しいディレクトリを作成します。

  2. 次のコマンドを使用してサンプル リポジトリを新しいディレクトリに複製するか、ソース コードをダウンロードしてファイルを抽出できます。

    git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
    

チャネル/グループ タブを作成する手順を次に示します。

チャネル/グループ タブを使用してアプリケーションを生成する

  1. Visual Studio を開き、[プロジェクトまたはソリューションを開く] を選択します。

  2. Microsoft-Teams-Samples > samples > tab-channel-group > razor-csharp フォルダーに移動し、channelGroupTab.sln を開きます。

  3. Visual Studio で [F5] を選択するか、アプリケーションの デバッグ メニューから [デバッグの開始] を選択して、アプリケーションが正しく読み込まれたかどうかを確認します。 ブラウザーで、次の URL に移動します。

    • https://localhost:3978/
    • https://localhost:3978/privacy
    • https://localhost:3978/tou
ソース コードを確認する

Startup.cs

このプロジェクトは ASP.NET Core 3.1 Web アプリケーションの空のテンプレートから作成され、セットアップ時に [Advanced * Configure for HTTPS] チェック ボックスがオンになっています。 MVC サービスは、依存関係挿入フレームワーク ConfigureServices() のメソッドによって登録されます。 また、空のテンプレートでは、既定では静的コンテンツの提供が有効にされないため、次のコードを使用して静的ファイル ミドルウェアがメソッド Configure() に追加されます。

public void ConfigureServices(IServiceCollection services)
  {
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
  }
public void Configure(IApplicationBuilder app)
  {
    app.UseStaticFiles();
    app.UseMvc();
  }

wwwroot フォルダー

ASP.NET Core では、Web ルート フォルダーは、アプリケーションが静的ファイルを検索する場所です。

Index.cshtml

ASP.NET Core は、Index という名前のファイルをサイトの既定またはホーム ページとして扱います。 ブラウザー URL がサイトのルートを指すと、Index.cshtml がアプリケーションのホーム ページとして表示されます。

Tab.cs

この C# ファイルには、構成中に Tab.cshtml から呼び出されるメソッドが含まれています。

AppManifest フォルダー

このフォルダーには、次の必須アプリ パッケージ ファイルが含まれています:

  • 192 x 192 ピクセルの フル カラー アイコン
  • 32 x 32 ピクセルの 透明なアウトライン アイコン
  • アプリの属性を指定する manifest.json ファイル。

これらのファイルは、Teams へのタブのアップロードに使用するために、アプリ パッケージで zip 形式にする必要があります。 ユーザーがタブの追加または更新を選択すると、Microsoft Teams は、マニフェストで指定された configurationUrl を読み込み、IFrame に埋め込み、タブにレンダリングします。

.csproj

Visual Studio ソリューション エクスプローラー ウィンドウで、プロジェクトを右クリックし、[プロジェクト ファイルの編集] を選択します。 ファイルの最後に、アプリケーションのビルド時に zip フォルダーを作成して更新する次のコードが表示されます。

<PropertyGroup>
    <PostBuildEvent>powershell.exe Compress-Archive -Path \"$(ProjectDir)AppManifest\*\" -DestinationPath \"$(TargetDir)tab.zip\" -Force</PostBuildEvent>
  </PropertyGroup>

  <ItemGroup>
    <EmbeddedResource Include="AppManifest\icon-outline.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\icon-color.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\manifest.json">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
  </ItemGroup>

タブへのセキュリティで保護されたトンネルを確立する

プロジェクト ディレクトリのルートにあるコマンド プロンプトで、次のコマンドを実行して、タブへのセキュリティで保護されたトンネルを確立します。

ngrok http 3978 --host-header=localhost

ngrok を実行したままコマンド プロンプトを確実に維持し、URL をメモしておきます。

アプリケーションを更新する

  1. Visual Studio ソリューション エクスプローラーを開き、[ページ] > [共有] フォルダーに移動し、_Layout.cshtml を開き、次を追加します: タグ セクション:

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
    <script src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"></script>
    

    重要

    最新バージョンを表していないため、このページから <script src="..."> URL をコピーして貼り付けないでください。 SDK の最新バージョンを取得するには、常に Microsoft Teams JavaScript API に移動してください。

  2. script タグに microsoftTeams.initialize(); の呼び出しを挿入します。

  3. Visual Studio ソリューション エクスプローラーで [ページ] フォルダーに移動し、Tab.cshtml を開きます。

    Tab.cshtml では、アプリケーションは、赤または灰色のアイコンでタブを表示するための 2 つのオプション ボタンをユーザーに表示します。 [灰色を選択] ボタンまたは [赤を選択] ボタンを選択すると、それぞれ saveGray() または saveRed() がトリガーされ、settings.setValidityState(true) が設定され、構成ページの [保存] ボタンが有効になります。 このコードは、構成要件が完了し、インストールを続行できることを Teams に知らせます。 settings.setSettings のパラメーターが設定されます。 最後に、コンテンツ URL が正常に解決されたことを示すために、saveEvent.notifySuccess() が呼び出されます。

  4. タブの HTTPS ngrok URL を使用して、各関数の websiteUrlcontentUrl の値を更新します。

    コードには、y8rCgT2b が ngrok URL に置き換えられた次のものが含まれるはずです。

    
        let saveGray = () => {
            microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) {
                microsoftTeams.settings.setSettings({
                    websiteUrl: `https://y8rCgT2b.ngrok.io`,
                    contentUrl: `https://y8rCgT2b.ngrok.io/gray/`,
                    entityId: "grayIconTab",
                    suggestedDisplayName: "MyNewTab"
                });
                saveEvent.notifySuccess();
            });
        }
    
        let saveRed = () => {
            microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) {
                microsoftTeams.settings.setSettings({
                    websiteUrl: `https://y8rCgT2b.ngrok.io`,
                    contentUrl: `https://y8rCgT2b.ngrok.io/red/`,
                    entityId: "redIconTab",
                    suggestedDisplayName: "MyNewTab"
                });
                saveEvent.notifySuccess();
        });
        }
    
  5. 更新された Tab.cshtml を保存します。

アプリケーションをビルドして実行する

  1. Visual Studioで F5 を選択するか、[デバッグ] メニューから [デバッグの開始] を選択します。

  2. ブラウザーを開き、コマンド プロンプト ウィンドウに表示された ngrok HTTPS URL を使用してコンテンツ ページに移動して、ngrok が正常に動作していることを確認します。

    ヒント

    この記事で説明する手順を完了するには、アプリケーションを Visual Studio と ngrok の両方で実行する必要があります。 Visual Studio でアプリケーションの実行を停止して作業する必要がある場合は、ngrok を実行し続けます。 Visual Studio で再起動すると、アプリケーションの要求をリッスンしてルーティングを再開します。 ngrok サービスを再起動する必要がある場合は、新しい URL が返され、アプリケーションを新しい URL で更新する必要があります。

開発者ポータルを使用してアプリ パッケージを更新する

  1. Microsoft Teams に移動します。 Web ベースのバージョンを使用する場合は、ブラウザーの開発者ツールを使用してフロントエンド コードを検査することができます。

  2. 開発者ポータルに移動します。

  3. [アプリ] を開き、[アプリのインポート] を選択します。

  1. アプリ パッケージの名前は tab.zip です。 次のパスで使用できます:

    /bin/Debug/netcoreapp3.1/tab.zip
    
  2. 開発者ポータルで tab.zip を選択して開きます。

  3. 既定の アプリ ID が作成され、[基本情報] セクションに入力されます。

  4. [説明] にアプリの短い説明と長い説明を追加します。

  5. [開発者情報] で、必要な詳細を追加し、Web サイト (有効な HTTPS URL である必要があります) に ngrok HTTPS URL を指定します。

  6. [アプリの URL] で、プライバシー ポリシーを https://<yourngrokurl>/privacy に、利用規約を https://<yourngrokurl>/tou に更新して保存します。

  7. [アプリの機能] で、[グループ アプリとチャネル アプリ] を選択します。 https://<yourngrokurl>/tab構成 URL を更新し、[スコープ] タブを選択します。

  8. [保存] を選択します。

  9. [ドメイン] セクションでは、タブのドメインに HTTPS プレフィックス <yourngrokurl>.ngrok.io のない ngrok URL を含める必要があります。

Teams でアプリをプレビューする

  1. [開発者ポータル] ツール バーの [Teamsでプレビュー] を選択すると、アプリが正常にサイドロードされたことを開発者ポータルから通知されます。 アプリの [追加] ページが表示されます。

  2. [チームに追加] を選択して、チームのタブを設定します。 タブを構成し、[保存] を選択します。 タブが Teams で利用できるようになりました。

    アップロードされたチャネル タブの ASPNET

    これで、Teams でチャネル/グループ タブが正常に作成され、追加されました。

ASP.NET Core MVC を使用してカスタム チャネル/グループ タブを作成する

  1. コマンド プロンプトで、タブ プロジェクトの新しいディレクトリを作成します。

  2. 次のコマンドを使用してサンプル リポジトリを新しいディレクトリに複製するか、ソース コードをダウンロードしてファイルを抽出できます。

    git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
    

チャネル/グループ タブを作成する手順を次に示します。

チャネル/グループ タブを使用してアプリケーションを生成する

  1. Visual Studio を開き、[プロジェクトまたはソリューションを開く] を選択します。

  2. Microsoft-Teams-Samples > samples > tab-channel-group > mvc-csharp フォルダーに移動し、ChannelGroupTabMVC.sln を開きます。

  3. Visual Studio で [F5] を選択するか、アプリケーションの デバッグ メニューから [デバッグの開始] を選択して、アプリケーションが正しく読み込まれたかどうかを確認します。 ブラウザーで、次の URL に移動します。

    • https://localhost:3978/
    • https://localhost:3978/privacy
    • https://localhost:3978/tou
ソース コードを確認する

Startup.cs

このプロジェクトは ASP.NET Core 3.1 Web アプリケーションの空のテンプレートから作成され、セットアップ時に [Advanced - Configure for HTTPS] チェック ボックスがオンになっています。 MVC サービスは、依存関係挿入フレームワーク ConfigureServices() のメソッドによって登録されます。 また、空のテンプレートでは、既定では静的コンテンツの提供が有効にされないため、次のコードを使用して静的ファイル ミドルウェアがメソッド Configure() に追加されます。

public void ConfigureServices(IServiceCollection services)
  {
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
  }
public void Configure(IApplicationBuilder app)
  {
    app.UseStaticFiles();
    app.UseMvc();
  }

wwwroot フォルダー

ASP.NET Core では、Web ルート フォルダーは、アプリケーションが静的ファイルを検索する場所です。

AppManifest フォルダー

このフォルダーには、次の必須アプリ パッケージ ファイルが含まれています:

  • 192 x 192 ピクセルの フル カラー アイコン
  • 32 x 32 ピクセルの 透明なアウトライン アイコン
  • アプリの属性を指定する manifest.json ファイル。

これらのファイルは、Teams へのタブのアップロードに使用するために、アプリ パッケージで zip 形式にする必要があります。

.csproj

Visual Studio ソリューション エクスプローラー ウィンドウで、プロジェクトを右クリックし、[プロジェクト ファイルの編集] を選択します。 ファイルの最後にアプリケーションのビルド時に zip フォルダーを作成して更新する次のコードが表示されます。

<PropertyGroup>
    <PostBuildEvent>powershell.exe Compress-Archive -Path \"$(ProjectDir)AppManifest\*\" -DestinationPath \"$(TargetDir)tab.zip\" -Force</PostBuildEvent>
  </PropertyGroup>

  <ItemGroup>
    <EmbeddedResource Include="AppManifest\icon-outline.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\icon-color.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\manifest.json">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
  </ItemGroup>

モデル

ChannelGroup.cs は、構成中にコントローラーから呼び出されるメッセージ オブジェクトとメソッドを表わします。

ビュー

これらは、ASP.NET Core MVC のさまざまなビューです。

  • ホーム: ASP.NET Core は、Index という名前のファイルをサイトの既定またはホーム ページとして扱います。 ブラウザー URL がサイトのルートを指すと、Index.cshtml がアプリケーションのホーム ページとして表示されます。

  • 共有: 部分ビュー マークアップ _Layout.cshtml には、アプリケーションの全体的なページ構造と共有ビジュアル要素が含まれています。 また、Teams ライブラリも参照します。

コントローラー

コントローラーは、ViewBag プロパティを使用して、ビューに値を動的に転送します。

タブへのセキュリティで保護されたトンネルを確立する

プロジェクト ディレクトリのルートにあるコマンド プロンプトで、次のコマンドを実行して、タブへのセキュリティで保護されたトンネルを確立します。

ngrok http 3978 --host-header=localhost

ngrok を実行したままコマンド プロンプトを確実に維持し、URL をメモしておきます。

アプリケーションを更新する

  1. Visual Studio ソリューション エクスプローラーを開き、[ビュー] > [共有] フォルダーに移動し、_Layout.cshtml を開き、次を追加します: タグ セクション:

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
    <script src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"></script>
    

    重要

    最新バージョンを表していないため、このページから <script src="..."> URL をコピーして貼り付けないでください。 SDK の最新バージョンを取得するには、常に Microsoft Teams JavaScript API に移動してください。

  2. script タグに microsoftTeams.initialize(); の呼び出しを挿入します。

  3. Visual Studio ソリューション エクスプローラーで [タブ] フォルダーに移動し、Tab.cshtml を開きます。

    Tab.cshtml では、アプリケーションは、赤または灰色のアイコンでタブを表示するための 2 つのオプション ボタンをユーザーに表示します。 [灰色を選択] ボタンまたは [赤を選択] ボタンを選択すると、それぞれ saveGray() または saveRed() がトリガーされ、settings.setValidityState(true) が設定され、構成ページの [保存] ボタンが有効になります。 このコードは、構成要件が完了し、インストールを続行できることを Teams に知らせます。 settings.setSettings のパラメーターが設定されます。 最後に、コンテンツ URL が正常に解決されたことを示すために、saveEvent.notifySuccess() が呼び出されます。

  4. タブの HTTPS ngrok URL を使用して、各関数の websiteUrlcontentUrl の値を更新します。

    コードには、y8rCgT2b が ngrok URL に置き換えられた次のものが含まれるはずです。

    
        let saveGray = () => {
            microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) {
                microsoftTeams.settings.setSettings({
                    websiteUrl: `https://y8rCgT2b.ngrok.io`,
                    contentUrl: `https://y8rCgT2b.ngrok.io/gray/`,
                    entityId: "grayIconTab",
                    suggestedDisplayName: "MyNewTab"
                });
                saveEvent.notifySuccess();
            });
        }
    
        let saveRed = () => {
            microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) {
                microsoftTeams.settings.setSettings({
                    websiteUrl: `https://y8rCgT2b.ngrok.io`,
                    contentUrl: `https://y8rCgT2b.ngrok.io/red/`,
                    entityId: "redIconTab",
                    suggestedDisplayName: "MyNewTab"
                });
                saveEvent.notifySuccess();
            });
        }
    
  5. 更新された Tab.cshtml を必ず保存してください。

アプリケーションをビルドして実行する

  1. Visual Studioで F5 を選択するか、[デバッグ] メニューから [デバッグの開始] を選択します。

  2. ブラウザーを開き、コマンド プロンプト ウィンドウに表示された ngrok HTTPS URL を使用してコンテンツ ページに移動して、ngrok が正常に動作していることを確認します。

    ヒント

    この記事で説明する手順を完了するには、アプリケーションを Visual Studio と ngrok の両方で実行する必要があります。 Visual Studio でアプリケーションの実行を停止して作業する必要がある場合は、ngrok を実行し続けます。 Visual Studio で再起動すると、アプリケーションの要求をリッスンしてルーティングを再開します。 ngrok サービスを再起動する必要がある場合は、新しい URL が返され、アプリケーションを新しい URL で更新する必要があります。

開発者ポータルを使用してアプリ パッケージを更新する

  1. Microsoft Teams に移動します。 Web ベースのバージョンを使用する場合は、ブラウザーの開発者ツールを使用してフロントエンド コードを検査することができます。

  2. 開発者ポータルに移動します。

  3. [アプリ] を開き、[アプリのインポート] を選択します。

  4. アプリ パッケージの名前は tab.zip です。 次のパスで使用できます:

    /bin/Debug/netcoreapp3.1/tab.zip
    
  5. tab.zip を選択し、開発者ポータルで開きます。

  6. 既定の アプリ ID が作成され、[基本情報] セクションに入力されます。

  7. [説明] にアプリの短い説明と長い説明を追加します。

  8. [開発者情報] で、必要な詳細を追加し、Web サイト (有効な HTTPS URL である必要があります) に ngrok HTTPS URL を指定します。

  9. [アプリの URL] で、プライバシー ポリシーを https://<yourngrokurl>/privacy に、利用規約を https://<yourngrokurl>/tou に更新して保存します。

  10. [アプリの機能] で、[グループ アプリとチャネル アプリ] を選択します。 https://<yourngrokurl>/tab構成 URL を更新し、[スコープ] タブを選択します。

  11. [保存] を選択します。

  12. [ドメイン] セクションでは、タブのドメインに HTTPS プレフィックス <yourngrokurl>.ngrok.io のない ngrok URL を含める必要があります。

Teams でアプリをプレビューする

  1. [開発者ポータル] ツール バーの [Teamsでプレビュー] を選択すると、アプリが正常にサイドロードされたことを開発者ポータルから通知されます。 アプリの [追加] ページが表示されます。

  2. [チームに追加] を選択して、チームのタブを設定します。 タブを構成し、[保存] を選択します。 タブが Teams で利用できるようになりました。

    アップロードされたチャネル タブの ASPNET MVC

    これで、Teams でチャネル/グループ タブが正常に作成され、追加されました。

次のステップ

関連項目