SharePoint Framework を使用した Microsoft Teams タブの作成

  • [アーティクル]

SharePoint Framework v1.8 以降では、SharePoint Framework ツールを使用して Microsoft Teams のタブを構築し、ソリューションのホストとして SharePoint を使用できます。 SharePoint Framework v1.10 の一部として、Microsoft Teams 個人用アプリとしてソリューションを発行することもできます。

Microsoft Teams タブのプラットフォームとしてSharePoint Frameworkを使用する利点は次のとおりです。

  • 開発モデルは、SharePoint Framework Web パーツに似ています
  • Microsoft Teams では、任意の Web パーツをタブまたは個人用アプリとして公開できます
  • カスタム タブを Web パーツとして公開し、テナント内のタブを公開するためのさまざまなスコープ オプション
  • タブは特定のチームの背後にある SharePoint サイトのコンテキストで実行されます。 つまり、Web パーツで SharePoint 固有の API や機能を利用することができます。

開発プロセス

SharePoint Framework 1.8 以降のパッケージを使用するだけで、Microsoft Teams タブの開発を開始できます。 開始する手順の概要は次のとおりです。

注:

「SharePoint Frameworkを使用した Microsoft Teams のビルド」 タブから開始する詳細な手順を参照してください。チュートリアルには、従う必要があるその他の重要な詳細が含まれています。

  1. クライアント側 Web パーツを使用してSharePoint Framework ソリューションを作成する

  2. Web パーツ マニフェストのsupportedHostsプロパティにを追加"TeamsTab"して、チャネルのタブとして使用します。

    "supportedHosts": ["SharePointWebPart", "TeamsTab"],

  3. Web パーツ マニフェストのsupportedHostsプロパティにを追加"TeamsPersonalApp"して、個人用アプリとして使用します。

    "supportedHosts": ["SharePointWebPart", "TeamsPersonalApp"],

  4. テナント スコープの展開オプションを使用して Web パーツを SharePoint アプリ カタログにデプロイする

  5. 展開したSharePoint Framework ソリューションをアクティブ化し、アプリ カタログの [Teams に同期] ボタンを選択します

展開オプション

[Microsoft Teams] タブを展開したり、個人用アプリとして展開したりするための複数のオプションがあります。 SharePoint と Microsoft Teams の両方に独自のアプリ カタログがあるため、展開では両方のサービスの操作が必要となります。 新しい機能の可視性は、実行されたデプロイ手順によって制御できます。

テナントのデプロイ

[アプリ カタログ] リボンの [ Teams と同期 ] ボタンを使用すると、Microsoft Teams アプリ マニフェスト、アプリ パッケージが自動的に作成され、Microsoft Teams ストアにインストールされます。 これにより、テナントチームと Microsoft Teams チームのすべてのユーザーがソリューションを利用できるようになります。

開発者は、Microsoft Teams アプリ マニフェストとアプリ パッケージの内容を定義することもできます。 展開オプションについては、「Microsoft Teams のSharePoint Framework ソリューションの展開オプション」を参照してください。

代替デプロイ オプション

ソリューションをデプロイする別の方法があります。たとえば、ソリューションをテナント内の 1 つの特定のチームのみが使用できるようにします。

  1. 通常の方法でSharePoint Framework ソリューションを構築します。

    gulp bundle --ship
gulp package-solution --ship

  2. プロジェクト フォルダー内の ./teams フォルダーを見つけます。

    ソリューション構造

  3. 「Microsoft Teams 用ソリューションの展開オプション」の説明に従 SharePoint Frameworkって、Microsoft Teams アプリ パッケージを ./teams フォルダーに追加します。

  4. ソリューションをアプリ カタログに追加し、[デプロイ] を選択する前に、[このソリューションを組織内のすべてのサイトで使用できるようにする] オプションを選択してください。

Teams での外部アプリのサイド ローディング

  1. アプリ起動ツールで [Teams] を選択して、Microsoft Teams インスタンスに移動します。

    エクスプローラーでの ZIP ファイル

  2. 機能のテストに使用するチームを選択し、メニューから [ チーム の ... 管理] を選択します。

    チームの管理

  3. [ アプリ ] タブに移動します。

  4. 右下隅にある [ カスタム アプリのアップロード ] を選択します。

    注:

    この設定を利用できない場合は、使用しているテナントでサイド ローディングが有効になっていません。 テナント管理者の UI で設定をもう一度確認します。

  5. 以前に作成した Microsoft Teams アプリ マニフェスト ファイルを、新しく作成したソリューションの 下の ./teams フォルダーからアップロードし、アプリの一覧に正しく表示されていることを確認します。 ソリューションの説明を使用してカスタム イメージがどのように表示されるかに注目してください。

    アプリのアップロード

  6. ソリューションをアップロードしたチーム内のチャネルに移動します。 次の図では、Team で [全般] チャネルがアクティブ化されていることに注目してください

    チャネルのアクティブ化

  7. + を選択してチャネルに新しいタブを追加します。

  8. 一覧で MyFirstTeamTab という名前のカスタム タブを選択します。

    タブを追加する

  9. Web パーツで公開されているプロパティを使用してタブ インスタンスをカスタマイズする方法に注目してください。 [ 保存] を選択します。

    [構成] タブ

Web パーツが Teams コンテキストであるかどうかを検出します

Web パーツのページ コンテキストには Teams JavaScript SDK への参照が含まれているため、Web パーツがタブとしてレンダリングされるときに Teams コンテキストに簡単にアクセスできます。

this.context.sdks.microsoftTeams.teamsJs.app.getContext()

注:

Microsoft Teams タブ コンテキストの詳細については、 Microsoft Teams 開発ドキュメントを参照してください。

重要

SPFx API を使用して Microsoft Teams コンテキストを取得するプロセスは、時間の経過と共に数回変更されました。 たとえば、Microsoft Teams コンテキストを返す次のプロパティをよく理解している場合があります。

使用する Teams JavaScript クライアント SDK のバージョン

SharePoint Frameworkでは、コンテキストの API でメソッドを使用して sdks.microsoftTeams.teamsJs.app.getContext() Teams JavaScript クライアント SDK インスタンスとコンテキストにアクセスできます。

この API を使用すると、サポートされているバージョンの Teams JavaScript クライアント SDK が読み込まれ、初期化されます。

注意すべきいくつかの詳細:

  • Teams JavaScript クライアント SDK のカスタム バージョンのインストールと初期化は サポートされていません。 これは、Web パーツ、拡張機能、アダプティブ カード、ライブラリなど、すべての SPFx コンポーネントに適用されます。
  • Teams JavaScript クライアント SDK の種類は、ソリューションで使用される SPFx バージョンに関連付けられていますが、テナントに読み込まれる実際のバージョンが異なる場合があります。 最後に下位互換性を保証します。 たとえば、SPFx 1.14 でビルドされたソリューションには Teams JavaScript クライアント SDK v1.10.0 の型があり、SPFx v1.15.2 には Teams JavaScript クライアント SDK v1.12.1 の型がありますが、Teams JavaScript クライアントの実際に読み込まれたバージョンは v2.1.0 にすることができます。

関連項目