アダプティブカード拡張機能と Teams アプリ

[アーティクル]
04/08/2023

このチュートリアルは、チュートリアル「高度なクイックビュー機能」を基にしています。

アダプティブカード拡張機能は、より大きな Teams アプリストーリーの補足要素として使用できます。 Viva Connections ダッシュボードの ACE は、Teams 個人用タブまたはボットに直接リンクできます。

このチュートリアルでは、Microsoft Teams アプリ内で ACE を使用します。

SPFx Teams 個人用アプリをスキャフォールドする

前のチュートリアルのソリューションから開始し、SPFx ジェネレーターを使用して新しい SPFx コンポーネントをプロジェクトに追加します。コマンドプロンプトで、プロジェクトのルートフォルダーから次のステートメントを実行します。

yo @microsoft/sharepoint

メッセージが表示されたら、ジェネレーターによってすべてのプロンプトの既定のオプションを受け入れます。

この時点で、Yeoman は必須の依存関係をインストールし、ソリューションファイルをスキャフォールディングします。これには数分かかる場合があります。

重要

ジェネレーターが npm install コマンドを実行すると、すべての依存関係のインストールが失敗する既知の問題があります。

このエラーを回避するには、プロジェクトで次のファイルを見つけて開きます。./package.json。

依存関係 @microsoft/sp-webpart-workbench をファイルの devDependencies セクションから削除します。

プロジェクトのルートフォルダーからコンソールで次のコマンドを実行します。

npm install

マニフェストを編集します。

プロジェクト内の以下のファイル./src/webparts/helloWorld/HelloWorldWebPart.manifest.json を探して開きます。

supportedHosts 配列を更新して、Teams 個人用タブ内での使用のみをサポートします。

"supportedHosts": ["TeamsPersonalApp"]

ソリューションのパッケージ化と展開

次に、ソリューションをパッケージ化して SharePoint Online テナントアプリカタログに展開します。

まず、運用モードでソリューションをビルドします。

gulp bundle --ship

次に、パッケージソリューション タスクを使用してソリューションをパッケージ化します。

gulp package-solution --ship

ソリューションパッケージファイル (./sharepoint/solution フォルダーにある *.sppkg) を追加し、テナントアプリカタログにアップロードします。

プロジェクトをテナントアプリカタログにアップロードする

ソリューションを展開する際には、[Make this solution available to all sites in the organization (このソリューションを組織内のすべてのサイトで使用可能にする)] チェックボックスが選択されていることを確認してください。

ソリューションがテナント内のすべてのサイトに展開されていることを確認する

次に、テナントの Microsoft Teams アプリストアにソリューションを展開します。そのためには、[Sync to Teams (Teams に同期)] ボタンを選択します。

ソリューションを Teams アプリストアに展開する

新しい個人用タブの追加

ソリューションを展開したら、Microsoft Teams クライアント内でテストしてみましょう。

Microsoft Teams Web クライアントに移動してサインインし、左側のナビゲーションの... アイコンを選択します。

[その他のアプリ (More apps)] リンクを選択します。

Microsoft Teams のその他のアプリ

新しくアップロードした Teams 個人用アプリが表示されます。それを選択して [追加] を選択します。

新しい [個人用] タブを開き、URL から次の強調表示された部分をコピーします。これが Microsoft Teams アプリの ID です。これは、このチュートリアルの後半で必要になります。

Microsoft Teams アプリの ID

2 番目の ACE のスキャフォールディング

プロジェクトのルートフォルダーからコマンドプロンプトで次のステートメントを実行して、SPFx ジェネレーターを使用して 2 番目の ACE を作成します。

yo @microsoft/sharepoint

プロンプトが表示されたら、以下の値を入力します (以下で省略されたすべてのプロンプトに対して既定のオプションを選択します):

どの種類のクライアント側コンポーネントを作成しますか? アダプティブカードエディター
アダプティブカード拡張機能の名前は何ですか? TeamsHelloWorld
アダプティブカード拡張機能の説明は何ですか? TeamsHelloWorld の説明

Teams ディープリンクの追加

Microsoft Teams のディープリンクの形式は次のとおりです。https://teams.microsoft.com/l/entity/{appID}/{entityID}

{appID}を、前の手順でコピーした Microsoft Teams アプリ ID の値に置き換えます。
{entityID} を0 に置き換えます。

ヒント

Microsoft Teams アプリのディープリンクの詳細については、「Microsoft Teams: ディープリンクを作成する」を参照してください。

注:

SPFx 以外の Teams アプリにリンクしている場合、 entityID の値は Teams マニフェストの [Static Tabs (静的タブ)] セクションで指定されたエンティティ ID です。

プロジェクトで次のファイル ./src/adaptiveCardExtensions/teamsHelloWorld/cardView/CardView.ts を見つけて開きます。

ディープリンクを開くには、onCardSelection() メソッドを更新します。

public get onCardSelection(): IQuickViewCardAction | IExternalLinkCardAction | undefined {
  return {
    type: 'ExternalLink',
    parameters: {
      isTeamsDeepLink: true,
      target: '' // Set this to your Teams deep link URL
    }
  };
}

上記の「ソリューションのパッケージ化と展開」の手順を繰り返して、更新されたソリューションを再構築し、パッケージ化し、デプロイします。

Viva Connections ダッシュボード

Viva Connections ダッシュボードは、テナントのホームサイトで使用できます。

SharePoint ホームサイトの新しいメニュー

ダッシュボードにカードを追加する

[New (新規)] メニューの [ダッシュボード] 項目を選択して、新しいダッシュボードを作成します。 [Add Card (カードの追加)] を選択して、ダッシュボードに ACE を追加します。

ダッシュボードに ACE を追加

HelloWorld と TeamsHelloWorld の ACE をダッシュボードに追加します。完了したら、ダッシュボードを発行します。

ディープリンク

TeamsHelloWorld ACE を選択します。 Microsoft Teams デスクトップクライアントは、以前に作成した個人用アプリに自動的に開きます。

結論

このラボの修了後、以下のことができるようになります。

異種 SPFx ソリューションのパッケージ化と展開
Teams ディープリンク URL を手動で作成する
ACE から Teams の個人用タブへのディープリンク

アダプティブ カード拡張機能と Teams アプリ