STYLY Studio
STYLY Studioは、インタラクティブなAR/VR空間をWebブラウザ上でノーコードで制作できるXRエディターツールです。
3D描画にUnity（WebGL）、UIにReactを採用したハイブリッド構成で開発されています。
45,000+
アカウント数
50,000+
累計制作空間数
AWE 2024
Best Creator & Authoring Tool 受賞
- AWE AUGGIE AWARDSは、世界最大級のXRカンファレンス「Augmented World Expo」における公式アワードです。
- 本プロダクトは、教育機関（新潟コンピュータ専門学校等）での授業・講師登壇に活用されました。
- 国土交通省が主導するProject PLATEAUにおいて、3D都市データを扱うテンプレート機能の設計・実証・運用に対応しました。
使用技術
3D描画システム
UnityC#WebGLUniTaskAssetBundleTest Runner
2D UIシステム
TypeScriptReactRedux ToolkitJestPuppeteer
インフラ/ツール
GitHubGitHub ActionsUnity Cloud BuildAWSJiraSlack
技術的課題と設計判断
3DエディタUndo基盤設計
課題
大規模3Dデータでも破綻しないUndo機構を実現する必要があった。
設計判断
- スナップショットではなく差分記録方式を採用
- 履歴から高速復元可能なインスタンス再構築設計
- 複数オブジェクト操作を1履歴に束ねるトランザクション設計
React × Unity 境界設計
課題
WebGL上のUnityとReactを疎結合で統合する必要があった。
設計判断
- 責務を分離した独立コードベース構成
- SendMessageを用いたコマンド通信設計
- 明確なインターフェース定義とデータ整合管理
品質基盤と自動化体制構築
課題
継続開発に耐える品質基盤の構築が必要だった。
設計判断
- 単体テスト徹底とUI自動化E2Eテスト整備
- GitHub Actions × Unity Cloud BuildによるCI/CD構築
- レビュー基準策定とコードレビュー体制整備
解説記事
STYLY StudioのUndo基盤設計を解説
ブラウザメモリ制約下で大規模3DデータのUndoを実現する設計思想を解説。差分記録方式とトランザクション設計による履歴管理の仕組みを紹介します。
STYLY StudioのE2E自動テスト戦略
React×Unity構成のWebエディタにおけるE2E自動化戦略を解説。ブラウザ自動操作テストとCI/CD連携による品質基盤構築のポイントをまとめています。