2Q-final-work01-webAR-Rui

概要

Fav Collectionは、SNSで「いいね」した投稿を個人的な収集物として捉え直し、画像・動画・テキストを仮想空間の壁面に展示するWebAR作品です。

閲覧数などの投稿データを、展示物の大きさ・奥行き・移動速度へ変換します。対応端末ではWebXRを使用し、非対応端末ではカメラ映像を利用した簡易AR、PCでは通常の3Dプレビューを利用できます。

この公開版には、AI生成のプレースホルダー素材とサンプルデータのみを収録しています。

主な機能

• Three.jsによる3D展示
• 画像・動画・テキストごとの異なる表示
• 投稿データに基づく展示サイズ・速度の変化
• 投稿の選択と詳細表示
• WebXR Hit Testによる壁面への配置
• WebXR非対応端末向けの簡易AR
• PCブラウザ向けの通常プレビュー
• 静的JSONからの投稿データ読み込み
• キーボード、マウス、タッチ操作
• エラー時のプレビューへの切り替え

使用技術

• Vite 8
• TypeScript 6
• Three.js 0.185
• WebXR Device API / Hit Test
• MediaDevices getUserMedia()
• HTML / CSS
• Vitest 4
• ESLint 10
• Node.js
• npm

上記のうち、Three.js、WebXR、TypeScript、ビルド設定などの技術的な実装は、主にAIの補助を受けて作成しています。制作者は作品の目的、表示内容、基本操作を確認していますが、内部実装の詳細をすべて把握しているわけではありません。

必要環境

開発環境

• Node.js ^20.19.0 または >=22.12.0
• npm
• WebGLとES Modulesに対応したブラウザ

AR確認環境

WebXRを確認する場合は、以下が必要です。

• immersive-arとHit Testに対応した端末・ブラウザ
• HTTPSで配信されたURL
• カメラ権限

WebXRに対応していない端末では、背面カメラを利用した簡易ARへ切り替わります。

外部ハードウェアや有線接続は必要ありません。

セットアップ

事前にNode.jsとnpmをインストールします。

初回のみ、プロジェクトのルートディレクトリで次のコマンドを実行します。

npm ci

その後、start-server.commandを開いてローカルサーバーを起動します。

ターミナルに表示されたURLへアクセスし、末尾に次のパラメーターを指定します。

/?mode=preview&data=placeholder

公開版には実際のX投稿データを収録していないため、AIの補助を受けて作成したプレースホルダー素材を使用します。

このセットアップ手順と起動用スクリプトは、AIの補助を受けて整備しています。

利用できる表示モード

通常プレビュー

PCまたはスマートフォンのブラウザで3D表示を確認できます。

デバッグ情報を表示する場合： /?mode=preview&data=placeholder&debug=true

WebXR/簡易XR

対応端末では、カメラを利用したAR表示を試すことができます。

WebXR、壁面検出、簡易ARの内部実装は、主にCodexの補助を受けて作成しています。制作者は実機上での基本操作を確認していますが、WebXR APIや空間認識処理の詳細をすべて把握しているわけではありません。

開発中のスマートフォン実機確認では、Codexの操作支援によってVite開発サーバーとCloudflare Tunnelを起動し、一時的なHTTPS URLを取得していました。そのため、HTTPS環境の構築方法については、このREADMEでは詳細な手順を記載していません。

基本操作：

• カメラ権限を許可する
• 端末をゆっくり動かす
• 画面に表示された位置をタップする
• 展示の表示を確認する

プレースホルダー素材

公開版では、個人的な投稿データの代わりにAI生成のプレースホルダー素材を使用します。

主な保存場所：

• public/assets/posts/placeholders/
• public/data/posts.placeholder.json

動画プレースホルダーの再生成には、任意で ffmpeg が必要です。通常のセットアップでは、リポジトリに含まれる生成済み素材をそのまま利用できます。

AI利用について

本プロジェクトでは、ChatGPTおよびCodexを使用しています。

主に次の作業でAIの補助を受けました。

• 仕様とアイデアの整理
• TypeScriptおよびThree.jsを使った実装
• WebXRおよび簡易ARの実装
• エラー調査と動作確認
• テストコードの作成
• プレースホルダー素材と生成スクリプトの作成
• READMEなどの文章整理
• Cloudflare Tunnelを利用した一時HTTPS環境の起動

制作者は作品のコンセプト、使用する素材、画面表示、基本操作を決定・確認しています。一方、プログラムの内部処理、WebXR、ビルド設定などには、制作者が仕組みを完全には把握していない部分があります。それらはAIによる補助を受けて実装したことを明記します。

ライセンス

本プロジェクトのライセンスは現在検討中です。

ライセンスを明示するまでは、リポジトリを公開していることだけを理由に、ソースコード、画像、動画、データ等の再利用を許可するものではありません。

使用している外部ライブラリには、それぞれのライセンスが適用されます。