今回、初めてハッカソンに同じ大学の人と5人で参加しました。その開発過程や様々な苦労を書いていこうと思います。初心者でもどの程度ハッカソンで戦えたかをリアルにお届けします。

結論から言うと、めちゃくちゃ楽しかったです！！ほんとに参加してよかったと思える充実した期間でした。

初ハッカソン

今回たまたま授業が同じであった人たちとご縁があり、5人でチームを組んでハッカソンに参加しました。参加したハッカソンはサポーターズが主催している技育Campのマンスリーハッカソンです。

このハッカソンは土日の2Daysでオンラインで行われ、事前開発期間は1週間ほどあります。テーマは特になく、自由にチームごとがテーマを決めて、開発できます。私を含め、初心者、一回目の方も半数以上いて、同じ大学生や専門学生が多く、わからないことがあったら質問できる環境が整っています。ほんとに初心者に優しいハッカソンとなっているので、少しでも気になっている方がいるなら勇気を出して、飛び込んでみてほしいです！！

チームメンバーの概要
・自分（学部3年）
Python：少し開発経験あり、Flask経験なし
HTML,CSS：ある程度かける
Javascript：Webサイト作成で使うくらい

・A(大学院1年）
Python:研究で使用、Flask経験なし
HTML,CSS：なんとなくできる
Javascript：勉強中

・B(大学院1年)
Python：基本的なところだけ
HTML,CSS:できる
Javascript：Web制作に使うところならできる

・C(学部3年）
Python：簡単なアプリなら、Flask勉強中
HTML,CSS:できる
Javascript：簡単なアプリなら
SQL:大学でやったくらい

・D(学部3年）
Python：基礎くらい、Flask経験なし
HTML,CSS:できる
Javascript：初心者
SQL:大学でやったくらい、得意意識あり

実際に作ったもの

わたしたちのチームで実際に作ったのは、「ChatGPT」と「Stable Diffusion」の機能をWeb API経由で利用できるSDKである「stability-sdk」を用いた自動生成絵日記、その名も「ちょこっと絵日記」です。

上のような画面でChatGPTの質問にユーザーが答えると、以下のように、勝手に日記の内容やタイトル、それに沿った絵を生成してくれます。ChatGPTとのやり取りは音声、文字入力どちらも可能です。

パスワードをハッシュ化し、ログイン機能も実装し、ユーザーごとにデータベースも分けました。

短い開発期間の中でもUIまでしっかりと時間をかけ、完成度の高いプロダクトにできたと自分自身でも思います。当初の最低目標であった最後まで作りきるという目標を達成できてよかったです。

システム構成は以下のようになっています。

開発過程

アイデア出し

事前ガイダンス終了後、開催日の9日前、事前開発期間が開始後、私たちのチームではブレインストーミングで意見出しを2日かけて行いました。やるなら最優秀賞を狙おうということで、過去の賞を取ったプロダクトや審査基準を見て、とにかく真新しい、面白いものにしようという方向性で意見を出し合いました。正直全員初めてのハッカソン、チーム開発のため、これで正しかったかはわかりませんが、個人的にはよかったと感じます。また、このアイデアを何にするかはかなり大事で、時間をかけるべきだと感じました。

アイデアの中から多数決でchatGPTが質問し、今日の出来事を掘り下げてくれて、自動で日記を作成してくれるサービスというアイデアに決定しました。

いざ開発！！

技術選定の結果、大学の授業でPythonを主に使うということから、FlaskでWebアプリケーション開発をすることに決まりました。ちなみにFlask自体はほぼ全員触ったことがないという状況だったので、ほんとに勉強しながら開発を進めるという感じでした。
自分の場合は3時間ほどYouTubeで勉強して、すぐ開発に入りましたw

タスクの分担について
苦戦したところはタスクの分担です。一般的にはバックエンド、フロントエンドで分けるなどすると思いますが、全員が別にどちらが得意などなく、小規模開発であるため、試行錯誤の結果、機能ごとに分けるのがよいと判断しました。結果、最後バックエンドとフロントエンドつなげる作業などはいらず、変なバグも起こりませんでした。（ほかのチームの話だと、最後のつなげる作業でバグが大量発生して、詰んだor詰みかけたチームもちらほら）

タスクの分担にあたり、必要最低限のタスクを挙げていき、そこを全員で分けて、終わったら次のタスクというように開発を進めました。基本毎日、夜にDiscordで集まり、進捗確認と次のタスクを決めるということを繰り返しました。必要最低限なものを優先するというのはとても大事だと感じました。

GitHubについて
また、初心者で苦労するのはGitHubかなと思います。チーム開発においてGitHubは欠かすことのできないもので、そこの勉強も別途必要となります。pull requestを送って、承認してもらい、マージするであったり、ブランチの使い方など初めてでわからないことだらけでしたが、使っていくうちにいつもやることは大体同じなので慣れていくと思います！！

開発に詰まったら…
開発で分からないことがあった場合や他人のコードが理解できないときは基本、ChatGPTに聞いてました。完全な回答が返ってくるとは限りませんが、ヒントにはなるので、そのワードからネット検索すると以外と情報が載ってることも多いです。ChatGPT最強！！

開発スケジュールについて
私たちのチームは早い段階から始めていたり、スムーズに開発が進んだこともあり、時間的には余裕をもって、開発を進めることができました。しかし、おそらくこれはレアパターンであり、こんな短い開発期間だとある程度完成に持っていくには結構余裕はないと思います。一週間はハッカソンのことしか考えない（考えられない）ぐらいのスケジュールの余裕も必要です。

心残り
できなかったこととしてはデプロイです。デプロイ想像以上に難しく、ダメでした。時間があったら、ハッカソン外でデプロイしたい！！

ついに発表

最後、発表が2分間ありました。自分も知らなかったのですが、この発表が賞の受賞を目指すにあたってはかなり重要となります。いくらプロダクトの完成度が高くても、この2分間で伝わらなかったら、意味がありません。なので、発表を軽視せず、しっかり時間を使って、内容を練ることが重要です。スライドも全チームかなり凝っていたので、スライド作成にも時間をしっかりかけたほうがいいです。

ちなみに自分たちのスライドはCanvaで作りました。

全員の発表を見た感じ、みんな完成度が高く、とても面白い発表でした。感心するものばかり

結果発表

全員の発表を見て、審査員の票と参加者全員のアンケートをもとに賞を決定するという感じでした。他にも別に企業が選ぶ賞もあります。

ちなみに私たちのチームの結果ですが、残念ながら賞には選ばれませんでした…
甘くないですね～、かなり完成度が高く、多少自身があっただけに悔しいです。次参加するときは賞取りたい！！

懇親会

結果発表の後、参加者同士で親睦を深める場がありました。せっかくなので、自分も参加しました。
いろいろな背景を持ち、様々な学校、地域から参加してる人との交流はすごく刺激になりました。同じ大学生、専門学生が多いので、話しやすく、他のチームの裏話なども聞けて面白かったです。

中には、10回以上参加の猛者や発表前日までチームの作るものが決まってなかったチームまでw

感想

初めてのハッカソンですごく不安が一杯でしたが、実際やってみるとすごく楽しかったです！！チーム開発だからこその楽しさだったり、限られた期間で目標をもって取り組むので、すごく有意義な時間が過ごせ、圧倒的な成長を得られたと思います。これは個人でやってるとえられないと思います。ハッカソンに参加するということはみんな基本開発意欲が高いのもすごく刺激になりました。また、自分たちのプロダクトを見て、自分でもこんなプロダクトを作れるんだと感動しました。賞は取れませんでしたけど、すごく満足いく出来で、賞を取ったプロダクトと比較しても遜色ないものができたと思ってます。

また機会があったら、参加したいです！！チームを組むのは意外と大変なので、次は一人で参加して、知らない人とチームを組むのもありかなと思っています。次こそは賞を取る！！

追記

ここからは完全に自分の記録用です。殴り書きです。

自分の開発で苦戦したところ

・ページを開いているようなアニメーション
現在のページを起点に、そのひとつ前と後のページを日付基準でもってきて、その前と後のページはdisplayをNoneにして、非表示にし、次のページへ行くボタンが押されたら後のページを表示し、前のページへ行くボタンが押されたら前のページを表示するようにして、ページが開いているアニメーションの最中にでも次表示されるページが見えるようにした。また、cssのperspectiveというところをいじることで奥行きが生まれ、よりページをめくっている感を出せた。

・絵を生成する
なんかいいAPIを探していたところ、stability-sdkなるAPIを発見。これで絵の生成はうまくいったのだが、画像を生成するたびに、画像ファイルを作成したくないということで、uriで画像を表示することにした。これにより、ファイルがいらないらしい。
懸念としては、GPUを搭載したパソコンでないと、めちゃくちゃ重い。