ワイルドで刺激的なHackを求めて24時間ぶっ続け開発の「Open Hack Day Japan 3」に参加してきました。 #openhackday

桜舞い散る風情に春という季節を感じているエンジニアの吉田でございます。

ちょっと業務がバタついてブログ書くのが一か月ほど遅れましたが、2015/3/7(土)~3/8(日)にかけて開催された「Open Hack Day Japan 3」に参加してきましたので、それのことを書いてみようかと思います。

 

hack (02 - 13)

IMG_0012hack (09 - 13)

 

「Open Hack Day Japan」とは?

「Open Hack Day Japan 3」はヤフーさん主催のイベントなのですが、もともとは世界中のYahoo!で開催されている開発イベントで、24時間という限られた時間内で何かを実際に開発して出来上がったプロトタイプを発表するイベント、というものらしいです。

「Hack Day」自体は、ヤフーさんの社内イベントとして2009年から行われていたらしいのですが(間違ってたらすみません)、2013年から「”Open” Hack Day Japan」という形で、外部からも参加できるイベントとして毎年開催されているようです。

2013年の「Open Hack Day Japan 1」、2014年の「Open Hack Day Japan 2」に続き、今年の2015年は3回目ということで「Open Hack Day Japan 3」というイベント名称になっています。

『ワイルドに刺激的なHack!』というコピーを至る所で目にしたような気がします。おかげで気持ちもワイルドになっちゃいます。

IMG_2361 IMG_2362

 

「Open Hack Day Japan 3」の流れ

「Open Hack Day Japan 3」は、開催日が 2015/3/7(土)~8(日)となっていましたが、その約1か月前の2/8(日)に「Open Hack Day Japan 3 カンファレンス」という事前のイベントがありました。

「Open Hack Day Japan 3」では、基本的に開発するものは何でもOKなのですが、協賛企業がスポンサーとしてついておりまして、各社からデバイスやAPIの提供がありました。

このような協賛企業さまのおかげで、このような素晴らしいイベントが開催されていますので、大変ありがたい次第でございます。Yahoo!様および協賛企業様、本当にありがとうございます。

また、プレゼン後に授賞式があったのですが、各協賛企業様がそれぞれ独自の視点で選んだ作品が受賞されるという形で、なんだかちょっとユニークだなぁと思いました。
最優秀賞は、全員が審査員で「いいね!」数が多かった作品が選ばれるシステムになっています。

 

「Open Hack Day Japan 3」までの事前準備

チーム編成

「Open Hack Day Japan 3」の参加は、チーム参加が必須ということだったので、とりあえず社内にいる若そうなスタッフに「ねぇねぇ土日っていっつも何してるの?」って質問をしたら「家で壁をみてぼーっと過ごしていたら一日が終わっています。」という回答をしてくれた子と、「寝て起きてFF14やって寝て起きてます。こう見えても忙しいんですよ?」という回答をしてくれた子がいて、何をどう考えても参加できると思ったのですが、ぜひ参加して頂けるよう謙虚に懇願いたしました。

一人はデザイナーの水野秀真(ましゅー)で、もう一人はエンジニアの深澤ひかり(@hico00)です。二人とも22歳という若さでまぶしい中、30を過ぎているわたくしはオジさんを自覚して頑張ろうと誓います。ましゅーはアルカナの中でもイケメン枠の二代目として承認されている22歳のイケメン(※)です。

※水野 秀真(みずの しゅうま)さんのページ
 http://motteru-ch.com/ikemenchips/p/040/

IMG_0609

 

作品の企画

作品の企画は、なんかIoTって言葉がはやってるからモノを使った何かにしたいなぁと考えていたところ、協賛企業に「RICOH THETA」と「アルプス電気マルチセンサーモジュール」というものがあったので、これを組み合わせて何か作ってみようと思いました。

「RICOH THETA」は全天球の映像なのに、スマートフォンやPC、テレビといったインターフェイスはずっとフラットなインターフェイスなのは面白くないなぁと思っていたところ「学研ワールドアイ」という面白そうなオモチャを見つけたので、これにTHETAの動画を映してみようということになりました。

Personal Geo Cosmosっていう面白いモノ作ってる人がいて、これと同じ仕組みにしようと考えたこともあったのですが、もっと大きいのが良かったのと開発時間考えると間に合わない予感がしたので民生品に頼ることにしました。

実物の「リーマン球面」を作ってた方もいたのですが、ブログ拝見した感じだとPersonal Geo Cosmosにインスパイアされているらしいということで、勝手に親近感を沸かせています。

あと、「Open Hack Day Japan 3」の前の週に、「オープンソースカンファレンス2015 Tokyo/Spring」というイベントが開催されていて、アルカナも企業ブースに出展していたのですが、この時に手元にあるサイコロを転がすとブラウザ上に表示されているサイコロの3Dオブジェクトが同期して転がるというIoTっぽいデモを展示していたことがあって、これの発展形にしたいという考えもありました。

※OSC 2015 Tokyo/Spring 感想などなど のこと。
 http://www.s-arcana.co.jp/blog/2015/03/03/2605

ということで、最終的な企画としては、

  • RICOH THETAで撮った全天球ビデオを球面のディスプレイに表示する
  • 地球儀のようなインターフェイスを作って、回すと全天球ビデオが回転する
  • 全天球ビデオは複数用意しておき、何か操作することで切り替えができる

というものになりました。

コンセプトは、平面/矩形/マウス/キーボードといった既存のユーザーインターフェイスからの脱却、です。

事前の準備としてはここまでで、こんな感じの手書きの青写真ができあがります。

slack_for_ios_upload

※「Open Hack Day Japan 3」では、アイデアは事前に考えてもOKで、実際の開発は24時間以内というルールだそうで。

 

先に、最終的にできあがったものを紹介しちゃいたいと思います。(この動画はイベント時のものではなく、後日改めて撮影したものです)。

 

地球儀っぽいインターフェイスで全天球ビデオをクルクル回す様子。

 

ビデオのコンテンツを切り替えている様子。

 

なお、技術的な解説は後述しています。

 

「Open Hack Day Japan 3」開催当日

「Open Hack Day Japan 3」の開催当日は、結構荷物があったのですが、@hico00が車を出してくれまして、本当にありがとうございます。

「会社(荻窪)に10時集合で!」といった約束のところ、予定通り11時頃までには集合したように思います。1時間なんて誤差ですよね。会場がミッドタウンで12時から開発開始のスケジュールだったのですが、意外とギリギリ間に合いました。

@hico00が、akippaというサービスで事前に駐車場を予約するという、いつにない段取り力を発揮して頂いたおかげでスムーズです。

そして、会場についてから早速開発に取り掛かろうとしたのですが、私のカミさんがまさかの歯医者の予約入れているという事案が発生し、ここで子守りをするために私が一旦帰宅することになります。

会場に取り残された若手2人からは、とても冷やかな目で送りだされました。

ミッドタウンでは、ちょうどクロックスの「空中ストア」というイベントが開催されていたらしく、優雅に靴を運ぶドローンだけは温かい目で見守ってくれていたように感じます。

肝心の開発については、ひたすら実装に集中する感じで、8時間くらい子守りで穴をあけてしまったのでほんとすいませんって感じでしたが、ましゅーはデザイン全般とHTML実装/インタラクション実装、@hico00はコンテンツ切り替え部分のJavaScript実装、わたしは地球儀っぽいやつの制作とTHETAの動画を表示させる部分の実装を担当しました。

終盤に差し掛かったあたりで、地球儀っぽいやつをクルクル回した時に全天球ビデオの回転が非常にガタついてしまうというパフォーマンスの問題が発生してかなり心が折れそうになりましたが、なんとかチューニングできてギリギリ間にあった感じです。

残り6時間切ったあたりでプレゼン発表と資料作成は@hico00にお願いして、私とましゅーは最後のクオリティ向上に努めていたような気もしますが正直なところ記憶が薄いので寝ちゃっていた可能性も否めません。真相は不明のままでわかりません。

IMG_0620 IMG_0619

 

完成した作品とプレゼンの様子

さきほども動画でご紹介しましたが、完成した作品はこんな感じです。

IMG_2378

 

うちらのチームのページはこんな感じ。

http://hackday.jp/open/team/detail/?id=43

 

プレゼンの資料はこんな感じ。

新しい全天球ビデオ視聴インターフェース_FAI(ファイ)@Openhackdayjapan3_HackID43 from Hikari Fukasawa

 

プレゼンの様子はこんな感じ。(撮影は Kyonmaru です。thx!)

 

プレゼンは@hico00がかなり頑張ってくれました。
毎月開催されているPHP勉強会@東京で運営/司会をやっているということもあって淡々とこなします。さすがです。

IMG_2372 IMG_2374 DSC_7237_20150308_152712_00091

 

 

『週アスPLUS』に載せていただけた

ブース展示の時に、いろいろな方とお話しできたのですが、週アスの記者の方にインタビューしていただいて、週アスPLUSのサイトにこの作品がしれっと紹介されていました。ありがとうございます。

 男湯と女湯をつなぐ未来タオルほかビックリ発明11連発:Open Hack Day Japan 3 – 週アスPLUS

「8. 360度くるくる回るデジタル地球儀」というのがそれです。
普段はテンションの高くないましゅーがダブルピースしている姿が微笑ましく感じますね。

 

反省点と感想

今回「Open Hack Day Japan」は初めての参加だったので、雰囲気がまったく読めないままの参加となったのですが、このイベントではもうちょっとエンジニアリング寄りなものを作った方がよかったのかなぁ?と思いました。

アルカナではエンジニアリングと同等にデザインも大切だと考えているので、システムとデザインのバランスをとりながら制作に取り掛かりましたが、デザインにバイアスを寄せるとシステムが抽象化してみえてしまうので、技術が直観的にわかりくくなっちゃったような印象を持っています。

あと、プレゼンの時にデモを交えた方がよかったのかなぁとも思いました。やっぱり実際に動いているものを見た方がわかりやすいよね、ってことで。あと、時間が短いので密度ももっと濃くした方がよかったかもです。

そして、「Open Hack Day Japan 3」を終えて一番すごいなぁと思ったのは、Yahoo!という企業が、あの大きな規模にもかかわらず、エンジニアが生き生きと活躍できるような環境や、エンジニアのモチベーションの根底にあるHackを楽しむ文化が根付いている点です。

組織は人が増えると考え方や価値観の方向性を同じベクトルに向けることが難しくなっていくと思うのですが、経営理念とか、そういうのがとても良く浸透しているんだろうなぁと感じました。

ホントにコレすごいことですよね。アルカナも小さい企業ですが見習っていきたいところです。

 

 

技術的な解説

と、イベントの流れは上記のような感じだったのですが、技術的な解説も残しておきたいと思います。

全体的なアーキテクチャはこのような形になっています。

arch

 

①『RICOH THETA』の全天球ビデオを表示する

RICOH THETAの全天球ビデオの表示は、Flashで実装していて、Away 3Dというライブラリを利用してブラウザ上に表示しています。

全天球写真ビューワー」というソースコードを公開してくださっている方がいたので、これを拡張してVideoTextureに対応させることでビデオを再生するようにしました。この場を借りてお礼申し上げます。

IMG_0067 IMG_0069

 

②『学研ワールドアイ』でビデオを映す

学研ワールドアイ』は、地球儀のような形をしたドーム型スクリーンに、さまざまな映像を映し出すことができる情報球儀で、ヨドバシの地球儀のコーナーなどで市販されている民生品です(だいたい40,000円くらいで売ってます)。

子どもが地球とか宇宙とかの学習をするためのコンテンツが内蔵されていて、それを球体のスクリーンに映し出すことで、よりリアルなイメージで学習ができるという製品なんですが、HDMIの入力端子がついているので、外部ディスプレイとしても使う事ができるようになっています。

なので、PCにHDMIで接続して、拡張ディスプレイにして、全天球ビデオが映っているブラウザを表示するだけで、半球のディスプレイに好きな映像を映し出すことが可能です。

IMG_0042 

 

③コンテンツ切り替えのユーザーインターフェイスを表示する

コンテンツ切り替えのユーザーインターフェイスもブラウザで動いているのですが、背景で動いているパーティクルはparticle.js を使って生成していて、アニメーションの実装はSVGやCSSを組み合わせています。

表示インターフェイスはポリッドスクリーンを使っていて、東急ハンズで買ってきた梨地ビニールシートを西友で買ってきたパネルを切り抜いて両面テープで張り付けています。

MacBookからHDMIで『QUMI Q5 Refresh』というモバイルプロジェクターに接続して裏から反転して投影しています。

IMG_0064 IMG_0065 IMG_0044 IMG_0046  IMG_0043

 

④コクヨS&Tさんの『黒曜石』でコンテンツを切り替える

コンテンツ切り替えの入力インターフェイスは、コクヨS&Tさんのフィンガープレゼンター「黒曜石」というデバイスを使ってMacBookと通信しています。

本来の用途はプレゼンでスライドのページを変えるために使うデバイスなのですが、デバイスの挙動としてはPageDownが押される外部キーボードとなっているため、これを応用することにしました。

黒曜石のボタンを押すと、ブラウザでPageDownが押下されるので、KeyDownなどのイベントで監視しておき、ボタンが押下されたタイミングでWebSocketサーバに通知を行います。

WebSocketサーバは、協賛企業としてIDCフロンティアさんがIDCFクラウドを提供してくれていたので、IDCFクラウドのサーバー上でWebSocketを受け付けるようにしています。

hack (10 - 13) IMG_0047

 

⑤地球儀っぽいインターフェイスで回転データを取得する

地球儀っぽいインターフェイスは、東急ハンズで買ってきたパーツを切ったり削ったりして作りました。
アクリルの球の中は空洞になっていて、協賛企業のアルプス電気さんが提供してくれていたマルチセンサーモジュールを入れています。

アルプス電気さんのマルチセンサーモジュールは、気圧、温度、湿度、UV(照度)、3軸加速度、3軸地磁気のセンサに加えてBluetoothが搭載されているモジュールです。
とても小型のサイズになっていて、小指の先くらいの大きさです。

今回は「Open Hack Day Japan 3」に向けてアルプス電気さんが提供してくれていたので利用できましたが、このモジュールを入手したい場合はセンサと開発用基板がセットになっているものが有償で用意されているということなので、「このモジュール欲しいよー!」という方はアルプス電気さんにお問合せ頂けると手に入れることができると思います。

IMG_0049 IMG_0050 IMG_0056 IMG_0051 IMG_0052IMG_0055

 

⑥地球儀っぽいインターフェイスの回転データを送受信する

マルチセンサーモジュールのセンサーの値はBluetoothで通信できるため、Intel Edisonで受信することにしました。Intelさんも協賛企業としてEdisonを提供してくれていたため、それを使用させて頂きました。ありがとうございます。

Intel EdisonはBluetoothとWi-fiに対応しているので、Bluetoothでセンサーデータを受信して、Wi-fi経由でIDCFクラウドへ接続してWebSocket経由でデータを送信しています。

Intel Edison上でBLEのデータ受信は、Cylon.jsというライブラリを使用してJavaScriptで行いました。

Cylon.jsは、AR Drone、BLE、Leap Motion、Phillips Hue、Nest、WICED SenseといったIoT時代の様々なハードウェアとの通信をサポートしているJavaScriptのライブラリです。

BLEの通信はCylon.jsの既存のライブラリでサポートされていたので、アルプス電気さんのマルチセンサーモジュールのデータ仕様に合わせた形でデータの取得ができるように、Cylon.jsのプラグインを実装することにました。

Hackday終了後、アルプス電気さんに確認してソースコード公開してもOKと承諾いただけたので、githubで公開しています。

 https://github.com/yoshida/cylon-alps-multi-sensor

※ただし、私が個人的に作成したもので、アルプス電気さんの動作確認もしておらず、動作保証は致しかねますのでご了承ください。

IMG_0031 IMG_2363

 

⑦全天球ビデオを回転させる

回転データの取得は、マルチセンサーモジュールの地磁気センサの値をを使っています。
モジュールは3軸の地磁気センサだったのですが、2軸のみ使用しています。X軸とY軸の地磁気センサの値から、アークタンジェント(Math.atan2)で角度を計算しています(これはIDCFクラウドサーバ側で計算しています)。

ブラウザがWebSocketで受け取った値はFlashのExternalInterfaceでActionScript側へ渡しています。ActionScript側では、受け取った回転データの情報を元に、球体のオブジェクトの角度へ設定することでクルクルと回るようになっています。

 hack (08 - 13) hack (01 - 13)

 

と、こんな感じの技術を組み合わせることで、全天球ビデオをクルクル回せるものを作ることができました。
24時間ぶっ通しで大変なところも結構あったけど、結果的にはめっちゃ面白かったなぁと思ってます。
次の機会があれば是非また参加したいですね!

 

最後に、ましゅーがクルクル楽しんでおられる様子です。

 

まとめ

アルカナでの普段の業務は基本的にクライアントワークや自社サービス開発がほとんどを占めていますが、こういった機会に新しい技術に挑戦して体験して知見を得てノウハウを溜めていくことは、将来的に新しいトレンドやパラダイムの先取りをすることができるので、とても大事なことだと思っています。そして、それが回りまわって次の仕事や社会貢献や人間の生活の質の向上に繋がっていくのだと思います。

スタジオ・アルカナでは、こんな雰囲気のノリで仕事をしておりますが、エンジニアを募集しておりますので、ご興味のある方はお問合せフォームでもTwitterでもFacebookでも何でもオッケーなので是非ご連絡くださいませ。

最後に、@hico00から「わたしのコトを刺激的にHack!してくれるワイルドな人を募集しています☆」という女子らしいメッセージも預かっておりますので、こちらも併せてご検討くださいませ。

デワデワ。

DSC_7320_20150308_182154_00173

 

関連サイト

このブログ記事を書く上で「Open Hack Day Japan 3」に関連したメディアやブログなどが結構あったので、せっかくなのでURLをざざーっと記載しておきたいと思います。

参加したみなさま、本当にお疲れ様でした~。

 

【メディアサイト】

男湯と女湯をつなぐ未来タオルほかビックリ発明11連発:Open Hack Day Japan 3 – 週アスPLUS
http://weekly.ascii.jp/elem/000/000/312/312088/

池澤あやかの自由研究:初めてのハッカソン“Open Hack Day Japan 3”に参加しました! – 週アスPLUS
http://weekly.ascii.jp/elem/000/000/313/313747/

89チーム350人のハッカソンの90秒爆速プレゼンがスゴイ!【Yahoo! Open Hack Day 3】 #openhackday | フリック!ニュース /Flick!News
http://blog.sideriver.com/flick/2015/03/8935090yahoo-op-26e3.html

Open Hack Day Japan 3リポート:ロボットOS「V-Sido」はハックできたか? こだわりのスイカ割りに栄冠 (1/3) – MONOist(モノイスト)
http://monoist.atmarkit.co.jp/mn/articles/1503/13/news047.html

ニュース – 若い力が躍進、「モノとの融合」が花開いたOpen Hack Day Japan 3:ITpro
http://itpro.nikkeibp.co.jp/atcl/news/15/031000855/

【ブログなど】

エンジニアの祭典「Open Hack Day Japan 3」を開催! – Yahoo! JAPANコーポレートブログ
http://yahoojapanpr.tumblr.com/post/113157231022/openhackday3

OpenHackday3で「イルミなふだ」をつくりました – INAの日記
http://d.hatena.ne.jp/inajob/20150309

【アメリカと日本でハッカソン参加してみた】IoTトレンド Webの開発者も続々と参入する理由とは? | freshtrax | btrax スタッフブログ
http://blog.btrax.com/jp/2015/03/18/iot-tech-trend/

Open Hack Day 3 で「リーマン球面」を作りました。 – Imaginary & Imaginative.
http://taketo1024.hateblo.jp/entry/report/ohd3-riemann-sphere

プログラミングコンテスト「Open Hack Day Japan 3」に出場しました|東海大学
http://www.u-tokai.ac.jp/academics/undergraduate/information_science_and_t/news/detail/20150324.html

真・電撃の巨人 Yahoo! Open Hack Day 3 | チーム モスキート
http://team-mosquito.com/hackathon/9/

混沌の屋形風呂: 東京ミッドタウンでYahoo!のOPEN HACK DAY3
http://ogikubokei.blogspot.jp/2015/03/yahooopen-hack-day3.html

ハッカソン – Open Hack Day 3反省会 – Qiita
http://qiita.com/niusounds/items/ed24e0720ff38b2bdbe4

Drobrella on Open Hack Day 3 (Hack ID : 8)
http://www.slideshare.net/suzukimasataka94/drobrella

TMI48 (Hack ID : 46)
http://www.slideshare.net/shunichimatsuda3/ohd3

スニャ〜ト家電 neconote (Hack ID: 22)
http://www.slideshare.net/daikimatsumura/neconote-openhackday0308

Yahoo! Japan開催のOpen Hack Day Japanへ協賛 | アルプス電気
http://www.alps.com/j/topic_150213.html

Open Hack Day 3においてQrio賞を受賞|電気通信大学
http://www.uec.ac.jp/news/prize/2014/20150326-2.html

【その他】

Open Hack Day Japan 3 オープニングムービー
https://www.youtube.com/watch?v=tx6-rxj36NA

Open Hack Day Japan 3 エンディングムービー
https://www.youtube.com/watch?v=oQoYa1SxhpE

※4/9(木)追記

アルプス電気株式会社さんの公式Facebookで紹介して頂きました。

 

皆さんこんにちは。先月開催されたOpen Hack Dayへ開発チームとして参加した㈱スタジオ・アルカナさんより、参加当日の様子をブログへアップした旨のご連絡を頂きましたのでご紹介します。㈱スタジオ・アルカナさんのチーム名は「よしだのし…

Posted by アルプス電気株式会社 on 2015年4月9日

 

※4/16(木)追記

http://hackday.jp/ に記事を掲載して頂きました。ありがとうございます。

キャプチャ