中京テレビハッカソン「HACK-CHU!」の予選【アイデアソン】に参加してきました!

恒例のハッカソンレポです。

昨日3/4に、中京テレビで開催されたハッカソンHACK-CHU!の予選に参加してきました。 春休みで帰省していたので、地元のハッカソンに参加しよう!ということで、同じ大学の東海出身メンバーで参加しました。

高校生ぶりに会場がある、ささしまライブに行ったのですが、以前には無かった大きなビルがいくつも建ってました。時代の流れは早いですね…

チュウキョ〜くんと写真撮影

f:id:n_atmark:20170305164533j:plain 大学の友人4人で参加しました。

写真撮り忘れてしまいましたが、当日は名古屋造形大学さんの展示もありました。 はじめて本物のHololens見ました。笑

f:id:n_atmark:20170305164701j:plain

 今回のテーマ

今回は「ITで便利な暮らしをキャッチ!」というテーマでした。 日々の生活を豊かにするアイデアをテクノロジーで解決できるものを考えました。

個人的な見解ですが、最近のハッカソンはライフスタイル系のテーマが多いような気がします。 (暮らしについて普段深く考えることがないので、僕は実は苦手なテーマだったりします…。)

協賛企業さんのAPI紹介

IBMさんのBluemix、アプレッソさんのDataSpider、エーアイさんのAI Cloud、KDDIさんのTwilio、サイボウズさんのKintone、SoftbankさんのPepper、MicrosoftさんのCognitiveServiceなどの紹介がありました。

協賛企業がすごく豪華!

アイスブレイク & アイデア発散

午前中はチームがバラバラになって、アイデア出しでした。 アイスブレイクで自分の部屋を書いたのですが、自分の部屋の物の少なさに自分自身驚きました。 一人暮らし大学生の部屋なんて、そんなもんですかね(?)

イデアの発散は 「親」・「自分」・「子」の一日の行動や感情を「朝」・「昼」・「夜」でそれぞれ考えました。 「自分」はいろいろな行動が出てくるのですが、「親」と「子」はグループの中で同じような考えに固まってしまいました。

その後、「豊かにする」修飾語を書き出しました。 「3分でできる!」とか 「古の」とか 変なのたくさん出て来ました。w

でも、変な修飾語ってプロダクトのアイデア考えるときに結構使いやすかったりするので僕は好きですw

イデアウォーク

一人1アイデア考えて、みんなでアイデアを散策して星をつけて回りました。

人気アイデアは星がたくさん…!

チームビルディング

今回チームで参加したので、当初チームの中の誰かが考えたアイデアを作ろうと思ったのですが… 自分含めて全部面白そうじゃ無い!

ということで、チーム全員のアイデアをボツ案にしました。

このままではまずいので、アイデアマンをリクルートすることにしました。(当初諸事情があって、チーム分割は考えてませんでした。今思えば分割してもよかったかもしれませんが….)

たまたま、話しかけていただいた名古屋の学生さんたちとライブの話で盛り上がり、2人ジョインしていただけることになりました。 ライブが好きなフレンズを2名手に入れて、チームを結成しました。バンドとアイドルの力は偉大です。

大学2年生が5人。大学1年生が1人の平均20歳チームです。一番平均年齢若い…かも?

お昼ご飯

f:id:n_atmark:20170305172713j:plain

味噌カツに手羽先も。なごやメシ弁当でした。 普段名古屋にいない人間なので、お弁当のチョイスに感動していました。美味しかったです。

イデアソン

チームが決まったので、各チームのアイデアを深めていきます!

なお、午前中のアイデア全部破棄したので、この時点で僕らのチームのアイデアは何もなしです。 2時間しかない。呑気にお昼ご飯食べてる場合じゃ無い。

ライブの話で盛り上がってできたチームなので、ライブ関係のアプローチを考えました。

ただ、午前中のアイデア発散を一からやる時間もないので、 MA2016のゴッドル(http://hacklog.jp/works/49629)と うりゃおい!(http://hacklog.jp/works/48643)をチームに紹介させてもらいました。

ただ…

やっぱりいいアイデアが出ない。

そんなときに、チームのメンバーから「音楽って暮らしに対してそこまで干渉しないよね…」という言葉が。 たしかに、ライブが好きな人も毎日ライブ行ってるわけじゃないよね…

発想の転換

今回、iOSエンジニアが多かったので、アプリで完結するものをみんなが考えていたました。 一旦その考えをリセットしてみたときに、

「Pepper使ってみたいよね〜」

「そういえば、さっきのアイデア発散のときに出た幼稚園の連絡帳。それPepperに作ってもらえばいいんじゃない?Pepperとしゃべるだけで、園児の表情とかしゃべってる内容を取得して自動的に連絡帳ができるような感じのやつ」

「顔認識はMicrosoftさんのAPIがあるし、音声認識は…Bluemixにあったよね?」

チームの中で一気にアイデアが収束したので、これでいこう!!!となりました。

Pepperくん!うちのチームで使うよ!!!

いよいよプレゼン

発表トップバッターでした!!

「私たちは 私立「「「「「Pepper幼稚園です!!!」」」」」」

くじ運がいいのか悪いのか…w 掛け声トップバッターだったからある意味よかったのかな(?)




発表が終わった後、30秒近く残ってたので伴野さんから 「掛け声もう一回やっとく?」という提案が

「あ、じゃあもう一回やります!w」




「私たちは 私立「「「「「Pepper幼稚園です!!!」」」」」」

掛け声2回もやらせていただきました、ありがとうございましたww

他のグループのプレゼン

全部面白かった(というか、名古屋の人はユニークなアイデアがほんと多かったですw) のですが、ここで全部紹介できないのでぜひこちら↓もご覧になってください

中京テレビハッカソン(Hack-chu)#hackchu #MA_2017 - Togetterまとめ

懇親会兼審査時間

f:id:n_atmark:20170305180204p:plain

普段、北海道や東京のITイベントには顔出すのですが、そういえば名古屋近辺のITイベントは初めてなので 、知り合いの方がいませんでした。

コミュ障なりに頑張って声かけてみたところ、まさかの共通の知り合いが! 北海道のど田舎未来大を知ってくれている方も何人もいらっしゃって自分自身驚きました。

あと、明日から参加するインターン先に新卒で入社される方が、実はバイト先の先輩と同じ研究室だった。とかもありました。 世界は狭いですね。びっくり。

結果発表

ドコドコドコドコドコドコドコドコドコドコドコドコ デデンッ!!

「私立Pepper幼稚園!!」

ぼくたち「えっ?」

全員、発表順に本戦参加チームが発表されていると思っていたので、1番最初に呼ばれなかった時点で 残念だったと思ってたみたいですw

本戦参加決定しました!!!!

集合写真

今回、参加者が101名!名古屋でこの規模のハッカソンなかなかないですよね。 写真撮るのも一苦労だったそうな…w

感想

最近ハッカソンで成果残せてなかったので、まずは本戦出場権が取れてよかったです。 当初の4人だったら、多分本戦出れてなかったと思います。助っ人2名に感謝です。

幸い全員学生なので、平日の空いた時間も使って本戦に向けて準備しようと思います。

余談ですが、僕は明日3/6から3/17まで東京でインターンなので… 本戦出場決まるまでは、本戦出場権取れても不参加(Skypeで遠隔サポート)にしようかと思ってたのですが… いいメンバーに出会えたので、頑張って土日に名古屋に戻ってこようと思います。

来週もがんばるぞ〜

東京に行ってきました

突然ですが、2/26~2/28で東京に行ってきました。

観光と企業訪問とインターンの面談をするために東京へ行ったので、 記念に(?)ブログにまとめておきます。

0日目

夜行バスで東京へ! f:id:n_atmark:20170302124606j:plain 僕は夜行バスという乗り物が結構好きです。

寝てたら目的地に着いているので、移動時間を効率的に使えてると思います。

(金銭的に安いからという理由は二の次なので、ちょっと豪華な夜行バスにすることも多いです。)

1日目

東京駅で朝ごはん

f:id:n_atmark:20170302125010j:plain

東京駅の構内に函太郎*1の店舗があって、思わず写真撮ってしまいました。 f:id:n_atmark:20170302125256j:plain 函館以外にも店舗あったんだ…

秋葉原に行きました

f:id:n_atmark:20170302125534j:plain たまたま東京に来ていた大学のフレンズたちと合流しました。

f:id:n_atmark:20170302125742j:plain 神田明神です。ラブライブ!の聖地ですね。

僕はラブライブ!サンシャイン!!しか見てないので、ラブライブ!あまり詳しくありません。

時間があれば、沼津に遊びに行きたいです。

ディズニーへ

f:id:n_atmark:20170302130032j:plain

1日目のホテルはディズニーのオフィシャルホテルを予約したので、ディズニーにきました。 f:id:n_atmark:20170302130134j:plain f:id:n_atmark:20170302130140j:plain

オーシャンビューのコンフォートデラックスルームだそうです。

好きな人と泊まれたら、夢のような時間を過ごせそうですね。



安心してください。男二人旅です。

オーシャンビューな1泊6万円くらいするお部屋を1万2千円で予約しました。8割引きですね。

ホテル探すのも結構好きなので、毎回Boo○ing.comとかtri○agoとかじゃ◯んとかいろいろ駆使してホテル探します。

ちゃんとパークにも行ってきました。

Palazzo Canal area in disney sea reproduced the Venice. #Venice #disneysea #tokyodisneysea #東京ディズニーシー

Atsuya Satoさん(@n_atmark)がシェアした投稿 -

親が好きなので、毎年ディズニー行ってるのですが、 カメラを買ってから、楽しみが増えました。

2日目

体調崩して、死んでました。

1日目はしゃぎすぎました。ものすごく反省しています。

一歩歩くたびに足に痛みがきてしまい、2日目に予約したホテルまで行くのも結構大変でした。

本当は企業訪問とか、先輩に紹介していただいたコワーキングスペースとか行きたかったのですが、 体調的に無理でした…

ちなみに、2日目のホテルはアパホテル f:id:n_atmark:20170302132220j:plain

高校時代からよく旅行したりしてたので、アパホテルはよく使ってます。

もうすぐポイントで1泊できそう

3日目

2日目に療養したおかげで、3日目は体調も戻って元気でした。

インターン選考へ

f:id:n_atmark:20170302132502j:plain 今日のスタートは六本木ヒルズから。

インターン選考のために六本木ヒルズにきました。

初めて六本木ヒルズの中に入りましたが、仕組みがわからずあたふたしてました。

1階と2階がロビーになっていて、奇数階と偶数階で1階からエレベータに乗るか、2階からエレベータに乗るか別れているそうです。

さらに、AとかBとか区分分けがされていて、自分が行きたいオフィスがどこの階で、どこのグループに属しているかによって エレベータが異なるそうです。

入館証を発行してもらって、自分の行きたいオフィスが属しているエレベータのところに行けばやっと、目的のところへ行けるという仕組みのようです。

田舎者には難しい…

オフィス訪問へ

六本木から白金台へ

f:id:n_atmark:20170302133808j:plain Wantedlyさんのオフィスに訪問させていただきました!(写真許可いただきました)

会議室に予約管理用デバイスが備え付けられていたり、訪問者用の呼び出し端末があったりなど、 細かなところまで社内インフラが行き届いている感じがしました。

開発スペースも、壁がなく開放的な空間で、明るく出迎えていただけました。

また、インターンや勉強会などで訪問させていただけたらなと思います。

try! Swift Tokyo 2017 RejectConへ

3日目最後はtry! Swift Tokyo 2017 RejectConへ参加させていただきました。

3/2~4に開催されるtry! Swift Tokyo 2017のRejectConで、 本当はメインカンファレンスも行きたかったのですが、日程が合わずRejectConであればちょうど東京にいる時期と重なったので、 行ってきました。

f:id:n_atmark:20170302134856j:plain

カンファレンスに参加するのが初めてだったので、結構緊張しました。

でも、知見を得ることができるので、結構楽しかったです。

普段は北海道にいたり、岐阜にいたり、こういうイベントにあまり参加できないのですが、 逆に地元にいるときは、イベントの主催側に回ってどんどんITイベントを開いていけたらいいのかなぁと思ったりします。

さいごに

f:id:n_atmark:20170302135448j:plain 帰りももちろん夜行バスです。

体調崩したりもしましたが、濃い3日間だったと思います。(特に3日目)

実は今回伺った企業さんとは別の企業さんのインターンに参加させていただけることになり、 来週から10日間ほど、また東京に行きます。

今月もブログ記事がたくさん書けそうです(笑)

*1:函館の高級回転寿司チェーン

ipp2ハッカソンで貯金箱を作った話

大学の講義で課題制作がありました。 講義自体の制作時間が6時間ほどだったので、勝手にハッカソンと呼んでいます。(俗称ipp2ハッカソン)

課題の内容

Arudinoとセンサーを使って、プロダクトを作ろうという課題です。 1チーム3人程度で、アイデアを考えて実装しました。

作った物

買い物好きな人のための貯金箱 f:id:n_atmark:20170120224757p:plain f:id:n_atmark:20170120224802p:plain

コインを分別できる貯金箱に、フォトインタラプタをとりつけて、 貯金箱の中に入っている金額を表示。

また、Wi-Fiモジュールを取り付けて、貯金額に合わせて商品をリコメンドするというアイデアを考えました。

実装

今回は、

役割 担当
音声再生 自分
フォトインタラプタ S.Sさん
外装部分 K.Kさん

という担当で開発を進めました。

普段ハード側は触らないので結構苦戦しました。 また、時間が全然なかったため、ブレッドボード上でひたすらトライ&エラーの開発となりました。

f:id:n_atmark:20170120230318j:plain

自分が担当した音声再生は、 AquesTalk picoという音声合成LSIを使用しました。

また、配線とプログラムはこちらを参考にしました

動作テスト

完成品

上側の穴からコインを入れると、内部でコインが分別されて、フォトインタラプタによって金額を取得。7セグに表示というものになっています。 f:id:n_atmark:20170120232739j:plain

本来は、Wi-Fiモジュールを取り付けて、Web上でオススメ商品のリコメンドをする予定でしたが... 時間がなくて、実現できませんでした...

f:id:n_atmark:20170120232001j:plain Wi-Fiモジュールはちゃんと実装したんですけどね!!!!笑

失敗点

回路設計より、外側の貯金箱作成に時間がかかりました。 コインを分別するために、ミリ単位でコインの分別穴を調整する必要があり、予想以上に時間がかかってしまいました。

評価

担当の先生から「既製品の分別器付き貯金箱を外見に使えばよかったね」って言われてしまいました。ごもっともでございます...

一方で、コンセプトに関しては褒めていただいたいて、「改善してMashupAwardsなどに出したらいいかもね」とおっしゃっていただけたので、いつかリベンジしたいな〜と思っています。

FUNHACKS2017に参加してきました!

明けましておめでとうございます。 新年一発目の記事はハッカソンレポになります。

1/14(土)・1/15(日)にはこだてみらい館*1で開催されたFUNHACKS2017*2に参加してきました。

1日目

10時30分に集合でした。 開催場所のはこだて未来館は去年できたばかりの施設で、 行ったことがなかったので早めに会場に向かったところ、自分たちのグループが一番乗りでした。

f:id:n_atmark:20170120211155j:plain f:id:n_atmark:20170120211147j:plain f:id:n_atmark:20170120205256j:plain f:id:n_atmark:20170120205225j:plain

未来館できたばかりということもあって、すごく綺麗でした。 テラス席も勉強したり作業するのに良さそうです。

f:id:n_atmark:20170120205209j:plain

今回、同じバイトのメンバーでチームを組んで出場しました。 チームに佐藤が3人いたので、チーム名は「佐藤+α」でした(笑)

今回のお題

f:id:n_atmark:20170120212803j:plain 今回は、「ライフスタイル」をハックせよという課題でした。

僕たちのチームは当日、個人参加の方一人を交えて開発だったので、特にチームでアイデアを決めていませんでした。 アイデア最終決定まで時間があったので、日常生活を便利にする何かを考えてみました。

(ただ、アイデアソンをしてないので、出てきたアイデア数は少なかったです。やっぱり時間がなくてもアイデアソンはしたほうがよかったかもしれません。)

お昼ご飯

f:id:n_atmark:20170120205158j:plain

キラリス函館1階にある、パン・エスポワールさんでパンを買ってきました。おいしかったです。

開発

お昼ご飯を食べてから開発に入りました。 f:id:n_atmark:20170120212759j:plain 今回は

役割 担当
プロジェクトリーダー 自分
iOS開発 自分, S.Sさん, Y.Iさん
Webフロント開発 R.Dさん,T.Sさん
iOS UIデザイン 自分
Web UIデザイン R.Dさん

という担当で開発を進めました。

また、開発に関してチームでルール決めを行いました


  • 残りタスク、完了タスクは目に見える形で残す。(GitHub Projectなどを使用)

  • 複数人触る部分に関してはコードの記述に注意を払う。

  • 一つの問題に1時間以上かかっているなら、共有した上で代替案を探す。

  • 基本的にコア部分は1日目で終わらせる。


f:id:n_atmark:20170120205410j:plain

最近ハッカソンでの二刀流(PC2台使い)が定着してきてるような...

f:id:n_atmark:20170120205136j:plain

メルカリ水とKLabのエナドリいただきました!

1日目終了

f:id:n_atmark:20170120205241j:plain

1日目の進捗を共有しました。(ここまでは比較的順調に進んでいたのですが...)

夜ご飯

f:id:n_atmark:20170120220018j:plain 辛味噌ラーメンを食べました。 ラーメンやっまおかや〜

徹夜

f:id:n_atmark:20170120205314j:plain ハッカソンの醍醐味と言えば...

徹夜ですよね。

この辺りで重大な問題が起きてしまい、朝5時くらいまでは頑張ったのですが... 泣く泣くプロダクトの完成にはこじつけませんでした。(そのことは後ほど)

2日目

1日目の深夜に重大な問題が発生してしまい、代替案をひたすら検証していました。

発表

f:id:n_atmark:20170120212748j:plain f:id:n_atmark:20170120212752j:plain

今回、GitBookという、Gitで本棚管理ができるというプロダクトを考えました。 本の名前やバーコードから、Amazonの商品ページを検索し、アプリ内に保存。

アプリ内のDBをjsonにまとめてGitHubにpush。htmlやcssなどのファイルも合わせてcommitし、 GitHub Pagesで公開できる。

というアイデアだったのですが、 Swift用のGitラッパーライブラリであるSwiftGit2が使用できず、泣く泣く断念しました。

懇親会

f:id:n_atmark:20170120205423j:plain

お寿司やオードブルがふるまわれました!ですが、気づけば話すのに夢中でほとんど食べてませんでした!笑

集合写真

f:id:n_atmark:20170120205344j:plain

これもハッカソンの醍醐味ですよね。お疲れさまでした!

今回作った物

完成までは至らなかったのですが、制作物について載せようと思います。

今回初めてUIデザイナーを担当させてもらいました。 Adobe XDというUXデザインツールを使用して作成しました。

Adobe XDには、あらかじめiOSテンプレートが準備されているので、普段デザインを担当していない自分でも簡単に使うことができました。 f:id:n_atmark:20170120222007p:plain f:id:n_atmark:20170120222008p:plain

リポジトリ github.com

DevPost devpost.com

FUNHACKS次もあれば、また参加したいと思います〜!

以上、FUNHACKS2017レポでした!

*1:科学をベースとした先端コンテンツや彩なワークショップの体験を通してオドロクチカラを育み、街を元気にする活動を生み出す施設。 HP: http://hakodate-miraiproject.jp/

*2:函館の大学生、高専生を対象としたCIVICTECHハッカソン。 HP: https://careerselect.jp/funhacks2017/

MashupAwards 2016 2ndStageに参加してきました!

下書きに入れたまま放置してた...

12/3(土)に渋谷TOKYO CULTURE CULTUREで開催されたMashupAwards 2nd Stageに参加してきました!

10月にMashupAwards2016函館予選に参加したのですが、その時の優勝チームにエンジニアとして加えていただけることになり、今回準決勝に参加させていただきました。

函館予選のときの記事はこちら natmark.hateblo.jp

会場はこんな感じでした。 f:id:n_atmark:20170120202515j:plain f:id:n_atmark:20170120202610j:plain f:id:n_atmark:20170120202619j:plain

バーカウンターもあって、お酒も飲み放題でした〜 f:id:n_atmark:20170120202622j:plain

3部に分かれていて、56作品の発表がありました。

面白いプロダクトや、技術的にすごいプロダクトが数多くあり、すごく興奮しました。

ちょっとトラブルもありましたが、自分たちも無事発表できました。 f:id:n_atmark:20170120203052j:plain f:id:n_atmark:20170120203058j:plain

次世代型缶蹴りというプロダクトを発表してきました。 自分は、iOSアプリの回収とWebページの作成などを担当させてもらいました。 https://ma2016-kickthecan.github.io/

最後は集合写真をパシャ。 f:id:n_atmark:20170120203106j:plain

MA2016最高!!来年も参加したいので、すごいプロダクトを作るぞ〜!

MashupAwards 2016準決勝出展作品にみる、最近のAPI/デバイス/サービス事情

記事の内容

今回の記事は、12/3に参加してきたMashupAwards2016(http://mashupaward.jp/)準決勝の出展作品で使われている、API/デバイス/サービスを集計してみたらこんな感じだった! というLTを12/10のHakodate Hack Night Vol.7(https://www.facebook.com/events/719922814823940/)で話してきたので、そのLTについての記事になります!

↓LTのスライドはこちら

https://speakerdeck.com/natmark/hakodate-hack-night-vol-dot-7-lightning-talk

(スライド内ではAPI/デバイスとなっていますが、サービスも含んでます。)


簡単にスライドの補足

slide6

MashupAwardsの出展作品はすべてHacklog(http://hacklog.jp/)に登録されていて、

f:id:n_atmark:20161211181900p:plain

このように、作品ごとに使用したAPIを登録できるようになってます。 これを、スクレイピングと手作業で集計してみた結果がスライドに書いてあります。

slide7

API/デバイス/サービスを利用したグループが3つ以上あったものをランキングにしてみました。 1位が同率で、

でした。

slide8

集計した全APIをd3.js(https://d3js.org/)によって、バブルチャートにしてみたものです。 一番多くの割合を占めてる青色部分はIoTカテゴリのAPI/デバイス/サービスを占めています。 その周りに、オレンジ(クラウド・データ連携)、黄緑(ガジェット)、赤色(プラットフォーム)、ピンク(認識・解析技術)・・・と続いています。

slide9

集計したデータからIaaS、PaaS、BaaSといったクラウドサービスに関するものを抜き出してみました。(AzureはIaaSとPaaSどちらの面も持っているので、重複させています)のべ数が34あり、出場チーム56に対して、半分以上のチームがハッカソンクラウドサービスを利用していたことがわかりました。

slide10

今回myThingsやIFTTT(イフト)、DataSpiderといった、API連携プラットフォームを利用しているチームがそれなりに見られました。Webサービスやデバイスをプログラミングせずに連携できるもので、IoTブームに見られる新たなサービスなのかな、、。と思いました。

時間の縛られるハッカソンでこそ、見られた傾向かも。

slide11

最後に企業別に利用されているAPI/デバイス/サービスを利用されたAPI数(種類数でなく利用数)ごとに並べてみました。これ、利用種類数で並べてたら、API/デバイス/サービスの提供を頑張ってる企業がわかったかも。スライドの表見て分かるのは、マイクロソフトが圧倒的に人気ですね。

まとめ

データを解析するの楽しかったです。アナリティクススキルをつけるともっといろいろなことがわかるようになるのかなぁ...と思いました。 また何か機会があればデータ分析してみたいです。

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からiOSAndroidに書き出したあと、 iOSAndroidの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だ!ということで...

  • 第4構成。

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

  • 第5構成。

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

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

  • 第6構成。

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に詳しい人物がいなかったのは、結構痛かったです。