Open Hack U 2020 vol.3で最優秀賞をいただいたので色々振り返りたい

イベント 技術 チーム開発 日記


先日2020年9月12日に参加したOpen Hack U 2020 vol.3で最優秀賞をいただきました。まさか...という感じだったので、発表の時は思わず叫んでしまいました。

hacku.yahoo.co.jp

Gyazo



メンバーは前回の初めてのハッカソンの時と同じメンバーで、通算２回目のハッカソンです。

  • 　作ったもの

今回作ったものは、「写真あげMASKぁ〜？？」というWEBアプリケーションです。
いい写真が撮れても知らない人の顔が写っていたり、車のナンバーとかの個人情報が含まれていることがあってインスタにアップロードできなかったりする経験があると思います。私のインスタも全て風景です...
最近はSNSでの個人情報が原因とするストーカー被害もあるというテレビをやっていてそのような課題解決するアプリケーションを作りました。
モザイクだけではなく、スマイルのニコちゃんマークに置き換えるや感情認識をしてそれにあったニコちゃんマークに置き換える、文字をモザイクの機能があります。

デモ動画およびスライド資料&YouTube

OpenHackU.pptx - Google ドライブ

youtu.behttps://youtu.be/fpYDOsU1ut8


使用技術はフロント部分がVue.jsをメイン、サーバ部分がPython(Flask)をメインに使っています。画像処理や顔認識はOpenCV、AzureのAPI、サーバ環境構築はAzure static appとAzure web serviseを全力で使いました。

 

Gyazo

f:id:y_a_m_a_y_a:20200915212301p:plain

  • よかった点

  • アイデアをじっくり選定できた

よかった点はアイデア選定にすごく時間をかけることができたことがあげられます。
前回のハッカソンの振り返りで「使ってもらえるもの」という観点が足りなかったということですが、今回はアイデアを前半の半分近く、５日間ぐらいかけてしっかりアイデア選定して土台をしっかりと作れたのが大きいのかなと思います。

  • ユーザが簡単に使うことができた

今回の評価のしていただいた点として、「簡単にフィルタリングできる」ということがあります。ユーザ視点として、「自分たちが開発後も使いたいもの」を作るという目的もあったので、そこが生きていたのかなと思います。

はじめは画像を扱うのでスマホアプリでもいいかなと考えていたのですが、インストールの手間がユーザに使ってもらうハードルになりうるのと、技術的にどうさわればいいのかわからなかった、Vue.js使えばぬるぬるサイト作れる！！ということでWEBアプリケーションとなりました。（サーバでOpenCV使う環境構築が意外とハードルでした）

 

  • 作り込むことができた

私は、サーバ系をメインでやったのでわかりにくいのですが、アプリケーションを作り込むことができたことが今回の評価に繋がったのではないかと思います。
homeのページの使い方や説明の作り込みや、顔選択のボタンの工夫（例えば顔の数が多い時は、デフォルトでチェックがついているなど）です。
私はフロントに関してデバッカとしての役割が多く、使いにくいところとか機能についてめっちゃ色々issue立てたり要望していたので、文句だけ言う人間になっていました。
サーバ側としては、顔認識の枠付けの文字サイズや枠線の太さ決定のアルゴリズム、モザイクかける長方形が斜めの時の回転のアルゴリズムなど色々作っています。

 

  • 　これからの課題

画像のアップロードの時間が画像サイズに依存する

今回は1日限定で１ヶ月３万円の超強強サーバを用意しているので、そこそこ早いのですがまだ、アップロードには時間がかかる形でした。

 
高速モードを選択すると、画像の画質を下げたり、サイズを小さくする処理を行ってから実行するので時間は少なくなるのですが、できるだけ画質劣化を行わないで高速にできる仕組みを考えねばと言うのがハッカソン直前に思ったことでした。

  • TwitterAPIやインスタとの直接の連携
  • モザイク種類の増加
  • 自分で選択してモザイクをかける場所を選択できる機能
  • LINE BOTなどの対応（より使いやすくなる）
  • 動画への対応

などが拡張性として考えているところです。

 

  • 　反省点

  • バグだし

一部のスマホで動かないケースがあると展示会で報告を受けました（最後の１時間でプッシュしたことで何かが変わってしまっていた...)
直前まで編集し続けるとこんなことが起きてしまうので、
安定板を当日朝までにリリースすることの大切さを知りました。GitHubのrelease機能バックアップをとっておくのにめっちゃ便利でこっからバシバシ使っていきたい。

 

直前のアップデートはできるだけ避けよう！！

 

  • サーバの環境設定

サーバの環境設定やエラーで時間が食うことが多かったことです。大半は仕方がないことではあるのですが、サーバの環境構築はおそらく一番嫌いかもしれないです...インフラ系は難しいなと感じました。

  • テストコードを同時に書こう！

サーバ側を開発する上で感じたのは、開発したらテストコードをしっかり書こうと言うことです。今回はプログラムの下に、関数が動くかどうかの確認関数だけを書いたり書かなかったりしていたので、しっかりとプログラムを分けて、関数を呼び出す形で書くほうがいいと思いました。この前サーバ側のワークショックで使ったSwaggerUIとかの使用してデバックをしやすい環境を作りたいなと感じました。画像データをPOSTするのはそこそこ大変でした。

 

  • 設計をしよう！

展示会で他のチームを回っていた時に、ちゃんと設計をやっているチームがあって、重要だなと感じました。今回は二週間と期間が前回よりも長めなので、シンプルな構成でもAPI戻り値のやり取りを実装前に設計するのは良さそうと感じました。
今回の開発の終盤の時に、機能を追加するために戻り値を増やすと言う少し危険なことをしていた（機能追加でエラーが起こる可能性が高かった）ので、そのようなことを防ぐために重要だと感じました。

 

  • もっとサポーターの方に細かく相談すればよかった。

今回開発中盤にあった「なんでも相談会」で１時間近く企画面から技術面、発表の方向性やアイデアの発展性、追加機能など様々なアドバイスをいただいて開発の方向性が固まったと感じました。一方slackでの質問などは使わなかったためもっと使わさせていただけばよかったかなと思いました。懇親会でご一緒したチームではslack質問フル活用ですごかったと言う話をしていました。展示会でのフィードバックなど実際に完成版としてリリースする時に役立つので、アプリのクオリティに繋がると反省です。

 

  • プレゼン上手くなりたい！

タピオカのところがうますぎたので、あれくらい人を惹きつけるようなプレゼンがしたいですね。最初に普通に煽っていたので記憶に残りやすいとは思ったのですが、あれができるのはすごいと思いました。私は今月末に技育展で登壇するので、上手く喋ることができるくらい練習したいですね。

 


少しずつエンジニアの開発と言うのがこの夏にわかってきたなという感じです。この半年ハッカソンに初めて参加してから、Azureとかのクラウド技術からGutHubの使い方、チーム開発や綺麗なコードをかく（今回はわからなくなることはなかったが、ドキュメントがあるともっとスムーズになると感じた）ことを学びました。
やってみようぜ！ってノリで始めたものがどんどん繋がって、新しい学びにも繋がって、良い循環を作り出し始めているなと感じます。

 

9月26日には技育展での初登壇、今回のハッカソンの副賞でもある12月ぐらいにあるHackDayへの参加など、これからも色々イベントが待っています！！

 （ちなみに「はじめてのアウトプット」枠の一番最後です！！）

 

HackDayは年齢制限なしのガチ勢たちとの熱い戦い、技術力やめっちゃいいアイデアでガチンコ勝負できたらなと思います。（めっちゃ楽しみ）去年の優勝副賞はテキサスにいけるやつだったらしいので、優勝目指して準備していきたいなと思っています。

 

Neural Computer Stick 2は以前OpenVINOを触った時に欲しいなと思っていたものなので、めっちゃ嬉しいです。機械学習の実行の時にあるとつよつよになれるので、めっちゃ嬉しい。OpenVINO環境構築が今までで一番めんどくさかったけど、速度は早いので強い。

 

ハッカソンに参加して思うのは、ものづくりって楽しい！と言うのと、３年間勉強してきたことが普通に役立っている！！と言うことです。
作っている時はそこそこ辛いのですが、発表をしてフィードバックがあると色々楽しいなと感じます。また、参加することで今まで見えなかった課題や大学での勉強の共通点がみたいなものが見えてきて面白いですね。
今年はオンラインなので、東京だけではなく全国の同年代の学生と話せるのも魅力です。
今回は、優秀賞２つが出た段階で諦めムード（優秀賞２つのクオリティってすごいなと思い見ていたので）、まさか最優秀作品賞をいただけるとは思っていなくて、発表の時心臓が飛び出るかと思いました...

これを糧に次のイベントや開発や勉強を頑張っていきたいです。