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

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

サードパーティの Web サイトは、ランチャースクリプトを使用して、Web ページに [Teams に共有] ボタンを埋め込むことができます。 [Teams に共有] ボタンを選択すると、ポップアップウィンドウで [Teams に共有] エクスペリエンスが起動します。これにより、コンテキストを切り替えることなく、任意のユーザーまたは Microsoft Teams チャネルに直接リンクを共有できます。

次の図は、[Teams に共有] プレビューエクスペリエンスのポップアップウィンドウを表示しています。

注:

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

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

次の図は、[Teams に共有] ボタンを使用したリンク展開エクスペリエンスを示しています。

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

[Teams に共有] ボタンを埋め込む方法については、次のビデオを参照してください。

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

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

クラス属性と属性で共有するリンクを teams-share-button 使用して、Web ページに HTML 要素を data-href 追加します。
```
<div
  class="teams-share-button"
  data-href="https://<link-to-be-shared>">
</div>
```
これを完了すると、Teams アイコンが Web サイトに追加されます。次の図は、[Teams に共有] アイコンを示しています。
または、[Teams に共有] ボタンに別のアイコンサイズが必要な場合は、属性を data-icon-px-size 使用します。
```
<div
  class="teams-share-button"
  data-href="https://<link-to-be-shared>"
  data-icon-px-size="64">
</div>
```
共有リンクでユーザー認証が必要で、リンクの共有 URL プレビューが Teams でうまく表示されない場合は、属性をにfalse追加して URL プレビューをdata-preview無効にすることができます。
```
<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>

ページがコンテンツを動的にレンダリングする場合は、メソッドを shareToMicrosoftTeams.renderButtons() 使用して、パイプライン内の適切な場所に Share を強制的にレンダリングできます。

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

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

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

サムネイル画像、またはタイトルと説明の両方を含める必要があります。最適な結果を得るには、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 への共有を示しています。

完全な launcher.js 定義

プロパティ	HTML 属性	型	既定値	説明
href	`data-href`	文字列	該当なし	共有するコンテンツの href。
preview	`data-preview`	ブール値 (文字列として)	`true`	共有するコンテンツのプレビューを表示するかどうか。
iconPxSize	`data-icon-px-size`	number (文字列として)	`32`	レンダリングする [Teams に共有] ボタンのサイズ (ピクセル単位)。
msgText	`data-msg-text`	string	該当なし	メッセージ作成ボックスのリンクの前に挿入される既定のテキスト。最大文字数は 200 文字です。
assignInstr	`data-assign-instr`	string	該当なし	割り当て "命令" フィールドに挿入される既定のテキスト。最大文字数は 200 文字です。
assignTitle	`data-assign-title`	string	該当なし	割り当て "タイトル" フィールドに挿入される既定のテキスト。最大文字数は 50 文字です。

メソッド

shareToMicrosoftTeams.renderButtons(options)

options (省略可能): { elements?: HTMLElement[] }

現在、すべての共有ボタンがページに表示されます。省略可能 options なオブジェクトに要素の一覧が指定されている場合、それらの要素は共有ボタンにレンダリングされます。

既定のフォーム値を設定する

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

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

例

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

<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>

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

完全な launcher.js 定義

メソッド

既定のフォーム値を設定する

例

関連項目

フィードバック

その他のリソース

[Teams に共有を埋め込む] ボタン

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

Microsoft Teams for Educationに共有する

完全な launcher.js 定義

メソッド

既定のフォーム値を設定する

例

関連項目

フィードバック

その他のリソース