【ITニュース解説】Round Chat: a floating partner chat for debate rounds

Round Chatは、ディベート中にパートナーとリアルタイムでコミュニケーションを取るための特別なチャットアプリだ。ディベートでは複数の資料を同時に参照しながら議論を進めるため、このアプリはタブを切り替えることなく、常に画面の最前面にチャットが表示されるように設計されている。これにより、パートナーからのメッセージを見逃さず、迅速な情報共有を可能にする。

このチャットには、主に三つの機能がある。一つは「スピーチタブ」付きチャットで、ディベートの各段階（Constructive、CXなど）に会話を整理できる。これにより、どのスピーチ段階についてのメモなのかが一目でわかり、情報が混同するのを防ぐ。未読メッセージがあるタブには赤い点がつき、重要な情報を見落とさない工夫もされている。二つ目は、ディベート中のスピーチ時間を計測できる「ストップウォッチ」機能だ。これにより、別途タイマーアプリを用意する必要なく、チャット画面内で全てを完結できる。三つ目は、チャットウィンドウを常に他のアプリの最前面に表示させる「ポップアウト」機能だ。これはChromeブラウザのDocument Picture-in-Picture APIという技術を利用しており、チャットが独立した小さなウィンドウのように振る舞うため、複数のウィンドウを開いていても、他の情報に埋もれることがない。

システムのバックエンドは、Sanity.ioというコンテンツプラットフォームを基盤とする。Sanity.ioは、コンテンツを構造化されたデータとして管理し、リアルタイムで更新できる点が特徴だ。ディベートのライフサイクルを管理するため、「ラウンド」というドキュメントタイプが定義されている。これにはディベートのタイトルやスピーチタブ情報、そして現在の「ワークフローステータス」（例えば「下書き」「準備完了」「ラウンド中」「終了」）が含まれる。このワークフローの定義に基づいてチャットの利用可否が制御される仕組みだ。例えば、「ラウンド中」のステータスでのみチャットが開放されるといったルールが適用される。

「メッセージ」は、ラウンドとは独立したドキュメントとして保存される。これは、複数のユーザーが同時にメッセージを送信してもデータ競合が起きにくいようにするためと、リアルタイム更新時のデータ転送量を最小限に抑えるためである。メッセージには、それがどのラウンドのどのスピーチタブに属するかを示す情報が含まれている。セキュリティ面では、データセットは公開されているにも関わらず、プライベートな「参加コード」によってチャットへの不正アクセスを防ぐ工夫が凝らされている。参加コードは各ラウンドに紐づく専用のドキュメントに保存されるが、このドキュメントは匿名ユーザーからはアクセスできないように設定されている。ウェブサイトは、ユーザーが入力した参加コードをサーバー側で検証し、正しく認証された場合のみチャット機能を提供する。また、「Round Control」という管理ツールがSanity App SDKで開発されており、これにより全てのラウンドの状態、ワークフロー履歴、そしてメッセージのやり取りをリアルタイムで監視できる。

このプロジェクトは、Next.js 16（ユーザー向けのウェブサイト）、Sanity Studio（コンテンツ管理システム）、Sanity App SDK（カスタム管理ツール）を組み合わせ、一つのリポジトリで開発された。開発プロセスでは、Claude CodeというAIアシスタントがコード生成、デバッグ、アーキテクチャ設計の多くをサポートした。開発初期には、チャットウィンドウの最前面表示という要件に対し、AIアシスタントの提案でDocument Picture-in-Picture APIという最適な解決策が見つかり、要件を満たしつつプロジェクトの範囲を適切に保つことができた。

コンテンツモデルの設計では、リアルタイム性とセキュリティの両立が課題だった。メッセージを独立したドキュメントとすることで複数ユーザーの同時書き込み時の競合を回避し、参加コードをプライベートドキュメントに保存することで公開データセットにおけるセキュリティを確保した。Sanity Studioのカスタマイズを通じて、ワークフロー状態に基づくサイドバー表示や、ドキュメント編集画面内でのワークフロー操作ボタンの配置など、コンテンツ管理の利便性が向上した。

セキュリティ対策の徹底は不可欠であり、開発中にAPIトークンがログに残ってしまった際、すぐに新しいトークンを生成し古いものを無効化するなど、迅速な対応の重要性を学んだ。デバッグとトラブルシューティングも重要な要素だ。例えば、ウェブサイトのデプロイ後に404エラーが発生した際、Vercelのフレームワーク設定ミスを発見し修正した経験は、実践的な問題解決能力を高める。AIアシスタントとの協調作業では、明確で具体的な指示と視覚情報（スクリーンショット）の共有が効果的だと分かった。また、AIにアカウント操作を任せる際は、セキュリティ上のリスクを考慮し、承認プロセスを人間に委ねるなど、慎重な対応が求められる。開発中に発見された、空のメッセージが保存されてしまうバグは、コンテンツ作成方法の制限と表示側のフィルタリングを組み合わせることで修正し、システムの堅牢性を高めた。