NEWSニュース

2020.01.09

TECH BLOG

日本最大級のハッカソン「HACK DAY 2019」に新卒だけで出場してみた話

こんにちは!CAM19新卒エンジニアの藤本です。

12月14日、15日に開催された日本最大級であるハッカソン「HACK DAY 2019」に出場してきたので、CAMから参加したチーム毎にレポートを書いていきたいと思います。

 

出場の経緯


以前から力試し、自身の知識と技術のアップデートとしてハッカソンにはよく出場しており、そんなハッカソンの中でも日本最大と言われるHackdayは憧れであり、いつかは出場してみたいと思っていた大会でした。

それに共感してくれたのが今回のメンバーです。CAMに19新卒エンジニアとして入社、研修から始まり、現場を経験すること早8ヶ月。全員がこの期間で培ってきた技術力を証明したい、業務以外にもアウトプットしてチャレンジをしていきたいという思いが一致してHackdayに出場することを決意しました。

 

メンバー紹介

左から

濵口(今回のサービス作りのテーマ「米津玄師」似のエンジニア。前髪で目が隠れがち)

畠山(CAMのポケモン大好きっ子エンジニア)

盛小根(CAMの猫好きエンジニア。猫吸い歴10年)

藤本(CAMのメタル大好きエンジニア。最近「AWS」を早口で言うと、「ありがとうございます」に聞こえることを発見)

東山(CAMのお酒好きエンジニア。ウォッカのストロングゼロ割(ウォッカ2:氷3:ストロングゼロ5)を飲むのが趣味)

川津(CAMのガジェット好きエンジニア。キーボードのストロークは1mm単位でわかるぐらいの繊細さを持ち合わせている)

期待の会場入り


開催当日。

とても出たかった憧れのハッカソン。やる気と希望を胸に会場入り。入り口には「HACK DAY 2019」の看板が。

そこにはなんと…わくわくさん(本名、久保田 雅人さん)が!!!

ものづくりのレジェンド、工作界のテックリードとしても知られるわくわくさんが審査員として参加することを知り、僕のワクワクも止まりません。わくわくさんを発見しテンション高めに会場へ入ると、顔認証のゲートやCOMPエリア、入口付近に巨大な機械を持ち込むチームなどが目に入り、今まで参加してきたハッカソンとは異なった雰囲気の会場に驚きました。

サービス


僕たちのチームはとある有名なアーティストをテーマにサービスを作りました。それは「米津玄師です。なぜ米津玄師をテーマにしたかと言うと、チームに米津玄師似のメンバーがいたから、という単純な理由でした。

そんな単純な理由でいいのか?いいんです。ものづくりは自由な発想から生まれるってワクワクさんも言っていたでしょう?

そこで、米津玄師の特徴をあげていくと…

●全体的に黒い

●前髪が長い

●歌がうまい、踊りもうまい

●レモン

●世界観が独特

●徳島県出身 etc…

どれもポジティブなものばかり。

僕たちは米津玄師が「ポジティブのシンボル」という面を生かして、世の中のネガティブなものをポジティブにシフトさせるプロダクト開発をすることにしました。そしてそれはどんなサービスかと言うと、世の中にないもの、そして現代の世の中で解決すべき問題に対してビックコンテンツで立ち向かう、「SNSで投稿する際に炎上しそうな文章や画像を検出させ、その内容を米津玄師っぽく変換しリスクを回避するサービス」です。

システム


アーキテクチャはこんな感じです。バックエンドはAWSのサービスを用いて構築しています。

非常にシンプルな構造になっています。(S3は画像を保存するだけで終わってしまいました(笑))

フロントとバックエンドに分けて説明していきます。

 

[フロント]

フロントエンドはJavaScriptのフレームワークであるVue.jsを使用して開発していき、開発時間もタイトだったので、速度優先の脳筋実装になりました。状態管理はVuexを使用し、ルーティングはVueRouterを使用して実装を行いました。

また、HTTPクライアントにはaxiosを利用し、API通信を非同期処理で行いやすくなるようにしました。

その他にも、jsコードのバンドルツールはwebpack、タスクランナーとしてnpm scriptsを導入しました。

作成したwebのviewはこんな感じです!

ユーザーに入力してもらったtext(またはimg)をAPIを介してバックエンド側に投げ、その解析してもらった値の結果により表示を変化させていくようになっています。vueは構築が簡単なので小規模開発には向いてます。

 

[バックエンド]

バックエンドはサーバレスで構文解析と画像解析で別個のAPIを作りました。Lambdaの処理はpythonで書きました。構文分析は、フロントから送られてくるtextをComprehendで感情分析と構文解析をしていきます。

感情分析した結果negativeの値が閾値を超えたとき構文解析でキーフレーズを抽出して、そのキーフレーズのnegativeの値が指定した閾値を超えたら、そのキーフレーズを米津玄師を連想させる文言に変えて元の文章に埋め込みフロントに返します。

画像分析も同様に、フロントから送られてくるimageをRekognitionで解析して、negativeの値が指定した閾値を超えたとき米津玄師で連想できるような画像を返すという内容です。

Comprehendの日本語解析は2019年の11月に発表されたばかりで、最新のサービスです。まだ日本語の精度は低いのですが、これからのアップデートに期待です。

こちらが実際の動作です。(※こちらの動画は一部、携帯電話ではうまく表示されない可能性がございます。)

 

適切ではないと判断された画像は米津玄師の象徴でもある”レモン”の画像に変換されます。ちなみにバックグラウンドで流れている曲もGarageBandで作りました。

 

メンバーの感想


藤本:HACKDAYくらい大きなハッカソンともなると、奇天烈なアイディアで作品を作るチームが多く、インパクトで既に差をつけられてしまいます。webサービス一本で立ち向かうことの難しさもあるので、次回はハードを使った作品を考えようかなと思いました。ハッカソンの経験も積んできて、短時間で形になるものを作る能力が付いてきた反面、面白いアイディアを思いついても、それを実行し切る技術力が無いことを実感します。日々のインプットとアウトプットのサイクルをもっと意識していきたいと思います。

 

川津:作業スペースにつくと楽器やトースターなどPC以外のものが目について、普段Webサービスを作っているので「Web関連」という固定観念があったことに気が付きました。時間感覚も24時間という限られた時間で進める必要があるので、チームで細かく話し合い、認識をあわせていくことの大切さを感じました。短期間で0から形にしていくことが業務やISUCONと違ったので楽しかったです。またドキュメントを見ながら新しい技術にも触れることにも慣れました。

 

盛小根:私は今回初めてハッカソンに参加しましたが、想像以上に参加者のレベルが高くて驚きました。また、WebだけでなくVRやIoT、その他ハードウェア等の作品もあり(むしろそっちの方が多かった)、普段触れることのない様々な技術を間近で見れたのはとても貴重な経験だったと思います。開発の楽しさを改めて実感した2日間でした。

色々技術書を読み漁ることも重要ですが、実際に作ってみる方が成長スピードも圧倒的に高いので、これから新しい技術を学ぶ時は成果物(目的)を作ることを意識していきたいと思います。

 

畠山:僕も初めてのハッカソンでした。他チームは楽器やVRなど様々なアプローチで作品を完成させたいて、そのレベルもかなり高く驚かされました。そんな中、僕たちは時間を意識し過ぎてしまったため、無理な実装をしてしまう箇所もありました。次回ハッカソンに出た際にはもう少し技術面を意識して開発できるようにしたいと思います。コンセプトが面白いと僕たちのブースに足を運んでくれる方も多くいたので嬉しかったです!

 

東山:人生初ハッカソンでしたが、めちゃくちゃ楽しかったです!チームで協力しながらモノづくりを行う楽しさを再認識することが出来ました。賞は取れませんでしたが、自分たちのブースを見に来てくれる人たちが多数いたので参加した甲斐があるなと感じました。また他のチームの方々や、普段触れない技術についても学ぶことができました。

 

濵口:今回題材が「米津玄師」ということで一番張り切ったのではないかと思います。

最後のプレゼンはniconicoでも配信されていて、ところどころに散りばめた小ネタに気付いてもらえたり、デザインが好きというコメントももらえたりしたので賞は取れなかったですが頑張った甲斐があったように思います。今回みんなで機能もデザインも考えて実装しましたがディレクターもデザイナーも偉大だな、と改めて思い知らされました。また、ハッカソンという性質上、今回は実装をやりきることを第一に考えていたので次回はもっと技術的なチャレンジをしたいと思います。

 

最後に


ハッカソンに出場するたびに自分達の課題が浮き彫りになっていきます。前回見つけた弱みを潰して、次々と大会に出場することでスムーズに開発ができるようになります。また開発規模や、自分自身で作りたいものを形にしていく能力が身についていくことを実感することができるので、ハッカソンは有意義でやめられません。

また出場します。