Hack Day 2016に参加して「Life Lapse」をつくって入賞しました！

Hack Day 2016に参加してきました。
かれこれ4回めの参加です。

Hack Day（ http://hackday.jp/ ）というのは、土日の24時間（本当に午前9時〜翌日午前9時）という時間制約のもと「動く」プロダクトを開発し、その後90秒で発表するというYahoo!JAPANの名物イベントのOpen版です。

今回も会社つながりのメンバー（でもこの組み合わせは初めて）で参加しました。

とりあえずの説明

とりあえず作ったものは
「Life Lapse」
です。


アクションカムなどが小型化してきており、もう既に1日じゅうを録画することは技術的には可能となっていますが、実際にそれをやったところで、その動画をどう活用するか？という問題があります。

それを解決する方法として僕達は「Life　Lapse」を作りました。

なんとめでたく賞をいただくことも出来ました！

ということで、いつもの振り返りつつ何をやったのかを説明していこうと思います。


↓実際はブラウザ上で動作するのですが、動作の様子をgifアニメで録画してみました。

早送りで再生されつつ、注目ポイントではゆっくりと再生されているのがわかると思います


参加メンバー

  • @kasahi　発起人？　今回のリーダー的存在
  • @shamabe ライブコーダーなあの人　Hacker's　Bar（ http://hackers.bar/ ）でライブコーディングをするなどHackerの鑑
  • ばりーさん　仕事ではAndroidアプリなどをバリバリ開発してる人
  • cacciemaさん　仕事はWebデザイナー、といいつつかなり幅広い仕事をしてる印象の方（社内でたまに合うくらいなので、まぁ印象、ということで）
  • matsuchiさん　仕事はWebデザイナー、絶賛JavaScriptを勉強中らしい（こちらはチーム作るまでは全く面識なしでした）
  • 僕 誘われて参加しました。

社内や社外のHackathonに顔を出すことが多い人ばかりというのが特徴かな？

参加まで

開発などは24時間でやるのが条件だが、打ち合わせなどは事前にやることが推奨されている。
ということで、開催の1ヶ月前くらいからちょこちょこ集まり始める

といってもそれほどみんな時間も取れないので、夜ご飯を一緒に食べに行ったりして、そこでアイデア出しをする感じです。
しかしここで大きな問題が！
「アイデアがまとまらない！！！」

今回6人というわりと大人数チームだったということもあって、なかなかアイデアがまとまりません。
「それはもっとすごいものを見たことがある」
「それは何の役に立つのか？」
などと言い出すと、そもそもいいアイデアというのが出てきませんでした。

個人的にはこういうときのアイデア出しでは、いま流行りの技術を使ってみるという観点で考えることが多いのですが、どうも最近「ディープラーニング」や「人工知能」、「FinTech」といった一朝一夕では使いこなせそうにないものが多く、それらをベースにしてもなかなか良さそうなアイデアに結びつかなかったです。

また、理論的にできるか？ということに加えて、「参加メンバーが24時間で開発できるか」という観点も考えなければいけません。
それぞれに得意なことがあるので上手く活かしていきたいのですが、どちらかというと旧来のWebの技術をベースに仕事をしているので、本当にガチデバイス作成 みたいな方向にいくのも難しいなぁ、、 しかしWebアプリ作るだけではなかなかみんなをあっと言わせるものを作るも難しいし、、、

いくつかの案は「できるかも？」と言うものがあったのですが、少し実証実験をしたところで実現可能性がとても薄くなるものや、「思ったものとは違う！」といったものも出てきて、良さそうに思ったけどボツになる案もありました。

そんなこともあって、実際に今回のネタにしよう！と合意が取れたのはHack Dayの前日の金曜の夜でした。

Hack Day開始

今回は秋葉原が会場ということで、朝眠い目をこすりながら集合
朝9時に「Hack　Time!」の掛け声とともに開発開始です。

私達のプロダクトまず必要なものは、頭に固定できるアクションカムと、JINS　MEME（ https://jins-meme.com/ja/ ）と、JINS　MEMEから取れる様々なセンサーのデータを記録する仕組みです。

アクションカムについてはオリンパスの方が貸し出してくださったレンズスタイルカメラ( http://olympus-imaging.jp/product/opc/a01/ )を使おうと考えていました。
しかし、会場で電波を発するものが多いせいでWifiの電波状況が非常に悪く（Hackathonではよくあることなので、やはりか・・ という印象でしたが）スマートフォンとの連携が前提となっているレンズスタイルカメラでは、撮影が心許ないということや、頭への固定方法を考えなければ、、 という問題が出てきたため、秋葉原で調度良いアクションカムを調達することにしました。

JINS　MEMEについては、知人で持っている人がイたので借りてくることに成功しました。

そして一番大事なJINS　MEMEのデータを記録する仕組みの部分です。
どうもまだ安定して動くSDKがiOS版しかないということで、JINS　MEMEのクライアントとしてはiOSでうごくアプリを作ることになりました。
しかしうちのチームメンバーでiOSのアプリを得意としている人はいませんでした、、

やったことがないわけではないので、一番かけそうなばりーさんにとりあえずお願いをして書いてもらうことに、、
普段はAndroidの開発をしている方なので、Androidだったらもっと早く作れたのに・・ と残念そうでした。
わたしも少しiOSのアプリは作ったことがあったので、慣れないばりーさんの補助ということでいわゆる「ペアプログラミング」をしました。

といっても一般的な？ペアプログラミングとは違い、ばりーさんがコードを書いている間に、僕が次必要となるAPIの仕様を調べて、 それをざっと伝えて、 ばりーさんはその情報を元に新しいロジックを書いて、 という、なんというか「パラレルディベロップ（造語です）」をしました。

JINS MEMEのデータは、一度iPhoneのアプリに貯めこまれ、それをサーバに送ってサーバ上のMySQLに保存することにしました。
そのためのサーバの設定やサーバプログラムは@kasahが作成してくれました。

といいつつ@kasahさんは買ってきたアクションカムの設定をしたり、画質はどのくらいで行こうか？、プレゼンの時にどのような画面構成だと見栄えがするだろうか？など総合的なプロデュースをしていたので、途中から サーバのプログラムは僕にバトンタッチして、ばりーさんがつくったiOSアプリからサーバプログラムにデータを送る部分の最終的なすり合わせは僕が行いました。

デザイナのcacciemaさん、matsuchiさんは画面の構成の案を出したり、プロダクトの企画意図の詰めや、プレゼンを進めていくうえでどのように伝えると誤解なくスムーズに伝わるか、ということを考えたりしていました。
プレゼン資料のの草案や画面の簡易的なイメージ図などを作ってもらいました。

@shamabeさんはブラウザ上で動く動画再生のしくみとその見た目の部分を作っていました。
今回のプロダクトの画面は、動画と各種データがたくさん表示されるため、拡張性の高い仕組みが必要だということで、基本的な動きの部分をかなり丁寧に作っていました。
また、動画の再生速度を柔軟に調整できるための汎用的な仕組みも作ってもらいました。


このプロダクト、プレゼンで必要なものとして「実際にLife Lapseを使って要約した動画」があります。
これを撮れるのはこの日の明るいうちだけ！ということで、昼ごはんまでになんとか撮影の目処を立てる必要がありました。

昼を食べにいく段階ではiOSアプリの完成度は80%と言った所、何故か上手く通信できずJINS MEMEのデータは端末に残ったままとなっていました。

しかしお腹も空いたのでとりあえず昼ごはんです。
昼を食べつつ今後の流れを確認しました。

なんとか撮影へ

そして、戻ってきて程なくしてアプリが完成しました。
（通信が出来ないのはいわゆるAppleのATSに引っかかってたからでした、初心者丸出しのあるあるですね；）
サーバに実際に送られたデータを保存して、なんとか行けそうなことを確認して、いざロケハンに出発です。
（サーバで保存するところも変なバグを僕が仕込んだためにちょっと時間をロスしました・・）


アプリから淡々と送られてくるデータを見つつ、居残り組はデータの解析方法の検討を始めることに、、
ともかく可視化しないとはなしにならないなということで、僕はブラウザ上でJINS MEMEのデータを可視化する仕組みを作り始めました。
ばりーさんは引き続きJINS MEMEアプリの改良を行い,GPS座標やAppleWatchから脈拍を取得するなどの機能の開発をはじめました。

1時間ほどでロケハンを終了して戻って来ました。

カメラからムービーデータをパソコンに移し、JINS MEMEのデータはMySQLからダンプして取り出します。

僕は、ダンプしたデータをJavaScriptで扱いやすいように変換するちょっとしたスクリプトを書いて、作りかけていた可視化ツールを使って、JINS MEMEのデータをグラフ化しました。


@shamabeさんは動画データをパラパラマンガのようなたくさんの画像ファイルに分割して、ファイル名を適切に変換して、作成した動画再生の仕組みの上で再生出来るようにしました。

ということで、日が暮れることには、「なんかブラウザ画面で動画が再生できて、速度も調整できる」という状態にはなりました。

いかに解析するか？

夜ご飯のお弁当を食べた後は僕はJINS MEMEのデータをいかにして上手く使うか を考え始めました。
見た目がある程度想像できるようになってきたのでデザインの得意なcacciemaさんmatsuchiさんは、さらにデザイン部分を詰めていたようです。

またGPS座標が取れるようになったので、夜にもう一度撮影に行こうということで、外に再びロケハンに行ったりもしました。

そろそろ終電も近づいてきたということで、うちのチームでも帰る人は一旦帰って明日また来るということになりました。

といいつつ@kasahiさん、@shamabeさん、ばりーさん、私は、残って夜通し作業することに・・

JINS MEMEのデータを組み合わせるうえで大変だったことは、まず「動画とJINS MEMEのデータの位置合わせ」です
動画、とJINS MEMEは別のデバイスで、それぞれがそれぞれデータを記録しているので、当然ですが、JINS MEMEのグラフのどこが動画のどこに対応するかがわからない状態でした。

加えて、それぞれのデバイスのフレームレートも違うため、その作業は困難を極めました。
動画は15FPS　JINS MEMEのデータは大体0.05sに1つのようでした（20FPS)

これらの条件を元に、グラフとにらめっこして、JINS MEMEのデータと動画のオフセット・スケールを決定します。
スケールは上記に書いた通り仕様がわかっているので、後はオフセットです。

JINS MEMEの取れるデータの中のZ方向の加速度　が歩いているときと止まっているときでかなり顕著に差が出ているということで、まずはそれを利用して、当たりをつけました。
おおまかに位置があったところで、次は首を左右に振る動きに着目し、カメラの左右移動とJINS MEMEのデータが合うように微調整しました。

これで動画とJINS MEMEのデータが対応しました。

さて、ここからは数学の時間です。どうやって動画内の「注目ポイント」を出してこようか・・？

グラフを見たり、計算式を考えて、新たにそれもグラフにしてみたりしながら、試行錯誤を繰り返す・・
時刻は夜中の3時頃、、
グラフを見つめつつ、横では秋葉原散策動画を再生して、、、、

いくつかの注目ポイント作成のアルゴリズムを考案することが出来ました。

たとえば、、

  • Z方向加速度をうまく平均化したうえで、閾値で判定し、更にその結果を平均化することで、歩いていて「おっ？」と立ち止まった場所の検出をする
  • 首の動き（特に見上げる方向）を閾値で判定することで、なにか上下にものがあってそれに着目するために、見上げている・見下しているポイントを検出する
  • JINS MEMEに組み込まれている「isWalking」という値を利用して、「歩くのをやめた直後」を検出して、店に入った瞬間や、ふと足を止めた瞬間を検出する

などといった、注目ポイントの検出方法を発見しました。

朝7時、夜帰っていたメンバーも再び会場に戻ってきて、デザインとプレゼンの最終調整です。
（もう一人cacciemaさんは風邪でダウンでした、 無念・・お大事に）

僕はというと大体やりたいことが出来たし一安心、ということでちょっとウトウト・・（10分、20分だったかと・・）

そしてついに「Life Lapse」が完成しました！

発表は@kasahiさんということで、僕のできることはここまでか、、ということで
まぁ万が一のために自分のPCでもプレゼンが出来るようにとデータをもらったり、展示の時に見せる用のグラフデータを作成したり、、などをしていました。

発表・そして、、

そしていよいよ発表会です。
9時に開発を終了して、発表は10時からのスタートです。

僕達のチームは2番めの発表ということで、慌ただしく会場に移動。
せっかくなので全員前に出ようということで、とくにやることも無いのですが、舞台裏に行くことに。
発表は想定通りに行うことが出来、一安心。

全部で80チーム近くあるということで、自分たちの発表が終わってからも14時過ぎまで発表が続きます。

僕はせっかくなのでということで、会場でずっとほかチームの発表を見ていました。
他のチームも面白い発表ばかりで、中には「僕達もやろうかと検討していたやつ」もあったりとかして、かぶらなくて良かったーなどと安堵したりしていました。

怒涛の発表が終わった後は、展示会です。

多くの方に興味を持っていただけたようで、ブースにはたくさんの方が来てくださいました。
結構詳しい方も多く、「どうやって注目の時間を算出しているのか？」といった技術的に聞いてほしい質問をバシバシとしていただいたりして、 それはですね・・・ と自慢気に説明したりしました。


1時間ほど展示をした後に、賞の発表です。

イベント案内にあった賞は
グランプリ、金、銀、銅
だったのですが、どうもそれ以外にも4組ほど受賞される賞があったようで(名前がわからないので「ノーマル賞」と呼びます）
私達はその「ノーマル賞」をいただくことが出来ました！

商品にはHackey( http://hackey.cerevo.com/ja/ )をいただきました。



他の受賞作品も「やっぱりね」というものがほとんどで、納得感ある審査結果でした。

授賞式の後は懇親会です。
知り合いも多く参加していたため、うろうろ回りつつ「なんであれを作ろうと思ったの？」など、作った人同士での意見交換や感想を言い合ったりしました。

で17時くらいに解散。
帰って風呂に入ってから泥のように寝ました。。

お疲れ様でした。

感想

今回もたくさんの勉強をしました

  • 最新のiOS開発について
  • Jins MEMEの使い方と取れるデータ
  • @shamabeさんの圧倒的なきれいなコーディング（ライブコーディング的コーディング）
  • などなど

仕事ではやらないようなプログラミングを、いつもとは違うメンバーで出来るこのイベントでは、いつもこういった新しい事を学ぶことができます。

また、24時間爆速でものづくりの流れを体験できるため、プロダクト開発についての経験値がとても上昇するように感じます

たとえば、どこを諦めるのか だったり、 何をコアとしてピボットするかだったり、 メンバーとのコミュニケーションだったり、 作業の段取りだったり、、 etcetc

会社での大きなものづくりではこれらの流れはもっとゆっくりと流れていくため、ついつい全体が見れなくなってしまうのですが、Hack Dayでは24時間という縛りの中でこれらを進めていく必要があります。

また、これだけの多くのチームがテーマを絞らずに好き勝手にものづくりをしているため、その成果物はそれぞれが個性的にはなりつつも、いくつかの傾向が見られるというのもHack Dayの面白いところだと思っています。

それは今後の世の中の流れを示していたり、 今の「イケてる」を示していたり、 現代の課題を示していたり するのだと思います。（スタンドアローンコンプレックス？）

今回で言うと・・

  • クマのぬいぐるみを利用したHackが異様に多い
  • 司会者の方が話題にする程に「生首」の出てくるプロダクトが多い
  • バレンタインデーにちなんで ぼっち脱却 的なプロダクトが多い （そしてそのアプローチが様々なのも面白かった）

とかですかね・・ｗ（もっと他にも真面目な共通項もたくさんありますよｗ）

とまあ、今回もとても得るものの多いHack Dayでした。

一緒にチームで戦った皆さん、Hack Dayを実行するにあたってご尽力されていた皆様、ほかチームで楽しいHackを披露してくれた皆様、来ていただいた観客の皆様に感謝します。


過去のHack Day

Hack Dayは今回で4回めで、僕は過去3回も参加しました。宣伝的にリンクを置いておきます。

その他の記事たち

発見したら追記していきます

そして何ら役に立たない作品がたくさんある。くだらない作品に注がれた情熱は、となりのエンジニアを刺激し、よりくだらなくなっていく。そして仲間が増えていく。カオスの中でクリエイターたちのネットワークが育っている。

ｗｗ そういう一面もあるかも・・