非機能要件 / 技術スタック
非機能要件及び、ライブラリなどの技術スタック
非機能要件
レンダリング手法
長期的なメンテナンス性 を考慮して、CSR での静的 Web サイトを想定する
技術スタック
採用技術
| カテゴリ | 要素 | 備考 |
|---|---|---|
| Web フレームワーク | Next.js | |
| 3D エンジン | Three.js (R3F) |
ホスティング環境
Azure 環境による、静的 Web サイトのホスティング環境に合わせる
Static Web Apps で、Web アプリをホスティングし動画ファイルなどのファイルサイズの大きい静的ファイルについては、Blob Storage を利用して、それぞれ環境として切り分ける。
Reference
Web App
Routing
本アプリは、ルーティングにNext.jsのルータ + URLフラグメントによる画面遷移での実装
memo
URL フラグメントを用いることで、
- サーバ側への不要なリクエストを削減する
- URL ベースで、SPA の State を管理できるため、State の状態が明瞭になりやすい
State 管理
壁面・タブレット（体験者）・タブレット（スタッフ）の 3 端末の状態を同期させるために、GET パラメータでステート管理を実施する。
以下は、Scene1 での URL パラメータの例になります。
GET パラメータを採用するメリット
GET パラメータで、各種の State を管理することで、以下のメリットが発生
- 各端末のページの状態がブラックボックスにならない
- 端末間の同期処理のときに、直接別端末の State に干渉できる