はじめに
この記事は STYLY Advent Calendar 2025 の記事です。
土日2日間、コード0行で、Gaussian SplattingデータをWebで編集し、HMDに配信してマルチユーザーで閲覧できるシステム「GS Bridge」を開発しました。
本記事では、Claude Code・ChatGPT・Geminiを駆使した「AI駆動開発」のワークフローと、はまりどころをお伝えします。
📝 Note: この記事自体もAI（Claude）を活用して執筆しています。
作ったもの：GS Bridge
GS Bridgeは、以下の機能を持つシステムです。
- Webアプリ：Gaussian Splatting（PLY形式）をアップロード・編集・プレビュー
- HMD配信：編集したデータをボタン一つでHMD（PICO4/PICO4 Ultra）に送信
- マルチユーザー：複数人が同時に同じ3Dデータを閲覧可能
製造業での3Dスキャンデータのレビューなどを想定しています。Scaniverseアプリで撮影したGaussian Splattingデータを使って、現場の設備や製品を複数人で同時にレビューできます。
技術スタック
| レイヤー | 技術 |
|---|---|
| Webアプリ | Next.js, React, TypeScript, @mkkellogg/gaussian-splats-3d |
| バックエンド | Firebase (Firestore, Storage, Auth) |
| HMD側 | Unity 6, カスタムシェーダー, STYLY NetSync for LBE |
| 対応デバイス | PICO4, PICO4 Ultra（Quest3等への拡張も可能） |
AI駆動開発のワークフロー
使用したAIツール
| ツール | 役割 |
|---|---|
| Claude Code | メイン開発。構想・設計・コード生成を一貫して担当 |
| ChatGPT | コードレビュー、デバッグ相談、別視点からの検証 |
| Gemini | 同上。特に画像を読み込ませてのルック調整相談 |
基本フロー
1. Claude Codeに構想を伝える
↓
2. Claude Codeが設計・コード生成
↓
3. 動作確認 → 問題発生
↓
4. ChatGPT/Geminiにコードとエラーを見せてレビュー依頼
↓
5. レビュー結果をClaude Codeにフィードバック
↓
6. Claude Codeが修正 → 2に戻る
ポイントは「複数AIの視点を活用する」ことです。Claude Codeが生成したコードを、ChatGPTやGeminiに「このコード、問題ありますか？」とレビューさせることで、単一AIでは気づかない問題を発見できます。
2日間の開発タイムライン
Day 1（土曜）
| 時間帯 | 作業内容 |
|---|---|
| 午前 | 構想整理、Claude Codeに要件を伝える |
| 午後 | Webアプリの骨格完成（ファイルアップロード、3DGSプレビュー） |
| 夜 | Firebase連携、HMD送信機能の実装 |
Day 2（日曜）
| 時間帯 | 作業内容 |
|---|---|
| 午前 | STYLY NetSync環境構築（約30分で完了）→ 動作確認 |
| 午後 | Unity側のPLYパーサー＆レンダラー実装 |
| 夜 | Gaussian Splattingのルック調整（←ここで大苦戦） |
STYLY NetSyncの環境構築は、公式記事を参考に進めたところ、わずか30分程度で完了しました。マルチユーザー機能の基盤が整った状態で、安心してGaussian Splatting固有の開発に集中できました。
はまりどころと解決法
1. Gaussian Splattingのルック調整（最大の難関）
問題: WebアプリでもUnityでも、Gaussian Splattingの表示品質がなかなか望む結果にならない。色が暗い、ガンマがおかしい、透明度の処理が違う……。
解決法: 現状の画像と正解（期待する表示）の画像をAIに何度も読み込ませて、差分を分析させました。
自分：「左が現状、右が期待する表示です。何が違いますか？」
AI：「左は全体的に暗く、コントラストが低いです。
SH係数からRGBへの変換で、ガンマ補正が
適用されていない可能性があります。
以下の修正を試してください...」
このやり取りを10回以上繰り返し、少しずつ品質を上げていきました。
教訓: 視覚的な問題は「言葉で説明」するより「画像を見せる」方が圧倒的に早い。マルチモーダルAIの強みを活かすべき。
2. React useEffectによる無限ループ
問題: Webアプリで「Maximum update depth exceeded」エラーが発生し、ブラウザがフリーズ。
原因: EditPanel（編集パネル）とSplatViewer（3Dビューア）の間で選択範囲を双方向同期していたため、以下のループが発生していました：
EditPanelが更新 → 親のstateが更新 → SplatViewerに伝播
→ SplatViewerがコールバック → 親のstateが再更新 → EditPanelに伝播 → 無限ループ
解決法: データフローを「一方向」に整理。SplatViewerからのドラッグ操作のみが選択範囲を更新するようにし、refフラグでビューアからの変更を識別しました。
教訓: Reactでは「誰がデータのオーナーか」を明確にすることが重要。双方向バインディングは無限ループの温床。
3. Three.jsオブジェクトのライフサイクル管理
問題: 「Cannot read properties of null (reading 'removeChild')」エラー。削除操作後にハンドルオブジェクトが操作できなくなる。
原因: Reactの再レンダリングとThree.jsオブジェクトのライフサイクルが噛み合わず、既に削除されたオブジェクトを再度削除しようとしていました。
解決法: 削除前に親オブジェクトの存在を確認するガード処理を追加。
// 削除前に親の存在を確認
if (handleGroup && handleGroup.parent) {
handleGroup.parent.remove(handleGroup);
}
教訓: Three.jsとReactの組み合わせでは、命令的なThree.jsの操作と宣言的なReactの更新が衝突しやすい。オブジェクトの状態を常に確認する防御的なコードが必要。
4. AIのコンテキスト切れ問題
問題: 長時間のデバッグセッション中にAIのコンテキストがリセットされ、以前の修正内容や問題の経緯が失われる。同じ説明を何度もする羽目に。
解決法:
- 問題が複雑な場合は、要点をまとめたサマリーを作成してAIに渡す
- git commitを細かく行い、変更履歴を追跡可能に
- エラーログや症状を具体的にテキストファイルに記録
教訓: AI開発では「コンテキストの維持」を意識的に行う必要がある。重要な決定事項や問題の経緯はドキュメント化し、新しいセッションでも参照できるようにする。
AIを使わなかったら無理だった理由
1. 全工程を2日で回すスピード感
- 構想・設計
- Webアプリ（React/Next.js）
- Unityアプリ（C#/シェーダー）
- Firebase連携
- デバッグ・調整
これらを従来の開発手法で2日間で完了させるのは不可能でした。AIがコードを高速生成し、自分は「方向性を示す」「動作確認する」「フィードバックする」に集中できたからこそ実現しました。
2. 専門外領域の突破
私はシェーダープログラミングの専門家ではありません。しかし、AIに「Gaussian Splattingをレンダリングするシェーダーを書いて」と依頼すれば、動くコードが出てきます。
もちろん一発で完璧なものは出ませんが、「動くけど品質が低い」状態から「画像を見せながらブラッシュアップ」を繰り返すことで、実用レベルに到達できました。
3. 複数AIによるクロスレビュー
Claude Codeは優秀ですが、自分が生成したコードの問題に気づきにくい傾向があります。ChatGPTやGeminiに「このコードをレビューして」と依頼することで、別の視点からの指摘が得られます。
これは人間のチーム開発における「コードレビュー」と同じ効果があります。
AI駆動開発のコツ
1. 具体的なゴールを示す
❌「Gaussian Splattingのビューアを作って」
⭕「PLYファイルをドラッグ&ドロップでアップロードし、
Three.jsベースで3D表示し、
FirebaseにアップロードするボタンがあるWebアプリを作って」
2. 問題が起きたら「現状」と「期待」を明示する
⭕「現状：色が暗く表示される（スクショ添付）
期待：元のScaniverseと同じ明るさで表示したい
原因を教えて」
3. 複数AIを使い分ける
- 生成はClaude Code：コンテキストを保持したまま継続開発
- レビューはChatGPT/Gemini：別視点からの検証
- 画像比較はGemini：マルチモーダルの強みを活かす
4. 「1行も書かない」覚悟を持つ
今回、最初から「1行もコードを書かない」と決めていました。これにより：
- AIへの指示の出し方が上手くなる
- 「自分で直した方が早い」という誘惑を断てる
- AIの限界と可能性を正確に把握できる
5. 一度に一つの問題を解決する
複数の問題を同時に修正すると、どの変更が効果的だったか分からなくなります。小さな変更で検証し、git commitを細かく行うことで、問題の切り分けが容易になります。
STYLY NetSyncとの組み合わせ
GS Bridgeのマルチユーザー機能は、STYLY NetSync for LBEの機能を活用しています。
Day 2の朝、STYLY NetSyncの記事を参考に環境構築を行いましたが、わずか30分程度で完了しました。ドキュメントが整備されているおかげで、マルチユーザー同期という複雑な機能をほぼノータイムで導入でき、Gaussian Splatting固有の開発に集中できました。
PICO4で開発しましたが、STYLY NetSyncはQuest3などへの拡張もすぐにできます。
まとめ
- 土日2日間、コード0行でGaussian Splatting配信システムを開発
- Claude Code + ChatGPT + Geminiの組み合わせが効果的
- はまりどころは「画像を見せながらAIとブラッシュアップ」で突破
- STYLY NetSyncは30分で環境構築完了、マルチユーザー対応が簡単
AI駆動開発は、「専門外の領域でも実用的なものが作れる」可能性を開いてくれます。STYLY NetSyncと組み合わせることで、短期間でも本格的なマルチユーザーXRアプリケーションが作れます。ぜひ試してみてください。
次の記事では、GS Bridgeの技術的な詳細を解説します。