はじめに
レッドハッカソンオンライン2020に参加しました！
レッドハッカソンとは
広島県とHMCN(Hiroshima Motion Control Network)さんが主催するハッカソンイベントで、エンジニアだけでなくデザイナーやプランナーとしても参加ができます。
今回はコロナの影響でオンランでの開催でした。 今後ハッカソンはオンラインが主流になっていくのでしょうか...
オンラインでの開催ということもあり、広島以外からも参加する方が多く参加者約40人となかなかな規模のイベントでした。
アイディア出し
テーマは
「人々が安心して外出できて集うことができる日」が来たときに始めたいサービス・プロダクト
オンラインということで、以下のようにアイディア出しが行われました。
- 参加者がGoogleSlideの自分のスライド(１枚)にアイディアを書いていく
- 1分間のピッチ
- 各自３票投票
- 上位のアイディアを選出し作りたいプロダクトのチームに参加 or どうしても作りたい場合は新しくチームメンバーを募集
私は大学の先輩で今年新社会人のみやぎさんのピッチで「あ、これ作りたい！！」と思いました。 もともと投票では上位アイディアとして選出されませんでしたが、 私からみやぎさんを逆指名してチームに参加しました。
(あとあと、みやぎさんが自分の逆指名メッセージを見たのではなく、
みやぎさん自身もどうしても作りたくメンバーを募集したことがわかりました笑)
顔バト
メンバー
みやぎさん(@daking1756)と去年広島エンジニアハッカソンで知り合ったたぞえくん(@jdkfx)と自分の３人でチームを組みました。 お互い顔馴染みではありましたが、開発をともにするのは初めてでした。
ツール
今回のハッカソンではプロダクトの中間発表の時間以外は開発スタイルやつかうコミュニケーションツールなどの指定はありませんでした。 Cammel🐫でも4月からフルリモートでの開発が始まり、コミュニケーションツールとしてDiscordを使っています。 (Cammelでの話は別の機会にでも書けたらと思います)
私たちのチームでもDiscordを活用することにしました。
モブプロ導入
今回のプロダクトはみやぎさんがおうちハッカソンで開発されたものを発展させて制作しました。 根幹の部分は既にみやぎさんが実装されていましたが、以下の点で問題が残っていたようです。
- 通信をして写真を撮り結果を表示する際、「撮影」をした側でしか画像とその評価結果が表示されない。
まずは、システムの構成を理解することも踏まえ簡単なタスクをモブプロでこなし、開発環境になれてきたら分業する方針を提案しました。
モブプロ(モブプログラミング)とは、
実際に手を動かし実装をするドライバーとその後ろから実装のアドバイスや先回りをして調べたりバグを仕込まないようにドライバーを助ける複数人のナビゲーターに分かれて開発をする手法です。
(モブプロのワークショップに参加したときの内容をコチラに書いています。ご参照ください)
オンラインでも画面共有をすればモブプロはできます👍
「招待URLをクリップボードにコピーする」を最初のタスクにし、
- ドライバー：たぞえくん
- ナビゲーター：みやぎさん、kugi
で開発スタートしました。
Firebaseの導入でつまる
たぞえくんはバイトがあったので初日の中間発表以降はみやぎさんと二人で開発しました。
次のタスクは、「お題の情報を通信者間で共有する」です。
現状のシステムとして、撮影を押した側でお題の表情が決まりそのお題が共有されていませんでした。 hostingにFirebaseをつかっていたこと、またお互いFirebaseを使うことが多かったことから、 データベースにはCloud Storeを使うことにしました。
しかし...
なぜか以下のエラーが
The Cloud Firestore API is not enabled for the project
プロジェクトを最初から立て直してみたり、以下の記事を参考にCloud API Managerを確認しににっても有効にはなっている qiita.com
１度はデータを送信できてもまた同じエラーが出てしまいました。
この時点で深夜１時で進展がなくお互い疲弊していました。 とりあえず見栄えや体裁を整えることにしようとFirebaseは一晩寝かせることにしてUIやアニメーションに取り掛かりました。
最終日
初日？は３時に手を止め残ったタスクから逆算して７時に起きればなんとかなりそうとわかったので７時から再スタートすることにしました。
朝起きて試しに寝かせておいたFirestoreにデータをプッシュしてみると...
なんか動いた!!!🙌
昨日の心配はなんだったんだと言わんばかり普通に動いてくれたので安心しました。
Firebaseについて深堀できたので良しとします。
逆算して見積もりをしたおかげか、なんとか動く状態で割と余裕を持ってプレゼン準備をすることができました。
各チーム本当にいろんなプロダクトを開発されていました！ 特に自分が気に入ったのは最優秀賞とオーディエンス賞を獲得された「ガヤ人形」です。 プロダクトもスライドも発表も素晴らしかったです！！
チームリーダーのtantanさんが参加レポートを書かれているのでご参照ください。 tantan.work
私たちのチームは賞を受賞することはできませんでしたが、久しぶりのウェブ開発であったり、新しいチームでの開発はとても楽しかったです！
まさかの(時差)受賞
ようやく2日間のハッカソンが終わり、ちょうどスプラ２のフェスがやっていたので友人と遊んでいるとみやぎさんからDiscordで報告がありました。
友達とスプラフェスしててたわ
— kugi (@kugi_masa) 2020年5月24日
まさかの特別審査員賞を受賞することができました。 月刊アスキーの遠藤様ありがとうございました！！
まとめ
広島に来て５年目ですが、レッドハッカソンは初参戦でした。 オンラインのハッカソンということで運営の方々もかなり大変だったと思います。 運営のみなさま本当にありがとうございました！
オフラインでのハッカソンに越したことはありませんが、これからのハッカソンやイベントのあり方そのものが変わっていくのかもしれないなと感じました。
ハッカソンが終わったあとも実は開発を継続しています！
やったこと
- レッドハッカソンオンライン2020に参加
- 顔馴染みのメンバーで開発
- 久しぶりのWeb開発
- モブプロ導入
わかったこと
次やりたいこと
- CIの導入
- 再戦ができない状態なので改善
