Live Share SDK

Live Share は、専用のバックエンド コードを記述することなく、Teams アプリをコラボレーション マルチユーザー エクスペリエンスに変換するように設計された SDK です。 Live Share を使用すると、ユーザーはMicrosoft Teamsで共同視聴、共同編集、共同編集を行うことができます。 ユーザーが会議中にプレゼンテーションを行っている場合でも、チャットに共有されているコンテンツを表示する場合でも、Live Share は数行のコードだけで共有セッションに安全に接続します。

画面共有だけでは不十分な場合があり、Microsoft が Live や Whiteboard などのツールPowerPoint Teams に直接組み込んだ理由です。 Web アプリケーションを会議インターフェイスのセンター ステージに直接移動することで、ユーザーは会議や通話中にシームレスに共同作業を行うことができます。

会議の終了後もコラボレーションを停止する必要はありません。 ライブ共有セッションはチャットとチャネルのコンテキストで機能するため、ユーザーは、どのコンテンツを閲覧しているのか、互いにフォローしているのかなどを確認できます。

機能の概要

Live Share には、無限のコラボレーション シナリオをサポートする 3 つの主要なパッケージがあります。 これらのパッケージは、プリミティブ構成要素やターンキー シナリオなど、一連の分散データ構造 (DDS) を公開します。

Live Share は、 会議と Fluid Framework をシームレスに統合します。 流動フレームワークは、共有状態を分散および同期するためのクライアント ライブラリの集合体です。 Live Share は、セキュリティとグローバル規模の Teams に支えられた Azure Fluid Relay を無料かつフル マネージドですぐに使用できます。

Live Share Core

Live Share を使用すると、数行のコード内の各会議、チャット、またはチャネルに関連付けられている特殊な Fluid Container に接続できます。 Live Share では、Fluid Framework によって提供されるデータ構造に加えて、アプリの状態の同期を簡略化するために、新しい DDS クラスのセットもサポートされています。

Live Share コア パッケージでサポートされる機能は次のとおりです。

• 会議、チャット、またはチャネルの LiveShareClient で Live Share セッションに参加します。
• プレゼンスを追跡し、ユーザー メタデータを LivePresenceと同期します。
• ユーザーが LiveStateでセッションを終了すると消えるアプリの状態を調整します。
• カウントダウン タイマーを LiveTimerと同期します。
• LiveEventを使用してセッション内の他のクライアントにリアルタイム イベントを送信します。
• LiveFollowModeを使用して他のユーザーに提示してフォローします。
• SharedMapやSharedStringなど、Fluid Framework の任意の機能を使用します。

このパッケージの詳細については、「 コア機能」ページを参照してください。

Live Share メディア

ビデオとオーディオは、現代の世界と職場の重要な部分です。 Live Share メディアを使用すると、わずか数行のコードを使用して、任意のメディア プレーヤーのメディア 同期 が可能になります。 プレーヤーの状態とトランスポートコントロールレイヤーでメディアを同期することで、ビューを個別に属性付けし、アプリを通じて可能な限り最高の品質を提供できます。 Microsoft はメディア コンテンツを再キャストしていないため、ライセンスとアクセスの要件はそのまま保持されます。

Live Share メディアでサポートされる機能は次のとおりです。

• メディア プレーヤーの状態を同期し、 MediaPlayerSynchronizerで追跡します。
• ユーザーが会議中に話す際に、メディアボリュームをインテリジェントに調整します。
• プレイヤーの状態を変更できるユーザーを制限します。
• メディアの同期を一時停止し、その場で、またはスケジュールされた待機ポイントで再開します。

このパッケージの詳細については、「 Live Share メディア」ページを参照してください。

Live Share キャンバス

リアルタイムで共同作業を行う場合、ユーザーが画面上のコンテンツを指摘して強調できることが不可欠です。 Live Share キャンバスを使用すると、シームレスなコラボレーションのために、アプリに手描き入力、レーザー ポインター、カーソルを簡単に追加できます。

Live Share キャンバスでサポートされる機能は次のとおりです。

• LiveCanvasを使用して、コラボレーション <canvas>をアプリに追加します。
• ペン、蛍光ペン、線、矢印ツールを使用してアイデアを伝えます。
• レーザー ポインターを使用して効果的に提示します。
• リアルタイムマウスカーソルと一緒に従います。
• 可変デバイスとビューステートの設定を構成します。
• 完全にサポートされているマウス、タッチ、スタイラスの入力を使用します。

このパッケージの詳細については、 Live Share キャンバス ページを参照してください。

Live Share を使用してアプリをビルドする理由

コラボレーション アプリの構築は、困難で、時間とコストがかかり、複雑なコンプライアンス要件が含まれるため、規模が大きくなると大変です。 Teams ユーザーは、画面共有を通してチームメイトと作業を確認したり、一緒にビデオを見たり、新しいアイデアを出し合ったりして、多くの時間を過ごしています。 Live Share SDK を使用すると、最小限の投資でアプリをより協調的なものに変換できます。

Live Share SDK の主な利点を次に示します。

• 手間のいらないセッション管理とセキュリティ。
• ステートフル分散データ構造とステートレス分散データ構造。
• ビデオとオーディオを簡単に同期するためのメディア拡張機能。
• ターン キーの手描き入力、レーザー ポインター、カーソル。
• 役割検証を使用して会議の特権を尊重する。
• 待ち時間が短く、無料で完全に管理されたサービス。

Live Share がコラボレーション シナリオに適しているかどうかを理解するには、Live Share と他のコラボレーション フレームワークの違いを理解しておくと役立ちます。次を含みます。

• Web ソケット
• Azure Fluid Relay
• Live Share

Web ソケット

Web ソケットは、Web でのリアルタイム通信のためのユビキタス テクノロジであり、一部のアプリでは独自のカスタム Web ソケット バックエンドを使用することを好む場合があります。 REST API とは異なり、Web ソケットは、セッション内のサーバーとクライアント間のオープン接続を維持します。

他のカスタム API サービスと同様に、要件には通常、認証セッション、リージョン マッピング、メンテナンス、スケーリングが含まれます。 多くのコラボレーション シナリオでは、サーバーでのセッション状態の維持も必要です。これには、ストレージ インフラストラクチャ、競合の解決などが必要です。

Live Share を使用すると、オーバーヘッドなしで Web ソケットのすべての機能を利用できます。

Azure Fluid Relay

Azure Fluid Relay は Fluid Framework のマネージド オファリングであり、開発者がリアルタイムのコラボレーション エクスペリエンスを構築し、接続された JavaScript クライアント間で状態をレプリケートするのに役立ちます。 Microsoft Whiteboard、Loop、OneNote は、現在 Fluid Framework を使用して構築されたアプリの例です。

他の Azure サービスと同様に、Azure Fluid Relay は、複雑さを最小限に抑えて、個々のプロジェクトのニーズに合わせて調整するように設計されています。 要件には、Fluid コンテナーとリージョン コンプライアンスの認証ストーリーの開発が含まれます。 構成後、開発者は高品質のコラボレーション エクスペリエンスを提供することに集中できます。

Live Share ホステッド サービス

Live Share は、Microsoft Teamsのセキュリティに基づくターンキーの Azure Fluid Relay サービスを提供します。 すべてのセッションは、テナント データ所在地の要件、グローバル規制、およびセキュリティ コミットメントに準拠しています。 わずか数行のコードで、会議、チャット、またはチャネルのメンバーのみがアクセスできる Live Share コンテナーに接続できます。

import { LiveShareClient, LivePresence } from "@microsoft/live-share";
import { LiveShareHost } from "@microsoft/teams-js";

// Join the Fluid container
const host = LiveShareHost.create();
const liveShare = new LiveShareClient(host);
const schema = {
  initialObjects: { presence: LivePresence },
};
const { container } = await liveShare.joinContainer(schema);

// ... ready to start app sync logic

import { LiveShareClient, LivePresence } from "@microsoft/live-share";
import { LiveShareHost } from "@microsoft/teams-js";
import { ContainerSchema } from "fluid-framework";

// Join the Fluid container
const host = LiveShareHost.create();
const liveShare = new LiveShareClient(host);
const schema: ContainerSchema = {
  initialObjects: { presence: LivePresence },
};
const { container } = await liveShare.joinContainer(schema);

// ... ready to start app sync logic

カスタム Azure Fluid Relay サービスの使用

ほとんどのユーザーは、無料のホステッド サービスを使用することをお勧めしますが、Live Share アプリに独自の Azure Fluid Relay サービスを使用すると有益な状況が残っています。

次の場合は、カスタム サービスの使用を検討してください。

• Fluid コンテナー内のデータの長期保存が必要です。
• カスタム セキュリティ ポリシーを必要とする機密データをサービス経由で送信します。
• Teams 以外のアプリケーション用の Fluid Framework ( SharedMapなど) を使用して機能を開発します。

詳細については、カスタム Azure Fluid Relay サービスの ハウツー ガイドを参照してください。

Live Share コラボレーション コンテキスト

Live Share セッションを使用すると、会議、チャット、チャネルでのシームレスなコラボレーションが可能になります。 joinContainer() API を使用してセッションに接続すると、Teams はユーザーを適切な Fluid コンテナーに接続します。 コンテキスト固有のコードを記述する必要はありませんが、タブ画面ごとのユーザー シナリオの違いを理解する必要があります。

Teams JavaScript SDK の getContext() API は、アプリが実行されている FrameContexts を示します。 これを使用して、コンテキストごとにアプリケーション内のさまざまな機能と UX パターンを条件付きで有効にすることができます。 Live Share では、次の FrameContexts コンテキストがサポートされています。

• meetingStage
• sidePanel
• content

次の例は、コンテキスト固有の機能をアプリケーションに追加する方法を示しています。

import { LiveShareClient, LiveFollowMode } from "@microsoft/live-share";
import {
  app,
  liveShare,
  LiveShareHost,
  FrameContexts,
} from "@microsoft/teams-js";

// Check if Live Share is supported in the current host / context
if (!liveShare.isSupported()) return;

// Join the Fluid container for the current scope
const host = LiveShareHost.create();
const liveShare = new LiveShareClient(host);
const schema = {
  initialObjects: { followMode: LiveFollowMode },
};
const { container } = await liveShare.joinContainer(schema);

// Get teamsJs context
const context = await app.getContext();
switch (context.page?.frameContext) {
  case FrameContexts.meetingStage: {
    // Optimize app for meeting stage
    // e.g., followMode.startPresenting()
    break;
  }
  case FrameContexts.sidePanel: {
    // Optimize app for meeting side panel
    // e.g., provide simplified UX for selecting content
    break;
  }
  case FrameContexts.content: {
    // Optimize app for content
    // e.g., hide presenter settings not appropriate for async contexts
    break;
  }
  default: {
    throw new Error("Received unexpected frameContext");
  }
}

// ... ready to start app sync logic

import { LiveShareClient, LiveFollowMode } from "@microsoft/live-share";
import { app, liveShare, LiveShareHost, FrameContexts } from "@microsoft/teams-js";
import { ContainerSchema } from "fluid-framework";

// Check if Live Share is supported in the current host / context
if (!liveShare.isSupported()) return;

// Join the Fluid container for the current scope
const host = LiveShareHost.create();
const liveShare = new LiveShareClient(host);
const schema: ContainerSchema = {
  initialObjects: { followMode: LiveFollowMode },
};
const { container } = await liveShare.joinContainer(schema);

// Get teamsJs context
const context: app.Context = await app.getContext();
switch(context.page?.frameContext) {
  case FrameContexts.meetingStage: {
    // Optimize app for meeting stage
    // e.g., followMode.startPresenting()
    break;
  }
  case FrameContexts.sidePanel: {
    // Optimize app for meeting side panel
    // e.g., provide simplified UX for selecting content
    break;
  }
  case FrameContexts.content: {
    // Optimize app for content
    // e.g., hide presenter settings not appropriate for async contexts
    break;
  }
  default: {
    throw new Error("Received unexpected frameContext");
  }
}

// ... ready to start app sync logic

会議コンテキスト

前述したように、 meetingStage と sidePanelという 2 つの会議コンテキストがあります。 次のセクションでは、これらのコンテキストを最適化してユーザー エクスペリエンスを強化する方法について説明します。

会議ステージ

meetingStage コンテキストを使用すると、ユーザーは会議の参加者の会議ステージにアプリのコンテンツを共有できます。 このコンテキストでは、通常、ユーザーはリアルタイムで共同作業を行う必要があります。 Microsoft Loop や Word などの共同作業アプリを Web ブラウザーに読み込む場合とは異なり、発表者は通常、エクスペリエンスをより詳細に制御することが期待されます。 たとえば、PowerPoint Live では、出席者が一時的にフォローを停止できる場合でも、発表者は既定で出席者に表示されるPowerPointスライドを制御できる必要があります。

meetingStage アプリに対して次の最適化を行うことを検討してください。

• 3D モデルを表示するすべてのユーザーのカメラ位置を制御するなどして、アプリのアクティブな発表者コントロールを配置します。
• 対象ユーザーがビデオの共同視聴中にメディア再生を制御するなど、アプリを制御できるようにします。
• 出席者がスライド ショーで別の画像をクリックしたときに [発表者に同期] ボタンを表示するなど、発表者のフォローを一時的に停止できます。
• 発表者が他のユーザーのフォローを停止する機能を無効にするなど、発表者に制御を与える設定を指定します。

会議のサイド パネル

会議 sidePanel コンテキストを使用すると、ユーザーはチャットなどの既定のタブと共に、アプリを会議のタブとしてピン留めできます。 会議参加者は、 sidePanel タブを開くオプションを持つことができますが、各ユーザーは個別に開く必要があります。 これにより、会議ステージに共有するコンテンツの検索など、会議中の非同期シナリオに最適です。 ユーザーはこの画面からリッチ コンテンツを共同で視聴、共同作成、共同編集することは望まれませんが、Live Share では引き続き sidePanel アプリを改善できます。

sidePanel アプリに対して次の最適化を行うことを検討してください。

• コラボレーション ビデオやオーディオ プレイリストなど、会議ステージへのコンパニオン エクスペリエンス。
• "制御の取得" 機能を無効にするなど、会議ステージにコンテンツを共有する前の構成設定。
• アプリケーションを再読み込みするのではなく、共有中に新しいコンテンツを 1 回ブロードキャストするなど、パフォーマンスの最適化が既に開始されています。

コンテンツ コンテキスト

content コンテキストは、アプリのコンテンツを非同期的に使用するように設計されています。 チャットとチャネルの content コンテキストには、次のようないくつかの異なるサーフェスがあります。

• チャット タブとチャネル タブ
• コラボレーション ステージ ビュー

チャット タブとチャネル タブ

チャット タブとチャネル タブを使用すると、ユーザーはアプリケーションをチャットまたはチャネルにピン留めできます。 sidePanelとcontentの両方をサポートするタブは同じ固定 URL を備えていますが、ユース ケースはかなり異なります。 まず、チャット タブとチャネル タブでは、通常、作業する水平方向の領域が広くなります。 ベスト プラクティスとして、ユーザーがタブに "ピン留め" するコンテンツを検索できるようにします。たとえば、ノート アプリを使用する教師は、学生の教育リソースを含むノートをピン留めすることがあります。

チャット タブとチャネル タブは非同期消費に最も一般的に使用されますが、ユーザーは同じコンテンツを同時に使用できます。 このような場合は、データの競合や作業の重複を防ぐために、コンテンツを同期しておくことが便利です。 Live Share を使用すると、各ユーザーが表示しているコンテンツ、実行している内容などを表示できます。 これにより、ユーザーをアプリ コンテンツに引き込み、エンゲージメントとコラボレーションを高めるソーシャル インセンティブを提供できます。 これを「偶然のコラボレーション」と呼びます。

[ content チャットとチャネル] タブで次の最適化を行うことを検討してください。

• 各ホワイトボードをアクティブに表示するなど、タブにピン留めされたコンテンツを表示しているユーザーを表示します。
• タスク アプリの進行中のスタンドアップに参加するためのトーストの表示など、進行中のコラボレーション セッションに参加するようにユーザーを微調整します。
• フォローする別の接続ユーザーのアバターをクリックするなど、ユーザーが特定のユーザーまたはユーザー のグループに従うことを許可します。

コラボレーション ステージ ビュー

ユーザーが Teams でアプリのコンテンツを同僚と共有する場合は、 コラボレーション ステージ ビューを使用することをお勧めします。 このシナリオでは、ユーザーはポップアウト ウィンドウで共有されたコンテンツをサイドで開き、ユーザーは会話フローを続行しながらコンテンツに参加できます。 チャット タブとチャネル タブと同様に、このコンテンツは主に非同期的に使用されます。 ただし、ユーザーがアダプティブ カードを介してコンテンツを共有する場合、ユーザーはコンテンツを表示して互いにチャットする可能性が高まり、共同作業機能の必要性が高くなります。

コラボレーション ステージビュー アプリに対して次の最適化を行うことを検討してください。

• ビデオ内の位置にユーザーのアバターを表示するなど、コンテンツを表示しているユーザーと実行している内容を表示します。
• フォローする別の接続ユーザーのアバターをクリックするなど、ユーザーが特定のユーザーまたはユーザー のグループに従うことを許可します。
• フォロー モードでインク ツールやレーザー ポインターを有効にするなど、アドホック通信を容易にします。

React 統合

Live Share には専用の React 統合があり、Live Share 機能を React アプリに簡単に統合できます。 LiveShareClientを直接使用するのではなく、LiveShareProvider コンポーネントを使用して、コンポーネントが最初にマウントされたときに Live Share セッションに参加できます。 各 LiveDataObject には対応する React フックがあり、Live Share を非常に簡単に使用できるように設計されています。 詳細については、「Live Share for React GitHub」ページを参照してください。

ユーザーのシナリオ

次のステップ

関連項目

• Teams 会議用アプリ
• GitHub リポジトリ
• LIVE SHARE SDK リファレンス ドキュメント
• Live Share Media SDK リファレンス ドキュメント
• Teams で Fluid を使用する
• 会議アプリ API