本記事は How to: Create a VR application with user insights using AWS Amplify and WebXR を翻訳したものです。

このブログでは、AWS Amplify と Babylon.js の WebXR 実装を使用して、ユーザーのインサイトを活用したバーチャルリアリティ体験を作成する方法について学びます。この組み合わせによって、最初のバーチャルリアリティ（VR）アプリケーションを立ち上げる際のハードルを下げることができるでしょう。

このハウツーでは、AWS Amplify を使用してフルスタックアプリケーションをホストし、Babylon.js の WebXR 実装で VR シーンと機能を提供し、Amazon DynamoDB を使用してユーザーイベントを保存し報告する、シンプルな VR 対応アプリケーションを作成する手順をカバーします。アプリケーションは Amplify と Babylon.js を使用して設定され、デプロイされます。コントローラーの入力データは WebXR を使用して有効にされ、ユーザーの入力イベントは DynamoDB、Amazon Athena、および Amazon Quicksight を使用して保存および報告されます。アプリケーションで使用される 3D モデルは、Amazon Simple Storage Service（Amazon S3）を使用して保存されます。Amplify は AWS CodeCommitを使用して継続的なデプロイメントを行います。

最終的には 3D モデルを使用した VR アプリケーションが作成され、ユーザーの入力が記録・可視化されるため、お客様はユーザーエクスペリエンスの改善方法についてのインサイトをダッシュボードで確認できます。

この Amplify アプリケーションでは、たとえばプレイヤーは VR コントローラーで Color GUI から青色を選択します。色の変更イベントは、データベースに色の値を送信します。

DynamoDB テーブルには、各イベントの色の値が記録されます。

Quicksight ダッシュボードは DynamoDB からのデータを表示するために使用されます。

アーキテクチャ

ユーザーは、VR 対応デバイスを使用して AWS Amplify のウェブサイトに接続します。テクスチャやオブジェクトは Amazon S3 からアプリケーションに読み込まれます。オブジェクトは AWS Amplify の外で Amazon S3 において管理します。ユーザーは XR シーンで利用可能なオブジェクトやコントロールと対話し、クリック、色の選択、テクスチャの選択などの各ユーザーイベントは DynamoDB に送信されます。Amazon Athena は Quicksight がユーザーのインサイトを提供するためのデータを利用可能にします。AWS Amplify の管理者は、ホストされたサイトにユーザーのインサイトに基づいた変更をデプロイすることができます。

前提条件

AWS Amplify、Amazon DynamoDB、Amazon S3、Amazon Athena、および Amazon Quicksight への完全な権限を持つ既存の Amazon Web Services (AWS) アカウント
JavaScript と Linux コマンドラインに慣れている
Node.js v14.x 以降
npm v6.14.4 以降
git v2.14.1 以降
最新の Amplify CLI；バージョン 10.6.2 以上

手順の概要

サンプルアプリケーションをデプロイして実行するには、次の手順を実行します。

ステップ 1: React アプリケーションのセットアップ
Getting started – React – AWS Amplify Docs を使用して React アプリケーションを作成し、create-react-app を使用してディレクトリ構造を作成し、ローカルシステムで開始できることを確認します。

ステップ 2: AWS Amplify と Babylon.js のインストール
Getting Set Up | Babylon.js Documentation を使用して AWS Amplify CLI、Babylon.js、および Babylon.js モジュールをインストールします。AWS Amplify は、フロントエンドの Web およびモバイル開発者が AWS 上でフルスタックアプリケーションを迅速かつ容易に構築できるようにするための目的に特化したツールおよび機能のセットです。

ステップ 3: Amplify でバックエンドを初期化
このプロジェクトでは、Amplify の AWS AppSync、Amazon S3、Amazon Cognito との統合を活用します。アプリケーションの構築とデプロイ、必要な AWS リソースのプロビジョニングについては Complete guide to full-stack CI/CD workflows with AWS Amplify も参照してください。まずは Amplify CLI を使用して Amplify 環境を初期化し、編集します。

ステップ 4: Amplify でバックエンドリソースを作成
Storage – Overview – AWS Amplify Docs を使用して Amplify バックエンドリソースを作成しプッシュし、Tutorial – Add authentication – React – AWS Amplify Docs を使用して認証を行い、Tutorial – Connect API and database to the app – React – AWS Amplify Docs を使用してデータを同期および DynamoDB に保存します。

ステップ 5: Amazon S3 にテクスチャをアップロード
AWS 管理コンソールに移動し、作成されたリソースを表示します。Amazon S3 コンソールに移動し、ステップ 4 で作成したバケットを探します。トップディレクトリで「public」というフォルダを作成し、そのフォルダに入ります。このフォルダ内で「アップロード」をクリックし、バケットにテクスチャをアップロードします。これでコードからアクセス可能になります。

ステップ 6: アプリケーションシーンの作成
Babylon.js は JavaScript ベースの人気のある 3D エンジンで、Web 用の 3D アプリケーションやゲームを開発するためのオープンソースフレームワークです。これは、リアルな動きやオブジェクト間の相互作用を容易に作成できる高度な機能を提供し、VR アプリケーションの作成に不可欠です。Babylon.js のドキュメントから Starter HTML Template を使用して index.html ファイルを作成します。ローカルシステムでコードをコピーし、README.md の src/index.js、src/App.js、および src/Scene.js に貼り付けます。

ステップ 7: git ベースの CI/CD デプロイメント用の CodeCommit を作成
アプリケーションをホストするために、AWS Amplify Hosting サービスと AWS CodeCommit を使用します。Amplify Hosting は完全に管理された CI/CD およびホスティングサービスであり、AWS CodeCommit は完全に管理されたソースコントロールサービスであり、Setting up Amplify access to GitHub repositories のドキュメントを使用して git ベースの CI/CD デプロイメントを可能にします。

ステップ 8: 継続的なデプロイメントのために Amplify を CodeCommit に接続
AWS 管理コンソールから Amplify コンソールを開き、継続的なデプロイメントを有効にするために CodeCommit リポジトリに接続します。

ステップ 9: Amazon Athena と DynamoDB コネクタを作成
Amazon Athena DynamoDB コネクタにより、Amazon Athena は DynamoDB と通信できるようになり、SQL を使用してテーブルをクエリできます。これにより、シーン内のユーザーアクションから取り込まれたイベントデータを視覚化するために QuickSight を使用できます。

ステップ 10: QuickSight ダッシュボードを作成
DynamoDB に保存されたイベントデータから洞察を得るために QuickSight ダッシュボードを作成します。Amazon QuickSight は、簡単に理解できる洞察を提供するために使用できるクラウドスケールのビジネスインテリジェンス（BI）サービスです。

ステップ 11: VR アプリケーションの表示と使用
新しい CodeCommit プッシュコマンドが実行されるたびに、Amplify は新しいビルドとデプロイプロセスを実行します。デプロイプロセスが完了すると、最新バージョンはアプリホスティング環境にある同じプロダクションブランチの URL に残ります。

ステップ 12: QuickSight ダッシュボードの表示
QuickSight は、172 回の VR コントローラーのクリックと、各クリックの色の RGB 値を示しています。

ステップ 13: 公開アクセスの制限またはクリーンアップ
意図しないアクセスによるコスト上昇を防ぐためには、Restricting access to branches の指示に従って Amplify URL をパスワード保護するか、作成されたすべてのリソースを削除します。

終わりに

Amplify、Babylon.js、および Babylon.js の WebXR スタックを使用する方法を示すこのブログは、WebXR を始めるための多くの方法のうちの一つにすぎません。Amplify を使用すると、XR のアイデアを反復するための継続的なデプロイメント環境が提供されます。Bablyon.js で次に試すべきことのインスピレーションを得るためには、The Playground を訪れてください。このブログの例は、追加のオブジェクト、テクスチャ、およびコントロールでより多くのイベントデータを収集すること、より包括的なダッシュボードを作成すること、または AI/ML を追加してユーザーの洞察を拡大することでさらに拡張することができます。

次のステップ

このブログで概説されているセットアップを再現するために使用された具体的な技術コマンドを含む完全なステップバイステップの解説は、Create a VR application with user insights using aws amplify and the webxr stack で見つけることができます。

著者について

Brian M. Slater

Brian M. Slater は、Amazon Web Services の Independent Software Vendors (ISV) の Principal Solutions Architect です。Brian は、政府、スタートアップ、および金融サービスにおいて多年の経験を持っています。現在は、IoT および空間コンピューティングソリューションの構築において顧客を支援しています。

Sam Burton

Sam Burton は Amazon Web Services のエンタープライズソリューションアーキテクトであり、業界のベストプラクティスに従って AWS 上でソリューションを構築、反復、およびスケールするお客様を支援しています。エンタープライズ顧客との作業以外に、Sam は AWS Amplify などのフロントエンドの Web およびモバイルサービスでの構築を行っています。

Sneha Panchadhara

Sneha Panchadhara は Amazon Web Services のソリューションアーキテクトで、お客様がビジネス目標を達成し、AWS サービスの採用を加速するのを支援することを楽しんでいます。仕事以外の時間は、家族や友人と過ごすのが好きです。

翻訳はソリューションアーキテクトの阿南が担当しました。原文はこちらです