STYLYAdvent Calendar 2024

STYLY×外部APIで作るARの拡張：「アドベントロマンスカー」の裏側

Last updated at 2024-12-13Posted at 2024-12-13

この記事はSTYLY Advent Calendar 2024の14日目の記事です

はじめに

こんにちは、uechanです。

今回は、withARハッカソンで制作した「アドベントロマンスカー」について、その裏側のシステムを紹介します。

ハッカソンのテーマは「お土産をARで拡張せよ！」。このテーマのもと、私たちは旅行のワクワク感をアドベントカレンダー形式でARで楽しめる作品を目指しました。

この記事では、「アドベントロマンスカー」のシステムについて、特にSTYLYを活用した外部APIとの連携や技術的な工夫に焦点を当てて解説します。STYLYが外部APIを利用することで、AR作品の幅がどれだけ広がるかをお伝えできればと思います。

「アドベントロマンスカー」は、旅行前のワクワク感をアドベントカレンダー形式でAR体験として提供することを目指して開発しました。

主なコンセプト：

旅行前の期待感を高める：ロマンスカーのペーパークラフトにスマートフォンをかざすと、ARで旅行先の風景やアクティビティが表示され、旅行への期待感を高めます。

思い出の共有：旅行後、専用のWebサイトで撮影した思い出の写真を登録し、その写真たちをARで振り返ることができます。

追体験のループ：友人にARをシェアすると自分の顔が主人公のARを思い出の写真とともに体験してもらうことができ、友人もARで旅行のワクワク感を追体験できる仕組みを設計しました。

このように、旅行前から旅行後までの一連の体験をARで拡張し、ユーザー同士が思い出を共有・追体験できる新しい形のお土産体験を提供することを目指しました。

ARの体験動画はこのような感じです

「アドベントロマンスカー」のシステムは、大きく以下の2つの要素で構成されています。

AR体験の基盤
STYLY
AR体験の構築には、STYLYを使用しました。特に、位置合わせにはSTYLYのimmersalを採用しています。immersalは、わずか0.2秒で位置合わせが完了するほど高精度かつ高速で、AR体験のスムーズさを実現しました。
ペーパークラフトとの連携
付属のロマンスカーのペーパークラフトが、AR表示のトリガーとして機能します。このアプローチにより、物理的なお土産とデジタル体験を融合させました。
ユーザー情報と写真データ管理
自作Webサービス
ユーザー登録、ログイン、写真登録などのUIはすべて自作のWebサービスで構築しています。
AWS S3との連携
登録された写真は、AWS S3と連携した自作データベースに保存されます。
ユーザーデータ自体はDynamoDBに保存されています。

まずはメインページ

初めての方はアカウントを作成するかログインをします

ログインし、自分の顔写真を登録すると、友人にARをシェアしたとき、ARの主人公が
自分の顔になります

※テストデータに使われる弊社社長

思い出写真はカウントダウンする日数分(ARのある数)出てくるので
好きな写真を登録しましょう
友人にシェアしたときに思い出の写真が出てきます

ARの主人公が自分になってともに旅の思い出の写真を振り返る

ちなみに開発言語はReact.jsでホスティングにはcylic.shを使っていました
cyclic.shはサ終してしまったので、いま見れるWebサイトは存在しません。。。；；

つらいご時世だ、、、

「アドベントロマンスカー」の実現には、STYLYと外部APIの連携が大きな役割を果たしました。

STYLYで外部APIを利用する仕組み
Playmakerのカスタムアクション、Get Http Request、Put Http Request、POST Http Requestなどを使うとcurlとしてHTTPリクエストを叩くことができます
参考までにGet Http Requestのマガジン記事を載せておきます

「アドベントロマンスカー」で、旅行のワクワク感をARとWebサイト、apiサーバーの連携で最大化することができました。

本作品を通じて、STYLYが単なるAR制作ツールにとどまらず、外部APIと連携することで可能性を大きく広げられることを実感しました。AR作品を作る上で、STYLYと外部APIの組み合わせは非常に強力な武器になります。

この記事が、これからSTYLYやAR制作に取り組む皆さんの参考になれば幸いです！「アドベントロマンスカー」を通して、新しいアイデアや可能性に触れていただけたら嬉しいです。