夫婦でハッカソンに出て入賞＆決勝進出した話——Yahoo! JAPAN Hack Day 2022 参加記
Yahoo! JAPAN Hack Day 2022に夫婦で参加しました！
結果、CLOVA Speech賞受賞と決勝進出を達成しました。
作ったもの
YOSOという話し方を分析するサービスを作りました。
予選のプレゼンは以下のURLから確認できます。私達のプレゼンは3:25:51からです。
サービスの内容は、スピーチを分析して、ポジティブ度、声の大きさ、話す速さ、間のとり方、抑揚、えーっとの数（フィラー）の６項目でモニタリングし、点数や必要に応じて警告を出すというシンプルなものです。
まだエラーハンドリングなどが甘いのですが、β版ということでリリースしてるのでよければ使ってみてください。
レスポンスを待つ必要があるので、最初の解析は話し始めてから20秒ぐらいかかります。それ以降は裏で解析し続けているのでほぼほぼリアルタイムで解析結果が出ます。
※一部端末でうまく声の大きさが取得できないバグが確認できており、修正中です。
アイデアが決まるまで
ハッカソンで一番難しいのはアイデア出しだと思っています。
私達もめちゃくちゃ苦戦しました。
ハッカソンに出るぞと決めてから一ヶ月間ぐらいひたすらアイデアを考え続けて、最終的に以下のアイデアが出ました。
- イラストが機械学習できなくなるような人間には認識できないデジタル迷彩を入れるサービス
- 話したことを自動で良い感じに要約してくれるアプリ
- 自分を撮って送ると、例えば10キロ痩せたらこんな感じになるとかAIでイメージ画像を作成してくれる
- １キロメッシュのリアルタイム天気予測をして、雨が振りそうならすぐに通知をしてくれるLineBot
- 不動産のデータから、住もうとしている物件が相場より高いか安いかを判断する
- 自分の話し方の特徴を分析して、直すべきところを教えてくれるアプリ
そこで、技術的に可能＆＆できたら便利そう＆＆一日である程度完成できるぐらいの規模感のものということで、以下に絞りました。
- イラストが機械学習できなくなるような人間には認識できないデジタル迷彩で署名を入れるサービス
- 自分の話し方の特徴を分析して、直すべきところを教えてくれるアプリ
最初は、デジタル迷彩で署名を入れるサービスを考えていて、実は必要な技術検証や大まかな設計は済ませていたのですが、友人に相談したところ、「アイデア自体がネガティブぽい、話し方の特徴を分析するアプリの方がアイデアとしてポジティブ」 という意見をいただき、変更する事になりました。
これが結果的には本当に良かったです。当初のアイデアのまま行ってたら入賞しなかったと思います。
役割分担
役割分担は以下でした。
私
- アイデア出し
- スライドのデザイン
- デザイン
- webフロント全般
夫
- バックエンド全般
- 発表
- スライド作成（何を説明するかの構成）
基本は技術的にすごい部分は夫がすべて実装してくれて、私は発表スライドのレイアウトを整えたり、画面を作成したり、人が実際に見る部分だけを担当しました。
技術検証期間
アイデアが決まった時点でハッカソンの2週間前だったので、慌てて使えそうな提供技術を検証しました。
使えそうな技術を確認すると、CLOVA Speechのみだったので他のアイデアにすべきかなとも思いましたが、（複数の提供技術を使ったほうが入賞しやすい）今更他のアイデアもでないので諦めました。
ただ、その分CLOVA Speechに関しては絶対に賞を取ろうと決めていたので、必死にドキュメント読み漁ったり頂いたサンプルコードを動かしたりして検証しました。
そうしている間にリアルタイムの解析ができないことがわかり、試合終了しかけたのですが、そこは力でなんとかすることに💪
具体的には、音声を短く切ってポーリングしつつ、過去の解析結果と組み合わせて時系列解析を行い擬似的なリアルタイム性を実現することにしました。
こうして技術的に可能というところまでサンプルを動かして無事検証が終わりました。
以下のスライドの通り。
ちなみに上記の部分はほとんど夫がやってくれました。私はCLOVA Speechの大体の仕様を調べて、実現可能そうな方法を提案しただけです。笑
デザイン決め
私はデザインを頑張らないといけなかったので、検証期間を利用して流行りのwebデザインを調べてました。
調べていく中で流行りはクレイモーフィズムみたいな立体的なデザインが良さそうという事はわかったのですが、クレイモーフィズムだとポップな感じになりすぎると思い、今回は基本はニューモーフィズムで実装して、一部3D風のアイコン+グラスモーフィズムを入れて目立たせる感じに決めました。
ニューモーフィズムに関してはUI Componentsを作った際に実装したことがあったので、当日一日で実装することを考えると過去組んだことのあるデザインの方が良さそうという下心もありました。笑
テーマに誰も取り残さないデジタル化というのがあったので、説明文がなくても使い方がわかるように、できるだけシンプルに誰でも使えるということを意識して最低限の画面数でベースはニューモーフィズムにしようということだけ決めて、あとは当日の自分に任せることにしました。
ハッカソン当日
ハッカソンが始まってからはひたすら開発してました。
作成しないといけない画面はなんとなく頭にあったので、まずはテーマカラーを決めてそれに応じて組んでいくことにしました。
今回のメインとなるのはスピーチに問題があった場合にわかりやすく目立つワーニングを出すという部分だったので、ワーニングメッセージはアニメーションを多めにするということを意識しました。
また、ローディングに関してもできるだけかっこいい感じにしたかったので、波打つようなローディングに加えて背景のシャドウをネオン風にしてくるくる回るような感じにしました。
最後のチャートに関しては、Chart.jsをカスタムして使っています。
あとは大体できたところで謎に文字を凹ませてより立体的に見せたいという気持ちが湧いてきて時間もないのにtext-shadowなどを駆使して頑張りました。
以下のようにちょっと凹んだ感じを出したかったんです。笑
こうして色々こだわって作ったYOSOですが、最初にラフデザインということで作成したfigmaは以下でした。
あまりにもひどくて笑ってしまいますね。
夫に見せたら絶望してました。
これがこうなりました。
完全に火事場の馬鹿力です。
時間がなかったので実装しながらデザインを作っていったのですが、無事なんとか形になって本当にホッとしました。
夫はその間すごいスピードでAPIを開発してくれていましたので非常に助かりました。
データサイエンティストということもあり、夫はデータ分析にかなり長けているので、様々な手法を組み合わせてデータを分析し、正確性の高い指標を出してくれました。
試しにYouTubeで良いスピーチと言われているものや悪いスピーチ等様々な音声データを取得して確認しましたが、かなり正確でした。
特にフィラーの数や会話のポジティブさなどは非常にうまく取れていると思います。
こうして夫の協力のもと、CLOVA Speech賞の受賞と決勝進出を達成しました！
最後に
今回β版ということでリリースはしたものの、webアプリ化して実際に使うとマイクのついている場所や端末によって差異がある部分があり、特に音声の大きさはうまく取得できないことがあります。
その部分は決勝までに夫と相談しながら解決できるようにします。
また、より多くのデータを分析して精度に関してもより高めるつもりです。
フロント側としてはエラーハンドリングがまだ微妙なのでその部分も改良を行う必要があると感じています。
あとは夫と相談して追加で分析できそうな指標があれば追加する予定です。
まさか決勝に行けるとは思わなかったのでまだ慌ててますが、決勝まで開発を頑張るので応援してもらえると嬉しいです💪
ちなみにこれはハッカソン裏話ですが、このハッカソンではzoomのブレイクアウトルームを利用して行うオンライン展示会があるのですが、私達のルームはCLOVA Speechの方と審査員の方一人ずつが訪れただけで他は誰一人として来なかったのでかなり寂しかったですし、絶対決勝は無理だと思ってました。笑
（他のチームはルームに10人〜20人程度入ってた）
あまりにも直感的でわかりやすいUIにした結果、質問する内容がなかったから誰も入らなかったのかなあ？と今ではポジティブに捉えてますが、さすがに私達のブレイクアウトルームは過疎を極めていて展示会中の精神状態は非常に穏やかではなかったです。
そんな状況だったので、受賞＆決勝進出できたとわかったタイミングは訳わかんなくなって夫婦で飛び跳ねてました。笑
展示会が過疎っていても先にすすめるんだという良い経験？になりました！
決勝も頑張ります！
Discussion