SharePoint に [Teams] タブを追加する

SPFx Web パーツとして SharePoint に Microsoft Teams タブを追加することで、Microsoft Teams と SharePoint の間のリッチなインテグレーション エクスペリエンスを得ることができます。 このドキュメントでは、Microsoft Teams サンプル アプリからタブを取得し、SharePoint で使用する方法について説明します。

Teams と SharePoint のリッチなインテグレーション

11 月リリース版の Teams と SharePoint Framework v.1.7 で、開発者は次の 2 つの強力な機能を備えます:

SharePoint における Teams タブ

SharePoint Framework v.1.7 により、SharePoint で Teams タブをホストできます。 SharePoint でホストされているタブは、同様のfull page エクスペリエンスを実現し、SharePoint サイトのコンテキストと親しみやすさを維持しながら、Teams タブのすべての機能を提供します。

Teams アプリを SharePoint に取 り込むことで、SharePoint で豊富なアプリ エクスペリエンスを作成します。

SharePoint Framework in Teams

SharePoint Frameworkを使用して Teams タブを実装することもできます。 SharePoint Framework Web パーツは、Azure などの外部サービスを必要とせずに、SharePoint 内でホストされます。 SharePoint 開発者の場合、これにより Teams タブの開発プロセスが大幅に簡素化されます。 SharePoint Framework in Teams の詳細情報については、「Teams で SharePoint Framework を使用する方法」を参照してください。

SharePoint Web パーツを Teams に導入し、SharePoint でホスティングを管理できるようにします。

概要

ここで使用するタブは、Azure で既にホストされており、必要な統合作業に焦点を当てています。

使用されているサンプル アプリは Talent Management アプリケーションです。 チーム内のオープン ポジションの候補者の採用プロセスを管理します。 サンプル Teams アプリをビルドし、Teams に導入します。 実際のタレント管理アプリケーションを作成しないでください。

このアプローチの利点

• 既存の Teams タブで SharePoint ユーザーにリーチします。
• アプリ マニフェストを SharePoint アプリ カタログに直接アップロードします。 Teams アプリケーション パッケージは、SharePoint でサポートされるようになりました。
• ユーザーは、他の SharePoint Web パーツと同様にページ上のタブを構成します。
• タブは、Teams 内で実行されている場合と同じ様に、その context にアクセスできます。

Teams タブを SharePoint に追加するには、次の手順に従って、Teams タブを SharePoint に追加します:

サンプル アプリをテストする

サンプル アプリ マニフェストをダウンロードします。

1. Microsoft Teams を開きます。

2. [アプリ]>[アプリの管理]>[アプリのアップロード] を選択します。

3. [カスタム アプリをアップロードする]を選択します。

   

4. アップロードするファイルは、ダウンロード フォルダーにあります。 TalentMgmt-Azure.zip と呼ばれます。 次の図は、対応する画面を示しています:

   

5. 人材管理アプリのインストール画面または同意画面を見ることができます。 インストールするチームを選択します。

6. インストールを選択し、アプリの実験を開始します。

注:

SharePoint 拡張機能コマンドは、[Teams ファイル ] タブではサポートされていません。 SharePoint ページ、リスト、またはドキュメント ライブラリを Teams のタブとして追加できます。

SharePoint の [Teams] タブを使用する

1. https://YOUR_TENANT_NAME.sharepoint.com/sites/apps/AppCatalog/Forms/AllItems.aspx にアクセスして、Teams アプリ パッケージを SharePoint アプリ カタログにアップロードしてデプロイします。 たとえば、「 https://contoso.sharepoint.com/sites/apps/AppCatalog/Forms/AllItems.aspx 」のように入力します。

2. プロンプトで促されたら、組織内のすべてのサイトでこのソリューションを使用できるようにする を有効にします。 次の図は、対応する画面を示しています:

   

3. サイトで、右上にある歯車ボタンを選択して新しいページを作成し、[ ページの追加] を選択します。 次の図は、対応する画面を示しています:

   

4. SharePoint ページ作成エクスペリエンスを確認できます。 ページに My Teams タブという名前を付けます。

5. + ボタンを選択して Web パーツ ツールボックスを開き、Contoso HRという名前の Teams タブを選択します。 Web パーツはアルファベット順に並べ替えられます。 長いリストの場合は、検索バーを使用して検索できます。 これにより、Teams タブを含む Web パーツがキャンバスに作成されます。次の図は、タブ ビューを示します:

   

6. 編集が完了したら、[ 発行] ボタンを選択します。

7. 左側のナビゲーション バーでページを素早く参照するには、ナビゲーションにページを追加 を選択します。 次の図は、SharePoint のタブを表示します。

   

SharePoint でアプリ ページを探索する

ページが公開されたら、Teams アプリをSharePoint 内でより完全なエクスペリエンスに転換する を探索できます。 これにより、Teams タブの全画面エクスペリエンスとともに通常の SharePoint ページ レイアウトを表示しながら、現在のページをアプリ ページに変換します。

次の図は、SharePoint での Teams アプリの完全なエクスペリエンスを示しています。

コード サンプル

サンプルの名前	説明	SPFx
SPFx Web パーツ	タブ、チャンネル、グループの SPFx Web パーツ サンプル。	表示

関連項目

• Web アプリを統合する
• SharePoint Framework を使用して Microsoft Teams タブを作成する: チュートリアル
• SharePoint Online で単一パーツ アプリ ページを使用する
• 開発者が提供する Microsoft Teams アプリ マニフェストとパッケージ