SPFx を使用して Microsoft Teams の会議アプリを作成する

[アーティクル]
03/21/2023

SharePoint Framework (SPFx) v1.8 リリースでは、SPFx Web パーツを使用して Microsoft Teams タブを実装する機能が導入されました。 SharePoint Frameworkを使用すると、「SharePoint Frameworkを使用した Microsoft Teams のビルド」で説明されているように、Microsoft Teams アプリの開発を簡略化できます。

開発者は、カスタムタブの作成に使用されるのと同じ手法を使用して、Microsoft Teams 会議用のアプリを作成できます。このチュートリアルでは、SPFx Web パーツを使用してカスタム Microsoft Teams 会議アプリを実装する方法について説明します。

Microsoft Teams 会議アプリは 、groupchat スコープの構成可能なタブをサポートする必要があります。これにより、会議前チャットと会議後チャットが有効になります。その他の要件については、次のドキュメントを参照してください。 Teams 会議用アプリの作成: 前提条件と考慮事項

重要

このチュートリアルでは、SPFx v1.11 以降が必要です。

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

自分の好みの場所に新しいプロジェクトディレクトリを作成します。
```
md teams-meeting-app
```
プロジェクトディレクトリへ移動します。
```
cd teams-meeting-app
```
Yeoman の SharePoint Framework ジェネレーターを実行して、新しいソリューションを作成します。
```
yo @microsoft/sharepoint
```
プロンプトが表示されたら、以下の値を入力します (以下で省略されたすべてのプロンプトに対して既定のオプションを選択します)。
- ソリューション名は何ですか?: teams-meeting-app
- テナント管理者が、サイトで機能を展開したり、アプリを追加したりせず、すぐにすべてのサイトでソリューションを展開できるようにしたいですか?: はい
- どの種類のクライアント側コンポーネントを作成しますか?: WebPart
- Web パーツ名は何ですか?: MyFirstTeamsMeetingApp
- Web パーツの説明は何ですか?: 初めての Microsoft Teams 会議アプリ
- どのフレームワークを使用しますか?: JavaScript web フレームワークなし
この時点で、Yeoman はプロジェクトのフォルダー & ファイルを作成し、必要な依存関係をインストールします。
次に、以下のように入力して、Visual Studio Code で Web パーツプロジェクトを開きます。
```
code .
```

Web パーツマニフェストを更新して Microsoft Teams で使用できるようにする

会議アプリソリューションのタブとして使用する Web パーツの ./src/webparts/**/manifest.json ファイルを見つけます。含 supportedHosts める "TeamsTab"プロパティを見つけます。

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "..",
  "alias": "MyFirstTeamsMeetingAppWebPart",
  "componentType": "WebPart",
  "version": "*",

  //...

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

  //...
}

Microsoft Teams のコンテキストを認識するようにコードを更新する

ソリューションがタブとして使用されている場合は、./src/webparts/helloWorld/MyFirstTeamsTabWebPart.ts を開いて必要な編集を行い、Microsoft Teams コンテキストをソリューションに認識させます。

以下のようにして、render()メソッドを更新します。

コードが Microsoft Team のタブとして使用されるのか、SharePoint の Web パーツとして使用されるのかによって、表示方法が変わることを確認します。 this.context.sdks.microsoftTeams プロパティを確認することで、ソリューションが Microsoft Teams によってホストされているかどうかを検出できます。

public render(): void {

  let title: string = 'ERR: not in Microsoft Teams';
  let subTitle: string = 'ERR: not in Microsoft Teams';

  if (this.context.sdks.microsoftTeams) {
    if (this.context.sdks.microsoftTeams.context.meetingId) {
      title = "Welcome to Microsoft Teams!";
      subTitle = "We are in the context of following meeting: " + this.context.sdks.microsoftTeams.context.meetingId;
    } else {
      title = "Welcome to Microsoft Teams!";
      subTitle = "We are in the context of following team: " + this.context.sdks.microsoftTeams.context.teamName;
    }
  }

  this.domElement.innerHTML = `
    <div class="${ styles.myFirstTeamsMeetingApp }">
      <div class="${ styles.container }">
        <div class="${ styles.row }">
          <div class="${ styles.column }">
            <span class="${ styles.title }">${title}</span>
            <p class="${ styles.subTitle }">${subTitle}</p>
          </div>
        </div>
      </div>
    </div>`;
}

展開用に Microsoft Teams アプリを準備する

SPFx ソリューションを Microsoft Teams アプリで使用する場合は、SharePoint Online と Microsoft Teams の両方に展開する必要があります。展開オプションの詳細については、「Microsoft Teams のSharePoint Framework ソリューションの展開オプション」を参照してください。

会議アプリには、SharePoint Online によって自動的に作成されない Microsoft Teams アプリマニフェストファイルの詳細が必要です。そのため、開発者が提供する Microsoft Teams アプリマニフェスト & パッケージオプションを使用する必要があります。

つまり、アプリマニフェストファイルとアプリパッケージファイルを作成する必要があります。

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

新しいファイル ./teams/manifest.json を作成します。

ファイルに次の JSON を追加します。

{
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.8/MicrosoftTeams.schema.json",
  "manifestVersion": "1.8",
  "packageName": "{{SPFX_PACKAGE_NAME}}",
  "id": "{{SPFX_COMPONENT_ID}}",
  "version": "1.0",
  "developer": { .. },
  "name": {
    "short": "{{SPFX_COMPONENT_NAME}}"
  },
  "description": {
    "short": "{{SPFX_COMPONENT_SHORT_DESCRIPTION}}",
    "full": "{{SPFX_COMPONENT_LONG_DESCRIPTION}}"
  },
  "icons": {
    "outline": "{{SPFX_COMPONENT_ID}}_outline.png",
    "color": "{{SPFX_COMPONENT_ID}}_color.png"
  },
  "accentColor": "#004578",
  "configurableTabs": [
    {
      "configurationUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26componentId={{SPFX_COMPONENT_ID}}",
      "canUpdateConfiguration": false,
      "scopes": [
        "team",
        "groupchat"
      ],
      "context": [
        "channelTab",
        "privateChatTab",
        "meetingSidePanel",
        "meetingDetailsTab",
        "meetingChatTab"
      ]
    }
  ],
  "validDomains": [
    "*.login.microsoftonline.com",
    "*.sharepoint.com",
    "resourceseng.blob.core.windows.net"
  ],
  "webApplicationInfo": {
    "resource": "https://{teamSiteDomain}",
    "id": "00000003-0000-0ff1-ce00-000000000000"
  }
}

基本的な Teams アプリマニフェストを作成したら、それに次の変更を加える必要があります。

JSON 内の値 {{SPFX_COMPONENT_*}} を見つけます。...これらの値は更新する必要があります。の複数のインスタンスを {{SPFX_COMPONENT_ID}} コンポーネントの ID に設定します。これは、id./src/webparts/**/manifest.json ファイルのプロパティにあります。
プロパティを packageName Teams アプリの名前に置き換えます。
オブジェクトは、developer./config/package-solution.json ファイルに設定されているのと同じオブジェクトと値に置き換えます。
オブジェクトを実際の name&description 値に置き換え、アプリの名前と説明を示します。

注:

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

重要

アプリマニフェストファイル内の文字列を {teamSiteDomain} 置き換えないでください。このプレースホルダーは、Microsoft Teams によって実行時にテナントの SharePoint Online URL に置き換えられます。

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

SPFx ソリューションを Microsoft Teams で使用できるようにするには、SharePoint Online に展開してパッケージ化 & する必要があります。

./teams フォルダーの内容を圧縮して、TeamsSPFxApp.zip という名前のMicrosoft Teams アプリパッケージを作成します。

重要

フォルダを圧縮せず、代わりにフォルダの内容を圧縮します。フォルダーを ZIP 化すると、結果の ZIP ファイルに最上位のサブフォルダーが作成されます。これは、Microsoft Teams の有効なアプリパッケージではありません。
TeamsSPFxApp.zip を SPFx ソリューションの ./src/teams フォルダーに保存します。

SharePoint Online へのパッケージ化と展開

ソリューションをビルド、バンドルするためのコマンドを実行します。これにより、アセットのホスト URL として動的ラベルを使用して、プロジェクトのリリースビルドが実行されます。
```
gulp bundle --ship
```
次のタスクを実行して、ソリューションをパッケージ化します。これにより、更新された ./sharepoint/solution/*.sppkg パッケージが 作成されます。
```
gulp package-solution --ship
```
次に、生成されたパッケージをテナントのアプリカタログにデプロイします。

テナントの SharePoint アプリカタログに移動します。
./sharepoint/solution/*.sppkg をテナントのアプリカタログにアップロードまたはドラッグアンドドロップします。

これにより、クライアント側のソリューションパッケージが展開されます。

[ 組織内のすべてのサイトでこのソリューションを使用できるようにする ] オプションが選択されていることを確認して、Web パーツを Microsoft Teams で使用できるようにします。
[展開] を選択します。

この時点で、ソリューションは SharePoint Online に展開され、すべての SharePoint Online サイトで使用できます。

会議アプリを Microsoft Teams アプリストアに発行する

Microsoft Teams で会議アプリを使用できるようにするには、ソリューションをチームと同期します。

注:

テストフェーズでは、組織のアプリストアに展開するのではなく、会議アプリを Microsoft Teams にサイドロードできます。これを行うには、このセクションをスキップし、[ 会議アプリのテスト ] セクションに移動します。

SharePoint テナントアプリカタログでパッケージを選択し、[ファイル] タブのリボンにある [Teams に同期] ボタンを選択します。

SharePoint Online は、*.sppkg パッケージ内のTeamsSPFxApp.zip ファイルを検出し、アプリマニフェストとアプリパッケージを自動的に作成するのではなく、Microsoft Teams アプリストアに展開します。
右上隅に状態メッセージが表示されることを確認します。

会議アプリをテストする

最後の手順は、Microsoft Teams で会議アプリをテストすることです。これを行うには、チャネル会議ではなく、少なくとも 1 人が招待された会議を作成します。

Microsoft Teams デスクトップクライアントを開きます。
左側のアプリバーの 予定表 アプリを使用して、新しい会議を作成します。
ユーザーを会議に招待する。
会議を保存します。
予定表アプリから、作成したテスト会議を開きます。
既存のタブの + 右側にある [(プラス)] ボタンを選択します。
カスタム会議アプリを選択する

アプリが会議にインストールされると、会議の詳細ページに戻ると、アプリが新しいタブとして表示されます。タブは、次のスクリーンショットに示すように、会議前または会議後のエクスペリエンスに読み込まれます。

会議アプリを選択する

重要

現時点では、SPFx ベースの Teams 会議アプリの会議内エクスペリエンスは機能しません。会議中にアプリを選択すると、会議アプリはタブに読み込まれますが、SharePoint Online エラーページが表示されます。

これは現在、2021 年前半に解決される Microsoft Teams の制限によるものです。

SPFx を使用して Microsoft Teams の会議アプリを作成する

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

Web パーツマニフェストを更新して Microsoft Teams で使用できるようにする

Microsoft Teams のコンテキストを認識するようにコードを更新する

展開用に Microsoft Teams アプリを準備する

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

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

SharePoint Online へのパッケージ化と展開

会議アプリを Microsoft Teams アプリストアに発行する

会議アプリをテストする

関連項目

その他のリソース

SPFx を使用して Microsoft Teams の会議アプリを作成する

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

Web パーツマニフェストを更新して Microsoft Teams で使用できるようにする

Microsoft Teams のコンテキストを認識するようにコードを更新する

展開用に Microsoft Teams アプリを準備する

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

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

SharePoint Online へのパッケージ化と展開

会議アプリを Microsoft Teams アプリ ストアに発行する

会議アプリをテストする

関連項目

その他のリソース

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

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

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

会議アプリを Microsoft Teams アプリストアに発行する