「離れていても楽しめる写真体験」の開発に会ったことのないメンバーで挑戦した話

こんにちは！　ヤフー株式会社で企画をしている村山です。
先日、Internal Hack Dayという社内ハッカソンイベントに参加してきました。作った作品や、初のリモート開催でのハッカソンに参加した感想を書きたいと思います。

チーム構成

企画1名デザイナー1名エンジニア2名のチーム構成でした。
昨年も一緒に参加した、企画の私とエンジニアの2人で一緒に参加するメンバーがいないかを探していたのですが、これがなかなか難航。たくさんの人に声をかけて、ポジティブな返事をくれた2名を追加した合計4名という不思議な組み合わせのチームが出来上がりました。
リモート開催ということもあり、会ったことのないこの適当なチームで2日間を乗り切れるのかとっても不安でした。

ちなみに「企画の人がハッカソンに参加して何をするの？」とよく聞かれるますが、実はたくさんできることがあります。
メンバー集め/アイデア出し/プロダクト決定/スケジュール引き/機能洗い出し/仕様書作成/発表資料作成/発表などなど
コードは書けなくても、できることはたくさんあるので、ぜひハッカソンにチャレンジしてみてください！

今回開発したもの

今回開発したのは「オンラインでも楽しく集合写真が取れるwebサービス」です。「リモート×写真」から「REMOSHA!」というサービス名にしました。

Zoom飲みなどで開催後に集合写真を取ることがある思うのですが、参加者が四角く区切られた、微妙な写真しか取れないですよね。
「離れていても一緒に素敵な写真を取ることができれば」という思いから、このプロダクトを開発することにしました。

単に合成写真を作るのではなく「写真体験自体を楽しめるものにしたい」という思いがあり、写真を取る人全員でビデオ通話を行いながら和気あいあいと顔ハメにチャレンジできるようなプロダクトにしました。

オンライン展示会ではなんと弊社CTOの藤門も訪れて、われわれのプロダクトで顔ハメに挑戦してくれました。

技術解説

WebRTCを用いて実装を行いました。参加者が入室すると、リアルタイムで顔が検出され、顔の部分だけが全員が閲覧している画面上に共有されます。これによって、複数の参加者が同一の顔はめパネルに顔をはめることができます。また音声がつながっており、おしゃべりしながら撮影を行えます。
全員がうまくはまったら、参加者の1人が撮影ボタンを押します。そうすると、バックエンドサーバーに画像が送られ、集合写真の画像が生成されます。

技術スタックを紹介します。フロントエンドは開発速度を重視し、Nuxt.js、顔検出ではpico.jsを利用しています。バックエンドは機械学習を用いた画像処理を行うことや、簡単にREST APIを立てられることを重視し、PythonでFlaskを利用しました。

展示会では、実際にサービスをGCP (Google Cloud Platform) で動かしデモを体験してもらいました。
今回の実装で大変だったのは、「自然な顔はめ体験」の実現です。顔検出をフロントで行ったため、人数が増える分だけ顔検出の負荷が増え、ブラウザーの処理能力の限界からカクつきが発生してしまいます。

顔検出の頻度を調整するなどの工夫を施し、なんとか4人程度までは動作するようになりました。
「より軽量な検出モデルを利用する」「バックエンドで顔検出を行う」などができれば、大人数、かつ自然な写真撮影が実現できたと思いますが、残念ながら時間が足りませんでした。

一方、24時間というタイトなスケジュールの中でもUIにはこだわりました。ハッカソンでは機能の実装に時間が取られ、こだわりきれないこともあります。しかし、今回はデザインはもちろん、クリックイベントや画像のローディングなど細部までこだわり、サービスとして完成形に近いところまで持っていくことができました。

おわりに

残念ながら入賞には至らず、全員で悔しさをにじませていましたが、「会ったことのないメンバーでのハッカソン」という新しい体験を楽しむことができました。
今回の開発のテーマが「新しい生活様式を迎えるいま、各社の力を集結して課題解決をしよう」というものだったのですが、プロダクト自体がそのコンセプトに沿っているだけでなく、今回のハッカソンという体験自体が、「リモートだと楽しいイベントができないのではないか」という課題を解決するものだったと思っております。

さまざまな制約の中、このイベントを企画をしてくださった方には感謝の気持ちでいっぱいです。
今回の経験を元に、新しい生活様式に対してポジティブな気持ちをもって、サービスに貢献していきたいと思います。