平成最後のハッカソン ~ サイバーエージェントインターン

初めに

こんにちは！テコンドーです。

以前の記事でもお伝えした通り、サイバーエージェントが主催する

「平成最後のハッカソン」に参加してきましたので参加レビューを書いていきます！

サイバーエージェントは以前に一度kubernetesハンズオンでインターン参加させていただいたことがあったので2回目です。

前回はハンズオン形式で他の学生のレベルなどはイマイチわからなかったのですが、今回はハッカソンということもあり、いろんな学生がどんなことをしているのか、できるのかを把握することができました。

結論から言うと、みんな超レベル高かったです。もうビビりました。

ちょっと舐めてたなとすら思いました笑

なにはともあれ、レビューの方書いていきます！！！

ハッカソンについて

行われるハッカソンについての基本情報を伝えておきます。

基本情報

• チームはA~Z(26チーム)

• 一チームほぼ3, 4人

• 公式で集まるのは平成最後の一日だけ

• 友達同士、ソロプレイどちらでも応募可

• 使用言語はチームごとにおおよそまとまっている

全国から学生が集まるので、リアルで開発するのは最後の一日のみでした。

使用言語、ハードについては特に言及はなく、

Webアプリやゲーム、機械学習使っているチームもありました。

友達と応募するか、一人で申し込んでもいい形でした。

友達と応募した人たちは同じチームになることができます。

和気藹々と友達同士で開発しているチームもありましたが、自分は一人で応募しました。

開発友達欲しい、、、

お題

今回のハッカソンですが、お題は、、、

【平成生まれの私たちが、平成を楽しく振り返ることができるサービス/モノ】

というお題でした。

かなり広い解釈することができるので、様々なサービス、アプリが作れそうですね

ハッカソンの紹介は以上になります。

ここからは実際に行った開発の流れを書いていきます。

当日までの流れ

当日までチームメンバーと会うことはないので、ビデオチャットで会議を行いました。

メンバーは自分を入れて四人で、３人が関西で一人だけ東北でした。

他は文系エンジニアで独学で学んだそうです、すごい

お題発表から一週間強で発表だったのであまり時間がありません。

自分たちは三回ミーティングを行い

• 顔合わせ、プロダクト決定

• 実装内容の詳細決定

• 進捗報告

をそれぞれ話し合いました。

使用言語、ツール

開発については全員触っていたRubyOnRailsを使用してWebアプリを作ることにしました。

CSSフレームワークはmaterialize, またVue.jsなどで動きも付けれるといいね、といった形です。

進捗管理はTrello, チーム開発はGithub使って進めることになりました。

ただだんだんめんどくさくなってTrelloは廃止になったし、プルリクエストも送らなくなりました笑

とりあえず目につく機能を開発していく流れだったので手間しか増えないと判断したためです。

これが後々問題を引き起こすことになります、、、

デプロイはHeroku, 画像をストレージに上げる必要があったのでS3を使いました。

デプロイに関してはほとんどHerokuの楽チンさが助けとなりほとんど手間取らず終了しました。

プロダクト決定

プロダクトの決定が結構大変でした。

お題は平成を楽しく振り返ることができるものだったので、様々なものが案ででました。

• ポケベル風のチャット

• 懐かしい歌詞をシェアできるアプリ

などいろいろ案が出てきました。

ただそれっぽいアプリを作るだけではなく、自分たちの考え、想いが伝わるようなアプリにしようと

プロダクトの決定については議論を重ねました。

作ったもの

議論を重ね、ようやく作成するプロダクトが完成しました

平成初期　VS 平成後期がコンセプトです。

ポケベル　VS スマホ

といった形で戦わせます、勝負方法は簡単で一人一票どちらかに投票することができます。

投票に関してはどちらが優れているのかでは勝負させません。

投票する軸は、どちらが思い出深いか、より愛着があるのかなどでどちらに投票するのかを決定します。

投票した後はツイッターのシェア画面に飛ぶようになっているので、そこで思い出をコメントして閲覧者のさらなる投票を狙います。

投票の制限時間は令和までとしました。アプリのヘッダーにカウントダウンを作成したのでそこから後どれくらいで令和なのかを確認することができます。

作った経緯としては、時代が進歩してより便利に早くなったけど、機能性だけが全てではないなという話がきっかけでした。

僕とかはポケモンとかで言えばサファイア世代だったのでグラフィックもポケモンの数も最新のポケモンには勝てないのですが、友達と超対戦してたサファイアとかの方が好きなんですよね、

それは別のものとかでも言えることで、自分がより長く使ったもの、思い出に残っているものが世代によって変わるなーと感じました。

なので、勝ち負けを決めるもの仕様となっていますが、昔のものと今のものを比較していろんなことを思い出して振り返ってもらえれば良いなと思い作成することにしました。

説明はこんな感じです。自分的には結構気に入っていました

開発での問題

作るものは決まったので、実装の方に移っていきます。

僕たちのグループではメンバーごとにDB設計、サイトデザイン、インフラ構築など担当分野を分けて作業に取り掛かりました。

しかしいろいろ問題が発生しました。

画像作成機能がバグる

このアプリの超大事な機能に、Twitterでのシェア機能がありました。

Twitter経由でユーザーを獲得する計画だったので、シェア機能は超重要です。

なので見栄えのいいように何を戦わせているのかを一枚の画像にしてシェアツイートの中に埋め込む予定でした。

しかしその画像作成機能がうまくいきませんでした。

処理自体は実装していたのですが、一度処理を走らせるとタイムアウトまで実行中になります。

なので一回シェアしてしまうとそこから固まるポンコツアプリになりました笑

原因もActiveJobと呼ばれるキューサービスが正常に作動してないと当たりはつけれていたのですが、発覚したのが後半になってからで対応に追われました、、、

結局発表の際には本番環境ではバグが直らず、開発環境の画面を見せることになりました、、、

反省

全員甘くみていて、予定のタスクを消化しきれない

反省。

進捗会議の時は自分たちの力を過信＆他チームを甘く見ていたこともあり

「優勝商品なんやろな〜、Switchかな〜」

とか言ってました、反省

やばいのに気づいたのは終盤に差し掛かかってからでした。

全くタスクが消化しておらず、デプロイに間に合いそうにありませんでした。

そこから前日に東京で集まれることになり、ホテルで開発合宿することになりました。

ホテルでの開発の様子

これはこれで楽しかったのですが笑

しかしなかなか開発が進まず、最終日を迎えることになります

本番当日

会場風景

始まってからあっという間で発表当日になりました。

平成最後の日となる発表日は、サイバーエージェントの本社があるAbemaTowersに参加者が全員集合して

開発〜発表になります。

自分達はまだタスクが残っていたのでもう必死でやってました笑

隣のチームとかはなぜか机に半田ごてが置かれており異質さを漂わせていました。

他にVRグラスとか使っている班もありそれぞれ個性が出ている作業風景でした。

開発と同時に発表時に使用するスライドも準備します。

2分間で二枚のスライドを使って発表します。

開発中のキャプチャを埋め込み、適当インスピレーションで感じたことをスライドに表現し作成完了

やることを一つずつ処理していくと時間になり、開発終了

なんとか人に見せれるレベルまでにはできたので、そこで自分達の作業も終わりました

成果物発表

A ~ Zの順で2分ずつ発表タイムです。僕たちの班はQだったので最後の方でした。

他の発表を見て感じたのはもっとスライド準備するべきだったなってことです。

僕たちの班にはスライドを装飾するという概念がなく、ただの白紙に文字情報を加えただけのものだったのですが、

他の班はもう、、、色が！フォントが！！

A班からレベル高く発表するのが嫌になりました。

しかしそんなことも言ってられず僕たちの発表の番です。

最年長ということもあり色々指示とか出していたので自分が発表することになっていました。

キャプチャ動画が再生されないトラブルも発生しましたが、知恵と勇気で乗り切りました。まあ結果的には普通の発表でした、超普通

そんな形で発表も終え、後は結果を待つのみとなりました

結果はいかに、、、、

結果発表

結果発表

端的に言うと優勝することは叶いませんでした！！！！

予想の5倍は周りのレベルが高かったです。本当に、ビビりました

色々すごいチームがあったのですが、優勝したチームの作品だけ紹介したいと思います。

優勝チームは「スーパー平成マリオ」と言う作品を作成していました。

Vue.jsを用いたブラウザゲームで、名の通りマリオをプレイできます。

平成を振り返る要素としては、ゲームの枠がゲーム機の画面になっているのですが、

ゲームが進行していくと変化していきます。

その枠がゲームボーイアドバンス⇨DS⇨Switchといった風にゲームハードの変遷を表現していきます。

発表ではお触りタイム（響きがエロい）があり、他の班の作品を触ることができるので、実際にプレイすることができるのですが、本当にマリオでした。

まず、マリオをVueで作るって言う発想がないし、それを実現できる技術力も本当にすごいです。

悔しかったのは自分も触っている言語での実装ということです。

Unityで作ってたんだったら、そういうのもできるのね〜くらいで終わっていたのですが、

Vueは基本的な部分は理解しているしポートフォリオサイトも作成したことがあります。

なので、自分にも思いつけるし原理的には実現可能なのですが、、、

技術力の差を見せつけられた気がして悔しかったです。

優勝チームがすごすぎて優勝チームの解説をめっちゃしてしまいる笑

自分も頑張ろうと思いました（）

振り返って

こんな形でハッカソンは終わりました。

最後はみんなでカフェっぽい巨大な食堂での懇親会でした。

画像

色々な参加者と話すことができ、どうやってスキルを磨いたのかとかを教えてもらいました。

またハッカソンにはサイバーエージェントの社員チームもあり、

どうやって入社したのか、今後注目する技術なども教えてもらい、非常に有意義な時間となりました

そして懇親会も終了し、平成最後のハッカソンは幕を閉じました。

自分達の見通しの甘さ、技術力不足

他のチームの班のレベルの高さなど、本当に刺激になる経験をすることができました。

最後にサイバーエージェントから、インターン終了証書をいただきました。

終わりに

こんな形で僕のGWは過ぎて行きました！

大阪に帰ってきてから改めて振り返ると本当にいい経験することができたなと感じています。

学生エンジニアって独学や、長期インターンなどの固まった人間関係の中でスキルを磨くことが多いです。

それだと刺激を受けることが少なく、モチベーションがなくなりやすいです。

なので定期的に外の集まりに参加することはめっちゃ大事だなと改めて感じました。

僕のブログではインターンやハンズオンの参加記録もこれからも載せていくので、

どんなイベントがあるのかなど参考にしてみてください！

インターンなどで会えたら嬉しいですね！

それでは！！！