10/9-10/10にはこだて未来大学で開催された 「Mashup Awards*1 2016 函館予選」 に参加してきたので、お酒を片手にハッカソンレポを書いていこうと思います。
mashupawards.doorkeeper.jp
参加者としてハッカソンに参加するのは実に1年ぶりでした。昨年6月のSPAJAM振りでした。
natmark.hateblo.jp
前回のハッカソンも、予約したはずの夜行バスが取れてなくて大変でしたが、
今回のMashupAwardsでも困難が立ちはだかるのでした...
1日目
スポーツ・食べ物に関する絵を描いてアイスブレイク!
かきかき。左側は僕です。なんの絵でしょう〜か?*2
アイデアソンとチームビルディング!
アイデアソンの様子です。
「未来キーワード」×「スポーツ・食べ物」でマッシュアップ!
アイデアを考えて...
チーム募集!
チーム決定!
今回、僕と学部4年の先輩が同じアイデアだったので
「手を使わない卓球」 をチームを募集して作ることになりました。
チーム募集を行った結果...
- H.Sさん(デザイナー・学部1年生)
- N.Sさん(デザイナー・学部1年生)
- S.Kさん(エンジニア・中学1年生)
- 自分(エンジニア・学部2年生)
- K・Sさん(エンジニア・学部4年生)
5人のチームができました!
エンジニアが3人・デザイナーが2人というバランスが良さそうなチームになりました。
なんとこのチーム、最年少が中学1年生、チーム平均はなんと18歳!
周りのチームが学部4年生や院生のメンバーが多いなか、平均年齢18歳は異彩でした。
ハッキング!
今回ですが、「手を使わない卓球」を作るにあたって、SONYさんのSmart Tennis Sensorを使用しました。
こちら、本来テニスラケットに取り付けて、スイングスピードやスピンを測定するものなのですが...
これをなんと...
足に付けてみました!
ちゃんと値も取れてます!!
この時点でまだお昼前。順調と思いきや、この後様々な困難が立ちはだかるのでした...
お昼ご飯
函館名物ラッキーピエロ。未来大生からすると、みんな食べ慣れた味ですねw
午後→夜
午後に入って、まず第一の困難。
エンジニアのK・Sさんが突発的な発熱
ハッカソンで体調を崩すことって結構あるんですよね...僕もよくあります...。
無理しても体調が良くなることはないので、K・Sさんにはしっかり休んでいただいて、他のメンバーでK・Sさんの分まで頑張ることに。
まず、アプリの構成を考えました。
これが初期案です。Smart Tennis SensorがAndroidしかAPIを提供していないため、Android端末を経由させています。
Smart Tennis Sensor一つの値だけでしたので、サーバを立てる時間も人も余分に割くのはもったいないため、mBaaSを使うことにしました。(これが後々大変なことに...)
この時点で僕が最年長になったので、プロジェクトのリーダーを担当することに。
とりあえずタスク振りをする必要があったので、
- H.Sさんにプロダクトデザイン・UIデザインをお願い
- N.Sさんに3Dモデリング・モデルデータ整形をお願い
- S.KさんにAndroid経由でセンサーの値をmBaaSにデータストアできるようにお願い
- 自分はUnityでゲーム本体を作ることに
午後は個人でこつこつやる感じに
午後の成果
ロゴマーク
3Dモデル
Unity
ゲーム画面が、ピッチングマシンみたいにボールが出てきて、卓球台の上を跳ねるように。
Android
mBaaSデータストアにデータ送信できるように。
新たな問題
この時点で、一日目19時くらいなのですが、新たな問題が。
mBaaSのデータストアイベントをハンドラにして、Push通知の作成ができない!(できると思ってた!)
完全にこれは僕の調査不足でした...。
mBaaSはスクリプトを記載できると聞いていて、サーバ側でトリッキーな処理もできるものだとばかり思っていました...
仕方ないので、構成案を変えることに。
AndroidからNCMB SDK経由でPush通知を作成することに。
しかしそこでも、新たな困難が。
Push通知はUnity側で受け取ることができず、UnityからiOS・Androidに書き出したあと、
iOS・AndroidのOSの機能として利用することができるというもの。
UnityにNCMB SDK追加したからと言って、Unityで使えるわけではなかったのです。
ならこうだ
ということで、iOSに書き出してみましたが、
iOSでPush通知を使うにはDeveloperアカウントと証明書が必要なんですよね...
幸いにもS.KさんがDeveloperアカウントを持ってたので、証明書作る→Unityから書き出し→起動→エラー→証明書作成→...
を繰り返し3時間経過...
結局解決できず、この時点で22:30。
S.Kさんが未成年で、親さんのお迎えがあることもあり、一日目の作業はここまでに。
家に帰って
一日目の作業はここまでにということで、大学から帰ってきましたが、データ通信もできてないのに、寝れるわけもありません。
なんとかデータ通信をしようと構成案を練ります。
mBaaSがダメならFireBaseだ!ということで...
これなら、Push通知ではなく、Databaseの値が更新されたとき自動的にイベントが実行され、クライアント側で受け取れる!
と思ったのですが、そんな簡単なはずもなく、Databaseのルール設定を行って、APIキーやらURLやらをunofficialなUnityのFireBase SDKに指定したものの...動かない。この時点で1時。
ここで、これ以上BaaSに執着すると失敗しそうだったので、サーバを立てることを決意。
ただ、僕にWebの知識がなかったので、この構成で一つミスを犯すことになります。
androidからpost送信、Unityとサーバはsocket通信によって、それぞれOSの機能を意識しなくても良くなります。
ただし、同じサーバでRestfulAPIサーバとWebSocketサーバを同時に立ち上げたのが間違いでした。
ポートを変えていれば、同じサーバでもいけると思ったのですが、
Herokuを使っている関係で、ポート番号はProcess.env.port
に置き換わってしまい、ユーザ定義にできないのです。
これでもまだだめ...
Android側もSocket通信にしちゃおうという構成です。
every-studio.com
こちらを参考にしました。
フロントエンドで実装したフォームからUnityにsocket通信ができていることを確認。
これでいけそうな気がしたので、1日目はここで寝ることに。3時就寝。
2日目
MAは10時からですが、S.Kさんと早めに作業することに。8時起床。
朝の未来大学。おはようございます。
MAが始まるまでにAndroidのsocketを頑張ってました。
2日目始まりました
10時〜12時
S.KさんとひたすらAndroidのsocketを試しました。
こちらを参考にしました。
dev.classmethod.jp
ここでも困難が。Unityで指定しているURIを設定しようとしたところ...、
socket = new SocketIO("http://10.0.2.2:3000/");
この部分ですが、WebSocketプロトコルが指定できず、httpかhttpsを使ってくれとのこと。
しかし、http/httpsを使用するとなぞのhandshakeエラー...
Androidに詳しいわけでもないのでお手上げ...
*3
デザイナーのN.Sさんには、相手キャラクター、卓球のラケットの3Dモデルを用意してもらうようにお願いしました。
同じくデザイナーのH.Sさんには画面UIのデザイン素材の用意やプレゼンの作成をお願いしました。
お昼ご飯
はせがわストアのやきとり弁当でした。
やきとりなのに豚肉です。僕も3ヶ月前くらいに初めて知りました。
13時〜15時
これ以上Android側に負担を増やせなかったので、構成案を変えることに
サーバを2つ経由させました。
今回はHeroku様様。node様様でした。
ただ、GETでアクセスできるようにしたのにもかかわらず、Android側からURLRequestできない謎のエラー、、。
時間いっぱい対処しましたが、対応しきれませんでした、、。
発表会
記事がだいぶ長くなってしまいましたので、他チームの発表はぜひ
MashupAwardsのTwitterから確認してみてください。
twitter.com
僕たちの発表
いろいろやりたかったのですが、結局メインの機能も不十分のままで、悔しい結果に終わってしまいました。
実装力に課題が残ってしまいましたが、次回のハッカソンに生かしたいです。
懇親会
ハッカソンといえば懇親会でお酒...はなかったですw
20歳になって、お酒が飲めるようになったのでちょっと期待していたのですが...!
家に帰ってから
ノベルティーもハッカソンの醍醐味の一つですよね
MashupAwardsお泊りセット
Hacklog
http://hacklog.jp/works/48558
ハッカソン内で作成したリポジトリ。
github.com
久しぶりのハッカソン楽しかったです。
来年もMashupAwardsが(函館で)あれば参加しようと思います。(次は入賞目指して!)
おしまい。