ARシューティングゲームを合宿で作って社内イベントで遊びました！【後編】

February 8,2018

前編から引き続き、ITイノベーション３部の久保田がお送りいたします。

開発合宿からおよそ一ヶ月———

開発合宿メンバーが作りかけのプロダクトを忘れかけていた11月下旬のこと・・・

やすくん「テクノロジー本部での年末イベントが迫ってるんでアレを完成させましょう」

と、再招集の声がかかりました。とはいえ業務後の家での開発はお互いの進捗共有やタスクがわかりづらいし、目指しているゴールがぶれていないかの確認が取りづらい。そこで、休日にコワーキングスペースに集まって開発合宿の延長をしようという事になりました。

コワーキングとは

– 事務所スペース、会議室、打ち合わせスペースなどを共有しながら独立した仕事を行う共働ワークスタイルを指す。

コワーキングスペースとは

– コワーキングが行われる環境、そのスペースが提供されている場所

最初に訪れたのはこちら・・・

ありんこオフィス

渋谷という立地もあり、集まりやすいという点と低価格であるという点で決めました。

なんとドリンクバーが提供されているんです！予約して行ったんですが、正直コワーキングスペースは予約しなくても大丈夫だろうとタカをくくっていました。行ってみると思ったより利用者が多いんですね。予約して正解でした。

コワーキングスペースは非常に快適でよかったんですが、今回のゲームはA3サイズのARマーカーを持った部長陣が練り歩く・・というものだったので動作確認する場合スペースとして無理があると思っていました。そこで翌週はYahoo!Japanが運営しているLODGEというフリースペースで開発することにいたしました。午後にお邪魔したんですが人がとても多い！

Yahoo!Japan　LODGE

それもそのはず、こちらのLODGEさんは無料のスペースとなってます！（※2017/11現在）

しかしながら人の多さ故、実際にARマーカーを持って検証などは行えませんでした。

技術的な話

ここで今回のARシューティングゲームについて少し技術的な話をしたいと思います。

前回の記事でも触れていますが、このゲームはWebサイトなどを閲覧する際に利用するWebブラウザでARが楽しめるものとなっています。これは、AR.jsというライブラリを利用して作成しました。独自のカスタムマーカーの作成はこちらを利用させていただきました。

続いて、インタラクティブな動作。タップで銃を撃つ、銃弾の種別変更などはSvelte.jsというJavascriptフレームワークを利用しました。

https://svelte.technology

有名なReactやVue、Angularなどは候補に上がらず、久保田が個人的にやりたいという熱意だけでゴリ押しでSvelteを採用しました。使い方自体は簡単だったため、実装上で特に困ったことはありませんでした。（おすすめです）

そして、開始・終了などを遠隔で操作したり、各ユーザーのヒット数などのカウント集計としてGoogleのサービスの一つであるFirebaseを採用しました。こちらも特に議論せず決定しまして、理由は単純に「自前でサーバーサイドを書く必要がないから」です。今回注力したいフロントエンドに時間を割くためには重要でした。

Firebaseの提供しているRealtimeDatabase（※以降RTDB）とHostingを利用しています。

https://firebase.google.com

管理画面ではAngularを採用。開発当初はReactではじめましたが管理画面を担当したメンバーが業務で扱っているAngularへとシフトする結果となりました。こちらも開発速度と効率化のために普段扱っているフレームワークへの変更という形になり、極めて開発速度重視の採用となっています。

https://angular.io

唯一のサーバーサイドプログラムはFirebaseのRTDBに格納されたユーザーのスコアを集計するバッチ処理プログラムを作成。開発当初はFirebaseFunctionsをGoogleCloudPlatformのPub/Subによって起動させる手法をとっていました。

参考：https://developers-jp.googleblog.com/2017/04/how-to-schedule-cron-jobs-with-cloud.html

しかし、こちらの手法は最短毎分しか実行できず、今回の要件である10秒毎実行ができないことが判明しました。そのため、さくらVPSをレンタルしているメンバーの環境を利用してnode.js上でデーモン起動させることで実現しました。