はじめてハッカソンに出て優勝するまでの2日間 (+ 2日間)
11/15、16 の2日間、TechCrunch Tokyo Hackathon 2014 に参加してきました！
ここ数年で日本でも急激に盛り上がってきたハッカソンですが、出でみたい！という気持ちはありつつも
- いいタイミングでイベントが見つからない
- 何も役にたたなかったらどうしようという邪念
という理由で、なかなか参加できずに過ごしてしまっていました
今年の9月ごろにハッカソンのイベントをググッていたら、今回参加してきた Tech Crunch Tokyo Hackathon という2日間の大規模なハッカソンを見つけました
さすがに2ヶ月後の開催なら予定も調整できそうだし、どうせ出るなら2日間で徹夜でやってみたい！という思いとマッチしたので、友達のデザイナー @tochhh を誘って2人で参加することを決意しました
今回の記事は、ハッカソンに初めて参加した僕らにどんなことが待ち受けていたかのレポートです
参加当日まで
今回のイベントは、プランナー30人、デザイナー30人、エンジニア140人という人数制限が設けられており、エンジニアがメインのイベントという感じになっていました
僕はエンジニア、@tochhh はデザイナーとしてチケットを申し込み、開催の2〜3週間前に API を提供してくれるスポンサー企業が発表されました
※今回提供された API は以下に記載されてます
TechCrunch Tokyo Hackathon 2014 エントリー受付 | Peatix
名だたる企業が並んでおり
などのハードウェアも提供されていました
ただ、それだけを眺めていても全くアイディアが出てこない・・・！
@tochhh と「なんか不安だね」とLINEで話しながらも、何をやっていいのか全く分からず
結局、特に事前の準備は何もせず当日会場に向かいました
1日目 (11/15)
アイスブレイク、APIスポンサーからの説明、アイディア出し
今回のハッカソンはお台場にある コワーキングスペースMONO で行なわれました
コワーキング・スペースMONO – 世界をつなぐ国内最大級モノづくりコワーキングスペースMONO
受付をして、適当に空いてる席を見つけて座ったんですが、みんながハッカソン慣れしてそうに見えてとてもそわそわしました
そして、アイスブレイクと頭の体操てきな感じで、同じテーブルに座った人たちといろいろとアウトプットするワークをやっていきました
そうこうしているうちにAPIスポンサー企業からの説明がはじまり、今回提供して頂ける API や製品の説明を一通り聞きました
pepper とか初めてみたので感動でした
最終的には、今回提供された API を使って「○○の再開発」というテーマで、新しいサービスを1人づつ全員がアイディアを書きました
ですが、ここでも大したアイディアが思い浮かばず・・・笑
GraceNote のAPI やドコモの雑談対話 API を使って、自動でラジオ番組をやってくれるようなサービスがあったら面白いかなーと思ってそれを書きました
そのあと、紙に書かれたアイディアを全員が歩いて見てまわり、気に入ったものには☆をつけていきます
僕のアイディアにも数人の方が☆をつけてくださいましたが、残念ながら闇に葬りました・・・
チームビルディング ＆ ブレスト
☆を20個以上もらったアイディアが全員の前で発表されてから、チームビルディングの時間が始まりました
今回考えたアイディアに縛られる必要はなく、とにかく何でもありです
ぶわーっと人が広がって、各自自由に話しかけて気が合いそうな人を見つけます
いろいろな方と話させてもらったんですが、なかなかビビっとくる人を見つけることができずに時間が過ぎていき、徐々にチームが固まっていく中、結構焦ります
結局、☆を30個ももらっていて、最もクオリティの高そうなアイディアに乗っかることにしました
技術的なハードルが高そうだったのか、実用的すぎたのか、意外に競争にならずに すんなりとチームに加えて頂くことができました
そして、気づけばこのようなとんでもなくハイエンドで大所帯なチームができあがっていました
簡単にメンバーの紹介を書きます
- Akizuki さん
アイディアの発案者
最近ハッカソンにハマって出まくっている代表取締役 - Asuka さん
ハッカソン優勝経験のある強豪
テクニカルなバックグラウンドが豊富で、近々シリコンバレーに行くとか - Park くん
20代前半の若手起業家
ハンパないモチベーションの持ち主 - Noga ちゃん
Goodpatch勤務
最強の UI/UX デザイナー - 堤 修一さん
今回の特別参加エンジニア
言わずと知れたiOS界のカリスマ - @tochhh
一緒に参加したデザイナー
金の匂いを嗅ぎ分ける
まさか堤さんと同じチームになれると思っていなかったので、この時点でもう頭のなかがパニックを引き起こしていました
そこから、Akizuki さんのアイディアをベースとして、みんなでブレストして更に肉付けしていきます
最終的なアウトプットのイメージを共有して、作業を分担しました
最終的には、プランナー2人、デザイナー2人、エンジニア3人というように役割を分担して作業を開始しました
僕はもちろんエンジニアです
開発スタート ※制限時間：24時間
とりあえず自分の担当になった機能に使うAPIと方式を考えていきます
もともと今回提供されている API を使うつもりだったので、軽い気持ちでAPIの仕様書を読んでいくとなんと、iOS、Android 用のライブラリしか提供されておらず、WebAPIじゃないという超初歩的なつまづきが発覚しました
※今となっては、なんでWebAPIだと思い込んでいたのか全くわかりませんが。。笑
この時点で完全に頭真っ白
無理くりやれば使えるのかもしれませんがそれを調べている時間はないので、@tochhh にも手伝ってもらって、WebAPI で提供されているものを探しました
良さげなものが見つかり、ひと安心。。
今回は Microsoft の Windows Azure が無料で使うことができたので、とりあえずAzure 上に Linuxサーバーを立てて apache、php、mongodb をインストールします
先にAPI のレイアウトだけを軽く決めて、iOSアプリからつなぐスタブを生 php で書きました
あとは朝までひたすらこんな感じです
- コーディング
- @tochhh が邪魔してくる
- コーディング
- おやつ
- @tochhh がさらに邪魔してくる ＆ どこかで pepper の声が聞こえる
- コーディング
- レッドブル
- @tochhh がめっちゃ邪魔してくる ＆ どこかで別の pepper の声が聞こえる
- コーディング
- ため息
- 堤さんが優しく話しかけてくれる
- 和む
※1 に戻る
ちょいちょい山のようにレッドブルが提供されました 笑
レッドブル飲むと動悸がして集中できなくなるので、ちょっとだけ頂きました！
ホントに最後までつくりきれるのかずーーーーーーーっと不安をかかえたまま、ひたすらコードを書き続けていました
明け方には相当ヤバイオーラが出ていたらしく・・ 笑
堤さんがちょいちょい心配そうに話しかけてくれたので、とても優しい方だなと思いました・・涙
東京湾の向こうに朝日が見え始めたころ、ようやく一通りの機能の実装が終わる目処がつきました
床で2時間くらい寝ます
寝る前に、起きたらやる残りの作業を書いておきました
※ちなみにうちのチームの朝はこんな感じでした 笑
#ma10 #tchack 二日目の朝はこんな感じ！(^^;; みなさん、お疲れ様です！ pic.twitter.com/gQqlP7aAZt
— joohoun (@joohounsong) 2014, 11月 16脳が覚醒しているので、謎の夢を見ました
スマホのアラームと寒さで目が覚めました
ちょっと寝たら外は完全に明るくなっていて、頭もすっきりして、元気が戻ってきたので気合を入れて開発を再開しました
午前中のうちにできあがった機能を全部をくっつけて、API のレイアウトやデータの違いを修正していきます
分担した機能間は JSON でデータをやりとりする、疎な結合で連携する仕組みだったので、くっつけるときにはそこまで重大な問題は発生せずに、意外にスムーズにくっつけることができました
狙っていたわけではなかったんですが、結果的にこれが大正解だったんだと思います
そこからデバッグを続けていって、終了時間の1時間前くらいについに開発が完了しました
ここで初めてちゃんとアプリの画面をみたら、どんでもなくクオリティの高い iOSアプリができあがっていて、今までの疲れが全て吹っ飛ぶくらい感動しました
最後の1時間はみんなでプレゼンの流れをチェックし、このプロダクトの推すポイントと流れを改めて確認
今回のハッカソンでは、
- プレゼンはデモのみ！
- パワポ禁止！
という明確なルールがあったので、ユーザー体験やテクノロジーの部分を重視した内容にまとまりました
けっきょく、食事と仮眠の時間を除くと 20時間くらいぶっ通しでコーディングしてたことにこの時気付きました・・
各チームプレゼン
※2日間で250本のレッドブルが振る舞われたそうです 笑
全32チームが1チーム 3分づつ発表していきます
たった2日間でこれだけ多くのプロダクトが生み出される光景なんて見たことがなく、その1つ1つが同じ時間を共有した人たちの努力の結晶でもあり、それを考えただけで感動して泣きそうになりました。。笑
アイディアだけだと冗談のように聞こえるものでも、それが実際に開発されて動いてるところをみると、本気でそこまでやるのか！！！という感動も多々ありました 笑
もはや技術の無駄遣いなんてレベルを超えてます
意外だったのは、本番になってデモが動かない！といったチームが多かったことです
やっぱり短い時間でつくるので、普通に考えたらデモをできるクオリティまで持っていくことだけでも大変なことですよね
最後まで油断できないなと思いながら、自分たちのアプリがちゃんと動かなかったらどうしようとめっちゃ心配になりました。。
そして、僕らのチームの発表があり、Asukaさん、Parkくんにプレゼンして頂きました
アプリを動かしたときに「おぉー！」という歓声があがり、このために24時間頑張ったんだな・・とまた泣きそうになりました
全てのチームのプレゼンが終わると、デモの時にうまく動けなかった pepper が落ち込んでいました
懇親会
ビールや食べ物が山ほど用意されていました！
ありがとうございます！
最初のアイスブレイクで一緒だった方やその他の参加者の方々と、この2日間のつらさを共有しました
普段やっている仕事やバックグラウンド、最新の技術や興味のあるの技術を中心にいろいろな話をさせてもらって、一言にエンジニアといってもいろんな方がいるんだなーと思いました
みなさんのモチベーションの高さや自分が知らなかったことをいろいろと教えてもらって、終始パワーをもらいっぱなしでした！！！
結果発表
寝不足と疲れであっとゆー間にお酒が回り、とてもいい気分になっているころに、審査結果の発表がはじまりました
まずは、APIスポンサーの企業賞が発表されます
企業賞に選ばれたチームは、普通にその API をつかうだけでなく、他のサービスとのマッシュアップにより 誰も思いつかないようなユーザー体験を生み出していました
そのアイディアを形にしてしまう技術力にも、ほんとに脱帽です！
僕らのチームは結局 Windows Azure しか使っていないので、企業賞をもらえないことはわかってましたが、間違って呼ばれないかなと思って見てました 笑
次に、優秀賞が発表されます
特に順位はつけられずに、5チームが優秀賞に選ばれます
そこで僕らのチームが呼ばれました！
やったーーーー！
※後で話を聞くと、僕らが得票数1位だったとのことなので、優勝だー！と勝手に解釈しました
優秀賞に選ばれたチームは 11/18 の TechCrunch Tokyo 2014 でプレゼンする時間をもらうことができました！
チームのみんなと感動を分かち合いながら、くっっっっっっっっそ疲れた体をひきずって、36時間ぶりに外にでます
当初はハッカソン中に大江戸温泉にでも行こうかな、とか考えてたんですが、結局そんなヒマも余裕もありませんでした・・・
翌日 (11/17) ※+1日目
翌日は休みがとれなかったので、普通に仕事に向かいました
完全にパワーを使い果たしましたが、なんとか頑張って仕事しました
11/18 のプレゼンに向けて多少手直しする部分があったので、サクっと片付けて優勝の余韻にひたります
しばらくして、何気なく WindowsAzure の管理画面を見てると、ある異変に気付きました
・・・ん？オレンジ色になっているし、土曜日には1万円あったクレジットがめっちゃ減ってる・・？有効期限1日・・・？
これは、明日動かないかもしれない・・・！
こうして僕のハッカソン 3日目が幕を開けました
ハッカソン当日に 暫定的にサブスクリプションを用意してもらっていたことを思い出します
多くのチームのサーバーがその後も同じサブスクリプション上で稼働し続けているので、予想以上のスピードでクレジットの額が減っているわけです
急いでメンバーに連絡して、ハッカソンに来ていただいていた Microsoft の担当の方を探してもらいます
Facebook で連絡がついたので、事情を説明しました
サーバーのインスタンスを別のサブスクリプションへコピーしてそちらで動かせば対応できると教えて頂き、暫定的に別のサブスクリプションを作成して頂きました
※大田さん、馬田さん、伴野さん、急な連絡にも関わらず対応して頂いて、本当にありがとうございました！！！
サーバーのコピーに多少時間がかかりました
コピーが完了したらサーバーを立ち上げて、ドメイン名が変わっているので mongodb 内のデータをちょこちょこ修正し、なんとかサーバーを別のサブスクリプションに移設することができました
※この時点で 11/18 AM2:00 ころ・・・
発表当日 (11/18) ※+2日目
接続先のドメインが変わっているので、堤さんに TestFlight で修正版のアプリを配信して頂きました
念のため Windows Azure の管理画面を確認しましたが、クレジットは潤沢にあり、減るスピードもとても遅いことを確認したので安心！
この日も午前中は会社で仕事をして、午後は会社を休んで TechCrunch Tokyo へ向かいます
いざ、渋谷ヒカリエへ！
たくさんのスタートアップのブースがあり、1つ1つのサービスに技術面のことを聞いていきました
あまり時間がなかったので数カ所しか回れなかったですが、どこも気合に溢れていてとても楽しかったです
プレゼンする5チームが控え室に集まり、段取りの説明が始まりました
まさにその時です
「なんかここ、動いてないよ・・！」
夢かと思いました
夢であってほしかった
終わらないハッカソンの恐怖
堤さんが API から返されてるデータにセットされているドメイン名が古いサーバーのままというのを見つけてくださいました
急いで PC を開いてサーバーに接続し、mongodbのデータを修正しました
ここで間違った update をしたらアウトなので、この瞬間は落ち着いてめっっっっっっちゃ集中しました
※数々のシステム障害を経験してきたメンタルがここで初めて活きました…笑
本当にギリギリセーフで間に合いました
体から血がなくなったかと思いました
その後無事にプレゼンは終了
このプレゼンでもアプリを動かしたときのお客さんの反応がとてもよくて嬉しかったです
そうして、ようやく僕のはじめての 4日間にも及ぶハッカソンが終了しました・・・
その後の残った時間では、スタートアップの CTO のプレゼンを聞くことができ、投資家の対談を聞くことができ、自分の知らないところにこんなとてつもない世界が広がっていたのか！と感動の連続でした
今回つくったプロダクト
360度を録画できる RICOH THETA というカメラを使って会議を録画し、
画像解析、音声解析を行って自動で LINE風の議事録を作成してくれるプロダクトを作りました
※画像は堤さんのブログから拝借しました
このなかで僕は、動画から取り出した音声ファイルを1文ごとに分割して文字に起こす機能と、動画と音声の解析データをアプリで使う形式に整形して返す WebAPI をつくりました
UI/UX は Noga ちゃん考案のもので、僕が未だかつて経験したことのない領域の仕事をしてました・・・
天才です、まじで
堤 修一さんのブログです
TechCrunchハッカソン2014で入賞しました！ - Over&Out その後
学んだこと
- チームビルディングが超重要
集めるひと
- アイディアの実現に必要な人をあらかじめ想定しておく
加わるひと
- 自分が貢献できることを明確にしておく
どっちにも
- 持ってるアイディアや得意なことをベースにいろんな人と話してみる
- コミュニケーションにかかる時間を小さくする
- ある程度作業を分担したらあとは自分の作業に100%力を注ぐ
- 過度に口出さない ＆ もめてる時間などない！
- できるだけ早く POC をとる
- 走り出してから前提が崩れるとえらいことになる
※ハッカソンに限ったことではないですが・・・
ハッカソンに出よう！
ハッカソンの語源は "Hack + マラソン" らしいですが、今まではなんでマラソンという言葉が入っているのか意味がわかりませんでした
でも今回ハッカソンに初めて出てみて、その意味を身をもって感じました
余裕がある状態でこういったプロダクトを作るのは、言ってみればただの Hack です
限られた時間で戦略を考えてペース配分を考えて、フラフラになりながらプロダクトを完成させるゴールに向かうのは、確かにマラソンみたいな感じかもと初めて理解できました
先週までの僕のように、ハッカソンに興味があるけど出たことがないという方がこれを読んでくれていたら、ぜひともチャレンジしてみてほしいです
出てみなければその良さ、凄さは何も分かりません
とっても大変でしたが、当然失うものは何もなく、プラスのことだらけでした
考え方が大きく変わりました
百聞は一見に如かず！
今回はいつもとは全然違う内容の記事でしたが、ハッカソン初体験のレポートをお届けしました！
