非機能要件 / 技術スタック

非機能要件及び、ライブラリなどの技術スタック

非機能要件

レンダリング手法

長期的なメンテナンス性 を考慮して、CSR での静的 Web サイトを想定する

技術スタック

採用技術

カテゴリ	要素	備考
Web フレームワーク	Next.js
3D エンジン	Three.js (R3F)

ホスティング環境

Azure 環境による、静的 Web サイトのホスティング環境に合わせる

Static Web Apps で、Web アプリをホスティングし動画ファイルなどのファイルサイズの大きい静的ファイルについては、Blob Storage を利用して、それぞれ環境として切り分ける。

Web App

Routing

本アプリは、ルーティングにNext.jsのルータ + URLフラグメントによる画面遷移での実装

memo

URL フラグメントを用いることで、

• サーバ側への不要なリクエストを削減する
• URL ベースで、SPA の State を管理できるため、State の状態が明瞭になりやすい

State 管理

本コンテンツは。 タブレットをリモコンのように扱い

タブレットで画面が遷移したら、壁面の画面も遷移する

設計のため、各端末で状態の同期を取る必要がある。

そこで、壁面・タブレット（体験者）・タブレット（スタッフ）の 3 端末の状態を同期させるために、GET パラメータでステート管理を実施する。

以下は、Scene1 での URL パラメータの例になる。
GET パラメータで、以下のユーザ設定や環境設定をそれぞれ管理する。

• エンドポイントで、現在の画面状態を識別:Scene
• ユーザが過去の画面で、どの選択を実施したのかを管理:checklist
• ビデオの長さを、長編/短編のどちらで選択するか: videoVersion
• ユーザタブレットのマイクを受け付けるかどうか：recording

GET パラメータを採用するメリット

GET パラメータで、各種の State を管理することで、以下のメリットが発生

• 各端末のページの状態がブラックボックスにならない
• 端末間の同期処理のときに、直接別端末の State に干渉できる