Zenn
🔥

ReactでFigmaのようなカーソルチャットを実現する

2023/03/08に公開
Figma
Firebase
React
Amplify
Supabase
tech

はじめに

普段よくFigmaを利用していますが、Figmaの機能の一つにカーソルチャットがあります。これはユーザー同士が同じプロジェクトを見ているときに、相手のカーソル位置をリアルタイムで共有する機能です。一時的なライブメッセージを共有することもできます。
これを他のアプリケーションにも導入できないかと考え、カーソルチャットを簡単に実装できるReactライブラリReact Realtime Cursorを作成しました。

React Realtime Cursor demo

そこで、本記事では、ReactでFigmaライクなカーソルチャットを実装する方法を紹介します。

React Realtime Cursorの概要

React Realtime Cursorでは以下機能を提供しています。

  • 複数人のリアルタイムでのカーソル位置共有
  • 一時的なライブメッセージの入力
    • / キーで入力ボックス表示
    • ESC キーで入力ボックス非表示

React Realtime Cursorはバックエンドサービスを利用して実現しています。
現在、以下サービスをサポートしています。

導入手順(Firebase)

今回はバックエンドサービスにFirebaseを利用する場合の導入手順をご紹介します。

Firebaseプロジェクトの作成

まず、公式ドキュメント に従ってFirebaseプロジェクトを作成してください。

インストール

Reactアプリにライブラリのインストールを行います。

npm install firebase @7nohe/react-realtime-cursor

ReactアプリでFirebaseの初期化

プロジェクト作成時、設定値が取得できるので、それを利用してReactアプリでFirebaseの初期化を行います。

// firebase.ts
import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "xxxxx",
  authDomain: "xxxxx",
  databaseURL: "xxxxx",
  projectId: "xxxxx",
  storageBucket: "xxxxx",
  messagingSenderId: "xxxxx",
  appId: "xxxxx",
};

export const firebaseApp = initializeApp(firebaseConfig);

ReactRealtimeCursorコンポーネントの描画

あとはinitializeFirebaseApp() を利用してappインスタンスを作成してReactRealtimeCursorコンポーネントへ渡します。

// src/App.tsx
import "@7nohe/react-realtime-cursor/dist/style.css"; // import styles
import {
  ReactRealtimeCursor,
  initializeFirebaseApp,
} from "@7nohe/react-realtime-cursor/firebase";
import { firebaseApp } from "../firebase";

const auth = getAuth(firebaseApp);
const database = getDatabase(firebaseApp);
const app = initializeFirebaseApp({ database, auth, roomId: "myRoomId" });

function App() {
  return (
    <div className="App">
      <ReactRealtimeCursor firebaseApp={app} />
    </div>
  );
}

export default App;

これだけでカーソルチャットが動きます！
※この場合は裏でFireabase Authの匿名ログインが動いてます。

他のログイン方法を利用することも可能で、ドキュメントに例があるので参考にしてください。

おわりに

以上で、ReactでFigmaのようなカーソルチャットを実現する方法を紹介しました。
React Realtime Cursorライブラリを使用することで、リアルタイムで他のユーザーのカーソル位置を共有することができ、自分のアプリケーションにコラボレーション機能を簡単に追加できます。
今回は紹介しませんでしたが、AWS AmplifyとSupabaseにも対応しているので、興味のある方はドキュメントをご参照ください。

Discussion