SpreadJSの共同編集時に他ユーザーの選択セルを表示！プレゼンス機能の使い方

project/
├── server.js			# サーバー側のコード
├── package.json		# プロジェクト設定ファイル
├── webpack.config.js	# Webpack設定ファイル
└── public/				# 公開リソース用ディレクトリ
    ├── client.js		# クライアント側のコード（index.html用）
    ├── container.js	# クライアント側のコード（iframe.html用）
    ├── iframe.html		# エントリーポイントとなるHTML
    └── index.html		# SpreadJSを配置するHTML

npm install sqlite3 @mescius/js-collaboration-ot-sqlite@19.1.5
npm install @mescius/js-collaboration-presence@19.1.5
npm install @mescius/js-collaboration-presence-client@19.1.5

import express from 'express';
import http from 'http';
import { Server } from '@mescius/js-collaboration';
import * as OT from '@mescius/js-collaboration-ot';
import { type } from '@mescius/spread-sheets-collaboration';
import { presenceFeature } from '@mescius/js-collaboration-presence';

// typeを登録
OT.TypesManager.register(type);

const app = express();
const httpServer = http.createServer(app);
const server = new Server({ httpServer });
const port = 8080;

// ライセンスの設定
//server.LicenseKey = 'localhost環境以外では、ここにSpreadJSの共同編集機能が有効なサーバー用ライセンスキーを設定します';

// OTドキュメントサービスを初期化
const documentServices = new OT.DocumentServices();
server.useFeature(OT.documentFeature(documentServices));
server.useFeature(presenceFeature());

// publicディレクトリを静的リソースとして公開
app.use(express.static('public'));

// サーバーを起動
httpServer.listen(port, () => {
  console.log(`Server listening on port ${port}`);
  console.log(`http://127.0.0.1:${port}/iframe.html`);
});

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>SpreadJSの共同編集機能</title>
  <script src="iframe.js"></script>
  <style>
    iframe {
      border: 1px solid silver;
    }
  </style>
</head>

<body>
  <iframe id="iframe1" src="index.html" width=600 height=500></iframe>
  <iframe id="iframe2" src="index.html" width=600 height=500></iframe>
  <iframe id="iframe3" src="index.html" width=420 height=500></iframe>
</body>

</html>

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <script src="index.js"></script>
</head>

<body>
  <div id="username" style="border-radius:5px;color:white;margin-bottom:5px;padding:5px;"></div>
  <div id="ss" style="width:95vw;height:95vh;border:1px solid silver;"></div>
</body>

</html>

window.onload = () => {
  // iframeのリロード
    window.setTimeout(() => {
      const iframe1 = document.getElementById('iframe1');
      iframe1.contentWindow.location.reload();
      const iframe2 = document.getElementById('iframe2');
      iframe2.contentWindow.location.reload();
      const iframe3 = document.getElementById('iframe3');
      iframe3.contentWindow.location.reload();
    }, 500);
}

import * as GC from '@mescius/spread-sheets'
import '@mescius/spread-sheets-resources-ja';
import '@mescius/spread-sheets-collaboration-addon';
import { Client } from "@mescius/js-collaboration-client";
import * as OT from "@mescius/js-collaboration-ot-client";
import { type, bind, bindPresence } from '@mescius/spread-sheets-collaboration-client';
import "@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
import { Presence } from "@mescius/js-collaboration-presence-client";

// ライセンスの設定
GC.Spread.Sheets.LicenseKey = 'ここにSpreadJSの共同編集機能が有効なライセンスキーを設定します';

const mockUsers = [
  { id: '0', name: "User1", color: "#0000ff"},
  { id: '1', name: "User2", color: '#008000'},
  { id: '2', name: "User3", color: '#9900cc'},
];

// typeを登録
OT.TypesManager.register(type);

window.onload = async () => {
  // ワークブックの生成
  const workbook = new GC.Spread.Sheets.Workbook('ss');

  // カルチャの設定
  GC.Spread.Common.CultureManager.culture('ja-jp');

  // シートの設定
  const sheet = workbook.getActiveSheet();
  sheet.zoom(1.6);

  // モックユーザー（iframe1〜3 に User1〜3 を割り当て）
  const index = ['iframe1', 'iframe2', 'iframe3'].indexOf(window.frameElement.id);
  const user = mockUsers[index];

  // サーバーに接続してルームに参加
  const conn = new Client().connect('room1');
  const doc = new OT.SharedDoc(conn);

  // プレゼンスを作成してバインド
  const presence = new Presence(conn);
  await bindPresence(workbook, presence, user);

  // エラー監視
  doc.on('error', (err) => {
    console.error('error:', err);
  });
  await doc.fetch();

  // ドキュメントが存在しない場合は初期化
  if (!doc.type) {
    await doc.create(workbook.collaboration.toSnapshot(), type.uri, {});
    await bind(workbook, doc);
  } else {
    await bind(workbook, doc);
  }

  // ユーザー名の表示
  const userName = document.getElementById("username");
  userName.innerText = user.name;
  userName.style.backgroundColor = user.color;
}

npm run build

npm run start