プライベート タブを作成する

[個人] タブは、個人を対象としたボットと共に、個人用アプリの一部であり、1 人のユーザーを対象としています。 簡単にアクセスできるように、左側のナビゲーション バーにピン留めすることができます。 個人用タブの順序を変更することもできます。

個人用タブを作成するための前提条件がすべて揃っていることを確認します。

Node.js を使用して個人用タブを作成する

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

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

    npm install generator-teams --global
    

個人用タブを作成する手順を次に示します。

  1. 個人用タブを使用してアプリケーションを生成する
  2. 個人用タブにコンテンツ ページを追加する
  3. アプリ パッケージを作成する
  4. デーモン アプリケーションをビルドして実行する
  5. 個人用タブへのセキュリティで保護されたトンネルを確立する
  6. Microsoft Teams にアプリ パッケージをアップロードする

個人用タブを使用してアプリケーションを生成する

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

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

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

    Teams ジェネレーター

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

      ソリューション名はプロジェクト名です。 Enter キーを押して、推奨される名前をそのまま使用できます。

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

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

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

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

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

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

    • どのマニフェスト バージョンを使用しますか?:

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

    • クイック スキャフォールディングをしますか? (Y/n)

      既定値は yes です。 n 入力して、Microsoft パートナー ID を入力します。

    • Microsoft パートナー ID (お持ちの場合) を入力しますか? (空白のままにする)

      このフィールドは必須ではなく、Microsoft パートナー ネットワークに既に参加している場合にのみ使用する必要があります。

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

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

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

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

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

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

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

      タブ ヘッダー バーなしでレンダリングする個人用アプリを含め ない ことを選択します。 既定値は no で、 n と入力します。

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

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

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

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

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

      Azure アプリケーション インサイトを含め ない ことを選択します。 既定値は no です。 n と入力します。

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

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

    • 作成するタブの種類を選択してください。

      方向キーを使用して、[個人用] を選択します。

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

      タブの Azure AD シングル サインオンを含め ない ことを選択します。既定値は yes で、n と入力します。

個人用タブにコンテンツ ページを追加する

コンテンツ ページを作成し、個人用タブ アプリケーションの既存のファイルを更新します:

  1. 次のマークアップを使用して、Visual Studio Code に新しい personal.html ファイルを作成します。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>
                <!-- Todo: add your a title here -->
            </title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <!-- inject:css -->
            <!-- endinject -->
        </head>
            <body>
                <h1>Personal Tab</h1>
                <p><img src="/assets/icon.png"></p>
                <p>This is your personal tab!</p>
            </body>
    </html>
    
  2. 次の場所にあるアプリケーションの パブリック フォルダーに personal.html を保存します。

    ./src/public/<yourDefaultTabNameTab>/personal.html
    
  3. Visual Studio Code 内の次の場所から manifest.json を開きます。

     ./src/manifest/manifest.json
    
  4. 空の staticTabs 配列 (staticTabs":[]) に次を追加し、次の JSON オブジェクトを追加します:

    {
        "entityId": "personalTab",
        "name": "Personal Tab ",
        "contentUrl": "https://{{PUBLIC_HOSTNAME}}/<yourDefaultTabNameTab>/personal.html",
        "websiteUrl": "https://{{PUBLIC_HOSTNAME}}",
        "scopes": ["personal"]
    }
    

    重要

    path コンポーネント yourDefaultTabNameTab は、既定のタブ名 のジェネレーターに入力した値プラス単語 Tab になります。

    たとえば、DefaultTabName は MyTab、次に /MyTabTab/ です。

  5. contentURL パス コンポーネント yourDefaultTabNameTab を実際のタブ名で更新します。

  6. 更新された manifest.json ファイルを保存します。

  7. 次のパスから Visual Studio Code で Tab.ts を開き、IFrame でコンテンツ ページを提供します:

    ./src/server/<yourDefaultTabNameTab>/<yourDefaultTabNameTab>.ts
    
  8. IFrame デコレーターの一覧に次を追加します。

     @PreventIframe("/<yourDefaultTabName Tab>/personal.html")
    
  9. 更新されたファイルを保存します。 コードはこれで完了です。

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

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>/personal.html を参照して、個人用タブを表示します。

    既定の html タブ

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

コマンド プロンプトでローカルホストを終了し、次のコマンドを入力して、タブへのセキュリティで保護されたトンネルを確立します:

gulp ngrok-serve

重要

タブが ngrok 経由で Microsoft Teams にアップロードされ、正常に保存されたら、トンネル セッションが終了するまで Teams で表示できます。

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

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

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

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

    個人用タブの追加

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

    個人用タブがアップロードされました

  5. Teams の左側のウィンドウで省略記号 ●●● を選択し、アップロードしたアプリを選択して個人用タブを表示します。

    これで、Teams に個人用タブが正常に作成され、追加されました。

    Teams に個人用タブがあるため、個人用タブを並べ替えることもできます。

ASP.NET Coreを使用して個人用タブを作成する

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

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

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

個人用タブを作成する手順を次に示します。

  1. 個人用タブを使用してアプリケーションを生成する
  2. アプリケーションを更新して実行する
  3. タブへのセキュリティで保護されたトンネルを確立する
  4. 開発者ポータルを使用してアプリ パッケージを更新する
  5. Teams でアプリをプレビューする

個人用タブを使用してアプリケーションを生成する

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

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

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

ソース コードを確認する

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 がアプリケーションのホーム ページとして表示されます。

AppManifest フォルダー

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

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

これらのファイルは、Teams へのタブのアップロードに使用するために、アプリ パッケージで zip 形式にする必要があります。 Microsoft Teams は、マニフェストで指定された contentUrl を読み込み、<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>

アプリケーションを更新して実行する

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

    <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>
    
  2. Visual Studio ソリューション エクスプローラー [Pages] フォルダーから PersonalTab.cshtml を開き、microsoftTeams.initialize()<script> タグに追加して保存します。

  3. Visual Studioで F5 を選択するか、アプリケーションの [デバッグ] メニューから [デバッグの開始] を選択します。

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

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

ngrok http 3978 --host-header=localhost

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

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

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

  3. アプリ パッケージファイル名は tab.zip で、/bin/Debug/netcoreapp3.1/tab.zip パスで使用できます。

  4. 開発者ポータルで tab.zip を選択して開きます。

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

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

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

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

  9. アプリの機能 で、[個人用アプリ] > [初めての個人用アプリ タブを作成] を選択し、[名前] を入力して、[コンテンツ URL] を https://<yourngrokurl>/personalTab で更新します。 [Web サイト URL] フィールドを空白のままにし、ドロップダウン リストと [追加] から personalTab として [コンテキスト] を選択します。

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

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

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

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

  2. [追加] を選択して、Teams にアプリを読み込みます。 タブが Teams で利用できるようになりました。

    既定のタブ

    これで、Teams に個人用タブが正常に作成され、追加されました。

    Teams に個人用タブがあるため、個人用タブを並べ替えることもできます。

ASP.NET Core MVC を使用して個人用タブを作成する

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

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

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

個人用タブを作成する手順を次に示します。

  1. 個人用タブを使用してアプリケーションを生成する
  2. アプリケーションを更新して実行する
  3. タブへのセキュリティで保護されたトンネルを確立する
  4. 開発者ポータルを使用してアプリ パッケージを更新する
  5. Teams でアプリをプレビューする

個人用タブを使用してアプリケーションを生成する

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

  2. [Microsoft-Teams-Samples] > [samples] > [tab-personal] > [mvc-csharp] フォルダーに移動し、Visual Studio で PersonalTabMVC.sln を開きます。

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

ソース コードを確認する

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 形式にする必要があります。 Microsoft Teams は、マニフェストで指定された contentUrl を読み込み、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>

モデル

PersonalTab.cs は、ユーザーが [PersonalTab] ビューでボタンを選択したときに PersonalTabController から呼び出されるメッセージ オブジェクトとメソッドを表示します。

ビュー

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

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

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

コントローラー

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

アプリケーションを更新して実行する

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

    <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>
    
  2. Visual Studio ソリューション エクスプローラーで、[ビュー] > [PersonalTab] フォルダーから PersonalTab.cshtml を開き、<script> タグ内で microsoftTeams.initialize() を追加して保存します。

  3. Visual Studioで F5 を選択するか、アプリケーションの [デバッグ] メニューから [デバッグの開始] を選択します。

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

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

ngrok http 3978 --host-header=localhost

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

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

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

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

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

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

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

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

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

  9. アプリの機能 で、[個人用アプリ] > [初めての個人用アプリ タブを作成] を選択し、[名前] を入力して、[コンテンツ URL] を https://<yourngrokurl>/personalTab で更新します。 [Web サイト URL] フィールドを空白のままにし、ドロップダウン リストと [追加] から personalTab として [コンテキスト] を選択します。

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

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

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

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

  2. [追加] を選択して、Teams にアプリを読み込みます。 タブが Teams で利用できるようになりました。

    個人タブ

    これで、Teams に個人用タブが正常に作成され、追加されました。

    Teams に個人用タブがあるため、個人用タブを並べ替えることもできます。

静的な個人用タブの並べ替え

マニフェスト バージョン 1.7 以降では、開発者が個人用アプリ内のすべてのタブを再配置できます。 特に、開発者は [ボット チャット] タブを移動できます。このタブは、常に既定で最初の位置 (個人用アプリ タブ ヘッダー内の任意の場所) に移動できます。 2 つの予約済みタブ entityId キーワードが宣言されます:会話プロフィール

個人用 スコープを使用してボットを作成すると、既定では個人用アプリの最初のタブ位置に表示されます。 別の位置に移動する場合は、予約済みのキーワードである "会話" を使用して静的タブ オブジェクトをマニフェストに追加する必要があります。 [会話] タブは、staticTabs 配列内の [会話] タブを追加する場所に応じて、Web またはデスクトップに表示されます。


{
   "staticTabs":[
      {
         
      },
      {
         "entityId":"conversations",
         "scopes":[
            "personal"
         ]
      }
   ]
}

次のステップ

関連項目