Hack Festival Fukuoka参加レポート

Leap MotionはC++やPythonをはじめとした多くの言語に対応しているらしい。
その中で我々は、Processingを選択した。 Processingは授業で触ったことがある程度だったが、教育用プログラミング言語ということもあり、今となっては初めてのデバイスを触るという意味で適切な選択だったと考えている。

結局、Processingの復習・環境構築・サンプルを動かす・リファレンスを読む程度で一日が終了。

ハッカソン当日

1日目（3/9）

10:00~10:30 オープニング
10:30~20:00 ハッカソン（会場：GMOペパボ）
20:00~　　　ハッカソン（会場：GeeK Studio）

オープニング 10:00~

主催者の自己紹介からはじまり、参加者全員の自己紹介。
参加者は約20名5チーム。
高校生から大学院生まで幅広い年代が参加しており、自己紹介の際に最年少記録が更新されていく際はとても盛り上がった。
結局、最年少は16歳（おそるべし・・・）

そうこうしているうちに、テーマが発表された。
テーマは、

Make Fukuoka わくわく

～福岡をもっとわくわくさせるには～

かなり自由度高い！！！

そして、優勝景品の発表！
優勝景品は・・・「スマートスピーカー詰め合わせ」！！！！

今回の #hackfesfuk の優勝景品
「スマートスピーカー詰め合わせ」
この週末、スマートスピーカーガチ勢チームが生まれます pic.twitter.com/vYElt9iKBb
— かつを🐶 (@katchan_fuk) 2019年3月9日

さらに、今回のイベントはTwitter盛り上げ大賞なるものもあるらしい！

#hackfesfuk - Twitter Search

上のハッシュタグで、当日の様子がわかるはず。

ハッカソンスタート 10:30~

まずは、アイデア出しから。

できれば、Leap Motionを使いたい！

そんな思いで、アイデア出しを始める。

アイデア創出プラットフォームHello Ideaに投稿してみたり、ツールを使ってみたり・・・
https://helloidea.site

福岡をわくわくする、か・・・

まずは福岡の魅力を調べてみる。

アジアの玄関口
空港から近い
飯がうまい
屋台が有名
祭りが盛り上がる

でてくるでてくる。

そのなかで、マイナスイメージとして出てくるのが、

修羅の国
暴力団
発砲事件
北九州
成人式
卍怖い

せっかくだから、卍（ここでは、輩という意味）を絡めたい！とアイデア出しは盛り上がり・・・

福岡の魅力　×　卍　×　ジェスチャーのゲーム、「Let's 卍」を開発することが決まる。

方針とタイトルを先に決め、具体的な内容はとりあえず後回しに（笑）

Leap Motionを触りながら、アイデアを固めていくことに。

この時点で、スタートから２時間半も・・・！

きりがよかったので、とりあえず大砲ラーメンに行き腹ごしらえ

幸せタ～イム！！！！

f:id:rkdora:20190312120444j:plain — 大砲ラーメン

現実逃避を終え、開発スタート！

14:00～20:00の間にしたこと

Leap Motion

手の位置を認識

Processing

画像の表示
画像サイズを一定の範囲内にリサイズする関数を追加
アニメーション作成
自作タイマーによる時間制御を可能に
複数の画像を連続してランダムに表示
福岡に関する画像とそれ以外の画像をプログラム上で判別
任意の操作に対応したアクションの実装
画像情報の表示

その他

スライド作成
画像の追加
バグ修正

Leap Motion、Processingともに慣れていなかったため、サンプルを動かし、リファレンスを読み、実装して理解しながらの開発に・・・。

この時点での形は以下の通り。

画像をランダムに表示する。
手の位置により、その画像が福岡に関するものかそうでないものかの選択を行う。
回答と画像の答え合わせを行う。
一つの画像あたりの回答時間は5秒で、過ぎると不正解扱いに。

MVP（実用最小限の製品： minimum viable product）を意識した開発に。

Geek Studioに移動 20:00~

開発を再開。

素材画像の追加。手の位置による操作から、ジェスチャーによる操作のアップグレードに成功。

2日目（3/10）

きりのいいところで、温泉へ（深夜1:00）

温泉につかりながら、アイデアを練り上げる。

そんなこんなで、やっと構想が固まった（笑）

構想は以下の通り

ストーリー
卍と福岡に対する知識対決をする。卍の出すお題を、「福岡に関するもの」か「それ以外」に仕分ける。正しく仕分けることができると、ハッピーエンド。卍と一緒に福岡を盛り上げよう！正しく仕分けることができなかったら、バッドエンド。卍に福岡が支配されちゃうぞ！

流れ

お題の画像が表示される。
「福岡に関するもの」ならスワイプジェスチャーを、「それ以外」ならスクリーンタップジェスチャーをして仕分ける。
各お題に対して回答時間は5秒以内。5秒をすぎると、不正解扱い。
正しいジェスチャーをして仕分けることに成功するとスコアが加点され、誤ると減点される。
1分間1~4を繰り返し、最終的なスコアに対応したエンディングを表示する。

ぽかぽかしながら温泉を出て、Geek Studioに・・・

夜の雨により一瞬で湯冷めした。

その後、夜通しで開発を続け・・・

画像に情報を付与しまくり、

バグ改修に追われ、

沼（アニメーション・画像のリサイズ）にはまり、

・
・
・

「あれ？いつのまにか窓の外が明るく・・・・」

昨日から学生ハッカソンがあってて、みんな寝てない様子。レベル高そう！ pic.twitter.com/yJ1U0GUXR2
— よしまさ@Geek Studio (@ayasamind) 2019年3月9日

そんなこんなでふらふらになりながら、会場を移動

GMOペパボに移動 9:00~

09:00〜16:00：ハッカソン
16:00〜16:30：プレゼン会オープニング
16:30〜17:30：プレゼン会
17:30〜19:30：アフターパーティ

開発開始。

アンケートの結果レッドブルが1位だったのですが、数があんまり売ってなくてリアルゴールドと2位のおにぎりを購入しました🍙ご自由にどうぞ！2日目も頑張ってください💪💪 #hackfesfuk pic.twitter.com/g825id9Bni
— あちゃ (@achamixx) 2019年3月9日

差し入れありがとうございました（感激）

エナジーを注入し、体力を前借りしていくううううううう（狂テンション）

スタート画面、エンディング画面を整え

画像の情報を表示できるようになり、

13:00くらいに、最低限の実装が完了！

ほぼ同時にスライドも完成！

開発終了まで残り3時間もある！

あとは、改善していくだけ！！！！

やったるぜえええええええええええええええええ（）

ここからはラストスパート。

主にUIを整える作業や、コードのリファクタリングを行い

効果音をつけたり、スライドを改善したり

そんなこんなしているうちに、

開発終了～ 16:00

濃かった・・・

みんなぐったりした様子。

プレゼン会の前に、企業プレゼンがあった。

GMOペパボさん
21卒に向けた取り組みがもう始まっているらしい。うらやましい限りである。
サポーターズさん
いつもお世話になっています。オンラインの勉強会は激アツ。
Geek Studioさん
Alexa ハッカソンやるらしい！（秒で応募した。） Alexa Hack for Students in Kyushu 2019
ハックツさん
学生エンジニアのためのプラットフォームづくりをしている。個人的にめちゃめちゃ応援してるところ。

そんなこんなで、いよいよプレゼンスタート！

我々は、2番目に発表することに。

順番決めの際にチーム名をとっさに決めることになり、とっさにつけたチーム名が「チーム卍」

徹夜っておそろしい・・・

せっかくなので、ほかのチームのプレゼンも紹介。

１番目の発表は、ヘアスタイルの悩みを解決するプロダクト。
自分もヘアスタイルに関して無知だからターゲットだなーとか考えていた。

#hackfesfuk チームひだっちんがプレゼン！福岡はヘアースタイルオシャレ度全国5位らしい！ pic.twitter.com/6dQE40RUM0
— かつを🐶 (@katchan_fuk) 2019年3月10日

2番目の発表は、われわれ「チーム卍」

youtu.be

#hackfesfuk チーム卍のプレゼン。モーションキャプチャーを用いて、福岡のものか、そうでないかを仕分けるゲーム。卍卍卍 pic.twitter.com/xzlOugCX7T
— かつを🐶 (@katchan_fuk) 2019年3月10日

やりきった！！！

終わったと同時にエネルギーが切れ、その後はあんまり覚えてない・・・

3番目の発表は、東京の女性と福岡の男性Rubyエンジニアのマッチングサービス「ルビーオンレイルズ」！
Phoenix Frameworkを使ったらしく、聞いていてとても楽しいプレゼンでした。

@diffeasyjp インターンで形成されたチーム！サービス名がルビーオンレイルズ笑 #hackfesfuk pic.twitter.com/ENeOEHhkTd
— かつを🐶 (@katchan_fuk) 2019年3月10日

4番目の発表は、メンヘラちゃんを真のエンジニアに導く（？）プロダクト
メンヘラちゃんかわええ。フリー素材か。最高や。

チームメンヘラポテトは、私生活から陰キャラ度を測定(真のエンジニアへ導くサービス)いんど彼〜 #Hackfesfuk pic.twitter.com/nclMEEfAkO
— かつを🐶 (@katchan_fuk) 2019年3月10日

5番目の発表は、長崎から参加のチーム。
ラーメンに注目したサービス！
ラーメンに特化したサービスは我々も考えたがいいアイデアが出ず、このチームのチェックインだったり称号を付与するのは良案だと思った。

長崎からのチーム。他県民は福岡に来てまずラーメンを食べたいと考えるらしい！#hackfesfuk pic.twitter.com/1LbbEEVGfv
— かつを🐶 (@katchan_fuk) 2019年3月10日

やっぱりハッカソンの楽しいところは、人のプロダクトを知れるところだよね！

懇親会がスタート 17:30~

違うチームの方と交流したり、お互いをねぎらい合い

楽しかったなあ。

そして、

いよいよ結果発表！！！

どんどこどんどこどこどこどこどこどどん！

「優勝は、チーム卍～！」

ばんざ～～～い！！！！！！！

みなさまのおかげです。ありがとうございました！！

マジ卍！！！おめでとう🎉 #hackfesfuk pic.twitter.com/kqhB7jvqr8
— あちゃ (@achamixx) 2019年3月10日

景品は、後日送られてくるとのこと！ ~~届いたら追記します。~~ [2019/3/30　追記] 無事、届きました！ありがとうございます！

f:id:rkdora:20190330173649j:plain — 優勝景品

そして、Twitter盛り上げ大賞は・・・

質のよいツイートだ🎉 #hackfesfuk pic.twitter.com/Kbs5ddwPyR
— あちゃ (@achamixx) 2019年3月10日

Twitter部門優勝🏆#hackfesfuk
— 白メガネの『クボ太郎』 (@kubo_programer) 2019年3月10日

文句なしです。おめでとう！！！('ω')ノ

f:id:rkdora:20190312170859j:plain — 全体写真

そんなこんなで、２日間のハッカソンが終わりました。

まとめ

今まで触ったことのない新しいデバイスである、Leap Motionに挑戦できてよかった。
MVP（実用最小限の製品： minimum viable product）を意識したことが、うまくいった要因。
ジェスチャーによるアニメーションは、あきらめた。もし、こだわっていたら完成できなかったと思う。
アジャイル開発の経験を活かすことができ、成長を実感することができた。

githubはこちら。余裕があるときに、記事にできたらと考えています。

github.com

解散後

3/9 10:30 ～ 3/10 16:00 およそ30時間ほどの開発。

一緒に頑張ったメンバーと祝杯をかわすべく、夜の天神へ繰り出そうとした際に、

いつもお世話になっているサポーターズのTJさんの御厚意により、もつ鍋ごちそうになりました！

沁みました。

うまかったなあああああ。

f:id:rkdora:20190312155927j:plain — もつ鍋楽天地にて

ごちそうさまでした！！！

Hack Festival Fukuokaを企画・運営していただいた長沼様、スポンサーの皆様、参加者の皆様、ありがとうございました！！！
チーム卍一同