適用対象: Developer
SharePoint Embedded アプリで、コラボレーション コントロール、ライブ カウンター、カーソル、注釈、マルチユーザー フォーム状態など、リアルタイムの共有状態が必要な場合は、流動フレームワークを使用します。 Fluid には、共有データを分散、同期、および保存するためのクライアント ライブラリが用意されています。
SharePoint Embedded の準備
Fluid サンプルを実行する前に、SharePoint Embedded アプリケーションを作成または識別します。 Microsoft 365 テナントの管理者資格情報、アプリケーション クライアント ID、コンテナーの種類 ID、そのコンテナーの種類用に作成されたコンテナーが少なくとも 1 つ必要です。
SharePoint Embedded Visual Studio Code 拡張機能を使用した場合は、生成されたサンプル構成を使用して、 ContainerTypeId と ClientIdを検索します。 クライアント ID は、アプリの登録の Microsoft Entra ID でも確認できます。
SharePoint Embedded を無料で試すには、試用版のコンテナーの種類を作成します。 コンテナ ー タイプの作成と構成を参照してください。
アイテム カウンター サンプルを実行する
item-counter-speサンプルは、Fluid Examples リポジトリにあります。
git clone https://github.com/microsoft/FluidExamples.git
cd FluidExamples\item-counter-spe
サンプル フォルダーに空の .env ファイルを作成し、SharePoint Embedded 識別子を追加します。
SPE_CLIENT_ID=YOUR_CLIENTID
SPE_CONTAINER_TYPE_ID=YOUR_CONTAINERTYPE_ID
SPE_ENTRA_TENANT_ID=YOUR_ENTRA_TENANT_ID
パッケージをインストールし、開発サーバーを起動します。
npm install
npm run dev
Webpack が完了したら、 http://localhost:8080 を開き、テナントの資格情報でサインインし、プロンプトが表示されたらアプリに管理者の同意を付与します。 別のブラウザー タブで同じ URL を開くか、同じテナント内の別のユーザーに送信します。 アイテム カウンターに対する変更は、接続されているクライアント間で同期されます。
サンプルにサインインできない場合、または空白ページが表示される場合は、「リダイレクト URI と API アクセス許可チェックの トラブルシューティング 」を参照してください。
何を Fluid に属させるかを決定する
低遅延同期の恩恵を受けるコラボレーション アプリケーション状態には Fluid を使用します。 SharePoint Embedded コンテナーに永続的なドキュメントとファイルを格納します。 シナリオで監査、保持、検索、またはレポートが必要な場合は、最終的なビジネス出力を独自の非消費型モデルまたは SharePoint Embedded ファイルに保持します。
流動的な共有オブジェクトをユーザーに表示されるコラボレーション状態として扱う。 共有データ構造にシークレット、アクセス トークン、SAS URL、または特権グラフ応答を配置しないでください。
ID とアクセスを処理する
適切なトークンを取得し、コンテナーにアクセスするには、アプリに引き続き SharePoint Embedded クライアント ID とコンテナーの種類 ID が必要です。 1 つのタブ、同じユーザー用の 2 つのタブ、およびテナントの 2 人の異なるユーザーを使用してサンプルをテストします。 コンテナーを表示できるが、コラボレーション状態を編集してはならないユーザーの動作を確認します。
サンプルからアプリ デザインに移行する
項目カウンター サンプルを使用して、テナントの設定、同意、およびクライアント接続を証明します。 独自のアプリで、ユーザーが破棄したコラボレーション セッションの再接続動作、トークンの更新、オフライン移行、コンテナーの切り替え、クリーンアップを計画します。