MashupAwards2016 函館予選に参加してきました！

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を使用しました。

こちら、本来テニスラケットに取り付けて、スイングスピードやスピンを測定するものなのですが...

これをなんと...

足に付けてみました！

f:id:n_atmark:20161011000020g:plain

ちゃんと値も取れてます！！

この時点でまだお昼前。順調と思いきや、この後様々な困難が立ちはだかるのでした...

お昼ご飯

函館名物ラッキーピエロ。未来大生からすると、みんな食べ慣れた味ですねw

午後→夜

午後に入って、まず第一の困難。

エンジニアのK・Sさんが突発的な発熱

ハッカソンで体調を崩すことって結構あるんですよね...僕もよくあります...。 無理しても体調が良くなることはないので、K・Sさんにはしっかり休んでいただいて、他のメンバーでK・Sさんの分まで頑張ることに。

まず、アプリの構成を考えました。

f:id:n_atmark:20161011001525p:plain

これが初期案です。Smart Tennis SensorがAndroidしかAPIを提供していないため、Android端末を経由させています。 Smart Tennis Sensor一つの値だけでしたので、サーバを立てる時間も人も余分に割くのはもったいないため、mBaaSを使うことにしました。(これが後々大変なことに...)

この時点で僕が最年長になったので、プロジェクトのリーダーを担当することに。 とりあえずタスク振りをする必要があったので、

  • H.Sさんにプロダクトデザイン・UIデザインをお願い
  • N.Sさんに3Dモデリング・モデルデータ整形をお願い
  • S.KさんにAndroid経由でセンサーの値をmBaaSにデータストアできるようにお願い
  • 自分はUnityでゲーム本体を作ることに

午後は個人でこつこつやる感じに

f:id:n_atmark:20161011002935j:plain f:id:n_atmark:20161011002952j:plain f:id:n_atmark:20161011003008j:plain

午後の成果

ロゴマーク f:id:n_atmark:20161011003510p:plain

3Dモデル f:id:n_atmark:20161011003531p:plain

Unity

ゲーム画面が、ピッチングマシンみたいにボールが出てきて、卓球台の上を跳ねるように。

Android

mBaaSデータストアにデータ送信できるように。

新たな問題

この時点で、一日目19時くらいなのですが、新たな問題が。

mBaaSのデータストアイベントをハンドラにして、Push通知の作成ができない！(できると思ってた！) 完全にこれは僕の調査不足でした...。 mBaaSはスクリプトを記載できると聞いていて、サーバ側でトリッキーな処理もできるものだとばかり思っていました...

仕方ないので、構成案を変えることに。

f:id:n_atmark:20161011004458p:plain

AndroidからNCMB SDK経由でPush通知を作成することに。

しかしそこでも、新たな困難が。 Push通知はUnity側で受け取ることができず、UnityからiOS・Androidに書き出したあと、 iOS・AndroidのOSの機能として利用することができるというもの。 UnityにNCMB SDK追加したからと言って、Unityで使えるわけではなかったのです。

ならこうだ f:id:n_atmark:20161011005126p:plain ということで、iOSに書き出してみましたが、 iOSでPush通知を使うにはDeveloperアカウントと証明書が必要なんですよね...

幸いにもS.KさんがDeveloperアカウントを持ってたので、証明書作る→Unityから書き出し→起動→エラー→証明書作成→... を繰り返し3時間経過...

結局解決できず、この時点で22:30。 S.Kさんが未成年で、親さんのお迎えがあることもあり、一日目の作業はここまでに。

家に帰って

一日目の作業はここまでにということで、大学から帰ってきましたが、データ通信もできてないのに、寝れるわけもありません。 なんとかデータ通信をしようと構成案を練ります。

mBaaSがダメならFireBaseだ！ということで...

  • 第４構成。

f:id:n_atmark:20161011005833p:plain これなら、Push通知ではなく、Databaseの値が更新されたとき自動的にイベントが実行され、クライアント側で受け取れる！ と思ったのですが、そんな簡単なはずもなく、Databaseのルール設定を行って、APIキーやらURLやらをunofficialなUnityのFireBase SDKに指定したものの...動かない。この時点で1時。

  • 第５構成。

f:id:n_atmark:20161011011433p:plain ここで、これ以上BaaSに執着すると失敗しそうだったので、サーバを立てることを決意。 ただ、僕にWebの知識がなかったので、この構成で一つミスを犯すことになります。 androidからpost送信、Unityとサーバはsocket通信によって、それぞれOSの機能を意識しなくても良くなります。

ただし、同じサーバでRestfulAPIサーバとWebSocketサーバを同時に立ち上げたのが間違いでした。 ポートを変えていれば、同じサーバでもいけると思ったのですが、 Herokuを使っている関係で、ポート番号はProcess.env.portに置き換わってしまい、ユーザ定義にできないのです。 これでもまだだめ...

  • 第６構成。

f:id:n_atmark:20161011011744p:plain Android側もSocket通信にしちゃおうという構成です。

every-studio.com

こちらを参考にしました。 f:id:n_atmark:20161011012554p:plain フロントエンドで実装したフォームからUnityにsocket通信ができていることを確認。 これでいけそうな気がしたので、1日目はここで寝ることに。3時就寝。

2日目

MAは10時からですが、S.Kさんと早めに作業することに。8時起床。

f:id:n_atmark:20161011012113j:plain

朝の未来大学。おはようございます。

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側に負担を増やせなかったので、構成案を変えることに

  • 最終構成

f:id:n_atmark:20161011013749p:plain

サーバを2つ経由させました。 今回はHeroku様様。node様様でした。

ただ、GETでアクセスできるようにしたのにもかかわらず、Android側からURLRequestできない謎のエラー、、。 時間いっぱい対処しましたが、対応しきれませんでした、、。

発表会

記事がだいぶ長くなってしまいましたので、他チームの発表はぜひ MashupAwardsのTwitterから確認してみてください。

twitter.com

僕たちの発表

いろいろやりたかったのですが、結局メインの機能も不十分のままで、悔しい結果に終わってしまいました。 実装力に課題が残ってしまいましたが、次回のハッカソンに生かしたいです。

懇親会

ハッカソンといえば懇親会でお酒...はなかったですw 20歳になって、お酒が飲めるようになったのでちょっと期待していたのですが...！

ハッカソン恒例、写真撮影

家に帰ってから

ノベルティーもハッカソンの醍醐味の一つですよね f:id:n_atmark:20161011015603j:plain

MashupAwardsお泊りセット f:id:n_atmark:20161011015619j:plain

Hacklog http://hacklog.jp/works/48558

ハッカソン内で作成したリポジトリ。 f:id:n_atmark:20161011015741j:plain github.com

久しぶりのハッカソン楽しかったです。 来年もMashupAwardsが(函館で)あれば参加しようと思います。(次は入賞目指して！) おしまい。

*1:様々なデバイス、API、ハードウェア、技術をMashup（まぜ合わせ）し、人、企業もMashupをしながら、作品を生み出すことを楽しむものづくりの祭典。 2006年に始まった株式会社リクルートホールディングスが運営す日本最大級の開発コンテスト.

*2:最近バドミントンをしたので、バドミントンの絵を描きました

*3:後々、このエラーは非同期処理をしないと発生するエラーかもしれないと教えてもらうことに。Androidに詳しい人物がいなかったのは、結構痛かったです。