はじめに
「ChatGPTってやつが流行っているらしいけど、何かしたいな…」と思っていたところ
弊社同期がChatGPTを使った記事(ChatGPTを使って電卓アプリ(React)が作れるのか試してみた)を書いていたので便乗して今回やってみました。
比較しながら見やすいように、出来る限り同じような流れで記載をしていきたいと思います。
ARに関しては全くの素人、最近少し開発から離れてしまっている身ですが、ChatGPTの腕前を見せてもらおう、、、😏と思い今回題材にしました。
条件
- html・A-Frame・Firebase hostingを使用して実装を行う。(弊社XR開発に携わっているの先輩に簡単に作れる環境だけ事前に教えてもらいました)
- Googleアカウントは作成済みだが1からやり方を聞いてみる
- 「Q」は こちらから質問した内容。 (わかりやすくなるよう太字にします)
- 「A」はChatGPTからの回答。
- 指示内容を実施し、エラーが発生した場合もChatGPTに質問をする。
- AIとのやりとりは初心者です。そのため一部やりとりを途中送信をしてしまっていますがそのまま載せていますorz
聞いてみた
Q. WebARをやってみたいけど
A. WebAR (Web-based Augmented Reality) は、ブラウザ上で動作する AR 技術です。以下が、WebAR の開発を始めるための一般的な手順です:
AR 技術に関連するフレームワークやライブラリーを選択する（例: A-Frame, AR.js, Three.js）。
HTML、CSS、JavaScript で WebAR アプリケーションを開発する。
モバイルデバイスまたはデスクトップコンピューターで動作することを確認する。
WebAR の開発には AR の知識、Web 開発スキルが必要です。詳細については、関連する技術やライブラリーのドキュメントやチュートリアルを参照するとよいでしょう。
文字入力中に誤って送ってしまいましたが、「A-Frame」という単語が出てきました。深掘りしてやり方を聞いてみましょう。
Q. A-FrameとHTMLで開発をしたいけどなにからやればいい？
A. A-Frame で WebAR アプリケーションを開発するには以下の手順が必要です:
- A-Frame ライブラリをインクルードする: A-Frame の最新バージョンをダウンロードし、HTML の 要素内にインクルードします。
- HTML ドキュメントを作成する: WebAR アプリケーションを構築するための HTML ドキュメントを作成します。
- A-Frame シーンを作成する: A-Frame シーンを作成し、 タグを使用してシーンを定義します。
- AR エンティティを作成する: AR エンティティを作成し、 タグを使用して定義します。エンティティには、3D オブジェクト、ライト、カメラなどが含まれます。
- AR アセットをインポートする: 3D モデルなどの AR アセットをインポートし、A-Frame シーン内で使用します。
- AR アプリケーションをテストする: WebAR アプリケーションをテストし、必要な変更を加えます。
これらの手順に従うことで、A-Frame を使用して WebAR アプリケーションを開発することができます。A-Frame のドキュメンテーションやチュートリアルを参照することで、より詳細な情報を得ることができます。
なんとなくファイルに書くことは分かりましたが、「なにからやればいい」という質問が漠然すぎたのか想像した回答と違うものがきました。
サーバー周りについてもざっくり聞いてみましょう。
Q. サーバーはどこにたてればいい？
A. WebAR アプリケーションは、Web サーバー上でホストされます。この Web サーバーは、アプリケーションをユーザーがアクセスできるようにするためのものです。以下が WebAR アプリケーションをホストする方法のいくつかです:
- クラウドサービスを使用する: AWS、Google Cloud、Herokuなどのクラウドサービスを使用して、WebAR アプリケーションをホストすることができます。
- 自分のサーバーを使用する: 自分で Web サーバーを構築することもできます。Linux ベースの OS、Apache HTTP Server、Nginx などを使用することができます。
- オンラインサイトのホスティングサービスを使用する: Wix、Squarespace、WordPress.com などのオンラインサイトのホスティングサービスを使用することもできます。
選択する方法は、アプリケーションの要件や予算などによって異なります。最適な方法を選択するためには、詳細に調査することが重要です。
Firebaseという回答はもらえなかった、、が今回はFirebaseを使用したいので聞いてみます。
Q. firebaseの
A. Firebase も WebAR アプリケーションのホスティングサービスとして使用することができます。Firebase は、リアルタイムデータベース、高速なホスティング、認証などの機能を備えています。Firebase を使用することで、WebAR アプリケーションを簡単にホストし、管理することができます。Firebase のドキュメンテーションやチュートリアルを参照することで、詳細な情報を得ることができます。
またもや入力中に送ってしまいましたが、「ホスティング」というワードがなんとか出てきました。具体的なやり方を聞いてみましょう。
Q. firebaseのhostingを使ってやりたいのでやり方を教えてください
A. Firebase Hosting を使用して、WebAR アプリケーションをホストするには以下の手順を実行します:
- Firebase アカウントを作成する: Firebase アカウントを作成するために、Google アカウントを使用します。
- Firebase プロジェクトを作成する: Firebase コンソールで「新規プロジェクト」を選択して、Firebase プロジェクトを作成します。
- Firebase CLI をインストールする: Firebase CLI をインストールするには、ターミナルまたはコマンドプロンプトで「npm install -g firebase-tools」と入力します。
- Firebase CLI を使用してログインする: Firebase CLI で「firebase login」と入力して、Firebase アカウントにログインします。
5.Firebase Hosting プロジェクトを作成する: Firebase CLI で「firebase init」と入力し、Firebase Hosting プロジェクトを作成します。
6.WebAR アプリケーションを Firebase Hosting にデプロイする: Firebase CLI で「firebase deploy」と入力することで、WebAR アプリケーションを Firebase Hosting にデプロイすることができます。
Firebase Hosting は、簡単かつ効率的な方法で WebAR アプリケーションをホストすることができます。Firebase のドキュメンテーションやチュートリアルを参照することで、詳細な情報を得ることができます。
ファイル作成前にやることが分かってきたので手順通りにやってみようと思います。
やってみた
手順通り進めていたところ、CLIインストールで以下エラーが発生しました。
Firebase CLI v11.21.0 is incompatible with Node.js v10.7.0 Please upgrade Node.js to version ^14.18.0 || >=16.4.0
Nodeのバージョンを上げれば解決できそうなものですが、こちらも試しに聞いてみましょう
Q.Firebase CLI v11.21.0 is incompatible with Node.js v10.7.0 Please upgrade Node.js to version ^14.18.0 || >=16.4.0 がでましたがどうすればいいですか
A. このエラーメッセージは、Firebase CLI v11.21.0 が使用している Node.js のバージョンが古いため、正常に動作しないということを示しています。解決するには、Node.js のバージョンを「^14.18.0」または「> = 16.4.0」以上にアップグレードする必要があります。
Node.js のバージョンをアップグレードするには以下の手順を実行します:
- Node.js のインストール方法に応じて、Node.js のアップグレード方法を確認します。
- 「node -v」と入力することで、現在の Node.js のバージョンを確認します。
- 「npm install -g n」と入力することで、n という Node.js のバージョン管理ツールをインストールします。
- 「n latest」と入力することで、最新版の Node.js をインストールすることができます。
- 「node -v」と入力して、Node.js のバージョンが正常にアップグレードされたことを確認します。
これで、Firebase CLI の要件を満たした Node.js のバージョンがインストールされるはずです。詳細については、Node.js のドキュメンテーションを参照することができます。
想定通りの回答がきました。エラーに関しても正しく回答してくれるなんて優秀すぎる…。
ちなみに本当にコマンドが正しいのかを確認するため、Firebase Hostingのページも確認しながら作業をしました。
firebase initを行うと以下のようなカッコいい(？)画面が出てきます。
ここまで行けたらサーバー側の準備完了なので、次にデプロイするファイルの作成をしていきましょう。
Q. デプロイをしたいのでA-Flameを使ったWebARのコード全て教えて欲しい
A. A-Frame を使った WebAR アプリケーションの例を以下に示します。このコードは、3D 空間内に立方体を配置するものです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A-Frame WebAR Example</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="0 0 -5" color="#4CC3D9"></a-box>
</a-scene>
</body>
</html>
このコードを保存し、Web ブラウザで開くと、3D 空間内に立方体が表示されます。
このコードをデプロイするには、Web サーバー上にアップロードするか、Firebase Hosting などのホスティングサービスを使用することができます。詳細については、Firebase Hosting のドキュメンテーションを参照することができます。
具体的なデプロイ手順をもう少し聞いてみましょう
Q. デプロイ手順を教えて
A. Firebase Hosting に A-Frame アプリケーションをデプロイする手順を以下に示します。
- Firebase CLI をインストールする: Node.js のインストール後に、コマンドラインから npm install -g firebase-tools を実行します。
- Firebase にサインインする: コマンドラインから firebase login を実行し、Google アカウントでサインインします。
- Firebase プロジェクトを作成する: コマンドラインから firebase init を実行し、Firebase プロジェクトを作成するための指示に従います。
- アプリケーションの HTML、JavaScript、および画像ファイルを Firebase プロジェクトの public ディレクトリにコピーする。
- コマンドラインから firebase deploy を実行して、アプリケーションをデプロイする。
これらの手順を実行することで、Firebase Hosting 上で A-Frame アプリケーションをデプロイすることができます。詳細については、Firebase Hosting のドキュメンテーションを参照することができます。
前回の返答とほぼ同じですが少し丁寧になりました。実際にやってみましょう。
デプロイやってみた
手順通りにファイル作成とpublicフォルダに格納、firebase deployを実施
Deploy complete!が表示されたら完了のようです！
Firebase上でもデプロイ成功していることが確認できました。
実際にChromeでデプロイしたページを開いてみましょう
水色の箱が表示されました！
マウス操作で視点を動かすことができますがもう少しARっぽいことをしてみましょう。
Q. 動く球体のWebARのコードを教えて
A. 以下が、動く球体の WebAR の A-Frame のコード例です:
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.6/aframe/build/aframe-ar.js"></script>
</head>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs="debugUIEnabled: false;">
<a-sphere position="0 0 0" material="color: red; transparent: true; opacity: 0.5"></a-sphere>
<a-marker-camera preset="hiro"></a-marker-camera>
</a-scene>
</body>
</html>
このコードでは、A-Frame ライブラリと AR.js ライブラリを読み込んでいます。 A-Scene エレメントは WebAR シーンを作成するもので、A-Sphere エレメントは球体を表します。 A-Marker-Camera エレメントはマーカーを使用してトラッキングするためのものです。この例では、Hiro マーカーを使用しています。
「Hiroマーカー」というワードがでてきました。どうやらこのマーカー上に球体を表示させることができるようです。
球体やってみた
Hiroマーカーをググり、iPadに表示させ、iPod touchでWebAR画面を開き撮影をしております。
マーカー上に球体が表示され、iPadの動きに合わせて動くことが確認できました。
次にマーカー読み取り直後に動くものも作れるか聞いてみましょう。
次は丸ではなく箱を置いてみます。
Q. hiroマーカーを使用して、マーカーから自動的に移動する箱を置きたい
A. 以下が、hiroマーカーを使用して、マーカーから自動的に移動する箱を置く WebAR の A-Frame のコード例です:
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.6/aframe/build/aframe-ar.js"></script>
</head>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs="debugUIEnabled: false;">
<a-marker-camera preset="hiro">
<a-entity
id="box"
animation="property: position; to: 0 0 -1; dur: 1000; easing: easeInOutSine; loop: true"
geometry="primitive: box"
material="color: blue;"></a-entity>
</a-marker-camera>
</a-scene>
</body>
</html>
このコードでは、A-Frame ライブラリと AR.js ライブラリを読み込んでいます。 A-Scene エレメントは WebAR シーンを作成するもので、A-Box エレメントは箱を表します。 A-Marker-Camera エレメントはマーカーを使用してトラッキングするためのものです。この例では、Hiro マーカーを使用しています。
boxとanimationのコードが追加されました。
実際に記載しデプロイしてみましょう。
動く箱やってみた
球体のときと同じくHiroマーカーはiPadに表示させ、iPod touchでWebAR画面を開き撮影をしております。
(少し分かりにくいですが、箱が前後に動いています。)
球体と同じくマーカー上に表示することが確認できました。
さらに自動で動きiPadの動きに合わせて動くことも確認できました。
結論
WebAR作れた!!
お試しでやるレベルであれば十分なものが作れました。
また、途中送信をしてしまった場面では前のやり取りからやりたいことを読み取って返してくれました、非常に優秀ですね。。
ちなみに作業着手〜最初のデプロイまでは40分ほどで出来ました。
しかしFirebase構築時の細かい質問の答え方などまではChatGPTは記載してくれなかったので、ある程度の知識は必要に感じました。
A-Frameの公式ドキュメントをもう少し読んでここから色々やってみたいと思います。