今回の春ハッカソンでは、「以線伝心」というゲームを作りました。投票の結果、アイディア賞をいただきました！

春ハッカソンでは、「Web」「ゲーム」「映像作品」のいずれかを作ることが多いです。私たちの班では、Web技術で協力ゲームを作ることにしました。

作ったゲームのルールは、次のような感じです。

ルール

• 最大9人が部屋に参加可能
• 漢字を推測する人が一人選ばれる
• 残りの人が一画ずつ順番に直線を引き、お題として示された漢字を表現する
• 条件
  • 最大9画しか描けない
  • 直線しか描けない
  • 確定後は線を描き直せない

実際に遊んでいる様子

お題：「陵」

プレイ画面

メンバー紹介

• @yasako 25B リーダー、フロントエンド
• @akimo 24B バックエンド
• @y_33550336 25B バックエンド
• @cuptea 26B フロントエンド、デザイン
• @yadorigi 26B フロントエンド、デザイン
• @soy4040 23B バックエンド

開発の様子

今年の春ハッカソンは昨年とは違い、メンバー発表が本番の一週間前でした。

準備期間

準備期間は、対面で1回、Discordで3~4回ほど集まって、何を作るのか相談しました。全員が集まれたのは、初回の対面での話し合いのみでしたが、来れなかった人も話し合いの議事録を読んで内容を把握してもらいました。

話したときのメモの様子を載せます。

本番

本番の様子を、フロントとバックエンドそれぞれで振り返ります。

デザイン・フロントエンド

初日は主にデザインや仕様の確定、ゲームの状態管理部分の実装をやっていました。

@cuptea @yadorig がデザインを作っている間、@yasako はゲームの進行度合いの管理部分を実装をしていました。デザインが確定したところで、@cuptea @yadorig にそれぞれのページを順番に作っていってもらいました。

バックエンドができるまでの間、決まった動作しかしないモックサーバーをAIに書かせ、フロントエンドの動作確認をしていました。

バックエンド

必要なエンドポイントやゲーム中に発生するイベントは前もって整理しておいたので、それらに対応する空のメソッドだけ最初に用意して @soy4040 @y_33550336 の2人に実装していってもらいました。事前に決めていたのは「サーバーがどう振る舞うべきか」という部分だけで、具体的な実装は各自で考えながら進めてもらうという形です。@akimo はPRのレビューをしたりお菓子を食べたりしていました。

感想

@yasako (リーダー、フロントエンド)

フロントエンドを担当しました。昨年度の春・1-Monthon・冬に続き四回目のハッカソンで、Web班のリーダーは二回目です。今回のハッカソンでは初めてWebゲームにチャレンジしました。遊んでて面白いゲームを作れてとても満足してます。

フロントエンドの二人には、デザインをしてコンポーネントを作り、コンポーネントを組み合わせて画面を作っていき、サーバーから取得したデータを流し込む、という開発の流れを体験してもらいました。「ごめん、それについて説明し忘れてた！」と言ってばかりだったと思うのですが、僕の分かりやすいとは言えない説明を頑張って聞いてくれてありがとうございます！途中僕が寝落ちしてしまったときもうまく進めてくれててありがたかったです。

短い準備期間の中でいろんなアイディアを出してくれたみんなのおかげで、遊びがいのあるゲームを作ることができました！ありがとう！！！

（ブログの完成が遅くなってしまいすみません...！）

@y_33550336(バックエンド)

バックエンドを担当しました！去年の春ハッカソンでは理解していることが少なく、少し悔しい思いをしました。そのため、一年間頑張って様々なプロジェクトに参加するなどしていろいろなことを学んできました。まだまだ初心者でよく分からないことも多いのですが、何か新しいことに挑戦してみたいと思い、WebSocketを用いた開発をやってみたいと提案したところ、班のみなさんにも快く賛同していただきやってみようということになりました！
準備期間では、技術選定やテーブル設計などの細かい部分はまだ慣れておらず、ほとんどの部分をakimoさんにお任せしてしまいましたが、分からないところは質問してなんとか自分もできるところは頑張れたと思います。
ハッカソン当日では、データベースやいくつかのエンドポイントを担当したのですが、思ったより分からないところが多くて他のバックエンドの方に迷惑をかけてしまったことも多かったかもしれません…ですが、たくさんのサポートをしていただきながら最後までなんとかやりきることができました！
去年よりも分かることやできることが増えたということを実感できたことがとてもうれしく、頑張った成果が表れてよかったです！
良いメンバーに恵まれて、みんなで考えた案でアイデア賞もとることができてとても充実したハッカソンとなりました！

@cuptea (フロントエンド、デザイン)

フロントエンドとデザインを担当しました。高校では高々2人で共同制作していた程度で、この春ハッカソンが人生初めてのハッカソンでした！
使うフレームワークがVue.jsだったり作るものがブラウザゲームだったりと、今まで食わず嫌いで触れてこなかった分野にチャレンジでき、今後のハッカソンに出場するモチベーションが沸きました。
チーム制作初心者の僕でも楽しんで2日間を過ごせたのは、リーダーのやさこさんを始めとしたメンバーの皆さんのおかげです。本当にありがとうございました！

@soy4040 (バックエンド)

23Bにもかかわらず春ハッカソン初参加 & ほぼ初のチームでの開発でした。
最初は何をすればいいか全く見当がついていなかったのですが、やさこさん、あきもさん、わいごさんなどなどに助けられながら楽しく開発を進めることができました。
26Bのお二人もバリバリフロントエンドを書いていたようで、本当にすごいと思いました…！
終始楽しいハッカソンでした！チームメンバーへの感謝でいっぱいです。

@akimo (バックエンド)

バックエンド、APIの設計や後方腕組みを担当しました。僕が頑張ったのは主に事前準備で、開発期間中は実装を他の2人がやってくれているのを頼りになるな〜と思いながら眺めていました。昨年の春ハッカソンでは事前準備が足りないと感じていたので、その反省を活かして設計を煮詰めてから本番を迎えられたのは良かったです。

一方で、自分を過信して動作確認を全く行っていなかったのは今回のハッカソンの反省点ですね。実際に動かしてみると大量のバグが見つかり、結局試遊会の時間に動かすことはできませんでした。ハッカソンだからと手を抜いていましたが、仕様は自動テストで保証すべきであるという当たり前のことを痛感させられました……。

ともあれ、ゲームのサーバーを書く機会はあまりないので設計などを考えるのは楽しかったです。たくさん面白いアイデアを出してくれたチームメイトに感謝。今回は参加するか迷っていたけど、参加して良かった〜！

@yadorigi (フロントエンド、デザイン)

大学入学までほとんどプログラミングやweb開発には触れてこず、今回のハッカソンが初めての制作でした。web開発どころかプログラムの書き方や制作で使った様々なツールの使い方すらおぼつかない状態での参加となってしまい、自分が貢献できた部分はほんの少しですが、それでも自分が考えたデザインのページが表示されたり自分でコードを書いて作った画面が動いていたりするのを見る度に、自分のつくったものがゲームに貢献できていると感じられて、制作の楽しさや達成感を感じることができました！また、技術的な学びやチームでの開発の進め方の知見も多く得られて、参加して良かったと思える充実したハッカソンでした。

熱心に制作を進めてくださり初心者の私にも優しく接してくださったチームメンバーの皆さん、そして台風という変則的な状況の中でハッカソンを最後まで進行してくださった運営の方々には、本当に感謝してもしきれません。短い開発期間の中でここまで作品を形にできた、そしてアイディア賞までいただくことができたことを心から嬉しく思います！ありがとうございました！