CodeCafé - ブラウザで共同コーディングできるオープンソースエディタ

 (github.com/mrktsm)
11 ポイント 投稿者 xguru 2025-05-15 | 3件のコメント | WhatsAppで共有
  • ブラウザベースのリアルタイム共同開発環境として、授業やペアプログラミングには適していない既存の文書ベース共同作業ツールの限界を解決するために開発
  • 「リアルタイム共同コーディングは複雑だ」という固定観念を打ち破り、Zero Setup、真のリアルタイム性、直感的な UIにより、誰でもすぐに一緒にコーディングできるよう設計
  • ピクセルパーフェクトなリアルタイムプレビューをサポート: HTML/CSS/JS コードを書いた瞬間に WebView へ即時反映
  • 共同作業機能: Operational Transformation ベースで、複数ユーザーが衝突なく同時入力可能
  • VS Code スタイルのエディタ: Monaco Editor を活用した親しみやすいインターフェースに加え、自動補完、構文ハイライト、エラー表示機能を提供
  • Xterm.js ベースのブラウザターミナルを内蔵し、入出力を確認可能
  • インストール不要で実行: ブラウザさえあればすぐに利用可能
  • GNU AGPL 3.0 ライセンス

技術スタック

  • フロントエンド: React, TypeScript, Tailwind CSS, Zustand, Xterm.js, Monaco Editor
  • バックエンド: Java Spring Boot, WebSocket, Jackson
  • リアルタイム同期: カスタム Operational Transformation アルゴリズム
  • メッセージ処理: Redis + Lua スクリプトによるアトミックなデータ処理
  • ホスティング: フロントは Vercel、バックエンドは AWS EC2、Redis は ElastiCache

Operational Transformation(OT)

  • OT は文書のリアルタイム同時編集を可能にする中核技術で、Google Docs もこれを基盤としている
  • CodeCafé は OT を自前で実装し、次をサポート:
    • 同時入力の検知と変換
    • 意図の保持と衝突解決
    • クライアント間の状態同期の維持
  • これにより、リアルタイム共同作業環境で自然でスムーズなユーザー体験を提供

今後の計画

  • ユーザー認証とプロジェクト保存機能
  • 音声/テキストチャット統合
  • コーディング履歴の再生機能
  • 多様な言語への対応拡大

関連記事

3件のコメント

 
kaydash 2025-05-16

すでに code server があるので差別化ポイントがよく分かりませんが、
チャットとコーディング履歴の再生が追加されるなら良さそうです
 
pcj9024 2025-05-15

vscodeのLive Shareという機能を思い出しますね
リアルタイムチャットでコードを置いて同時編集もできましたが
ジュニアのメンタリングをしたりオンライン講義をしたり、紹介してみてもみんなあまり使わないんですよね
 
turastory 2025-05-15

Zedもそうですが、リアルタイムの同時作業にどれほど需要があるのかはよく分かりません。作業する全員が同じエディタを使わなければならないという問題もありそうですし、さらに性能やユーザー体験が本当に重要なソフトウェアでもあるので…。