こんにちは。ざわかける！のざわ(@zw_kakeru)です。
先日(2021年9月25~26日)、オンライン上で行われたハッカソンイベント「Yahoo!DisitalHackDay2021」に参加してきました！
その様子と感想を述べていきます！
はじめに：ハッカソンとは
ハッカソンとは、決められた時間内にプログラミング作品を作製し、その作品のプレゼンテーションを行うイベントです。
この「決められた時間」というのはハッカソンによって様々ですが、おおよそ24時間~72時間程度です。今回私が参加したDisitalHackDay2021は24時間でした。
通常、企業が何ヶ月もかけてリリースするようなサービスをこの数十時間という短時間で作製して発表しなければならないというルールのため、開催期間中は基本的に皆寝る暇も惜しんで開発を行います。
そして開発時間が終了すると、苦難を乗り越えた他チームと一緒に徹夜明けのテンションのまま成果物の発表会を楽しむ、というイベントになっています。
かなりしんどいイベントですが自身の技術力とチーム開発力が大幅にアップするので、これまでハッカソンに出場したことがないという人は一度くらいは参加してみると良いんじゃないかなあと思います。
今回のDisitalHackDay2021では2~6人のチームエントリー制で、総勢70を超えるチームが出場しており、大盛り上がりでした。
それでは、私たちのチームの様子を振り返っていきます。
成果物「ウォーQラリー」
今回のDisitalHackDay2021で私たちが作製した成果物「ウォーQラリー」に関しては別記事にまとめておいたので、そちらをご覧ください。
アーキテクチャ
「ウォーQラリー」での使用技術及びアーキテクチャ構成は次のようになっています。
ユーザーはLineボットからWebページへアクセスし、マップデータやクイズデータを取得します。
また、BlockChainによるクーポンの発行を行い、クイズに対するインセンティブ管理を行いました行う予定でした。
チームメンバー
まず、チームメンバーの紹介からしていきます。
私たちのチームは以下の通りでした。
- Mくん：チームのリーダー。バックエンド開発が得意。個人でミュージックアプリの開発をしたりなんかしている。っょぃ。
- Aくん：Mくんの大学時代の後輩。Mくん同様サーバー寄りの知識が豊富で、頼んだら基本なんでもやってくれる。っょぃ。
- Sさん：エンジニア兼デザイナー。絵がめちゃくちゃ上手い。また発想力も優れており、今回の開発でも面白いアイディアを沢山出してくれた。っょぃ。
- Iさん：今回私をチームに誘ってくれた女の子。基本的に高スペックで自走力があり、放っておいても頼んだことを淡々とこなしてすぐに成果物を出してくる。っょぃ。
- ざわ：私。開発知識は多少あるが0からWebアプリケーションを作った経験はほぼ無い。みんなの足を引っ張らないように頑張らなきゃ。
以上5名、エンジニア4人+デザイナー1人というメンバー構成で挑みました。
Sさんも開発はできるので、成果物が全く完成しそうにないなどの危機的状況になったら開発側にも回ってもらおうとも思っていました(が、今回はそのような自体にはならずに済みました。笑)
事前準備
本番開催の約1ヶ月前に今回のハッカソンで提供される技術が公開されたので、それらの情報をもとに、どんな作品を作るのか週に1回1時間程度のミーティングを開いて皆で話し合いました。
実際に提供技術のチュートリアルをそれぞれで進めつつ、最終的にはMapboxの技術をメインに、LINEBlockChainの一部を使えそうな今回の「ウォーQラリー」(当時の仮称：quiz-app) の開発に決定しました。
当日
ここからはハッカソン当日の様子について記述していきます。
開発期間
当日はお昼の12:00から作業開始だったので、10:00くらいにホテルの一室に集合しました。
5人作業に十分な広さの机があり、疲れた時にすぐ寝れるベッドや和室もあったのでとても良い環境でした。
集合してからWi-Fi環境の確認や延長コードの配置、モニター接続といった戦闘のための準備を行い、12:00の開会宣言とともに作業をスタートしました。
当日の各自の作業分担は、次のような感じでした。
今回の作品は典型的な3層Webアプリケーションだったので、それぞれが得意とする部分の開発を行いました。
バックエンドが得意なMくんとAくんがサーバーサイドを担当し、ロジック部分を私が、フロントをSさんとIさんに任せました。
ざっくりとこのような配置になりましたが、手詰まりになった時は他者の担当部分をちょこちょこ手伝ったりなど臨機応変に開発を進めました。
Sさんはデザインのお仕事に加えて、アイキャッチ画像や発表資料の作成もしてもらいました。
私の作業としては、まずMapboxを使ったことがなかったのでチュートリアルを確認しつつ、APIを操作して任意の地点の地図情報を入手し、ピンを立てる実装を行いました。
その作業にある程度目処がついた後、実際の画面遷移やボタンアクションの実装などに移りました。
フロントデザインは他のメンバーに任せて、ここでは最低限のボタンと機能実装に留めておきました。
12:00に作業を開始して早くも19:00です。意外とすぐ時間が経ちますね。
20:00までに開発予定作品の登録(アブストとアイキャッチ画像の提出)をしなければならず、それに伴ってアプリケーションの名前を何にするのかを皆で考えました。
作業しながら皆でダラダラと考えて色々な案が出ましたがなかなか決まらず、ここに結構な時間を使ってしまいました。反省です。
この辺りで、(BlockChainに手を出すのは無理だな)という結論に至り、実装を断念しました。残念。
あと、このタイミングで今回のハッカソンにおいて最初で最後のGが出ました。ある意味一番盛り上がりました。
無事に作品登録を完了したのち、気分転換も兼ねて皆で買い出しに行って王将をテイクアウトしました。
皆で食べた餃子はおいしかったです。
そんな中ふとテレビをつけると「劇場版『鬼滅の刃』無限列車編」を放映しており、あ〜これ視聴率すごいんだろうな〜とか思いながらも自分の開発に戻りました。
この時間には私は基本的な画面遷移の処理を完了してロジックの実装に入っていました。
JSの知識が無さすぎたせいで色々調べながらの作業となり、結果として多くの時間を費やしてしまいました。
途中で軽い休憩を挟みつつも、日付をまたいで黙々と作業を続けました。
その後3:00ごろにハッカソンのお供、モンスターを投入して作業を進めました。
この辺りまではメンバー全員頑張っていたのですが、ここから段々とリタイアする人が現れてきました。
私は他の仲間たちがバッタバッタと倒れていく中でなんとか手を動かし続けました(というか自分の担当箇所が終わってなさすぎて寝れなかっただけ)。
Webアプリケーションを作成した経験がほとんど無い中でロジック実装をほぼ一人で行ったので、(実力不足だなぁ〜)と泣きそうになりながら作業を進めました。
明け方、ふと外を見るとすでに太陽が登ってきており、残り時間の少なさを実感しました。
気分転換にシャワーを浴びた後、Iさんたちが作ってくれたフロントデザインをロジックと繋げる作業を行いました。
…徹夜明けでこんなややこしいマージ作業なんかするものじゃあないですね。
全然うまく繋がらずにエラーばかりでした。
細かい画面仕様まで詰めずに開発していたというのもありますが、そもそも人が書いたコードを理解できるほどの体力が残っていませんでした…
が、試行錯誤の末にフロント連結の作業が完了し、何とか動くものができました。これで「見せられる成果物なし」の最悪パターンは回避することができました。良かった。
この時点で時間は朝の9:00ごろ。主な残り作業であるサーバーロジックとの接続をMくんに、成果発表資料の作成を(デモ動画だけ渡して)Sさんにそれぞれ丸投げして40分くらい寝ました(寝ないつもりだったんですが気がついたら寝ていました笑)。
40分後、多少スッキリした頭でAくんとIさんが進めてくれた残りのフロントデザインとの接続を行いました。
それから、残り1時間の時点でMくんに聞いてみるとどうもロジックとサーバーの連携がうまくいっていないようでした。
これに関しては時間ギリギリまで粘りましたが結局うまくいかず、成果発表会にはローカル環境でのデモプレイで臨むことになりました。
ここで、試合終了ですね。
成果発表会
こうしてお昼の12:00を迎え、24時間の開発時間が終了しました。疲れた疲れた。
この後少し休憩して12:30からそれぞれのチームが作品について90秒間でプレゼンをする成果発表会が行われました。
この成果発表会はYouTube、ニコニコ動画での生配信も行われました。
私たちの発表は後半だった+私は発表者ではなかったので、ご飯を食べながら他チームの発表を楽しみました。
オンラインでの開催でしたがみんな苦楽を共にしている分、徹夜明けでも他チームの発表もちゃんと聞こう、という気になりますね。
内容に関しては技術レベルはもちろんのこと、我々が思いつきもしなかったようなアイディアを実装しているチームばかりでとても勉強になりました。
そして、私たちのチームの発表の時間になりました。
特に目立ったトラブルもなく無事に終了しました。お疲れ様でした。
司会の2人のフィードバックコメントがもらえたのと、ある参加者から個別チャットでより詳細を知りたいというメッセージが来たのが嬉しかったです。
他チームの作品に関して、私が一番気に入ったのはNo.6「Mary Call」です。
自宅で寝ていると徒歩10分圏内に突然メリーさんが出現し、早く除霊しないとどんどん自宅に近づいてくるというのが個人的にツボでした。笑
それから、No.22「CARoom」です。
これは駐車場に停まっている車を仕事場として借りれる空車マッチングサービスで、新しいビジネスモデルとしてありだなあと思いました。
(このサービスはLINE API賞を受賞されていました。おめでとうございます。)
あとはNo.48「ヒナんじょ」の発表で「※徹夜明けに公園を走っています。」の注釈が良かったですね。笑
それからNo.26「あなたの心に、チャッカマン。」の発表中に画面に猫が乱入してきたり、No.61「はい！地〜図」の発表中に発表者さんのマウスのバッテリーが切れてしまってリンクを押せずに終了したりというハプニングがあり、とても面白かったです。
ちなみにこのNo.61の発表者であるいなりずしさんは今回のハッカソンでの開発の様子をYouTube上でライブ配信(アーカイブは12時間分のみ)しており、私も当日、深夜の疲れた時にこの人の配信を観に行って元気をもらっていました(苦しんでるのは自分だけじゃないんや！という意味で)。
何時ごろだったかは忘れましたが、深夜に配信を観に行ったらなぜか「日本の国力」についてアツく語っており、とても面白かったです。
作品展示会
作品発表会が終わった後で、オンライン上で展示会が行われました。
Discordのボイスルーム上で待機し、興味を持ってきてくれた方に対して、デモを中心にプレゼンでは説明しきれなかった部分を中心により詳しい説明を行いました。
私たちはLINEBlockChainを使うという申請をしていたため、この展示会でLINEBlockChainの審査員の方がいらしてくださいましたが、結局使用するに至っていなかったため、申し訳ない気持ちになりました。
その後の表彰式で、決勝に進むチームの発表が行われました。
私たちのチームは残念ながら落選してしまったので、今回のハッカソン出場はここまでとなりました。
残念。
反省点
今回、ハッカソンに出場して分かったことは、ハイレベルな成果物を出すにはやはり入念な事前準備が必要不可欠だなあということです。
あまり時間がない中で私たちはアプリの名前を決めることに結構時間を使ってしまいました(それはそれで楽しかったので良いのですが)。
今回のハッカソンのルールは、「24時間で作品と発表資料を作成すること」だったので、作品の内容と仕様、役割分担を明確にして必要技術の選定とチュートリアル実施をあらかじめ完璧に済ませておき、当日は開発時間としてひたすらに手を動かす、という実施ができていればもっと完成度を高められたかもしれません。
まあでも、楽しかったから良かったです。
終わりに
残念ながら決勝に進むことができませんでした。
アイディアは悪くなかったと思ってるんですけどね…実装力が圧倒的に足りませんでした。精進しなければいけませんね。
ハッカソンは、普段の業務では成し得ない「0から1を作る」経験が積めるとても良いイベントだと思います。
あと、最初から締め切りが目前というのも良いですね。
大変だったけど楽しかったな。また出たいなあ。今度一人でも出てみようかなあ。
いや、一人はモチベーションが上がらないから、一人ハッカソンに誰かを誘うって形がいいのか。
あと今回のシステム、コードがグチャグチャなので気が向いたらちゃんと実装し直すかも。
以上です。
