はじめまして。kasahiです。

2018/12/15-16に開催されたYahoo! JAPAN Hack Day 2018に参加して最優秀賞を受賞しました。
（Hack DayはYahoo! JAPANが主催する日本最大規模のハッカソンです）

人生でそうそうない経験ですので、こちらのnoteにまとめておこうと思います。

チーム

今回は5人で参加しました。
@sonataxと、@synboo、たいやさん（@yukatangent）、バリさん（@kilisima）、そして自分（@kasahi）の5人チーム。

元となったチームは、前回のHack Dayで「人が音のようだ」という作品で優秀賞を受賞していた「二郎は半麺派」というチームです。
前回の受賞者は今年招待枠で参加ができたそうなのですが、チームメンバーが一部出れなかったり別チームで参加することになったそうで、今年も出れるsonataxとたいやさん、synbooの3人と、その空きに自分とバリさんを混ぜてもらい、5人チームで出ることになりました。

今回のチーム名はこの流れで決まりました。

（自分はいまだに二郎に行ったことがないのでイマイチわかってません）

作品のアイディア出し

当日までにブレストで3回集まりました。

ただ、なかなかこれだ！というアイディアが出ず、苦しみました。

PayPay祭りの直後だった事もあり、モバイル決済ネタでいこうと言う話で盛り上がり、QRコード決済をまとめるアプリを作ろうとか、popIn Aladdinに影響されて、天井を使って何か便利なモノが作れないかとか、最近話題になっていたペチャバトで遊んだらARバリバリで楽しかったしすごかったので、ARKit2.0使って何かできないかとか。新し目のiPhoneだと視線検出ができるようになったのでそれを使った何か、とか。

という事で、前日の23時くらいまでウンウン唸って、全員が納得するアイディアは出ないまま、前日の夜は更けていきました。

（前日まで苦悩する様子）

当日朝にアイディアが決定

これだ！というアイディアは出ないまま、もやもやしつつ当日集合しました。
ただ、ここまで、ARKit2.0を使ったネタや、新しめのiPhoneに搭載されている機能を使えば（例えばDepth Camera）、何か面白いことはできそうだよね、という話はぼんやり出てきていました。

朝からARKit2.0系の記事やiOSのDepthに関係する記事をあらためて見ながら最終的な形を模索していたところ

Depthを使って背景を切り抜けるとインパクトが大きいし面白そう、という流れになりました。

そこから、
→ もしDepthを使って背景切り抜きをするなら静止画像じゃなくて、動画のほうが発展性もありそう
→ リアルタイムに背景切り抜きはできそう
→ 動画なら最近ユーチューバーやライバーが流行ってきている、ライブ動画配信する人たちが便利に使えるものにしよう
→ 実際に動画配信のときに背景合成しようとするとクロマキー用の布準備したりそれ用のソフトや機材が必要になったり準備が大変
→ なので普通に動画配信している人はクロマキーまで手を出せない
→ でもクロマキーが手軽にできるともっと面白い動画配信がたくさん生まれそう
→ このやり方だとスマホ1台で実現できるよね
→ さらに動画配信のときに、自分のあまり見せたくない部屋も見せない状態にできるよね
とだんだんと具体的なアイディアが固まってきました。

（固まってきたアイディア）

結果的に「ライブ動画配信をする人が手元のカメラでカンタンにクロマキーができる」をMVP（Minimum Viable Product）としてプロダクトをつくろう、と決まりました。

このアイディアなら、インパクトもあり面白そう、使ってみたい、便利そう、ぜひ作ってみたい！というチーム全員の納得感があり、また、ざっと調べてみて、同じようなアプローチをしているカメラアプリも見つけられなかったので（そもそも深度情報がアプリであまり活用されていない？）
これは良さそう！ということで、1日目の午後から作り始めることにしました。

開発開始

今回のチームで、普段iOSアプリ開発をしているのがsynbooでした。かつ私物でFace IDが動く端末（True Depth Camera搭載端末）を持っていたので、synbooを中心に深度を使った背景切り抜きの調査と、画像や動画の背景合成のデモ実装を進めてもらいました。

あとは、ローカルの画像や動画をただ背景合成するだけではなくて、インカメラで自分を撮りながら、背景にアウトカメラの映像（自分が見ている視界）を合成できると面白そうだったので、
インカメラとアウトカメラを同時に使う方法を並行でバリさんが調査しました。

その間にほかのメンバーは、他のライブ配信アプリをいろいろ試しながら、そもそも機能的に何ができると楽しいか、背景に何が合成されると面白いか、あとはそもそもどこまでを作るかを詰めたり、背景合成するエフェクトのパターンを作って試したり、そもそものクロマキーの課題って何があるんだっけを調べたりしていました。

（途中でつくっていた雑なタスク表）

調べる中で、やってみたかったインカメラとアウトカメラを同時に使って動画を撮影するのはiOSでサポートされていないようでした。
なので、1台のデバイスで同時に撮影する機能はあきらめて、別の端末でライブ配信を行いながら、メインの端末で配信を受けてその映像を背景合成する機能に切り替えました。
配信としてはiOSはHLSで受けることになるので、その部分をどう実現するかバリさんとsonataxで分担して進めていきました。

（途中のホワイトボード）

そうこうしているうちにあっという間に1日目の夜が近づいてきました。

Hack Dayのルールで、1日目の22時までに出場チームの資料をプロダクト名も決めて提出しないといけなかったので、いくつか案を出して、今回のプロダクト名は「バーチャルスタジオカメラ」に決定しました。

（夜のHack Day会場）

プロダクト名が決まったので、たいやさんがサービスロゴやアプリのロゴ制作にとりかかり、sonataxはたまたま自分が持ってきていたTHETAがライブ配信対応していることがわかったのでTHETAを使ったライブ配信をアプリ側で受けて背景合成できないか検証を進めつつ、バリさんは背景合成した動画をそのままyoutube liveなどで配信できるかどうかを調べることになりました。

（プロダクト名がきまったのでさっそくたいやさんがロゴを作成）

自分は背景合成にテキスト・スタンプも機能的に加えられるようにfirebaseを使ったチャット・スタンプ送信部分のベースを作ることにして、synbooは各エフェクトを加えたり、アプリとしてひと通りの機能が動くように細かな実装を進めました。

夜は各自の作業を分担していったん家に帰ることにしました。

追い込み

2日目の朝から各々の作業分を結合しながら、とはいえ時間的にもうデモまでに間に合わなさそうな機能もあったので、その部分は思い切って落としたりしました。

発表もしないといけないので並行で発表資料をつくり、発表用のデモの練習をしつつ、あとは直前でエフェクトのパターンを増やしたり、バグを直したり、バタバタで時間は過ぎていきました。

デモの最後でやりたかったライブ配信を背景にそのまま読み込む機能は間に合いそうだったので、残り2時間くらいのタイミングでHLS配信ができるようにサーバをセットアップし始めて（これもハマった...）なんとかスマホやTHETAからのライブ配信読み込みも動くようになりました。

12時までに提出が必要だったプロダクトを1枚で説明する資料も、時間がなさすぎてギリギリの11:59に提出しました。

（残り5分くらいでたいやさんが作成）

発表

今回の参加チームは79チームでした。
自分たちのHack IDは42番で、Hack Dayの発表はHack ID順に進んでいくので、だいたい真ん中くらいの発表順でした。

（緊張の舞台裏。奥に「つくるラボ」さんチームも見える）

発表動画はこちらです。  
（動画は発表がはじまる2:23:20くらいにリンクしてあります）

今回のプロダクトはデモを見てもらった方が伝わると思ったので、導入の説明はほどほどに、デモを中心に見てもらう構成にしました。

発表中は反応が全然分からなかったんですが、あとで聞いたら好評だったようで良かったです。

（ニコ生でも高評価！うれしい...！）

展示

発表が終わったら展示です。

今回は机が小部屋の入口付近だったというのもあるかもしれませんが、展示も結構の人に見ていただきました。

スマホ1台でリアルタイムにクロマキーできる、というのはパット見た人にも伝わっていたようで、みなさん好感触でした。

ぜひ使ってみたい！という声もあり嬉しかったです。

受賞式

展示でも反応が良かったので、せっかくだから何かの賞に引っかかればいいな... と思ってました。

ただ、各賞の発表が進み、全く作品名は出てこず。
観客投票のHappy Hacking賞も「つくるラボ」さんで、3年連続受賞ってすごいな...！いい作品だったしプレゼンもすごく上手かったもんな...！
まぁ自分たちは来年がんばろう、みたいに考えていたら、
なんと！最後の最優秀賞で呼ばれました。

めちゃくちゃびっくりしました。

審査委員長の藤門さんからのコメントとしては以下で、

・Depth Cameraを使って背景を切り抜きそれを動画のクロマキー処理に使うというアイディア
・すべての機能をスマホ1台におさめて、24時間以内に開発を行い、デモや展示ができたこと

デモや展示の完成度や、アイディアを評価していただいたのはとても嬉しかったです。

（感動の瞬間）

ふりかえり

Hack Day 2018、とても楽しかったです！

やはりモノを作って色んな人から「良いね」「面白い」「使ってみたい」と言ってもらえるのはかけがえのない体験でした。

結果的に最優秀賞もいただけて、今まで何度もHack Dayに参加していますが、最高の思い出となりました。

運営のみなさま本当にありがとうございました。

ただ、せっかくなのでハッカソンで終わりではなく、今回作った「バーチャルスタジオカメラ」をもっと機能的にブラッシュアップして、ぜひリリースしたいねという話をチーム内でしています。
他にアイディアとしては出ていたものの24時間で実装しきれなかった機能もあるので、そういった機能も加えていきたいと思います。

もしリリースしたらお知らせしますのでぜひ使ってください！

さいごに
#つくるってたのしいね ！

（あとがき）

今回のプロダクトをつくる際に @shu223 さんの記事をとても参考にさせていただきました（ありがとうございます！）。
その@shu223さんが共著で書いた「iOS 12 Programming」がHack Day 2018の次の日の12/17（月）に発売されたようでした。タイムリー...！しかもデプスの章がお気に入りとのこと！

さっそくみんな本買いました