オータムハッカソンに参加して優勝しちゃったやつ

タイトル適当です。はじめて書きます！

先日(2020/10/17(土)~18(日))でオータムハッカソンに参加し、なんと最優秀賞をいただくことができました！そのことについて、ブログに残しとくのええぞというチームメンバーのアドバイスを聞いたので、開発過程とか感想とかかいてけたらいいな～と思います（初めて書くのでなにかけばいいんかわからんのですが）。

 

経緯

 　いつもハッカソンに参加しているメンバー(yama)から、またハッカソンあるよ～と9月終わりくらいに言われたのが最初でした。開催時期が10月中旬でちょうど大学も始まってしまっていたのと（今期から研究室に配属されるからいつも以上に忙しくなりそうだった）、バイトで塾講師として働いておりちょうど3者面談を行う時期というのもあり、開発時間なさそうだから今回はやめとくわ～と断っていました。

　が、開催2週間前の日曜日、OpenHackU vol3の優勝記念も兼ねて（兼ねる予定はなかったけど）Cos5yearのチームメンバー3人で町田で遊んでた時のこと。。

 

yama「ハッカソンでね？？」

わい「いっちゃいやすか～～～」

 

　みたいな感じにノリで参加決定しました（対面で誘われたらそりゃ行っちゃうよね？？？）8月のサマーハッカソンにも出ていたので、そのリベンジというのもありました。

　その後ラーメン屋に並び（百名店に行ったのでくそ美味かった）周りの客がわちゃわちゃしゃべってる中ガチ議論してアイデアソンしました。なんか店員のおっちゃんが茶碗山盛りのチャーシューをサービスしてくれて、え！ありがとうございます！！！ってなりました。

 

開発したもの

　ここ最近のコロナ事情で講義でのグループ発表が増えてきたと思うんですが、「操作担当が1人ぜったい必要という事実」めんどくないですか？？　自分でスライド操作してしゃべりたいのに、画面共有してるのは他の人だから、スライド操作を委託するしかない、、、という状況に必ず陥ると思います。委託した人が捜査をミスるともう終わりです。「あ、ちょっと前戻ってください～」とか最悪の場合そのまま「スライドと説明が合ってねえ！！！」てことが稀にあります（知らんけど）

　てことで、スライドショー自体を共有できるWEBアプリを作ろう！（個人的にむっちゃ欲しかった）となり、作りました！！！

こちらです！！

 

便利だから使ってね！！！！（重要）

機能としては

  1. ルーム機能：PDFをアップロードするだけで部屋が作成できます。他の部屋にログインなしではアクセスできませんちゃんと。
  2. スライドショー共有:ページ画面を全員で共有、一人が画面遷移したら皆遷移する
  3. タイマー機能：今のところスタート、ストップだけ同期、リセットはまだ未同期
  4. チャット機能：暇だったからつけといたタイプのやつ、飾りフツーに動く

 

環境とか

一応初めてのハッカソンというテーマなので、全員が使ったことのないフレームワーク、言語を使って作ろう！となりました。こうやってあえて棘の道を進むドM気質が僕は向上していくために当たり前だけど、一番大切なことだと思っています。

具体的には以下のような構成で開発しました

フロント

  • フレームワーク:Quasar(初めて聞いた、難しいけど強い） ,vue
  • 言語:typescript(流行ってるらしいじゃん？？)

バックエンド

  • 全部Firebase Function
  • 言語:Javascript(正直jsで開発したこと皆無だった)

他データベースとか

  • Firebaseのやつ

とりあえずFirebaseとTypescriptマスターしようぜ！という方向性で決定しました。

 

開発記

本番は17~18日でしたが1週間前から事前開発OKとのことだったので、10日の土曜日から開発はスタートしました。

土日：

役割分担としては最初(1～2日目くらい？)はyamaがfirebase系とプロトタイプ作成を担当jimaがPDFを表示させるのの担当（これが一番ムズイ）、僕はサボって日比谷で映画と寿司食ってました（美味かった）。

土曜日に環境構築とかは僕がやったのでサボってはないんですが、ただまたやることなかったので動いてませんでした(調査はちゃんとしてたよ？？）。

全体的に最初の2~3日は調査メインでした、コーディングはほぼしてません。いかんせん全く使ったことない物だらけだったので、、

月曜日:

firebase系の調査がある程度落ち着いてきてたのと、最初のデプロイが行われたので本格的にコーディングが始まります。ここで僕は部屋作成、ログインの担当をします。

火曜日～木曜日：

この段階で役割がほとんどきりました、yama:デザイン(ロゴつくった）,jima:PDF表示（マジでムズイ）

僕:雑用(アップロードとか取得とか、バックエンドよりのいろんな処理)、水曜日はお酒飲んでました(うまかった)

木曜日にjimaの尽力によりとりあえずサンプルPDF表示には成功しました。しかしまだローカルPDFの表示だけで、取得PDF表示もスワイプ処理もできていない状況、、いけるか、、、？？

あとはアプリ名を考え始めました

金曜日:

わい:応援に駆け付け,PDFを取得して表示するところまで実装、あとの処理をjimaに託して寝る

yama:デザイン担当、彼がいなきゃデザインという概念は無かった。

jima:PDFを託した。

PDF取得はできたものの、いまだページ遷移はできず、、、まずない？？？？

でもそれ以外の機能はもうできた！

土:(本番1日目)

わい:再び応援を受け,PDFを表示、遷移、同期まで持ってく、（ほんっとうに今回一番難しいし、一番時間かかった）

yama:デザイン（ランダムアイコンとか）

jima:インターン

この段階で部屋作成からPDF同期まで、すべて繋がりました！

とりあえずやっと最低限の機能が揃った（遅い）！

日:(本番2日目)

yama:バグとり、スライド

jima:バグとり、スライド

僕:なんか色々追加した。

最終日は、開発する時間はそんなないはずなのですが、僕はほぼオールしていたので、最後のブラッシュアップを行いました。皆がある程度土台を固めてくれていたのでとても作りやすかったです（超重要）

 

時間は作るもの（オール）

最初時間なさそうだからとハッカソンの誘いを断りましたが、開発記見るとむちゃくちゃ暇そうやんお前！！！みたいになります。遊びも予定のうちという前提でお話すればとても忙しかったです。基本的に夜11時に帰宅するマンなので、コーディングは深夜1時頃から行い、気づいたら8時いたいな感じに開発していました笑

　正直本当に開発する時間ない（いつもは予定ちゃんとずらしてたけど、今回は唐突に決まったからずらせなかった）と思ってたのですが、深夜というボーナスタイムを使えば意外と確保できるなと思いました。広く言えば「隙間時間を作る」の一種だと思っています。効率よく生きるのに結構大事です（深夜はあまりおすすめしない）。ただ、コーディング自体はやはり楽しいので、そこまで苦ではありませんでした。というか苦であったら寝てます。

 

結果:

なななんと！！最優秀賞を貰ってしまいました！！！

↓当時のツイッターの様子

 

 

 

良かったところ（大事）

今回のハッカソンでよかったところを真面目に書いてみます。

最初3つはほぼセットなんですが、、

・最初から最後まで独立して作業を行えた

　今までのハッカソンだと、コーディングしてたら、あれ作業被ったやん！てことが結構ありました。が、今回はお互いが全く別の作業を行ったので、コンフリクトは起きませんでした。チーム開発では大きな成果物を作り上げるための結構大事な要因だと思います。今回でいうとyamaがデザイン、jimaがPDF,僕はバックエンド部分と全体的なサポート・ブラッシュアップです。

・こいつなら任せれるという信頼感

　自分の作業を行ってるとき、他メンバーの進捗を今回は気にすることがなかったです。なんだかんだやってくれると信頼しているので、集中して自分の作業に没頭することができました。1つ目の独立して作業を行うにもつながっくるものです。信頼があるからこそ、お互いが独立して作業を行える環境になる。

・自分ができるところ・作りたいものを作る。無理そうだったら引き継ぐ

　1つ目と被りますが、自分が得意なこと、できる作業を行っていくことが今回はできたのではないかと思います。それぞれに得意不得意があるので、なるべく全員の得意部分を活かせるよう、役割分担を行う必要があります。正直最低限の機能が完成したのはギリギリだったのですが、それより前にお互いが作りたいものを作っていたので、最低限の機能が完成した後はお互いの作ったものを繋げていくことによって、加速度的に完成度が高くなります。

  また作業を行っていて無理そう、、となったらすぐに別の人に頼み、違う作業に移行することができたのも良かった点です。

・実装済み、未実装の項目をまとめる

　なにごとも現状把握が一番大事です。

 

反省点（超大事）(心に刻んで生きる)

・遺言を残さなかった

　これは僕の大反省点なんですが、オール作業した後にその日何を実装したかの遺言を残す前に力尽きていたので、朝に他メンバーをこいつは夜なにをやったんだ？？？状態にさせてしまいました。まとめて後でやろうはやらないので、なにか1つ実装したら逐一共有するべきです。

・そもそもよく分らんかった

　そもそもtypescriptとcompositionAPIとquasarが未知数すぎてよく分からんかったです。初めてなのでしょうがないとは思いますが、それでもよく分からずにとりあえずコードを書いてしまっていたところもあります。何をやってる分からんコードを書くのは非常に危険（バグる）ので、きちんと理解してからやりたいです。

・ぎりぎりをを攻めていった

　最低限の機能が完成したのは発表前日だったのでちょっとギリギリを攻めすぎたかなと思います。お互いが独立して作業することはいいのですが、ぎりぎりにならないよう、期限を決めて、ここまでに実装できなかったらできるやつに任せる！みたいな風にしていくといいかもしれません。

・ソース管理が意外と適当でだった

　慣れのせいなのですが、今回GitHubでのコード管理がくそ雑でした（）

　今回はラインでやりとりできるのであまり影響はないのですが、実際の現場ではそうではないのかなと思うので、ちゃんとメッセージ書いていきたいです。。

・ファイル構成

　自分たちが分かればよかったので、ファイル構成が結構適当です。(そもそもvueでlayouts,page,componentの違い問題はあるけど)これもこのチームだから通じることだと思うので、他のチームの時はちゃんとファイルの場所と名前気を付けようと思いました。

・時間がない

そもそも今回時間がとれんかった！！！！余裕あるときにやろう！！！

 

プログラミングは資本！！

 　本番後の懇親会でサポーターズの三浦さんから色々お話を聞けました！その中でもプログラミングは資本と言っていたのが強く印象的で確かに～～となりました。

　プログラミングは今や扱えればお金を得ることができる、つまり資本で、その資本を持っていることで選択肢が増えるんだなと思います。この選択肢が増えるは、用は夢を切り開く力（大げさ）に直結して、僕はとても大事だなと感じます。塾講師をしてることと自身の経験もありますが、子供達の選択肢を広げてあげたい。と思うことがあるので、生徒にプログラミング（やる気あれば）教えてあげようかなぁ。。

　僕自身も資本獲得して選択肢を増やしていきたいなと思うハッカソンでした。開発は楽しいね、視力は犠牲になるけど、、。

 

↓資本の拡充を実感する人たち(再掲）