非機能要件 / 技術スタック
非機能要件及び、ライブラリなどの技術スタック
非機能要件
レンダリング手法
- 音声認識を実施するため、SSR でのビルド / ホスティング (OpenAI API Key の秘匿目的)
- 音声認識 / LLM を使用しない場合は不要なので、CSR でホスティング
技術スタック
採用技術
| カテゴリ | 要素 | 備考 |
|---|---|---|
| Web フレームワーク | React | |
| 3D エンジン | Three.js (R3F) | |
| LLM | OpenAI API | |
| 音声認識 | OpenAI Speech-to-Text API |
ホスティング環境
Azure 環境を想定しており、kubernetes によるマイクロサービスアーキテクチャの環境に合わせるため、
Docker化 を必須する。
Web App
Routing
- 本アプリは、ルーティングに HonoX を採用
Tips
Next.js では、複雑な機能も含めて備わっておりプロジェクト全体が肥大化する問題があるため、軽量にルーティングだけできる HonoX での実装を採用
URL フラグメントによるルーティング
WebGL の 3D 空間内での遷移など、厳密に画面遷移が不要なシーンが多いため、SPA に近い体験を想定している。
そのため、通常のルーティングではなく、URLフラグメントによる画面遷移で実装。
memo
URL フラグメントを用いることで、
- サーバ側への不要なリクエストを削減する
- URL ベースで、SPA の State を管理できるため、State の状態が明瞭になりやすい