チャネル/グループタブ

[アーティクル]
04/29/2022

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

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

コマンドプロンプトで、Node.js をインストールした後に次のコマンドを入力して、Yeoman と gulp-cli のパッケージをインストールします。
```
npm install yo gulp-cli --global
```
コマンドプロンプトで、次のコマンドを入力して Microsoft Teams アプリジェネレーターをインストールします。
```
npm install generator-teams --global
```

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

チャネル/グループタブを使用してアプリケーションを生成する
アプリパッケージを作成する
アプリケーションをビルドして実行する
タブへのセキュリティで保護されたトンネルを確立する
Teams にアプリケーションをアップロードする

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

コマンドプロンプトで、チャネル/グループタブの新しいディレクトリを作成します。
新しいディレクトリに次のコマンドを入力して、Microsoft Teams アプリジェネレーターを起動します。
```
yo teams
```
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

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

コマンドプロンプトで次のコマンドを入力して、ローカル Web サーバーを起動します。
```
gulp serve
```
ブラウザーで http://localhost:3007/<yourDefaultAppNameTab>/ を入力して、アプリケーションのホームページを表示します。
タブ構成ページを表示するには、http://localhost:3007/<yourDefaultAppNameTab>/config.html に移動します。以下の内容が表示されます。

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

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

gulp ngrok-serve

重要

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

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

Microsoft Teams に移動し、[アプリ] を選択します。
[アプリの管理] を選択し、[カスタムアプリをアップロード] を選択します。
プロジェクトディレクトリに移動し、./package フォルダーに移動し、アプリパッケージの zip フォルダーを選択し、[開く] を選択します。
ダイアログで [追加] を選択します。タブが Teams にアップロードされます。
注意

[追加] がダイアログボックスに表示されない場合は、アップロードされたアプリパッケージ zip フォルダーのマニフェストから次のコードを削除します。もう一度フォルダーを zip 圧縮し、Teams にアップロードします。
```
"staticTabs": [],
"bots": [],
"connectors": [],
"composeExtensions": [],
```
指示に従ってタブを追加します。チャネル/グループタブのカスタム構成ダイアログがあります。
[保存] を選択すると、タブがチャネルのタブバーに追加されます。

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

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

コマンドプロンプトで、タブプロジェクトの新しいディレクトリを作成します。
次のコマンドを使用してサンプルリポジトリを新しいディレクトリに複製するか、ソースコードをダウンロードしてファイルを抽出できます。
```
git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
```

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

チャネル/グループタブを使用してアプリケーションを生成する
タブへのセキュリティで保護されたトンネルを確立する
アプリケーションを更新する
アプリケーションをビルドして実行する
開発者ポータルを使用してアプリパッケージを更新する
Teams でアプリをプレビューする

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

Visual Studio を開き、[プロジェクトまたはソリューションを開く] を選択します。
Microsoft-Teams-Samples > samples > tab-channel-group > razor-csharp フォルダーに移動し、channelGroupTab.sln を開きます。
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 をメモしておきます。

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

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 に移動してください。
script タグに microsoftTeams.initialize(); の呼び出しを挿入します。
Visual Studio ソリューションエクスプローラーで [ページ] フォルダーに移動し、Tab.cshtml を開きます。

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

タブの HTTPS ngrok URL を使用して、各関数の websiteUrl と contentUrl の値を更新します。

コードには、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();
    });
    }

更新された Tab.cshtml を保存します。

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

Visual Studioで F5 を選択するか、[デバッグ] メニューから [デバッグの開始] を選択します。
ブラウザーを開き、コマンドプロンプトウィンドウに表示された ngrok HTTPS URL を使用してコンテンツページに移動して、ngrok が正常に動作していることを確認します。

ヒント

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

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

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

アプリパッケージの名前は tab.zip です。次のパスで使用できます:
```
/bin/Debug/netcoreapp3.1/tab.zip
```
開発者ポータルで tab.zip を選択して開きます。
既定の アプリ ID が作成され、[基本情報] セクションに入力されます。
[説明] にアプリの短い説明と長い説明を追加します。
[開発者情報] で、必要な詳細を追加し、Web サイト (有効な HTTPS URL である必要があります) に ngrok HTTPS URL を指定します。
[アプリの URL] で、プライバシーポリシーを https://<yourngrokurl>/privacy に、利用規約を https://<yourngrokurl>/tou に更新して保存します。
[アプリの機能] で、[グループアプリとチャネルアプリ] を選択します。 https://<yourngrokurl>/tab で 構成 URL を更新し、[スコープ] タブを選択します。
[保存] を選択します。
[ドメイン] セクションでは、タブのドメインに HTTPS プレフィックス <yourngrokurl>.ngrok.io のない ngrok URL を含める必要があります。

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

[開発者ポータル] ツールバーの [Teamsでプレビュー] を選択すると、アプリが正常にサイドロードされたことを開発者ポータルから通知されます。アプリの [追加] ページが表示されます。
[チームに追加] を選択して、チームのタブを設定します。タブを構成し、[保存] を選択します。タブが Teams で利用できるようになりました。

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

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

コマンドプロンプトで、タブプロジェクトの新しいディレクトリを作成します。
次のコマンドを使用してサンプルリポジトリを新しいディレクトリに複製するか、ソースコードをダウンロードしてファイルを抽出できます。
```
git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
```

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

チャネル/グループタブを使用してアプリケーションを生成する
タブへのセキュリティで保護されたトンネルを確立する
アプリケーションを更新する
アプリケーションをビルドして実行する
開発者ポータルを使用してアプリパッケージを更新する
Teams でアプリをプレビューする

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

Visual Studio を開き、[プロジェクトまたはソリューションを開く] を選択します。
Microsoft-Teams-Samples > samples > tab-channel-group > mvc-csharp フォルダーに移動し、ChannelGroupTabMVC.sln を開きます。
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 をメモしておきます。

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

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 に移動してください。
script タグに microsoftTeams.initialize(); の呼び出しを挿入します。
Visual Studio ソリューションエクスプローラーで [タブ] フォルダーに移動し、Tab.cshtml を開きます。

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

タブの HTTPS ngrok URL を使用して、各関数の websiteUrl と contentUrl の値を更新します。

コードには、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();
        });
    }

更新された Tab.cshtml を必ず保存してください。

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

Visual Studioで F5 を選択するか、[デバッグ] メニューから [デバッグの開始] を選択します。
ブラウザーを開き、コマンドプロンプトウィンドウに表示された ngrok HTTPS URL を使用してコンテンツページに移動して、ngrok が正常に動作していることを確認します。

ヒント

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

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

Microsoft Teams に移動します。 Web ベースのバージョンを使用する場合は、ブラウザーの開発者ツールを使用してフロントエンドコードを検査することができます。
開発者ポータルに移動します。
[アプリ] を開き、[アプリのインポート] を選択します。
アプリパッケージの名前は tab.zip です。次のパスで使用できます:
```
/bin/Debug/netcoreapp3.1/tab.zip
```
tab.zip を選択し、開発者ポータルで開きます。
既定の アプリ ID が作成され、[基本情報] セクションに入力されます。
[説明] にアプリの短い説明と長い説明を追加します。
[開発者情報] で、必要な詳細を追加し、Web サイト (有効な HTTPS URL である必要があります) に ngrok HTTPS URL を指定します。
[アプリの URL] で、プライバシーポリシーを https://<yourngrokurl>/privacy に、利用規約を https://<yourngrokurl>/tou に更新して保存します。
[アプリの機能] で、[グループアプリとチャネルアプリ] を選択します。 https://<yourngrokurl>/tab で 構成 URL を更新し、[スコープ] タブを選択します。
[保存] を選択します。
[ドメイン] セクションでは、タブのドメインに HTTPS プレフィックス <yourngrokurl>.ngrok.io のない ngrok URL を含める必要があります。

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

[開発者ポータル] ツールバーの [Teamsでプレビュー] を選択すると、アプリが正常にサイドロードされたことを開発者ポータルから通知されます。アプリの [追加] ページが表示されます。
[チームに追加] を選択して、チームのタブを設定します。タブを構成し、[保存] を選択します。タブが Teams で利用できるようになりました。

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

次のステップ

コンテンツページを作成する

チャネル/グループ タブ

このページはお役に立ちましたか?

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

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

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

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

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

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

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

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

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

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

Startup.cs

wwwroot フォルダー

Index.cshtml

Tab.cs

AppManifest フォルダー

.csproj

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

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

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

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

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

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

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

Startup.cs

wwwroot フォルダー

AppManifest フォルダー

.csproj

モデル

ビュー

コントローラー

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

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

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

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

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

次のステップ

関連項目

チャネル/グループタブ

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

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

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

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

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

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

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

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

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

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