kmgkのblog

6/27-29 に開催された Flutter を用いて開発するハッカソンに rafekun, kashiwa, kmgk(著者)の三人で参加してきました。

公式: https://flutterhackathon.com/#/

ハッカソンに参加するのは実質初めてで、しかも今回はオンラインでの開催だったので非常に貴重な体験が出来たと思います。

「Saving the planet」「Retro / Cyberpunk Future」の二つのテーマがありましたが Retro でいいアイデアが思いつかなかったので Saving the planet の方を選びました。

作ったもの

「Saving the planet」→ 環境をよくしたい → エコな行動を促進する何かを作りたい、という感じでエコ活動を共有する twitter ライクな SNS アプリを作成しました。

ただエコな活動を共有するだけではつまらないと思ったので、エコではない活動(蛇口を閉め忘れたとか)も共有できるようにしました。

エコではない活動を共有することによって Karma Point というものが溜まっていき、それをエコな活動で打ち消す、っていうのがメインコンセプトなんですが紹介動画を作っている中でコンセプトわかりにくいな～って思っちゃいました。

多分 ↑ 読んでもよくわからないし、アプリを触ってもよくわからないと思います(ダメじゃん・・・)

アイデア出し

そもそもチームメンバー集まらなさそうだな～と思っていたので、テーマが発表された日(確か 26)から一人でそれっぽいアイデアを考えていました。

それで上のコンセプトでいこう！ってなったときにメンバーが二人も参加してくれたので、そのまま僕の考えた案が採用されました。二人には少し申し訳なかったです。

ちなみにほかに思いついたアイデアとしてエコな活動イベントを簡単に宣伝できるアプリ(connpass みたいなやつ)とか自分が掃除した場所をマーカーで協調できるマップアプリとかがありました。

技術選定

チームメンバーがみんな慣れ親しんでいる技術ということで、クライアントを Flutter、サーバーを Firebase とありきたりの組み合わせで行くことにしました。

改めてこの組み合わせは開発効率がいいなと思いました。爆速でしたね(コードがきれいとは言っていない・・・)

情報共有

オンラインなので普通より情報共有が大事です。僕たちは以下のツールでやり取りしてました。

ワイヤーフレームとか ER 図とかは draw.io
雑にメモとかは hack.md
連絡は slack
通話は whereby.com。僕が常にルームを開けっ放しにしておいて何か質問とかあったらそのたび通話するって感じだった。

後述するのですが、情報伝達が少しうまくいかなかったが反省点です。

役割分担

かなりザックリですが僕が DB 操作などのロジック担当、他二人は UI を組んでもらうことにしました。が僕の作業がすぐ終わってしまったので僕も二日目から UI を書いてました。

また flutter analyze を PR 出すたびにかけてくれるよう rafekun が github actions を設定してくれたりもしました。PR 出したら即マージしてたので(良くない)なかなか有効活用は難しかったですが・・・

また僕が Android, web で、他二人は ios で開発していました。当初は web を開発するつもりは微塵もありませんでしたが、Opening Ceremony のライブでいきなり公式が「Web 版もあったほうがいいよね(意訳)」と言い出したので急遽作ることにしました。

僕たち三人とも素人に毛が生えてすらないレベルなので、強そうな人の記事をみてそれっぽく実装しました。

基本的には上位に Provider を置いて、下位層でそれを呼び出すだけみたいな感じです。正直これでいいのかなと思うときもありましたが、まあハッカソンなので完成させることが大切だと割り切りました。

紹介動画制作

残り 9 時間くらいで当初予定していた機能は全て実装し終え、仕事がなかったので僕が動画を作ることにしました。基本英語でやり取りがされていたので当然動画も英語かぁ・・・となりましたがちょっと前に話題になった DeepL と Google 翻訳の二刀流で何とかなりました(英語がわからないので何とかなったのかはわからない)。

英語の読み上げは https://ttsmp3.com/ という web サイトを使いました。たまにチュートリアル動画で使われている音声だ！と聞いた瞬間に分かりました。

デモ動画はどこかで 1 分にまとめろという記述を見た気がするのですが(いまだに発見できず)多くの人は普通に 3 分とかでした。めちゃくちゃ切り詰めた僕の努力は一体・・・

ちなみにツールは aviutl という無料のツールを使用しました。

紹介動画:　https://www.youtube.com/watch?v=ZePwm99YHn4

反省点

箇条書きで

当初一人で開発するつもりだったので情報共有の手段をあまり考えていなかった。自分がわかっていることが相手はわかっていないことをわかっていなかった。
↑ のせいで多くのタスクを僕が担当してしまった。タスクの割り振りにもう少し時間を割くべきだった。
通話をもう少し活用するべきだった。
結果論だが完成物のレベルを低く見積もりすぎた。時間は大量に余っていたのでもう少し機能をリッチにしたり UI を改善すべきだった。
Dart / Flutter の理解が絶望的に足りず、そこで無駄な時間を費やしてしまった。
はじめに UI を丸投げしたのは無責任でよくなかった。

アプリ制作を完走した感想

初めてエンジニアとしてハッカソンに参加したのですが、やっぱり何かを誰かと一緒に作るのは楽しかったです。アプリが無からどんどん形になっていくのを見ていて「これが開発か・・・」となりました。いろいろ学ぶことや反省点も多かったので、これを糧に精進していきたいです。

英訳

medium.com