Hack Day 2019に参加したレポ

![Image from iOS.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227999/337eb0fc-abe1-1061-d8c8-f40097deb0a6.jpeg)
# はじめに
2019/12/14-15に開催された、ヤフー株式会社様主催のハッカソン「[Hack Day 2019](https://hackday.jp/)」に3人（[@iaoiui](https://qiita.com/iaoiui )、もう一人)で参加しました。エンジニアとして非常に刺激になったので、是非この時の記憶を残しておきたいと思い、記事を書かせていただきます。この記事を見て、少しでもハッカソンの~~辛さ~~楽しさが伝われば幸いです。

# 成果物
作成したものは「ARであそぼ」というAR×工作×パズルのアプリです。
![スライド1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227999/2d177e6c-c48d-e37c-8baf-662bd5fe9f57.png)

文字の書かれた「パーツ」を組み合わせて、実際に存在する単語を作ると、それをマーカとして認識し、AR空間に「ほんもの」として出てくるアプリです。ただし、時間の都合上、実際には4文字を全て別個で認識したらオブジェクトが出てしまう感じになりました。


ワクワクさんリスペクトで、↓のように紙皿で「パーツ」を作っていきました。
![スライド6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227999/cb0b2584-9f4f-a038-72a5-8f20a479dfd7.png)

「ロ」「ボ」「ッ」「ト」のパーツを集めると、

<img width="30%" alt="img" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227999/71d96952-5f20-0b19-ae4d-ce0d8cdf4444.jpeg">
<img width="30%" alt="img" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227999/ce5e59b3-701a-c604-0e89-ff0136fa4480.jpeg">
<img width="30%" alt="img" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227999/e4c067c8-7415-aef2-74b5-3f71a1a7252c.jpeg">
<img width="30%" alt="img" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227999/658c19fb-411f-ea18-c671-f529da66c064.jpeg">

こんな感じでロボットのARオブジェクトが出ます。ロボット自体は、[Poly](https://poly.google.com/?hl=ja)で見つけた物です。

![スライド8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227999/715a8cbe-23cd-d4bc-850b-86171dc630a1.png)

発表はネタに全振りしましたが笑、実際は子供の知育玩具としてのビジネス価値もあるのではないかと思っています。今回はそこまでできていませんが、

* 写真をアップロードしてマーカーとして登録する機能
* 任意の文字列（例：ロボット）に対して表示するオブジェクトを登録する機能

まで合わせて作成し、子供が自分で作った文字パズルでARが出せるよ！という製品を想定しています。

## 使用技術

キー技術としては、[ARCore](https://developers.google.com/ar)を使用しています。元々は、メンバーの技術スタックを考えて[AR.js](https://github.com/jeromeetienne/AR.js)を使用しようと思っていましたが、できることが少なかったため、ARCoreもしくは[ARKit](https://developer.apple.com/jp/augmented-reality/arkit/)が選択肢となりました。しかし、ARKitのビルドに必要なMacを一人しか持っていなかったため、ARCoreを採用しました。

ARCoreの[AugmentedImage](https://developers.google.com/ar/reference/java/arcore/reference/com/google/ar/core/AugmentedImage)で、予め登録しておいた「パーツ」を認識してARオブジェクトを表示させています。

途中、[three.ar.js](https://github.com/google-ar/three.ar.js)、[WebARonARkit](https://github.com/google-ar/WebARonARKit)、[WebARonARCore](https://github.com/google-ar/WebARonARCore)、[ARToolkit](https://www.msoft.co.jp/service/artoolkit.html)、[ARToolkitX](http://www.artoolkitx.org/)も検討しましたが、ドキュメントが少なかったり、メンテがされていなかったりしたため不採用となりました。


## 「ARであそぼ」に至るまでに出たアイディア
ハッカソン参加に当たって、一番時間を使うのは「何を作るか」というところだと思います。最初は得意領域のAIを活用しようと考えていましたが、最終的に「映えるんじゃね？」ってことでARを使うことにしました。最後の方は時間がなくなってきたため、如何に簡単な技術で見栄えの良い物を作るか、という方向性にシフトしていきました。

3人でざっと100程度はアイディアを出しました。以下はその一部です。

* 水槽に水を入れたらセンサーが反応して画面の中の木が育つアプリ
* VRでアクアリウムができるアプリ
* 頭の形と髪質から実現可能な髪型をレコメンドしてくれる
* Adversarial Examplesで何か面白いことやる
* ARリアル脱出ゲーム  
もうあった：https://nazoxnazo.com/shibuya_pp/
* 次世代広告システムとしてのAR。広告を載せたい人は、座標あるいはマーカーをマーカーの場所を申請。ユーザがその場所に行ったり、マーカーにかざしたりすると広告が表示される。設置コストがほぼ0なところがポイント。
* 次世代SNSとしてのAR。自分の今いる場所に時間付きでメッセージを残せる。この店美味しいよ！とか、の情報共有もありだし絵馬に書くノリで何か書いてもよし。サイバー空間上だから誰かに迷惑をかけることもなし  
もうあった：https://jp.techcrunch.com/2017/11/03/graffity-releases-their-first-app-formally-and-raised-30-mil-yen/
* 三次元ウォーリーをさがせ
* Just a Line✕ピクトセンス。その場にいてマルチプレイができる。
* ARヘンゼルとグレーテル。パンをちぎってAR空間に置いておけるだけのアプリ。
* トランプウノ。トランプカード一枚一枚がマーカになっておりAR上ではウノとして遊べる。重ねると別のマーカとして認識したり。
* ARクロスワードパズル  
→技術的にできそうということで、最終的にこれをベースにアイディアが固まっていった。

# レポ
2日間、ほぼ寝ずに作業し続けていました。以下は覚えている限りの二日間の軌跡です。

* [10:45] 会場につく。一人寝坊してまだこない。
* [11:30] ３人集まる。
* [11:50] 参加者に配布されたレストラン1000円クーポンを握り締めて、早速昼ご飯（海鮮丼）を食べに行く。
* [12:40] 食べ終わった。
* [12:50] ARCoreでできることについて調べる。Andorid Studioを使おうと思っていたが、Unityの方がいいんじゃね？となる。
* [13:30] ARCoreのサンプルがAndroid Studioで動いた。Unityはやっぱりやめることにする。
* [14:00] それぞれAndroid Studioで分担して開発する。が、エミュレータがうまく動かない。しかもARの動く実機端末は一個しかない。PCと接続するケーブル（USB3.0 to USB Type-C）もない。
* [14:30] ARで巨人を置いて遊ぶ。  
<img width="30%" alt="img" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227999/a1b1f851-2270-a04d-9f58-1d8d45c08e57.png">
* [14:50] ARのオブジェクトを作成できる[Smoothie-3D](https://www.smoothie-3d.com/site/page_index.php)というサイトを見つける。試しにモナリザをオブジェクト化したところ、化物が出来上がる。  
<img width="30%" alt="img" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227999/af5959bd-6ca5-c72a-f595-4d7759108d03.png">
* [15:30] プレゼン方法を考え始める。Pixel3の画面をPCに写す方法がないことに気が付く。
* [15:50] [Vysor](https://play.google.com/store/apps/details?id=com.koushikdutta.vysor&hl=ja)というアプリを見つける。これならいけそうだ！有料なので仕方なく購入する。
* [16:40] 近くのビックカメラで発表用PCとPixel3を接続するコードを買ってくる。98円。
* [16:50] なぜかUnityに戻ってくる。
* [17:00] Unityだとエミュが使えないことが発覚。やっぱりAndroid Studioに戻る。どのみちエミュレータが動かないから一人しか開発できないことに気づいていない。
* [17:30] ARで遊び始める。ArgumentedImageで体をマーカーにして認識させようと試行錯誤する。
* [18:30] ArgumentedImageで体をマーカーにするのは精度的に厳しい（認識率が低い）と判明。簡単な（認識率の高い）マーカーでできることを考える。
* [19:30] 晩ご飯（うどん）を食べに行く。ご飯中もアイディアを考える（この時点でまだ決まっていない！？）。
* [20:30] 食べ終わった。
* [21:30] ようやくアイディアが固まる。「ARであそぼ」を作ることに決定。
* [22:00] 紙皿等々を買いに行く。工作をやろうとなったくせに、誰もペンすら持っていない。もはやホームセンターも空いていないので、コンビニで買える物で済ます。
* [23:00] 発表資料を作り始める。
* [0:00] ひたすら工作をする。認識率の高いマーカー作成に余念がない。  
<img width="30%" alt="img" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227999/7af86657-9c43-b3db-7c0f-425e0fd681a5.jpeg">
* [1:00] 眠い。
* [3:00] 何をやっていたか記憶がない。
* [5:00] 足りない紙コップとプリンを買いに行く。プリンはARオブジェクトにする予定だった。いいカメラで撮ったので画質が良い。  
<img width="30%" alt="img" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227999/0cf507e0-da2f-29c0-b357-1252454ae2dc.jpeg">
* [6:00] 仮眠をとる。近くの快活クラブがちょうど改装中だったため部屋で寝る。寒い。
* [8:00] ぼちぼち起きる。
* [9:00] 近くの銭湯へ。1カ所目、空きがない。仕方なく別のところへ行く（多分30分以上歩いた）。
* [10:20] 発表用に長いケーブルを買いに行く。
* [10:30] 朝ご飯を参加者に配布されたCOMPで済ます。
* [11:10] 発表最終準備。この時点でまだデモすら動かない。
* [11:50] なんとかデモはできそうか！？
* [12:00] 開発タイム終了。そして発表へ———


# 反省点
準備不足、それにつきます。事前に環境構築と技術確認（ARCoreで実際どこまでできるか？）は最低限済ませておくべきでした。エミュレータがうまく動かず、ARCore対応の実機が一台しかないため、ハッカソン通して[@iaoiui](https://qiita.com/iaoiui )が全てのコーディングを担当することになってしまいました。

その上、全員ARもネイティブアプリ開発もほぼ未経験のため、開発現場は凄惨を極めました。

また、これまで同じメンバーでハッカソンは何回か参加しているので、「まあなんとかなるんじゃね？」という気持ちがどこかにあったせいもあると思います。

最終的に、発表では見せたい物を100％見せることはできませんでしたが、本物のワクワクさんにコメントを頂けたのでよしとします笑

# おわりに
楽しかった！！それにつきます。若くて優秀なエンジニアや百戦錬磨のシニアエンジニアがこれほど集まる機会は他にはないのではないでしょうか。
来年も機会があれば是非参加させていただこうと思います。次こそは入賞を・・・！