Yahoo ハッカソン２０２２予選出場レポート：チーム【ネオあぐりメタル】



**@kenmaro**です。
普段は主に**秘密計算、準同型暗号などの記事について投稿しています**。
秘密計算に関連するまとめの記事に関しては以下をご覧ください。

> - [秘密計算エンジニアを始めて２年半が経った。](https://qiita.com/kenmaro/items/48059dd60f79e80f5ef8)
> - [秘密計算エンジニアを始めて3年が経った。](https://qiita.com/kenmaro/items/a1d90a074d552b7bf886)

## 概要
今回は、Yahoo主催のハッカソン「Hack Day 2022」への出場レポートを書きたいと思います。

Hack Day (Yahooハッカソン)は、
一言でいうと、日本最大規模の、1番イケてるハッカソンです！！

https://hackday.yahoo.co.jp/



私の出場遍歴
https://hackday.yahoo.co.jp/history/2021/

https://qiita.com/kenmaro/items/670ccb362e185e3cc3f4

https://qiita.com/kenmaro/items/149417e96c82e6ebe541
ここに書き起こしています。

今回は２０２２年大会の予選に６人のメンバーで出場してきました、
そのときの記録を残しておこうと思います。

## 最終的に作ったプロダクト
「まごろむ」という赤ちゃんの成長３D共有サービスを作りました。

![Screen Shot 2022-09-21 at 17.32.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/434347f3-f3cb-c6a8-77e8-b6880109e02d.png)
![Screen Shot 2022-09-21 at 17.36.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/24cb5ced-6347-8502-69d5-5cdb2a27eb00.png)

### 基本的な機能とシステム構造
基本的な機能とデモ画面、システム構造は以下の通りです。

![Screen Shot 2022-09-21 at 17.37.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/758726c9-ad0e-a55d-b557-8ad8cb29b8e7.png)
![Screen Shot 2022-09-21 at 17.37.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/90bcff00-5bd6-3463-02e1-2560f05ca75a.png)
![Screen Shot 2022-09-21 at 17.37.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/4324daff-eb9d-8711-9a96-845194069ea4.png)


## 今回参加したメンバー

今回も「あぐりメタル」という去年のチームメンバーを受け継ぎ、出場を決意しました。
昨年の５人のメンバーに追加して、今年はプロダクトマネジメントの経験のあるメンバーを加え、６人のメンバーで出場することにしました。
メンバーが増えたため、「ネオあぐりメタル」として名前もアップグレードしました。
去年に引き続き今年も一緒に出てくれるメンバーがいることにまず感謝ですし、
チームメンバーの皆さんと過ごした２４時間はほんとうに最高の思い出になりました。

## 準備期間
ハッカソン二週間前程度にはある程度プロダクトイメージが決まっていた去年と比べて、今年はスケジュールがかなりタイトなものになりました。

- 私がコロナに罹患し、キックオフミーティングがハッカソン開始２週間前になってしまったこと、
- アイディア出しの段階でいろいろなアイディアが出て発散し、なかなか１つのアイディアにまとまらなかったこと

など、あまり準備がグレイトであったとは言えませんでした。
とはいえ、このアイディア出しのフェーズもいろいろとアイディアを出しあえて楽しかったです。

ハッカソン前の準備ミーティングは３回ほど行い、

-  チームの交流会とブレインストーミング
- １０個くらい出たアイディアの深掘り、投票して２つに絞る
- ２つについて深掘り、最終案決定

というふうにミーティングは構成したのですが、
結局アイディアがチーム内で完全にしっくりこず、
最終的なアイディアの判断はハッカソン当日に決める、という感じになってしまいました。


## みんなで考えた主要アイディアたち

当日までに絞られていたいくつかのアイディアは、以下の通りでした。
- ARを使って、日常生活ではみる事のできないスポーツ選手や、俳優、動物などを登場させ、臨場感を得る事のできるアプリ
- 自分のLINEの友達の中から新しいアクションを起こすための、「ネオマッチング」
- 集まりや飲み会などの幹事を一気通貫で行うための「飲み会幹事コンシェルジュ」

また、当日までに
- 友達との仲の良さを数値化して、友情と共に育成する「友情たまごっち」
みたいなアイディアも出ました。

この３つのアイディアはいずれも、
マッチングやコンシェルジュ、たまごっちの育成などを通して
「友情」を高めたり、SNS世代が感じている、オンライン上でつながっている友達と、リアルで実際に遊びに行ったりする友達をどう判断するか、というような悩みからくるものでした。

特に、「ネオマッチング」はその悩みが顕著でした。
- 大学の集まりや、新入社員研修でたくさん交換したLINE上の友達に対して、誰と本当に仲良くなれるのかがわからない、
- ご飯に誘ったり、趣味が合う人と一緒になにかアクティビティを行うときに、どの人が本当に自分といってもいいと思っているか、あまり気まずい思いをせずにわかると嬉しい、
という意見がチームから出て、共感もそこそこありました。

また、「飲み会幹事コンシェルジュ」はもっと実用的なアイディアで、
- いろんなグループに所属して飲み会などを幹事しないといけないが、出欠確認から場所予約、メンバーへの周知など一貫してやってくれるサービスは案外存在していない
- コンシェルジュを利用することで定期的に会う機会のリマインドが行われるため、「気づいたら会わなくなってしまったあのグループ」みたいなのを少なくできる可能性がある。
というようなアイディアで、これも一定の共感を得ていました。

総じて、自分達の中では、
人と人との繋がりを大事にしたり、友情を高めあったりするようなアプリケーションを作りたいという思いがあるなあ
というベースラインの共有はこの準備期間でできたのかなあと思います。

## ハッカソン当日
このような状況で、ヤフー本社（赤坂見附）で当日にメンバーと合流しました。
１１時に受付が開始され、12時に本番開始だったので、
１１時から１時間ほど、何を作ればいいか、今一度チーム内で話し合いました。

### 当日にやっと固まったサービス案
その１時間でいろいろと話し合い、最終的には今まで出ていたアイディアとは違うものを最終的には作ることになりました。
アイディアは、以下のようなものです。


遠方に離れたおばあちゃんが、
目の前にいるように孫の成長を感じられるサービス「まごろむ」です。
メンバーの一人に子供の出産が控えている人がいて、
そのメンバーのお父さん、お母さんが幼児の服などをたくさん買ってあげたいと話している、しかしながら実際に会える機会も多くないのでどんなものが似合うかわからない、オンラインでズームなどを使って姿を見せたり、写真をLINEで送って赤ちゃんの姿を共有することになるだろう。
そこで、もっと簡単に赤ちゃんの成長の様子が共有できるようなアプリがあれば楽だし、おじいちゃんおばあちゃん側と、親側でサービスを使うメリットがあるのでは？
というアイディアでした。

￼

### 使った技術スタック
自分達が使ったことがない技術としては、３Dモデリングや、ARを用いたアプリ開発でした。
祖父母サイドにとっては、あたかも孫が目の前にいるようなユーザ体験を作りたいと考え、そのためにはARやVRなどを使って臨場感のある情報共有アプリにしようと考えました。


ドタバタと開発するプロダクト案をまとめましたが、
最初はUnityの調査からスタートしました。
Unity満足に触った事のあるメンバーはおらず、どのようなことができるのか、どのようにしてアプリを作るのか、という調査から始まり、かなり時間がかかりそうでした。
この辺りの触った事のない技術に対するキャッチアップは、ハッカソンの前に触っておくことが定石ですが、
今回は時間内でキャッチアップも進める、ということになってしまいました。
参加される方がいたら、基本的にこの手法はおすすめはできないです、
ただ、このような緊張感の高い崖っぷちの開発もハッカソンならではで面白くはあるので、楽しくはありました。

開発開始から１、２時間が経った後、Unityはどうもキャッチアップが間に合わなさそうだ、ということがわかり、
Swiftを使ってARKitによるARアプリの開発に切り替えることにしました。
Swiftは去年Yorimichiを開発するにあたって使った技術でしたし、私自身も１年ほど使ったことはあったため、ARKitさえキャッチアップできればアプリ自体は構築できそうだ、
という感じでした。
ARKitのチュートリアルコードなどを漁り、どのようなことができるのか、ということをバーっと洗い出す作業が始まりました。


### コア機能
上の開発機能ロードマップのところにもまとめられていますが、以下のコア機能が必要でした。
- 赤ちゃんの写真、もしくは動画をアップロードするインターフェース
- 写真、動画から３Dモデルを作る機能
- ３Dモデル化した赤ちゃんを、現実世界に登場させる機能（AR）
- 赤ちゃんに対して着せ替えを行う機能
- 赤ちゃん３Dモデルに対して動きをつける機能（オプション）

最後の動きをつけるというところはオプション機能であると考えましたが、
もしこれができれば結構ウケるのではないかと考え、調査を進めていました。


### 開発で困難だったポイント
### 困難ポイント①
写真や、動画から３Dモデルをつくる、というのは面白くだれでも欲しいと思うような機能である一方で、実現は難しく、その機能だけでサービスになっているプロダクトがあったり、リサーチの対象だったりすることがわかりました。
また、Lidarを用いたサービスは結構見つかったのですが、チーム内にはLidarを使用できるようなデバイスが無く、また、Lidarを搭載したデバイスを持っている人というのはかなり限られるため、Lidarを使わずに３Dモデルを再構成しようと決めたことです。
ここも当日に作るサービスがやっと固まった事による難点で、必要（かもしれない）デバイスの調査を前もって実施することができず、デバイスに制限をもった状態で開発を進めるほかなかったことは反省点でした。

また、３Dモデルを作成するツールを使用すると一貫性がなくなるため、我々のサービスで完結するようになるべく作っていく必要があったのですが、そのような機能を提供しているAPIなどがないか、ということを調べたのですが、ツールとしての提供がほとんどでなかなか候補が見つかリませんでした。
ここができないと、前半部分の機能は未実装で終了してしまう可能性があり、かなりやばいなと思っていました。
そんなときに、
https://qiita.com/kotauchisunsun/items/ecf40bfa6c63b9463a9a
このようなAIモデルについてメンバーの一人が調査をしてくれ、実際にMLモデルをサーバにデプロイし、バックエンドとしてAPIを自分達で用意するという方向性を見出すことができました。
これはFacebookが開発したAIモデルで、１枚の画像から３Dモデルを生成してくれるというモデルでした。
このモデルのよいところは、 - Pytorchのモデルファイル（学習済み）が公開されていること
- 画像は１枚だけ必要なため、画像を何十枚もアップロードする必要のあるサービスよりもDXが高いこと
などでした。
早速メンバーの一人がこのモデルをGoogle Colabを使って試し、実際にAPIを作ることにしました。


### 困難ポイント②
①のように作成した３Dモデルでしたが、実際にARKitを用いて現実世界に登場させたときに、いくつかの問題がありました。
- 3Dモデルの色がうまく設定できない
- ３Dモデルの質が安定しない
- スケーリングを設定することが難しい

これらは
- ARKitに精通していないことによる難しさ
- ①のAIモデルの現実的な性能による難しさ
から来ていました。

このあたりは特にARKitに対する理解の甘さや、キャッチアップできていなかったことが影響しました。
うまくモデルをアプリ上に出現できず、苦労した時間帯が長かったのですが、チームメンバーの怒涛のキャッチアップ力により、なんとかモックアップを見せるところまでは作り込むことができました。

また、３Dモデルに対して動きをつけるところはAdobeのツールを利用しましたが、とても面白かったです。
深夜テンションでたくさんネタ的な動きを試しました。
https://www.mixamo.com/#/


### 困難ポイント③
システム全体としての開発力
最終的なシステム構成図としては、以下のようになりました。


工夫した箇所は、赤ちゃんの写真のアップロード、ARアプリへの動線どちらもLINEを窓口としたところです。
アプリのログインについてもLINEの認証を使ったログインを実装し、アプリへもLINEを経由してアクセスすることで、
なるべく使いやすいような配慮を行いました。

しかしながら、そのあたりのシステムの構築にもある程度の時間が必要で、いろいろなところでバグが発生し、厳しい戦いになりました。
Firebaseを使ってDB管理などは去年のアプリ開発の経験を活かすことができましたが、
終わってみればシステム構築も２４時間でギリギリ終了できた、という結果でした。



## 結果
Hack Dayの開発は２４時間で一旦終了し、
各チームがプレゼンテーションを９０秒で行いました。
その後、オンラインベースでデモを発表する時間があり、そこで審査員の方々や、各チームの方々にデモを発表したり、実装の細かいところ、プロダクトのコンセプトなどについていろいろと説明しました。

その後に審査結果が発表されたのですが、結果は残念ながら決勝に進出することはできませんでした。
完成度が非常に高いプロダクトを披露しているチーム、コンセプトがとても面白いチーム、
思わず笑ってしまうようなプロダクトを作ったチームなど、
さまざまであり、レベルも高く、結果は残念でしたが、ある意味納得のいく結果でした。

２週間後に決勝が行われ、そちらは決勝に勝ち残った１０チームが追加開発を行った後のプロダクトについて披露し、賞金をかけて戦うラウンドですので、是非ご覧いただければと思います。


## 感想と総括
一言で言うと、本当にやりきった２４時間でした。
テーマ決めから技術選定など、あまり準備がうまくいっていない中での開発でしたが、
２４時間の中で試行錯誤し、最終的に動くモックアップを作り発表まで漕ぎ着けることができたのはほんとうに凄いことだと感じました。
チームでの連携もよくできていました。

私の個人的な意見なのですが、ハッカソンは技術的にも、チーム開発的にも、娯楽としても
最高の機会であるなと思います。

２４時間という縛りの中でチーム内で一致団結し、
ときには全く知らない技術のキャッチアップをしたり、
動くはずのものが動かないバグをとるために試行錯誤したり、
全てはチームで考えたアイディアを形にするために。

結果はどうであれ、賞をとれたチームに対してはひたすら尊敬します、。

また、仮に賞を取れなかったとしても、そのときに学んだ技術や開発を一緒に行った思い出など、得るものは本当に大きかったです。
これらの経験はハッカソンの醍醐味です。

また、ここで作ったモックアップは、去年のように、何かしらの形でリリースまでもっていきたいな
と思っています。

今回のバックエンドのAIはとてもヘビーなモデルだったので、GPUインスタンスが必須であり、
それをそのままデプロイするのは予算的に厳しい気がしています。
しかしながら、このコンセプトもしくは技術を継承して、なにかリリースできるように、
ハッカソンの後も試行錯誤、楽しんで個人開発してみたいなと思っています。


ハッカソンは、以上のようにとても楽しいイベントだと思います。
ここまで読んでくださった人がいるとするならば、
来年のYahooハッカソン、もしくは他のハッカソンなど、出場を検討してみてはどうでしょうか？

最後に、出場された方、お疲れ様でした！！
決勝に残られたチームの方、あと二週間頑張ってください！！
運営の方々、本当にありがとうございました！！

今回はこの辺で。
@kenmaro