チャネル タブまたはグループ タブを作成する

  • [アーティクル]

チャネルまたはグループ タブは、チャネルやグループ チャットにコンテンツを配信します。これは、専用の Web ベースのコンテンツを中心とした共同作業スペースの作成に役立ちます。

チャネルまたはグループ タブを構築するための 前提条件 がすべて満たされていることを確認します。

注:

このトピックでは、Microsoft Teams JavaScript クライアント ライブラリ (TeamsJS) のバージョン 2.0.x を反映しています。 以前のバージョンを使用している場合は、 最新の TeamsJS と以前のバージョンの違いに関するガイダンスについては、TeamsJS ライブラリの概要を参照してください。

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

  1. コマンド プロンプトで、Node.js をインストールした後に次のコマンドを入力して、Yeoman と gulp-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 ファイルを更新するジェネレーターを示すスクリーンショット。

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] を入力します。

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

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

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

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

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

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

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

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

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

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

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

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

  • タブMicrosoft Entraシングル サインオン のサポートが必要ですか?

    [シングル サインオンのサポート] タブMicrosoft Entra含めないことを選択します。既定値は [はい] で、「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. [Teams] に移動し、[ アプリ][Microsoft Teams ストア ] を選択します。

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

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

    [チャネルのアップロード] タブを示すスクリーンショット。

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

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

    "staticTabs": [],
"bots": [],
"connectors": [],
"composeExtensions": [],

  5. タブを追加するための指示に従います。チャネルまたはグループ タブのカスタム構成ダイアログがあります。

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

    Teams の [アップロードされたチャネル] タブを示すスクリーンショット。

    チャネルまたはグループ タブが正常に作成され、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(options => options.EnableEndpointRouting = false);
}

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 形式にする必要があります。 ユーザーがタブの追加または更新を選択すると、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 ソリューション エクスプローラーを開き、[Pages>Shared] フォルダーに移動し、_Layout.cshtml を開き、タグ セクションに次を追加します。

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="https://res.cdn.office.net/teams-js/2.2.0/js/MicrosoftTeams.min.js" 
  integrity="sha384yBjE++eHeBPzIg+IKl9OHFqMbSdrzY2S/LW3qeitc5vqXewEYRWegByWzBN/chRh" 
  crossorigin="anonymous" >
</script>

    重要

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

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

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

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

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

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

    
    let saveGray = () => {
        microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
            microsoftTeams.pages.config.setConfig({
                websiteUrl: `https://y8rCgT2b.ngrok.io`,
                contentUrl: `https://y8rCgT2b.ngrok.io/gray/`,
                entityId: "grayIconTab",
                suggestedDisplayName: "MyNewTab",
                removeUrl: ""
            });
            saveEvent.notifySuccess();
        });
    }

    let saveRed = () => {
        microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
            microsoftTeams.pages.config.setConfig({
                websiteUrl: `https://y8rCgT2b.ngrok.io`,
                contentUrl: `https://y8rCgT2b.ngrok.io/red/`,
                entityId: "redIconTab",
                suggestedDisplayName: "MyNewTab",
                removeUrl: ""
            });
            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. 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 で利用できるようになりました。

    [チャネル] タブがアップロードされていることを示すスクリーンショット。

    チャネルまたはグループ タブが正常に作成され、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(options => options.EnableEndpointRouting = false);
}

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://res.cdn.office.net/teams-js/2.2.0/js/MicrosoftTeams.min.js" 
  integrity="sha384yBjE++eHeBPzIg+IKl9OHFqMbSdrzY2S/LW3qeitc5vqXewEYRWegByWzBN/chRh" 
  crossorigin="anonymous" >
</script>

    重要

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

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

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

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

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

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

    
    let saveGray = () => {
        microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
            microsoftTeams.pages.config.setConfig({
                websiteUrl: `https://y8rCgT2b.ngrok.io`,
                contentUrl: `https://y8rCgT2b.ngrok.io/gray/`,
                entityId: "grayIconTab",
                suggestedDisplayName: "MyNewTab",
                removeUrl:""
            });
            saveEvent.notifySuccess();
        });
    }

    let saveRed = () => {
        microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
            microsoftTeams.pages.config.setConfig({
                websiteUrl: `https://y8rCgT2b.ngrok.io`,
                contentUrl: `https://y8rCgT2b.ngrok.io/red/`,
                entityId: "redIconTab",
                suggestedDisplayName: "MyNewTab",
                removeUrl:""
            });
            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. 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 で利用できるようになりました。

    スクリーンショットは、チャネル タブが Teams にアップロードされていることを示しています。

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

Blazor を使用すると、JavaScript ではなく C# を使用して対話型の Web UI を構築できます。 Blazor と最新バージョンの Visual Studio を使用して、タブ アプリとボット アプリを作成できます。

ステップ バイ ステップの Blazor ガイドが正常に完了した後にタブ、ボット、メッセージ拡張機能の出力が表示されている blazor アプリのスクリーンショット。

注:

Teams Toolkit では、メッセージ拡張機能機能はサポートされていません。

アプリのビルドとデプロイに必要なツールの一覧を次に示します。

  インストール 使用するには...
必須    
  Visual Studio バージョン 17.2.0 プレビュー 2.1 [Visual Studio Enterprise 2022 Preview (バージョン 17.2.0 preview 2.1) を選択します。
  Microsoft Teams Microsoft Teams は、チャット、会議、通話のアプリを通じて共同作業するすべてのユーザーと 1 か所で共同作業を行います。
  Microsoft Edge (推奨) または Google Chrome 開発者ツールを備えたブラウザー。

開発環境を準備する

必要なツールをインストールしたら、開発環境を設定します。

Microsoft Teams Toolkit をインストールする

Teams ツールキットは、アプリのクラウド リソースのプロビジョニングとデプロイ、Teams ストアへの発行などを行うツールを使用して、開発プロセスを簡素化するのに役立ちます。 ツールキットは、Visual Studio で使用することも、コマンド ライン インターフェイス (と呼ばれる teamsfx) として使用することもできます。

Visual Studio の最新バージョンを使用して、.NET で Blazor Server を使用して Teams アプリを開発できます。

Microsoft Teams Toolkit 拡張機能をインストールするには:

  1. Visual Studio の最新バージョンをダウンロードします。

  2. ダウンロード フォルダーから開きます vs_enterprise__3bed52501a604464b1eff2ce580fd4eb.exe 。

  3. [Visual Studio インストーラー] ページで [続行] を選択して、インストールを構成します。

    続行オプションが赤で強調表示されているVisual Studio インストーラーのスクリーンショット。

  4. [ワークロード ] で [ASP.NET と Web 開発 ] を選択 します。

  5. [インストールの詳細] で [Microsoft Teams 開発ツール] を選択します。

  6. [インストール] を選択します。

    [Visual Studio Enterprise プレビュー] のスクリーンショット。インストールの詳細とインストールの下にある [Asp.NET、Web 開発、Microsoft Teams 開発ツール] オプションが赤で強調表示されています。

Visual Studio は数分でインストールされます。

Teams 開発テナントを設定する

テナントは、Teams のorganizationのスペースまたはコンテナーのようなもので、チャット、ファイルの共有、会議の実行を行います。 この領域は、カスタム アプリをアップロードしてテストする場所でもあります。 テナントを使って開発する準備ができているかどうかを確認しましょう。

カスタム アプリのアップロード オプションを有効にする

アプリを作成したら、アプリを配布せずに Teams に読み込む必要があります。 このプロセスは、カスタム アプリのアップロードと呼ばれます。 このオプションを表示するには、Microsoft 365 アカウントにサインインします。

既にテナントがあり、管理者アクセス権はありますか? 実際にあるかどうかを確認しましょう。

Teams でカスタム アプリをアップロードできるかどうかを確認します。

  1. Teams クライアントで、[アプリ] を選択 します。

  2. [アプリの管理] を選択します。

  3. [カスタム アプリをアップロードする]を選択します。 [カスタム アプリのアップロード] オプションが表示された場合は、カスタム アプリのアップロードが有効になります。

    Teams でカスタム アプリをアップロードするオプションを示すスクリーンショット。

    注:

    カスタム アプリをアップロードするオプションが見つからない場合は、Teams 管理者に問い合わせてください。

無料の Teams 開発者テナントを作成する (省略可能)

Teams 開発者アカウントをお持ちでない場合は、無料で入手できます。 Microsoft 365 開発者プログラムに参加します。

  1. Microsoft 365 開発者プログラムに移動します。

  2. [今すぐ参加] を選択し、画面の指示に従います。

  3. ようこそ画面で、[E5 サブスクリプションの設定] を選択します。

  4. 管理者アカウントを設定します。 完了すると、次の画面が表示されます。

    blazor アプリの Microsoft 365 開発者サブスクリプションが表示されている Microsoft 365 開発者プログラムのスクリーンショット。

  5. 設定した管理者アカウントを使用して Teams にサインインします。 Teams で [カスタム アプリのアップロード] オプションがあることを確認します。

無料の Azure アカウントを取得します。

Azure でアプリやアクセス リソースをホストする場合には、Azure サブスクリプションが必要です。 開始する前に無料でアカウントを作成してください。

これで、すべてのツールを取得し、アカウントを設定しました。 次に、開発環境を設定し、ビルドを開始しましょう。

タブ アプリ用のプロジェクト ワークスペースを作成する

最初のアプリを作成して、Teams アプリ開発を開始します。 このアプリは、タブ機能を使用します。

ステップ バイ ステップ ガイドが正常に完了した後のタブ アプリの最終的な出力を表示する Blazor アプリのスクリーンショット。

このチュートリアルでは、.NET/Blazor を使用して最初の Teams アプリを作成、実行、デプロイする手順について説明します。

このページでは、次のことについて説明します。

  1. Teams Toolkit を使用して新しいタブ プロジェクトを設定する方法
  2. アプリのディレクトリ構造について

タブ プロジェクトを作成する

Teams Toolkit を使用して、最初のタブ プロジェクトを作成します。 ツールキットを使用すると、Teams アプリ プロジェクトを作成して構成するための一連のページが表示されます。

  1. 新しいプロジェクト ページを作成 する: プロジェクトの種類を選択できます。
  2. [新しいプロジェクトの構成 ] ページ: プロジェクトの詳細を入力できます。
  3. 新しい Teams アプリケーション ページを作成 する: Teams アプリの機能を選択できます。

タブ プロジェクト ワークスペースを作成するには

  1. 最新バージョンの Visual Studio を開きます。

  2. [ 新しいプロジェクトの作成] を選択します。

    blazor アプリの場合、Visual Studio の [新しいプロジェクトの作成] オプションが赤で強調表示されているスクリーンショット。

    [ 新しいプロジェクトの作成] ページが表示されます。

  3. プロジェクトの詳細を選択します。

    プロジェクトの種類を選択します。

    1. [テンプレート] ドロップダウン リストから Microsoft Teams を検索します。

    2. テンプレートとして [Microsoft Teams アプリ ] を選択します。

    3. [次へ] を選択します。

      blazor アプリの作成のために [次へ] オプションが赤で強調表示された [新しいプロジェクトの作成] のスクリーンショット。

      [ 新しいプロジェクトの構成] ページが表示されます。

  4. 新しいプロジェクトの詳細を構成します。

    次のプロジェクト構成を選択します。

    1. プロジェクトに適した名前を入力します。

      注:

      入力したプロジェクト名は、 ソリューション 名としても自動的に入力されることに注意してください。 必要に応じて、プロジェクト名に影響を与えなくてもソリューション名を変更できます。

    2. プロジェクト ワークスペースを作成するフォルダー パスを選択します。

    3. 必要に応じて、別のソリューション名を入力します。

    4. 必要に応じて、プロジェクトとソリューションを同じフォルダーに保存するオプションをオンにします。 このチュートリアルでは、このオプションは必要ありません。

    5. [作成] を選択します。

      Visual Studio で新しいプロジェクトを構成する画面を示すスクリーンショット。

      [ 新しい Teams アプリケーションの作成 ] ページが表示されます。

  5. [Teams アプリ機能] を選択します。

    アプリ機能の選択:

    1. アプリの機能として [タブ] を 選択します。

    2. [作成] を選択します。

    新しい Teams タブ アプリケーションを作成するページを示すスクリーンショット。

Teams タブ アプリは数秒で作成されます。

Visual Studio でのアプリのビルド中に開始するためのヒントを示すスクリーンショット。

Teams タブ アプリの作成の簡単な要約。 Teams タブ アプリを作成するためのこの短い要約をご覧ください。

グラフィカルな表現は、Teams タブ app1 を作成するプロセスを示しています。

Teams タブ アプリのソース コードを見る

プロジェクトの作成後、基本的な個人用アプリを構築するためのコンポーネントが用意されています。 プロジェクト ディレクトリ構造は、Visual Studio の [ソリューション エクスプローラー] ペインで表示できます。

Visual Studio で基本的な個人用アプリをビルドするためのコンポーネントを表示するソリューション エクスプローラーのスクリーンショット。

Teams Toolkit では、選択した機能に基づいてプロジェクトのスキャフォールディングが作成されます。 その他のファイルの中でも、Teams Toolkit では次の内容が維持されます。

フォルダー名 コンテンツ
アプリのアイコン アプリ アイコンは PNG ファイルとして color.png と outline.png に格納されます。
manifest.json Teams 用開発者ポータルを介して発行するためのアプリ マニフェストは に Properties/manifest.json格納されます。
BackendController.cs バックエンド コントローラーは、認証を支援するために で Controllers/BackendController.cs 提供されます。
Pages/Tab.razor Teams 用開発者ポータルを介して発行するためのアプリ マニフェストは に Properties/manifest.json格納されます。
TeamsFx.cs と JS/src/index.js コンテンツは、Teams ホストとの通信を初期化するために使用されます。

バックエンド機能を追加するには、他の ASP.NET Core コントローラーをアプリケーションに追加します。

最初の Teams タブ アプリをビルドして実行する

Teams Toolkit を使用してプロジェクト ワークスペースを設定したら、次にタブ プロジェクトをビルドします。

アプリをビルドして実行するには:

  1. [ Project>Teams ツールキット>] [Teams アプリの依存関係の準備] の順に選択します。

    Visual Studio でプロジェクトの Teams アプリの依存関係を準備するオプションを選択する方法を示すスクリーンショット。

  2. Microsoft 365 アカウントを選択するか 、サインインするアカウントを追加 します。

    Microsoft 365 アカウントを選択するオプションを示すスクリーンショット。

  3. [ デバッグ>] [デバッグの開始] を選択するか 、[F5 ] を選択してデバッグ モードでアプリを実行します。

    デバッガーでアプリをローカルで実行した場合の動作について説明します。

    F5、Teams Toolkit を選択すると、次のようになります。

    1. アプリケーションをMicrosoft Entra IDに登録します。
    2. Teams でアップロードするためのアプリケーションを登録します。
    3. ローカルで実行されているアプリケーション バックエンドを開始します。
    4. ローカルでホストされているアプリケーション フロントエンドを開始します。
    5. カスタム アプリをアップロードするように Teams に指示するコマンドを使用して、Web ブラウザーで Teams を起動します (URL はアプリケーション マニフェスト内に登録されます)。

  4. 要求された場合は、ローカル デバッグ用の自己署名 SSL 証明書をインストールします。

    プロンプトが表示されたセキュリティ警告に対して [はい] を選択するオプションを示すスクリーンショット。

    Teams は Web ブラウザーに読み込まれます。

  5. アプリ を Teams に インストールするように求められたら、[チームに追加] を選択します。

    blazor アプリをチームに追加するオプションを示すスクリーンショット。

    これで、最初のタブ アプリがローカル環境で実行されます。

    ローカル環境でタブ アプリが実行されていることを示すスクリーンショット。

  6. ページ内を移動して、ユーザーの詳細を表示します。

  7. [承認] を選択して、Microsoft Graph を使用してアプリがユーザーの詳細を取得できるようにします。

    アプリは、ユーザーの詳細を表示するためのアクセス権を付与するアクセス許可を要求します。

    スクリーンショットは、タブ アプリでユーザーの詳細を承認するオプションを示しています。

  8. [同意する] を選択して、アプリがユーザーの詳細情報にアクセスできるようにします。

    要求されたアクセス許可を受け入れるオプションを示すスクリーンショット。

    写真と詳細がチャネル タブに表示されます。

    基本的な情報が表示されているチャネルタブのスクリーンショット

    他の Web アプリケーションと同様に、プレークポイントの設定など通常のデバッグ作業を行うことができます。 このアプリはホット リロードをサポートしています。 プロジェクト内のファイルを変更すると、ページが再読み込みされます。

    アプリがローカルで実行されない場合のトラブルシューティング方法について説明します。

    Teams でアプリを実行するには、カスタム アプリのアップロードを許可する Microsoft 365 開発アカウントが必要です。 詳細については、「前提条件」セクションを参照してください。

  9. Visual Studio でデバッグを停止します。

最初の Teams タブ アプリをプレビューする

タブ機能を使用して Teams アプリを作成、ビルド、実行する方法について学習しました。 次の最後の手順では、Teams で Azure とプレビューにアプリをデプロイします。

  1. クラウドでタブ アプリをプロビジョニングする: クラウドでタブ アプリをプロビジョニングできます。

  2. タブ アプリをクラウドにデプロイする: タブ アプリをクラウドにデプロイできます。

  3. Teams でタブ アプリをプレビューする: Teams でタブ アプリをプレビューできます。

    Teams Toolkit を使用して、タブ機能を持つ最初のアプリを Azure にデプロイしましょう。

クラウドでタブ アプリをプロビジョニングするには

  1. [Project Teams ToolkitProvision in the Cloud]\(クラウドのProject>Teams Toolkit> プロビジョニング\) を選択します。

    Visual Studio でプロジェクトのクラウド オプションでプロビジョニングを選択する方法を示すスクリーンショット。

  2. [ プロビジョニング ] ダイアログで、サブスクリプションとリソース グループの詳細を入力します。

    1. [サブスクリプション名] ドロップダウン リストから サブスクリプション名を 選択します。
    2. [ リソース グループ ] ドロップダウン リストからリソース グループを選択するか、[ 新規 ] を選択して、アプリ用に生成されたリソース グループを追加します。
    3. 新しいリソース グループが作成された場合は、 リージョンを選択します。
    4. [プロビジョニング] を選択します。

    サブスクリプション、Azure アカウント、およびリソース グループを選択するプロビジョニング ダイアログを示すスクリーンショット。

    プロビジョニングの警告が表示されます。

  3. [プロビジョニング] を選択します。

    プロンプトが表示された Teams Toolkit の警告でプロビジョニングを選択するオプションを示すスクリーンショット。

    リソース グループがクラウドでプロビジョニングされるまでに数分かかります。

  4. プロビジョニングが完了したら、[ OK] を選択します。

    アプリがクラウドで正常にプロビジョニングされたことを示すスクリーンショット。

  5. [プロビジョニングされたリソースの表示] を選択して、Azure portalを表示します。

    [Teams Toolkit 情報] ダイアログ ボックスで [プロビジョニングされたリソースの表示] を選択するオプションを示すスクリーンショット。

  6. サインイン プロンプトでAzure portal アカウントにサインインします。

    app-dev-rg が表示されます。

    Azure portalでプロビジョニングされたリソースが表示されている Blazor アプリを示すスクリーンショット。

    リソースは、Azure portalでプロビジョニングされます。

タブ アプリをクラウドにデプロイするには

  1. [ProjectTeams ToolkitDeploy to the Cloud]\(Project>Teams Toolkit> のクラウドへのデプロイ\) を選択します。

    Visual Studio でプロジェクトのクラウドにデプロイするオプションを選択する方法を示すスクリーンショット。

  2. [OK] を選択します。

    Blazor アプリがクラウドに正常にデプロイされたときに選択する [OK] オプションを示すスクリーンショット。

    タブ アプリがクラウドに正常にデプロイされました。

Teams でタブ アプリをプレビューするには

  1. [ Teams での Project>Teams ツールキット>プレビュー] を選択します。

    Visual Studio でプロジェクトの Teams オプションでプレビューを選択する方法を示すスクリーンショット。

  2. アプリを Teams にインストールするように求められたら、[ 追加] を選択します。

    Teams に Blazor アプリを追加するオプションを示すスクリーンショット。

    これで、最初のタブ アプリが Azure 環境で実行されています。

    アプリが Azure 環境で実行されていることを示すスクリーンショット。

  3. ページ内を移動して、ユーザーの詳細を表示します。

    [個人用] タブの下のユーザーのプロフィール写真の承認オプションを示すスクリーンショット。

  4. [承認] を選択して、Microsoft Graph を使用してアプリがユーザーの詳細を取得できるようにします。

    アプリは、ユーザーの詳細を表示するためのアクセス権を付与するアクセス許可を要求します。

    要求されたアクセス許可の accept オプションを示すスクリーンショット。

  5. [同意する] を選択して、アプリがユーザーの詳細情報にアクセスできるようにします。

    [ 個人用] タブに写真と詳細が表示されます。

    基本的な情報が表示されている個人用タブを示すスクリーンショット。

おめでとう

Blazor を使用してタブ アプリを構築するチュートリアルを完了しました。

構成可能なタブを静的タブに移行する

注:

  • 構成可能なタブを静的タブに移行することは、 パブリック開発者プレビューでのみ使用できます。
  • 構成可能なタブを静的タブに移行することは、従来の Teams クライアントでのみ使用でき、 新しい Teams クライアントでは使用できません。
  • 構成可能なタブを静的タブに移行するには、アプリ マニフェスト v1.16 以降を使用します。

静的タブ機能は、グループ チャット、チャネル、会議をサポートするように拡張されています。 既存の構成可能なタブを静的タブに更新し、静的タブに異なるスコープを追加できます。

構成可能なタブを静的タブに変更するには:

  1. コード空間からコード空間に構成ロジックをconfigurationUrlcontentUrl移動します。

  2. プロパティと パラメーターをstaticTabs使用して、アプリ マニフェストに プロパティをscopescontext追加します。 Teams のすべてのスコープとコンテキストで動作する静的タブが定義されているアプリ マニフェストの例を次に示します。

    "staticTabs": [ 
  { 
  "entityId": "homeTab", 
  "scopes": [ 
    "personal",  
    "groupChat",
    "team"
   ], 
  "context": [ 
    "personalTab",
    "channelTab", 
    "privateChatTab", 
    "meetingChatTab", 
    "meetingDetailsTab", 
    "meetingSidePanel", 
    "meetingStage" 
   ], 
   "name": "Contoso", 
   "contentUrl": "https://contoso.com/content (displayed in Teams canvas)", 
   "websiteUrl": "https://contoso.com/content (displayed in web browser)" 
  }
],

    詳細については、「構成ページと静的タブ」を参照してください。

アプリで 構成可能なタブ がサポートされている場合は、以前にピン留めされたタブの下位互換性を確保するために、 プロパティをアプリ マニフェストに保持 configurableTab し続ける必要があります。 現在は静的タブしかピン留めできないので、以前の構成可能なタブは引き続きサポートすることが重要です。

次のステップ

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

関連項目