社内専用オンラインミーティングツールを Claude Code で作ってる

自社製品の WebRTC SFU を利用した社内専用のプライベートオンラインミーティングツールを Claude Code で作ってる。プロダクト名は Misora (み空色) 。

全くコードは書いていないし、見てない。CLAUDE.md をしっかり書いて、指示は複雑なタスクになりそうな場合は、かなり詳細に指示してる。

モチベーション

もともと自社専用のオンラインミーティングツールが欲しかったが、開発ツールを利用で困っていたわけではなかった。

またコストかけて作るメリットがあまり見えなかった。ただ Claude Code であれば、かなりコストを抑えて作れると判断してチャレンジしてみた。実際 1 日で最低限の機能を搭載したミーティングツールが出来た。

前提

• VS Code の Claude Code 拡張を利用
• Claude Opus 4 (/model opus) を利用
• WebRTC SFU Sora を利用
  • Sora Cloud や Sora Labo での利用を想定
• GitHub Pages Private を利用
  • そのため静的サイト前提

利用技術

• WebRTC SFU Sora
• Sora JavaScirpt SDK
• React
• Zustand
• pnpm
• Vite-Rolldown
• TypeScript
• Tailwind
• React Router
• Biome
• jose
• GitHub Pages Private
• Playwright
• Vitest

vite build でビルドして dist 以下を GitHub Pages Private にデプロイするという戦略。これにより認証の仕組みをすっ飛ばせる。静的サイトで作る事で運用コストを一気に下げる。

将来的には永続化情報を持たせたいとは思うが、そもそも社内利用しか想定していないので、現時点では静的サイトで十分。

機能

とにかく、自分たちが使いたい欲しい機能だけ実装していってる。

実装済み

• ミーティング URL 生成
  • ただのルーム ID を乱数で生成するだけ
  • そもそも GitHub Pages Private で守られてる
• 待機画面
• 画面共有
  • 後勝ち機能あり
• スピーカーインジケーター
  • 話してる人に枠が出るやつ
• チャット
• 挙手機能
• マイク/カメラミュート
• マイク/カメラデバイス選択
• カメラ解像度変更
• 参加者一覧
• アイコン設定機能
  • OPFS を利用
• アイコン配布機能
  • Sora のリアルタイムメッセージング機能を利用
  • OPFS にユーザー名とセットで保存

実装予定

• 画質指定
• 音量メーター
• 録画
• ファイル共有
• チャット URL リンク
• Slack 連携で /misora で URL 生成
• 文字起こし
• 仮想背景
• ノイズ抑制

スクリーンショット

WebRTC SFU Sora のスポットライト機能を利用することでクライアント側の負荷を下げている。これはアクティブスピーカーでなければ画質を下げて配信するという仕組み。

開発コスト（時間）

合計って書いてあるのは指示をしつつかかった時間、合計が書いてなければ一発でできた。

• 画面共有
  • スゴイ大変だった
  • 合計で 3 時間くらいかかった
• チャット
  • うち合わせに行く前に依頼して、うち合わせが終わったらできてた
  • 10 分
• 挙手
  • 5 分
• 準備室
  • 5 分
• 参加者一覧
  • 5 分
• 3 人以上のレイアウト
  • 合計で 30 分

フロー

まずは HTML + CSS (Tailwind CDN 版) + JavaScript による動くモックをかなりの数生成させた。レイアウトや構成、挙動などなど。これがかなり効果がある。とにかく無限リテイクできるし、HTML 1 枚なので確認も楽。

次に生成させた HTML を利用して Vite + React Router + React + Zustand + Sora JavaScript SDK に切り替えてもらった。10 分程度でできてきた。

その際 /add-dir で Sora JavaScript SDK のソースを読み込ませて、SDK の利用をできるかぎり間違えさせないようにした。実際、 SDK の利用自体は一切間違わなかった。

雑感

欲しかった会議システムがまだまだ課題はあるが、1-2 日でできてしまった。それも静的サイトなので運用コストも低い。

今後も積極的に改善して自社での利用が落ち着いてきたところで OSS (Apache-2.0) として公開し、Sora を利用して開発する際に /add-dir で Misora を追加するというのをやってもらいたいなと考えている。

VS Code + Claude Code + Claude Opus 4 + Claude Max Plan ($200) とても良いのでオススメ。

追記

2025-06-21

アイコンを Origin Private File System (以降 OPFS) にアップロードしたり、自分のアイコンを参加者に配布したりする機能を追加した。アイコンがあるのとないのでは全然違うのがよくわかった。

自分のアイコンを共有する仕組みも WebRTC SFU Sora のリアルタイムメッセージングの仕組みで追加できた。

ここまでのコード量。2 日感でこんな感じ。

アイコン加工機能はライブラリ依存なしでできるなら追加したいところ。