SharePoint Frameworkを使用して Outlook と Office を拡張する

SharePoint Framework (SPFx) v1.16 リリースでは、Microsoft Teams JavaScript クライアント SDK v2 のサポートが追加されました。 Microsoft Teams JavaScript クライアント SDK v2 では 、Microsoft Teams に加えて、Office の Outlook で Teams アプリを実行できるようにする機能が導入されました。

SPFx v1.16 のこの機能強化により、開発者は SPFx を使用して、Microsoft Teams 用アプリを作成するための既存のサポートを使用して、Outlook と Office 用のアプリを作成できるようになりました。

重要

Outlook と Office で Microsoft Teams アプリを実行する機能は、現在ベータ版であり、2023 年の前半に提供される予定です。

重要

ユーザーの成功に必要な重要な情報

SPFx で作成されたものも含め、Outlook と Office で Microsoft Teams アプリを使用してテストするには、 対象リリースに対して Microsoft 365 テナントのリリース設定を構成する必要があります。 組織のリリース設定を変更する方法の詳細については、「 Standard または Targeted リリース オプションを設定する」を参照してください。

テナントのリリース設定が有効にするには、5 営業日かかります。 つまり、月の 5 日にテナントを 標準リリース トラックから ターゲット リリース トラックに変更すると、月の 11 日まで、Outlook または Office で SPFx で作成された Microsoft Teams アプリをテストすることはできません。

Outlook および Office 用の Microsoft Teams アプリを作成する

SPFx for Outlook と Office で新しい Microsoft Teams アプリを作成するには、まず、新しい Web パーツを作成するのと同じ方法で、SharePoint v1.16 以降の Yeoman ジェネレーターを使用して新しい SPFx プロジェクトを作成します。 詳細については、「 最初の SharePoint クライアント側 Web パーツを構築する」を参照してください。

Yeoman の SharePoint ジェネレーターにより、一連の質問メッセージが表示されます。 これらの質問に回答するときは、同じガイダンスに従って新しい SPFx Web パーツを作成します。

プロジェクトが作成されたら、Web パーツの supportedHosts プロパティを更新して、使用できる場所を示します。 たとえば、./config/package-solution.json ファイルの te supportedHosts プロパティに および/または TeamsPersonalApp を追加TeamsTabします。 詳細については、「SharePoint Frameworkを使用した Microsoft Teams タブの構築」を参照してください。

アプリの現在のランタイム ホストを決定する

アプリケーションは、さまざまな理由で現在実行されている場所を決定する必要がある場合があります。 たとえば、SharePoint、Microsoft Teams、Outlook、または別の Office クライアントで実行されている場合、ユーザーは 1 つのエクスペリエンスを表示する必要がありますか?

Web パーツの context クラスと Microsoft Teams JavaScript クライアントの SPFx のプロパティを使用して、ホスティング クライアントを決定します。 app.host.name Teams JavaScript クライアントのプロパティには、Microsoft Teams、Outlook、または Office の場合、ホストの名前が含まれます。 Microsoft Teams コンテキスト オブジェクトが の場合、 undefinedWeb パーツは SharePoint で実行されています。

// if running in Microsoft Teams, Outlook, or Office...
if (!!this.context.sdks.microsoftTeams) {
  const teamsContext = await this.context.sdks.microsoftTeams.teamsJs.app.getContext();
  switch (teamsContext.app.host.name.toLowerCase()) {
    case 'teams': // this is the host name for the "classic" Teams client
    case 'teamsmodern': // this is the host name for the "new" Teams client
      // RUNNING IN MICROSOFT TEAMS
    case 'office':
      // RUNNING IN OFFICE / OFFICE.COM
    case 'outlook':
      // RUNNING IN OUTLOOK
    default:
      throw new Error('Unknown host');
  }
} else {
  // RUNNING IN SHAREPOINT
}

Microsoft Teams アプリ マニフェスト & パッケージを作成する

SharePoint Online アプリ カタログの [Teams への同期] ボタンでは、Microsoft Teams アプリ マニフェスト、アプリ パッケージを自動的に作成し、Microsoft Teams ストアにインストールできますが、現在、これは必要な Microsoft Teams アプリ マニフェスト ファイル形式をサポートしていません。 Teams アプリ マニフェスト ファイルは v1.13 以降である必要があります

もう 1 つのオプションは、アプリ マニフェストとアプリ パッケージを手動で自分で作成し、それらをアプリ カタログにアップロードされた SharePoint パッケージに含める方法です。 アプリ カタログで [ Teams に同期 ] ボタンを選択すると、SharePoint Online では、作成し、SharePoint パッケージに含まれている Teams アプリ パッケージが使用されます。

注:

Microsoft Teams アプリ マニフェストとアプリ パッケージを手動で作成する方法の詳細については、「Microsoft Teams のSharePoint Framework ソリューションの展開オプション」を参照してください。

Microsoft Teams アプリ マニフェストを作成する

最初の手順は、Microsoft Teams アプリ マニフェストを作成することです。

1. SPFx プロジェクトに ./teams/manifest.json というファイルを作成します。
2. 「Microsoft Teams: Teams のアプリ マニフェスト スキーマ」および「SharePoint Framework: Microsoft Teams の SharePoint Frameworkソリューションの展開オプション」のガイダンスに従って、新しいアプリ マニフェスト ファイルを作成します。
3. manifest.json ファイルでは、次のプロパティに特に注意してください。

   • manifestVersion: これは 1.13 以上に設定する必要があります。

   • staticTabs または configurableTabs: SPFx Web パーツを Microsoft Teams タブとして使用するためのガイダンスに従ってこれを確認します。

     たとえば、 contentUrl プロパティと、SPFx コンポーネントを参照するその他のプロパティでは、動的トークン 、、{teamSitePath}、 &{locale}を使用する{teamSiteDomain}必要があります。 また、SPFx のコンポーネント ID も参照する必要があります。

     ヒント

     これらのプロパティの詳細については、「SharePoint Framework: Microsoft Teams 用のSharePoint Framework ソリューションの展開オプション」を参照してください。具体的には、「基になる SharePoint サイト URL を動的に参照する」のセクションを参照してください。

注:

Microsoft Teams アプリ マニフェスト ファイルの詳細については、「 Microsoft Teams: Teams のアプリ マニフェスト スキーマ」を参照してください。

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

Microsoft Teams アプリ マニフェストを作成したら、アプリ パッケージを手動で作成する必要があります。 これは、SharePoint テナントのアプリ カタログにアップロードする SharePoint パッケージ (*.sppkg) ファイルに含まれます。

1. プロジェクト内の ./teams フォルダーの内容を圧縮します。
2. ZIP パッケージの名前を TeamsSPFxApp.zipに変更します。

重要

テナントのアプリ カタログの [Teams に同期] ボタンを使用するには、Microsoft Teams アプリ パッケージに TeamsSPFxApp.zip という名前を付け、このオプションを ./teams フォルダーに保存する必要があります。

SPFx ベースの Microsoft Teams アプリをデプロイする

アプリ パッケージを作成したら、次にデプロイしてインストールします。

テナントのアプリ カタログにアプリをデプロイします。

次に、アプリを選択し、リボンから [ ファイル ] タブを選択し、[ Teams に同期 ] ボタンを選択して、アプリ パッケージをテナントの Microsoft Teams ストアに展開します。

注:

Microsoft Teams App Storeへの SharePoint パッケージの展開のパッケージ化&の詳細については、「SharePoint Framework: Microsoft Teams 用のSharePoint Framework ソリューションの展開オプション」を参照してください。

SharePoint にアプリを展開したので、SharePoint サイトのページに Web パーツとして追加できます。

アプリは Microsoft Teams にインストールすることもできます。 ログインしたら、左側の垂直ナビゲーションで [アプリ ] オプションを選択します。

[ 組織のビルド ] セクションにアプリが一覧表示されていることに注意してください。

アプリをインストールすると、左側の垂直ナビゲーションにピン留めされたアプリとして表示されます。

Microsoft Teams で実行したのと同じプロセスに従って、Outlook にアプリをインストールできます。

ヒント

詳細については、SPFx を使用して Outlook と Office 用の Microsoft Teams アプリを作成する作業例については、「React Teams リード ダッシュボードのサンプル」を参照してください。