次の方法で共有

SharePoint 埋め込みアプリケーションの Fluid Framework

Fluid Framework と SharePoint Embedded を 統合して、ドキュメントコラボレーションをアプリケーションにシームレスかつ効率的に組み込みます。

背景

Fluid Framework は、共有データを分散、同期、および保存するためのクライアント ライブラリのコレクションです。 これらのライブラリを使用すると、複数のクライアントが同時に共有データ構造をリアルタイムで作成および操作できます。 Fluid Framework を使用すると、開発者はローカル データと同じプラクティスを共有データと共に使用できます。たとえば、Fluid オブジェクトはローカル TypeScript オブジェクトと同じ方法で動作します。

クイックスタート

Fluid Sample Apps ディレクトリでのビルドを開始します。 最初に SharePoint Embedded アプリケーションを 作成 する必要があります。

SharePoint Embedded の概要

試用目的でコンテナーの種類を作成して、SharePoint Embedded を無料で 試してください。

  1. 無料試用版 の Microsoft 365 テナントを設定します。 または、管理者の資格情報がある場合は、既存のテナントを使用することもできます。
  2. SharePoint Embedded Visual Studio Code 拡張機能にサインインし、試用版用のアプリケーションとコンテナーの種類を作成する手順に従います。

前提条件

Fluid Framework の構築を開始するには、次のものが必要です。

  1. 管理資格情報: Microsoft 365 テナントの管理者資格情報が必要です。
  2. SharePoint Embedded Application: アプリケーションをMicrosoft Entra IDに登録していることを確認します。 SharePoint Embedded アプリケーションがない場合は、 前のセクションを参照してください。
  3. アプリケーション (クライアント) ID: SharePoint Embedded アプリケーションの ClientID を取得します。
  4. コンテナーの種類情報:
    • アプリのコンテナーの種類に関連付けられている ContainerTypeId を特定します。
  5. コンテナー:
    • SharePoint Embedded Application にリンクされている同じコンテナーの種類のコンテナーが 少なくとも 1 つ作成されていることを確認します。

Fluid の概要

アプリ情報にアクセスする

アプリケーションの ClientID と、そのアプリケーションで作成されたコンテナーに関連付けられている ContainerTypeId が必要です。

ClientIDは、Fluid Framework とドキュメントを操作するときに正しいアクセス トークンを取得するために不可欠です。 ContainerTypeIdは、SharePoint Embedded アプリケーションに関連付けられているコンテナーにアクセスするために必要です。

Visual Studio Code 拡張機能を使用した場合は、Postman Environment をエクスポートして、ContainerTypeIdとClientIDの両方を簡単に表示できます。

それ以外の場合は、Get-SPOContainerType PowerShell コマンドレットを使用してContainerTypeIdにアクセスできます。 ClientIDは、[Id>App Registrations>Applications>すべてのアプリケーションに移動して、アプリケーションの概要を表示することでMicrosoft Entra IDで使用できます。

Fluid サンプル アプリの実行: 項目カウンター

これで、 Fluid Sample App Item Counter を使用してテストを行い、ビルドを開始できます。

ステップス：

  1. SharePoint Embedded Application とテナント管理者の資格情報の ClientID と ContainerTypeId を収集する

  2. Fluid Examples リポジトリを複製するディレクトリに移動します

  3. コマンドを実行してリポジトリを複製します。 git clone https://github.com/microsoft/FluidExamples.git

  4. アイテム カウンター ディレクトリに移動しますcd .\FluidExamples\item-counter-spe\

  5. 空の .env ファイルを作成し、次のようなスペースなしで ClientID と ContainerTypeId を入力します。

    SPE_CLIENT_ID=YOUR_CLIENTID

SPE_CONTAINER_TYPE_ID=YOUR_CONTAINERTYPE_ID

  6. npm install

  7. npm run dev

  8. Webpack が完了したら、 https://localhost:8080

  9. テナントの管理資格情報を使用してサインインする

  10. ポップアップ ウィンドウでアプリの管理者の同意を付与する

  11. 完全な URL を別のブラウザー タブにコピーするか、同じテナントに資格情報を持つユーザーに送信します。 これらは、同じテナント上にある限り、ユーザー資格情報にすることができます。 両方のブラウザーのアイテム カウンターに対するライブ変更は、データがクライアント間で同期されていることを示しています。

  12. 初めての Fluid App の実行におめでとうございます。 詳細については、項目カウンター README を参照してください。

    項目カウンター サンプル アプリ

  • Last updated on