輝く僕らの学費

外の空気が大好き、そこそこ忙しい理系の男子大学生のぶちおです。

開発

CAの平成最後のハッカソンで優勝してきた

投稿日:

平成最後のハッカソンお疲れ様でした。

今回のハッカソン、事前にチーム・お題が発表され、事前準備期間が用意されていたので、前夜に最後の作り込みをしていた人も多かったのではないでしょうか。
「平成最後のハッカソン」当日の全体の遅刻率を見ると、確実にそうですよね。

色々考えて望んだ部分もあるので、GWが終わる前にブログにも残すことにしました。

マリオのチームです。

ハッカソン参加の経緯

以前にサポーターズの1on1イベントの際に、インターンで一緒になった人などの繋がりやそこで知り合ったメンバーで飲みに行きました。

そのグループが「team Aluminium.」です。

その後も何度か、そのメンバーで集まっていて、ハッカソンのような場で一緒に何かしたい思いがあったところで、この「平成最後のハッカソン」を発見して、エントリーに至りました。

サイバーエージェントは選考受けていなかったし、大した接点もなかったので、このハッカソン参加の選考通るか若干不安でした。

「平成最後のハッカソン」について

参加者のみならず、運営メンバーもみな平成生まれの徹底ぶりでした。
Slackの名前に生年月日を入れる命名ルールがあって 、最年少がH16だったり、年下が結構いたり、今までのインターンのような環境とは違って新鮮でした。

参加者も80人ぐらい?で23チーム+CA社員2チームで、これほど大きなイベントも初めてでした。

準備期間

アイデア出し

お題が発表された翌日には、チームで集まってアイデア出ししました。この動き出しの早さから本気度を感じて欲しい。

場所はヤフーロッジで集まりました。電源・Wi-Fiあって、ホワイトボードあって快適でした。土曜日でほぼ満席な感じでした。

リアルタイムでマークダウンを同時編集できる「HackMD」を教えてもらった。エモいツール。


この日の時点で、マリオを作るって決まりました。

  • 平成 → ゲームがめっちゃ進化した時代!
  • 平成のゲームの進化を、ゲーム(マリオ)を遊びながら体験してもらう
  • ゲームの進化を振り返りながら、自分の子供時代を懐かしんでもらう

「投稿型サービスなど、他のチームも思いつきそうなものはやらない」「平成以外でも使えちゃいそうな汎用なものはやらない」ことを前提としたアイデア。

技術選定

全員Web系で、ゲーム開発は当然未経験。Chromeの恐竜のゲームを目指すぐらいの気持ち。

気軽に触ってもらいたかったのでWeb。開発はフロントのみで、Vue.js + Vuexで。この使用ライブラリの少なさ、こだわり(頑張り)ポイント!

自分はVue.jsを趣味で使っていたので、Vuexは初めてだったけどサクッとストアの使い方とかドキュメント見て、ゲームハードの表示切り替えや効果音・BGMのコンポーネントを開発してなんとか力になれました。あとは、CSS周りで。

他のチームでも、JSフレームワークはVue.jsを使っていたところが多い印象でした。

つよつよメンバーによるコア部分の開発待ち期間

1週間ぐらい「どんな感じにするか考えたいし、申し訳ないんだけど任せてもらえると嬉しい…」って感じで、大切な基礎部分を開発してくれた kthatoto には、本当に感謝。

プロトタイプの頃のマリオはこんな感じでした。

素材集めだけしてただ待っているのも申し訳なかったので、コードの把握も兼ねて勝手にマリオのアニメーションとか実装して遊んでました。

コンポーネントやイベントを追加をするときにも改めて思ったけど、コードが綺麗で、やっぱり凄いんだなって思った。


ブラウザ上で画面共有しながらビデオ会議できる「appear.in」、エモいツール。Fringe81の課題のフィードバックで使って以来で使った。

前日の作業

新宿の「BASE POINT」で作業しました。
ここはドリンクバーあっていい感じでした。テレビが取材に来てて、GW中に仕事してるフリーランスの人に、10連休羨ましくないですか?みたいなインタビューしてて少し鬱陶しかった。

まだまだ上の画面な感じな状況で、若干焦りを感じていました。

マップ製作や素材の調整が主な作業。つよつよ画像エンジニアが圧倒的効率で素材切り出したり、ゲーム画面にグリッド付けてくれたりして、絶対に他のチームにはいない存在。

平成最後のハッカソン当日

前日は、2時半にはちゃんと寝たので、間に合う時間に起きました。
茨城住みなので、若干早起きつらい。

着いて、Twitterでたまに見かける、全部「株式会社サイバーエージェント」なら意味なくない?ってやつを記念撮影。

うちのチームも本来の開始時間の10時に半分しか集まってなかった。

当日もギリギリまで開発・プレゼン動画の撮影などやってました。

発表


うちのイケメンがみんなの心を掴んでくれたので、バッチリでした。
デモ動画も「おおー!!」って良い反応があったので気持ちよかったです。

プレゼンは2分という非常に短いなかでやるしかなかったので、あとあと見てみると実は技術力入れてたんだなってチームもあったので、しっかり伝えるの大事

完成度についても、完成と言い切れる訳ではないが、納得のできる状態に仕上げられたので嬉しかったです。

結果

優勝しました!!
CAのハッカソン優勝の証のぬいぐるみをゲットしました。

「平成でやり残した事はもう無いです。」ってツイートしちゃうぐらい最高な平成最後の日でした。
みんなでアベマくんを抱き抱えて、タクシーで荒れてそうな渋谷の駅前を避けて、打ち上げ行きました。エモかったですね。

おわり

仕事でも、このぐらい(これ以上)のレベル感の環境で働けたら最高だろうなと思いました。

他のチームも、アイデア的にも技術的にも面白かったです。イベント参加者のレベルの高さはやっぱり感じました。そんな人たちを集められるサイバーエージェントは凄いです。

自分は、今回なんでもチョットデキル人として様々な面でサポートすような立ち回りをしていました。開発を一人に任せきりにしていた部分もあったので、優勝できていなかったら結構な後悔が残っていただろうとも思います。

とにかく、優勝できて嬉しかったです。

今後もこのメンバーを軸にハッカソンなどで活動したいと思っています。
「team Aluminium.」をよろしくお願いします!

-開発

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

VSCodeでSFTPを使ってAWSインスタンスとファイルを自動同期する

VSCode拡張機能「sftp」 できること・設定名 SFTPでファイルの転送ができる VSCodeでファイルを保存したタイミングで自動アップロードできる uploadOnSave distのJSやC …

no image

mixiのgit challenge #10 へ行ってきた

git challengeに参加してきました。「ギッチャレ」って言うと慣れてるひとっぽい。 概要 gitに関する問題を制限時間以内に解いていき、獲得ポイントをチームごとに競う形式のイベント。当日発表さ …

no image

AbemaTV Developer Conference 2018に行ってきた

先日開催された「AbemaTV Developer Conference 2018」へ行ってきました。 connpassでこのカンファレンス見つけて、おもしろそうだなと思ったのがきっかけです。 参加の …