【地域と共に自己紹介】8thwallを使って故郷と自分を同時に紹介できるアプリを作ってみた（8thwall+Lightship VPS）
はじめに
はじめまして！デザイニウムインターン生の能勢航羽（かずは）です。私は福島県で生まれ、会津若松市で育ちました。しかし、会津若松市内で名刺交換をする機会があっても、相手に伝えられている情報は限られていると感じていました。
そこでwayspotでのみ表示できるAR名刺を作成することで、自分自身の情報と地域の観光情報を同時に伝えることができるアプリを開発することにしました。 このアプリの開発によって、出身地の魅力を知ってもらうきっかけにしたいと考えました！
アプリの概要
アプリのホーム画面から名刺の作成画面に進み、自分の情報を入力したあと、Wayspotに行くと自分だけのAR名刺を表示できます。観光名所やその周辺施設など、その土地でお馴染みのスポットが多くWayspotに登録されているため、そこに注目しました。
Wayspotの鶴ヶ城に行くと、AR名刺とともに起き上がりこぼしの演出が画面に現れる様子を動画にしています。起き上がりこぼしの演出は、今回新たに制作しました。
制作手順
使用ツール
8thwall
Blender
完成までの手順
学習サイトとExampleを用いた学習
まずはじめに、ARアプリ開発が初めてだった私は、a-frameやthree.jsといった技術を学習サイトを用いて勉強しました。既存のExampleを参考にしながら、段階的に操作に慣れていきました。これによって、ARのアプリ開発についての理解が深まりました。
名刺作成機能
a-frameの値をUI上で操作できるようにして、表示できる内容を変化させることで、作成者の情報が伝わりやすいように工夫しました。今回は時間の制約で名前、メールアドレス、学校しか項目を作れませんでしたが、情報量を増やすことで、より魅力的な名刺になると思います。
名刺の表示機能
マップ上のWayspotに近づき、カメラでスキャンすることで名刺のデータをAR上に表示させられます。
実装としては近くのＷayspotを認識させて、一定の範囲の中にユーザーが入ったらマップ画面からカメラ画面に切り替えるようにしました。カメラでＷayspotをスキャンするとAR名刺が表示されます。ユーザーがWayspotの範囲外に出ると、AR名刺は消えます。
観光客や、新しい人との交流にも役立てることを想定しました。
難しかった点
AR領域でA-FrameとThree.jsを初めて扱った際、いくつかの問題に直面しました。まず、ARの特性による相対的な座標系への理解が求められました。AR環境では、仮想オブジェクトを現実世界に配置するために、デバイスの位置と方向を正確に把握する必要があります。この概念の把握が初めはやや難しく、理解するのに時間がかかりました。
改善点
名刺の表示をひらがなや全角表示に対応させられるようにできればより使いやすくなると感じました。
アニメーションの実装をあらかじめ行っておいて、名刺作成ページ内でどのアニメーションを行うキャラクターを何個置くなどの設定を行えると良いと思いました。
端末によってsafariのキャッシュを削除しないと動かないことがあるので改善する必要があると感じました。
名刺データをサーバーで管理して、自分や他の人の名刺データをWayspotに紐付けるようにしたいです。（今回作成したアプリでは、名刺データはローカルでの管理のみです）
アプリ制作後の感想
自分の地元である会津の魅力を発信できるアプリの企画から実行まで移せたことが良い経験となりました。
AR技術の発展により、現実世界と仮想世界を結びつけることができるようになり、より多様な表現が可能になったと感じました。今後もAR技術を用いたアプリ開発に挑戦し、魅力的なコンテンツを生み出していきたいです。
今回のアプリ制作で気づいたのは、Wayspotの場所が意外と少なかったこと。会津でのWayspotのアクティブ化が必要だと感じました。今後はWayspotを活用したARコンテンツの拡充に向けて、地域の方々と協力して取り組んでいきたいと思います。
また、Blenderで作成したアニメーションや紙の材質などの部分について、アニメーションのパターンを増やしたり、文字のフォントを変えられるようにするなど、さらなる改善点が見つかりました。今後も技術力を磨き、より魅力的なARアプリの開発に挑戦したいです。
PMとエンジニアを募集中！
デザイニウムではWebARで楽しい体験を作りたいプロジェクトマネージャー、ウェブエンジニアを募集しています😃社内では多彩なARのアプリやサービスの開発プロジェクトが同時進行中📱✨一緒に協力してくれる仲間を募集しています💻様々な最先端テクノロジーを使ったAR・xRコンテンツ作りを推進したい方。Unityや C, C#, C++が使えるエンジニアの方でARや体験型コンテンツの開発に興味がある！という方。ぜひご連絡ください😊
この記事が気に入ったらサポートをしてみませんか？