会議で共有する

[アーティクル]
04/01/2024

会議で共有すると、ユーザーはドキュメントやサードパーティの Web アプリを会議ステージに共有できます。会議の参加者は、サードパーティの Web アプリと共同作業したり、ドキュメントを一緒に編集したりできます。

次の図は、Web アプリ の [会議で共有 ] ボタンを示しています。

会議中に、ユーザーがサードパーティの Web アプリまたはドキュメントから [ 会議で共有 ] ボタンを選択すると、会議ステージへのディープリンクが起動され、会議ステージで Web ビューとしてアプリが開きます。会議の参加者がサードパーティの Web アプリまたはドキュメントと対話するには、Teams クライアントにアプリまたはドキュメントの会議拡張機能がインストールされている必要があります。会議拡張機能がない場合、Teams は参加者に会議拡張機能のインストールを求めます。

[ 会議で共有 ] ボタンを選択すると、会議ステージへのディープリンクが起動します。ディープリンク形式を次に示します。

msteams:/l/meeting-share?deeplinkId={GUID}&fqdn={string}&lm=deeplink&appContext={json encoded app context}

詳細については、「会議でステージに合わせるためにコンテンツを共有するためのディープリンクを生成する」を参照してください。

会議で共有を有効にする 3 つの異なる方法を次に示します。 Web ページに表示される [会議で共有 ] ボタンで必要なコントロールの量に応じて、いずれかの方法を使用できます。

この方法は、最小限のカスタマイズで会議ボタンに共有を表示する最も簡単な方法です。ボタンのスタイル、サイズ、言語をカスタマイズできます。

Web ページをスキャンして、種類 teams-share-in-meeting-button のクラス名を持つ HTML 要素を見つけ、ページ 内の [会議で共有] ボタンを動的に生成できます。

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

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

属性にを teams-share-in-meeting-button 含む HTML 要素、属性の class アプリ ID (マニフェストから)、属性で data-app-id 共有するリンクを data-href Web ページに追加します。属性と data-entity-description 属性をdata-entity-name含めることもできます。
```
<div
  class="teams-share-in-meeting-button"
  data-href="https://<link-to-be-shared>"
  data-app-id="<app-id>"
  data-entity-name="<app-name>"
  data-entity-description="<app-content-description>"
  >
</div>
```
[会議で共有] ボタンをカスタマイズするための追加の属性を次に示します。
- data-button-type: ボタン (primaryShareInMeeting または secondaryShareInMeeting) の背景色を指定します。
- data-button-size: ボタンのサイズをピクセル単位で指定します。
- data-target: リンクが同じウィンドウ、新しいタブ、または新しいウィンドウで開かれるかどうかを指定します。
- data-locale: 目的のユーザー言語を指定します。

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

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

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

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

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

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

async function onLoadComplete() {
   const shareInMeetingButton = document.createElement("div");
   shareInMeetingButton.setAttribute("data-app-id", "<app-id>");
   shareInMeetingButton.textContent = "Share Test App"
   shareInMeetingButton.setAttribute("data-href", "<app-content-url>");
   shareInMeetingButton.setAttribute("data-button-type", "secondaryShareInMeeting");
   shareInMeetingButton.setAttribute("data-locale", "fr-CA");
   await window.shareToMicrosoftTeams.renderButtons({elements: [], shareInMeetingElements: [shareInMeetingButton]});
}

このメソッドを使用すると、スクリプトの呼び出し方法と、API を使用してボタンを生成するタイミングを完全に window.shareToMicrosoftTeams.shareInMeetingClickHandler 制御できます。ボタンの生成方法と場所を制御できます。 API をボタンの window.shareToMicrosoftTeams.shareInMeetingClickHandler 属性に onclick アタッチするだけで済みます。リンク、ボタン、ドロップダウンメニューなどにも添付できます。 UI の表示方法を完全に制御できます。

API は async shareInMeetingClickHandler(content: IShareInMeetingContent) 、[会議で共有] ボタンのコールバックハンドラーを作成します。このコールバックハンドラーは、ボタンまたはメニューを選択して実行できます。

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

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

HTML 要素を作成し、そのonClick属性にをshareToMicrosoftTeams.shareInMeetingClickHandler追加します。起動ツールスクリプトが完全に読み込まれたら、オンクリックロジックが作成されていることを確認します。

async function onLoadComplete() {
   var customShareInMeetingButton = document.createElement("a");
   customShareInMeetingButton.onclick = window.shareToMicrosoftTeams.shareInMeetingClickHandler({
   url: "<app-content-url>",
   appId: "<app-id>",
   entityName: "<app-entity-name>",
   entityDescription: "<app-content-description>",
   });
}

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

プロパティ	HTML 属性	型	必須	既定値	説明
url	`data-href`	String	はい	該当なし	共有するアプリコンテンツの URL。
appId	`data-app-id`	String	はい	該当なし	共有するアプリの ID。
entityName	`data-entity-name`	String	いいえ	該当なし	アプリエンティティ名。
entityDescription	`data-entity-description`	String	いいえ	該当なし	共有するアプリコンテンツの説明。
ロケール	`data-locale`	String	いいえ	en-US	ユーザー優先言語。
target	`data-target`	文字列	いいえ	self	リンクを同じウィンドウ、新しいタブ、または新しいウィンドウで開くかどうかを指定します。
buttonType	`data-button-type`	String	いいえ	primaryShareInMeeting	ボタンの背景色 `primaryShareInMeeting` ( または `secondaryShareInMeeting`) を指定します。
buttonSize	`data-button-size`	String	いいえ	該当なし	ボタンのサイズ (ピクセル単位)。

サードパーティ製アプリのエンドユーザーエクスペリエンス

サードパーティ製アプリで [会議で共有] を有効にした後、アプリを会議ステージに共有できます。アクセスするには、次の手順に従います。

会議拡張機能がインストールされている場合:

ブラウザーで Web アプリを開き、[ 会議で共有] を選択します。
[ 共有の開始] を選択します。
Web アプリは会議ステージと共有され、すべての参加者が一緒に対話および編集できます。

会議拡張機能がインストールされていない場合:

ブラウザーで Web アプリを開き、[ 会議で共有] を選択します。
会議拡張機能アプリをインストールするには、[追加] を選択 します。
[ 共有の開始] を選択します。
Web アプリは会議ステージと共有され、すべての参加者が一緒に対話および編集できます。

また、ディープリンクを生成して、アプリを共有して、会議のステージングと開始または参加を行うこともできます。進行中の会議に参加しているユーザーがアプリでディープリンクを選択すると、アプリがステージと共有され、アクセス許可のポップアップウィンドウが表示されます。ユーザーは、参加者にアクセス権を付与してアプリと共同作業できます。

スクリーンショットは、アクセス許可のポップアップウィンドウを示す例です。

ユーザーが会議に参加していない場合、ユーザーは Teams 予定表にリダイレクトされ、会議に参加したり、インスタント会議を開始したりできます (今すぐ会議)。

スクリーンショットは、進行中の会議がない場合のポップアップウィンドウを示す例です。

ユーザーがインスタント会議 (今すぐ会議) を開始すると、参加者を追加してアプリと対話できます。

スクリーンショットは、参加者を追加するオプションとアプリと対話する方法を示す例です。

ステージでコンテンツを共有するためのディープリンクを追加するには、アプリコンテキストが必要です。アプリコンテキストを使用すると、Teams クライアントはアプリマニフェストをフェッチし、ステージでの共有が可能な場合にチェックできます。アプリコンテキストの例を次に示します。

{ "appSharingUrl" : "https://teams.microsoft.com/extensibility-apps/meetingapis/view", "appId": "9ec80a73-1d41-4bcb-8190-4b9eA9e29fbb" , "useMeetNow": false }

アプリコンテキストのクエリパラメーターは次のとおりです。

appID: これは、アプリマニフェストから取得できる ID です。
appSharingUrl: ステージで共有する必要がある URL は、アプリマニフェストで定義されている有効なドメインである必要があります。 URL が有効なドメインでない場合は、エラーの説明をユーザーに提供するエラーダイアログが表示されます。
useMeetNow: これには、true または false を指定できるブール型パラメーターが含まれます。
- True: 値が useMeetNow true で、進行中の会議がない場合は、新しい会議が開始されます。会議が進行中の場合、この値は無視されます。
- False: の既定値 useMeetNow は false です。つまり、ディープリンクがステージに共有され、会議が進行中でなければ、予定表のポップアップが表示されます。ただし、会議中に直接共有できます。

すべてのクエリパラメーターが適切に URI エンコードされ、アプリコンテキストが最終的な URL で 2 回エンコードされている必要があることを確認します。次に例を示します。

const appContext= JSON.stringify({ 
  "appSharingUrl" : "https://teams.microsoft.com/extensibility-apps/meetingapis/view",
  "appId": "9cc80a93-1d41-4bcb-8170-4b9ec9e29fbb",
  "useMeetNow": false
});
const encodedContext = encodeURIComponent(appContext).replace(/'/g,"%27").replace(/"/g,"%22");
const encodedAppContext = encodeURIComponent(encodedContext).replace(/'/g,"%27").replace(/"/g,"%22");

ディープリンクは、Teams Web から、または Teams デスクトップまたはモバイルクライアントから起動できます。

Teams Web: 次の形式を使用して、Teams Web からディープリンクを起動し、ステージ上でコンテンツを共有します。

msteams:/l/meeting-share?deeplinkId={GUID}&fqdn={string}&lm=deeplink&appContext={json encoded app context}

例: https://teams.microsoft.com/l/meeting-share?deeplinkId={sampleid}&fqdn=teams.microsoft.com&lm=deeplink%22&appContext=%257B%2522appSharingUrl%2522%253A%2522https%253A%252F%252Fteams.microsoft.com%252Fextensibility-apps%252Fmeetingapis%252Fview%2522%252C%2522appId%2522%253A%25229cc80a93-1d41-4bcb-8170-4b9ec9e29fbb%2522%252C%2522useMeetNow%2522%253Atrue%257D

ディープリンク	フォーマット	例
アプリを共有し、Teams 予定表を開くには、が false の場合`useMeeetNow`は既定値です。	`https://teams.microsoft.com/l/meeting-share?deeplinkId={deeplinkid}&fqdn={fqdn}}&lm=deeplink%22&appContext={encoded app context}`	`https://teams.microsoft.com/l/meeting-share?deeplinkId={sampleid}&fqdn=teams.microsoft.com&lm=deeplink%22&appContext=%257B%2522appSharingUrl%2522%253A%2522https%253A%252F%252Fteams.microsoft.com%252Fextensibility-apps%252Fmeetingapis%252Fview%2522%252C%2522appId%2522%253A%25229cc80a93-1d41-4bcb-8170-4b9ec9e29fbb%2522%252C%2522useMeetNow%2522%253Afalse%257D`
アプリを共有し、インスタント会議を開始するには、が true の場合`useMeeetNow`。	`https://teams.microsoft.com/l/meeting-share?deeplinkId={deeplinkid}&fqdn={fqdn}}&lm=deeplink%22&appContext={encoded app context}`	`https://teams.microsoft.com/l/meeting-share?deeplinkId={sampleid}&fqdn=teams.microsoft.com&lm=deeplink%22&appContext=%257B%2522appSharingUrl%2522%253A%2522https%253A%252F%252Fteams.microsoft.com%252Fextensibility-apps%252Fmeetingapis%252Fview%2522%252C%2522appId%2522%253A%25229cc80a93-1d41-4bcb-8170-4b9ec9e29fbb%2522%252C%2522useMeetNow%2522%253Atrue%257D`

Teams デスクトップまたはモバイルクライアント: 次の形式を使用して、Teams デスクトップまたはモバイルクライアントからディープリンクを起動し、ステージ上でコンテンツを共有します。

msteams:/l/meeting-share?deeplinkId={deeplinkid}&fqdn={fqdn}&lm=deeplink&appContext={encoded app context}

例: msteams:/l/meeting-share?deeplinkId={sampleid}&fqdn=teams.microsoft.com&lm=deeplink%22&appContext=%257B%2522appSharingUrl%2522%253A%2522https%253A%252F%252Fteams.microsoft.com%252Fextensibility-apps%252Fmeetingapis%252Fview%2522%252C%2522appId%2522%253A%25229cc80a93-1d41-4bcb-8170-4b9ec9e29fbb%2522%252C%2522useMeetNow%2522%253Atrue%257D

ディープリンク	フォーマット	例
アプリを共有し、Teams 予定表を開くには、が false の場合`useMeeetNow`は既定値です。	`msteams:/l/meeting-share? deeplinkId={deeplinkid}&fqdn={fqdn}&lm=deeplink%22&appContext={encoded app context}`	`msteams:/l/meeting-share?deeplinkId={sampleid}&fqdn=teams.microsoft.com&lm=deeplink%22&appContext=%257B%2522appSharingUrl%2522%253A%2522https%253A%252F%252Fteams.microsoft.com%252Fextensibility-apps%252Fmeetingapis%252Fview%2522%252C%2522appId%2522%253A%25229cc80a93-1d41-4bcb-8170-4b9ec9e29fbb%2522%252C%2522useMeetNow%2522%253Afalse%257D`
アプリを共有し、インスタント会議を開始するには、が true の場合`useMeeetNow`。	`msteams:/l/meeting-share? deeplinkId={deeplinkid}&fqdn={fqdn}&lm=deeplink%22&appContext={encoded app context}`	`msteams:/l/meeting-share?deeplinkId={sampleid}&fqdn=teams.microsoft.com&lm=deeplink%22&appContext=%257B%2522appSharingUrl%2522%253A%2522https%253A%252F%252Fteams.microsoft.com%252Fextensibility-apps%252Fmeetingapis%252Fview%2522%252C%2522appId%2522%253A%25229cc80a93-1d41-4bcb-8170-4b9ec9e29fbb%2522%252C%2522useMeetNow%2522%253Atrue%257D`

クエリパラメーターは次のとおりです。

deepLinkId: テレメトリの関連付けに使用される任意の識別子。
fqdn: fqdn は省略可能なパラメーターで、ステージ上でアプリを共有するための会議の適切な環境に切り替えるために使用できます。特定の環境で特定のアプリ共有が発生するシナリオをサポートします。の fqdn 既定値はエンタープライズ URL で、使用可能な値は Teams.live.com Teams for Life、、 teams.microsoft.comまたは teams.microsoft.usです。

アプリ全体をステージに共有するには、アプリマニフェストでを構成 meetingStage し meetingSidePanel 、フレームコンテキストとして構成する必要があります。アプリマニフェストに関するページを参照してください。そうしないと、会議の出席者がステージ上のコンテンツを表示できない場合があります。

注:

アプリが検証に合格するには、Web サイト、Web アプリ、アダプティブカードからディープリンクを作成するときに、文字列またはコピーとして 会議で共有 を使用します。

コードサンプル

サンプルの名前	説明	.NET	Node.js	マニフェスト
会議ステージビュー	このアプリは、Teams 会議のアプリを有効にして構成するのに役立ちます。また、会議機能での共有の使用も示します。	表示	表示	表示

サードパーティ製アプリのエンドユーザーエクスペリエンス

コードサンプル

関連項目

フィードバック

その他のリソース

会議で共有を有効にする

サード パーティ製アプリのエンド ユーザー エクスペリエンス

会議のステージにコンテンツを共有するためのディープ リンクを生成する

コード サンプル

関連項目

フィードバック

その他のリソース

サードパーティ製アプリのエンドユーザーエクスペリエンス

会議のステージにコンテンツを共有するためのディープリンクを生成する

コードサンプル