Web Appsに共有を Teams に埋め込む - Teams

[アーティクル]
10/29/2024

Web アプリから Teams に共有すると、ユーザーはコンテキストを切り替えることなく、チャット、チャネル、または会議に直接コンテンツを共有できます。サードパーティの Web サイトでは、起動ツールスクリプトを使用して、Web ページの [Teams に共有 ] ボタンを埋め込むことができます。ユーザーが [ Teams に共有] を選択すると、[Teams に共有] ダイアログが表示され、コンテンツを共有するために必要な詳細の入力を求められます。

次の図は、ユーザーが [Teams に共有] を選択したときに表示されるダイアログを表示します。

既定では、Teams への共有では、 @username と @everyoneを使用したユーザーのタグ付けがサポートされ、タグ付けされたユーザーは Teams でコンテンツが共有されるとMicrosoft Teams内で通知を受け取ります。

注:

Microsoft Edge と Google Chrome のデスクトップバージョンのみがサポートされています。
Freemium またはゲストアカウントの使用はサポートされていません。

また、Web アプリ、個人用アプリ、またはタブでホストされている Teams への共有を通じて共有されるリンクのリンク展開を追加することもできます。詳細については、「リンクの展開」を参照してください。

次の図は、Teams への共有を通じたリンクの展開エクスペリエンスを示しています。

ここで説明するコンテンツでは、Web サイトの Teams に共有を作成して埋め込み、Web サイトのプレビューを作成し、Share をMicrosoft Teams for Educationに拡張する方法について説明します。

次のビデオでは、Teams に共有を埋め込む方法の基本的な手順について説明します。

Web ページに Teams への共有を埋め込むことができる方法は 2 つあります。 Teams に共有するコントロールに基づいて、次のいずれかの方法を使用できます。

方法 1
方法 2

このメソッドは、要件に基づいてボタンとその機能をカスタマイズできる Teams に Share を埋め込む簡単で基本的な方法を示しています。

Web ページに launcher.js スクリプトを追加します。

<script async defer src="https://teams.microsoft.com/share/launcher.js"></script>

class属性にteams-share-button、data-href属性で共有するリンクを含む HTML 要素を Web ページに追加します。
```
<div
  class="teams-share-button"
  data-href="https://<link-to-be-shared>">
</div>
```
構成後、[ Teams に共有 ] ボタンが Web サイトに追加されます。
- ボタンに別のアイコンサイズを設定する場合は、 data-icon-px-size 属性を使用します。
```
<div
  class="teams-share-button"
  data-href="https://<link-to-be-shared>"
  data-icon-px-size="64">
</div>
```
- 共有リンクでユーザー認証が必要な場合、またはリンクの URL プレビューが Teams で正しく表示されない場合は、 data-preview 属性を追加して false に設定することで、URL プレビューを無効にすることができます。
```
<div
  class="teams-share-button"
  data-href="https://<link-to-be-shared>"
  data-preview="false">
</div>
```
- 作成ボックスに任意のメッセージを表示する場合は、属性でテキスト data-msg-text 定義できます。
```
<div
 class="teams-share-button"
 data-href="https://<link-to-be-shared>"
 data-msg-text="<default-message-to-be-populated-in-compose-box>"
 data-preview="false">
 </div>
```

このメソッドを使用すると、動的にレンダリングされるボタン、またはスクリプトが実行されるタイミングを制御できます。スクリプトは、 window.shareToMicrosoftTeams.renderButtons() が呼び出されたときにのみ実行されます。 renderButtons({elements: []}) API を介して特定の HTML 要素を渡すことができます。ボタンのスタイル、サイズ、言語をカスタマイズできます。

非同期 shareToMicrosoftTeams.renderButtons(options) API は、クラス名がページに teams-share-button するすべての共有ボタンをレンダリングします。次のコードに示すように、 options (optional) オブジェクトに要素の一覧が指定されている場合、それらの要素は [共有 ] ボタンにレンダリングされます。

`options` (optional): `{ elements?: HTMLElement[] }`

Web ページに launcher.js スクリプトを追加します。

<script async defer src="https://teams.microsoft.com/share/launcher.js" onload="onLoadComplete()"></script>

HTML 要素を作成し、必要な属性を指定します。起動ツールスクリプトが完全に読み込まれたら、レンダリングロジックが実行されていることを確認します。

async function onLoadComplete() {
    const shareButton = document.createElement("div");
    shareButton.setAttribute("data-app-id", "<app-id>");
    shareButton.textContent = "Share Test App"
    shareButton.setAttribute("data-href", "<app-content-url>");
    shareButton.setAttribute("data-preview", "false");
    shareButton.setAttribute("data-msg-text", "<default-message-to-be-populated-in-compose-box>");
    await window.shareToMicrosoftTeams.renderButtons({elements: [shareButton]});
}

Teams に共有を使用してコンテンツをチャットまたはチャネルに共有するエンドユーザーシナリオを次に示します。

チャットまたはチャネルにコンテンツを共有する

ブラウザーで Web アプリを開き、[ Teams に共有] を選択します。 [Teams に共有] ダイアログが開きます。
チャットまたはチャネル名を追加します。

注:

アプリがまだチャットまたはチャネルスコープに追加されていない場合は、[Teams に共有] ダイアログにアプリの同意に関する免責事項が表示されます。
共有を選択します。アプリコンテンツは、それぞれのスコープで共有されます。

Web アプリから Teams に共有すると、ユーザーはライブ会議や今後の会議にコンテンツを共有できます。会議でコンテンツ共有を有効にすると、ユーザーは会議内にコラボレーションワークスペースを作成する情報を共有できます。たとえば、ユーザーは Web アプリから会議ステージに直接作業ボードを共有できるため、アイデアを収集して整理するための一括作業が容易になります。

共有 Web コンテンツが会議ステージでどのように表示されるかを次に示します。

会議へのコンテンツの共有を有効にする前に、次のことを確認する必要があります。

会議サイドパネルとステージ API への共有をサポートするタブを備えたMicrosoft Teams アプリ。
会議アプリは、会議ステージにコンテンツを表示するために、次の 2 つの主な要件を持つステージ API への共有をサポートする必要があります。
- フレームコンテキストとして構成されたmeetingStageとmeetingSidePanelの両方をサポートするアプリマニフェスト。構成されていない場合、会議の参加者はステージ上でコンテンツを表示できない可能性があります。
- ステージを制御するための MeetingStage.Write.Chat アクセス許可をサポートするアプリ。これは読み取りアクセス許可の要件です。

注:

アプリに会議ステージとサイドパネルの機能がない場合、コンテンツは保存されず、メッセージは通常の会議チャットで送信されます。
アプリのインストールが管理者によってブロックされている場合、アプリはユーザーの会議ではなくチャットに追加されます。
会議での Teams への共有は、タブシナリオでのみサポートされ、Teams に固有です。

会議のために Teams への共有を有効にする

Web ページに launcher.js スクリプトを追加します。

<script async defer src="https://teams.microsoft.com/share/launcher.js"></script>

class属性にteams-share-button、data-href属性で共有するリンクを含む HTML 要素を Web ページに追加します。ユーザーが会議で共有から Teams にコンテンツを共有できるようにするには、 allow-share-in-meeting 属性を追加し、 trueに設定します。
```
    <div
    class="teams-share-button"
    data-href="https://<link-to-be-shared>"
    data-allow-share-in-meeting="true"
    data-app-id="<app-id>"
    >
    </div>
```
構成後、[Teams に共有] ダイアログが表示され、[ 今すぐ表示 ] オプションが表示されます。 [表示] を使用すると、ユーザーは進行中の会議にコンテンツを共有できます。会議ステージでコンテンツを共有したユーザーの場合、会議が開始するとサイドパネルが自動的に開き、会議のサイドパネルに共有コンテンツが設定されます。

Teams に共有を使用してコンテンツを会議に共有するエンドユーザーシナリオをいくつか次に示します。

今後の会議にコンテンツを共有する

ブラウザーで Web アプリを開き、[ Teams に共有] を選択します。 [Teams に共有] ダイアログが開きます。
会議名を追加します。

注:

アプリがまだ会議スコープに追加されていない場合は、[Teams に共有] ダイアログにアプリの同意に関する免責事項が表示されます。
共有を選択します。アプリコンテンツは、今後の会議チャットでアダプティブカードとして共有されます。

会議が開始されると、開かれたアプリに基づいて、会議に共有されたコンテンツがサイドパネルエクスペリエンスに表示されます。

進行中の会議でコンテンツを共有する

ブラウザーで Web アプリを開き、[ Teams に共有] を選択します。 [Teams に共有] ダイアログが開きます。
[ 今すぐ表示] を選択します。会議でコンテンツを共有するための同意ダイアログが表示されます。
注:
- アプリがまだ会議スコープに追加されていない場合は、[Teams に共有] ダイアログにアプリの同意に関する免責事項が表示されます。
- 進行中の会議がない場合、ユーザーは [ 今すぐ会議 ] を選択して会議を開始し、コンテンツを共有できます。
[ 共有の開始] を選択します。
Web アプリは会議ステージと共有され、すべての参加者が対話して共同作業を行うことができます。

会議を開始してコンテンツを共有する

進行中の会議がなく、ユーザーが会議を開始してコンテンツを提示する場合は、[Teams に共有] オプションを使用して行うことができます。会議を開始し、コンテンツを共有するには:

ブラウザーで Web アプリを開き、[ Teams に共有] を選択します。 [Teams に共有] ダイアログが開きます。
新しい会議を開始するには、会議名または参加者を追加します。
[ 今すぐ表示] を選択します。会議を開始するための同意ダイアログが表示されます。

注:

アプリがまだ会議スコープに追加されていない場合は、[Teams に共有] ダイアログにアプリの同意に関する免責事項が表示されます。
[OK] を選択します。会議ウィンドウが表示され、会議に参加します。
[今すぐ参加] を選択します。会議に参加すると、同意ダイアログが表示され、会議内のコンテンツが共有されます。
[ 共有の開始] を選択します。
Web アプリは会議ステージと共有され、すべての参加者が対話して共同作業を行うことができます。

Web サイトのプレビューを作成する

Web サイトが Teams と共有されている場合、選択したチャネルに挿入されたカードには、Web サイトのプレビューが含まれます。このプレビューの動作を制御するには、共有されている Web サイトに適切なメタデータ ( data-href URL など) が追加されていることを確認します。

プレビューを表示するには:

サムネイル画像、またはタイトルと説明の両方を含める必要があります。最適な結果を得るには、3 つすべてを含めます。
共有 URL には認証は必要ありません。認証が必要な場合は共有できますが、プレビューは作成されません。

次の表は、必要なタグの概要を示しています。

値	メタタグ	グラフを開く
Title	`<meta name="title" content="Example Page Title">`	`<meta property="og:title" content="Example Page Title">`
説明	`<meta name="description" content="Example Page Description">`	`<meta property="og:description" content="Example Page Description">`
サムネイル画像	なし	`<meta property="og:image" content="http://example.com/image.jpg">`

HTML の既定のバージョンまたは Open Graph バージョンを使用できます。

[Teams に共有] ボタンを使用している教師の場合は、共有リンクに基づいて、選択したチームで課題をすばやく作成できる追加のオプションを Create an Assignment 。

[Teams に共有] フォームで、次のフィールドの既定値を設定できます。

これについて何か言います: msgText
割り当て手順: assignInstr
割り当てタイトル: assignTitle

次の図は、教育機関向けの Teams への共有を示しています。

例

既定のフォーム値は、次の例で指定します。

<span
    class="teams-share-button"
    data-href="https://www.microsoft.com/education/products/teams"
    data-msg-text="Default Message"
    data-assign-title="Default Assignment Title"
    data-assign-instr="Default Assignment Instructions"
></span>

launcher.js 定義を次に示します。

プロパティ	HTML 属性	型	既定値	説明
url	`data-href`	文字列	該当なし	共有するコンテンツの URL。この URL は、コンテンツを今後の会議にピン留めしたり、進行中の会議で共有したりするために使用できます。 `allow-share-in-meeting`が`true`として設定されている場合は必須です。
preview	`data-preview`	ブール値 (文字列として)	`true`	値は、共有するコンテンツのプレビューを表示するかどうかを指定します。
appId	`data-app-id`	String	該当なし	共有するアプリの ID。 `allow-share-in-meeting`が`true`として設定されている場合は必須です。
iconPxSize	`data-icon-px-size`	number (文字列として)	`32`	レンダリングする [Teams に共有] ボタンのサイズ (ピクセル単位)。
msgText	`data-msg-text`	文字列	該当なし	メッセージ作成ボックスのリンクの前に追加される既定のテキスト。最大文字数は 200 文字です。
assignInstr	`data-assign-instr`	文字列	該当なし	割り当ての [命令 ] フィールドに追加される既定のテキスト。最大文字数は 200 文字です。
assignTitle	`data-assign-title`	文字列	該当なし	割り当て [タイトル ] フィールドに追加される既定のテキスト。最大文字数は 50 文字です。
会議で共有する	`data-allow-share-in-meeting`	String	該当なし	チャットまたはチャネルで共有する既存の機能に加えて、ユーザーが会議でコンテンツを共有できるようにする値。既定では、 `false` と見なされます。

コードサンプル

サンプルの名前	説明	Node.js
Teams への共有	このサンプルアプリでは、Web ページがタブとして表示され、[今すぐ表示] オプションがある [Teams に共有] ボタンが含まれています。	表示

次の方法で共有

Web サイトのプレビューを作成する

例

コードサンプル

関連項目

その他のリソース

次の方法で共有

Web アプリから Teams に共有する

Teams への共有の埋め込み

会議でコンテンツを共有する

Web サイトのプレビューを作成する

教育のために Teams に共有する

例

コード サンプル

関連項目

その他のリソース

コードサンプル