先日、読売テレビの番組の企画で、ハッカテンという番組に出演させていただきました。
番組のHPから、前後篇を5月8日まで見逃し配信中です。
今回、テレビ局から貰ったオーダーは、「大阪をハックせよ」。
海遊館をフィールドに選んだ私達のチームが海遊館から聞いた課題は、「海遊館のコンセプトを伝えたい」「館内で家族の写真を綺麗に撮ってあげたい」などといったものでした。
その課題を解決するための仕組みを作り、海遊館をお借りして1日だけのイベントを開催させていただいたわけですが、番組を見た方で、「技術的な部分でどうやったのか知りたい」という方もいると思います。番組の構成上、あまり技術的な部分には踏み込んでいませんので、このエントリーで技術的な面についてもご紹介したいと思います。
まず、以下が、実際に海遊館の方にプレゼンをした企画提案資料のスクリーンショットです。
こちらから実際の資料のPDFもダウンロードできます。
おおさかな大学コンセプト
おおさかな大学開校！この大学は海遊館を一周するだけで入学から卒業までできてしまう大学です。その過程で最新のテクノロジーを楽しみながら「海遊館のコンセプト：太平洋を巡る旅」や「海の生き物たち」について学んでしまえるのです。
最初に入学案内を受けて、学生証をもらいます。
この学生証こそが実は最新テクノロジー！
いろんなところにかざすと、何か素敵なことが起こります。
そして、館内にちりばめられた学部（イベント）ごとに単位が取得できます。
海遊館を全部見終わった後（卒業後）は、いままで学んだことや、取れた単位、配置されたカメラで撮影された写真などを用いた卒業アルバム（ショートムービー）が
ダウンロードできます。※オリジナル校歌付き！！
またアルバムには撮影した写真を「海遊館世界」の中のどの地域で撮ったものかわかる地図上に載せたものを掲載。海遊館のコンセプトを伝えます。
（今回のイベントでは到達できませんが今後の展開イメージとして学部は
どんどん増えていくので何度も入学可！さらにランクアップして生徒から教授に！
とつながりを持たせます）
このコンセプトを、どう実現したのでしょうか？
では、参りましょう！
全体像
まず、今回開発したシステムの全体像は下記のようになっています。
番組の中で海遊館の方が「学生証のボタンを押したら色々起きるんですね」という発言をしていましたが、上記でわかるように、お客さんがスマホを持っていなくても、（魚探しを除き）一通りの体験ができ、体験中収集された画像が最後に卒業動画に組み込まれるという仕組みになっています。
はたして、これはいったいどういう原理で動いているのでしょうか？
学生証（ピカピカード）
館内の色々なしかけを繋げるのがこの学生証です。
これは、ピカピカードというもので、HackCamp社 が今回チームメンバーとしても参加してもらった加畑さんと共同で開発をしているカード型のデバイスです。
写真右下にある部分がボタンになっていて、このボタンを押すとカードが光ると同時にビーコンを発信することができます。
ボタンを押していない時でも常に別の種類ビーコンを発信しており、つまり2種類のビーコンを発信できるデバイスなのです。（iBeaconとEddystone URL両方に対応しているので、正確には4種類ですが。）ミンティアのケースと互換性のあるサイズですので、今回のようにラベルを差し替えることで様々な用途に利用できます。
また、それぞれのカードはユニークな信号を発しますので、カードの保有者を一意に識別することが可能です。
Pepper 教授の入学案内の中で、「さあ、学生証のボタンを押してみよう」といったアナウンスが入ることで、お客さんは「ボタンを押すと何かが起きる」ということを把握します。
そして、BOCCOや iPad の前でボタンを押すことで、BOCCOが喋ったり、クイズが表示されたりといったことが起きるのです。
具体的には、学生証のBeaconをそれぞれのポイントにおいてある iPad が受信し、クイズアプリを起動させたり、BOCCOがしゃべる為のURLを叩くトリガーが実行されたりします。
（ちなみに、実際には館内ではBOCCOのボリュームではうまく聞こえなかった為、Arduino とスピーカーを繋げて音声を再生するという対応をしました）
また、学生証を押して貰ったあとに写真撮影時をすることで、そのユーザーに対応したIDの場所に写真をアップロードする仕組みも作りました。
（ちなみにサーバーサイドにはLoopBackを初めて使ってみたのですが、サーバ側のAPIはすぐできたものの、iOS SDKの作りが微妙で結構大変でした・・・）
クロマキー撮影した画像を合成したものも、上記のAPI経由で写真をアップロードしてもらっています。
これにより学生証のID毎に写真素材をサーバサイドに集めることができ、それを最終的に動画に落とし込み、それを最終的に卒業ムービーとしてモニターで再生する仕組みを作りました。
しかし、当日なんとサーバサイドのセットアップ時に必要だったツールのコンパイルが終わらないというトラブルが発生。
最終的に間に合わず、私が iMovie で動画を編集して見せるという結果に終わりました。
（結果、動画のクオリティが上がったので、まあそれはそれで結果オーライとしましたが）
こちらが、その卒業証書ムービーです。（中の写真はスタッフのものを使いました）
＊クリックするとVimeoへ飛びます
感想
今回は私が担当したピカピカード部分の解説のみで終わってしまいましたが、クロマキー、BOCCO、カメカメラ、お魚認識、イルカスピーカー、どれもそれぞれ技術的なチャレンジがありました。
当初思っていたところまで行けなかったものもありましたが、それでも、来場したお客さんにはとても喜んでもらえましたし、海遊館さん側からも大変高い評価をいただきました。
振り返ってみると、よく1ヶ月で、しかも皆普段の仕事を抱えながらここまで実装したなと思います。集まってくれたチームの皆さん全てに感謝です。エンジニア側の高い技術力や柔軟な発想力、制約をプラスに変える力と、プランナーチームのシナリオ作り、世界観作り、素材を最大限に活かす力がフルで発揮されたからこそ、実現できたことだと思います。ハッカソンと言うには長すぎるプロジェクトでしたが、手元にあるものでなんとか成果を出すという、ハック精神にあふれていました。
ものづくりって楽しいなということを再認識させていただいた1ヶ月間でした。チームの皆さん、ありがとうございました。
そして、読売テレビの皆様、本当にありがとうございました！特に、ディレクターの谷Bさんには、とんでもなくお世話になりました。当日にいたるまで、様々な所でサポートをしてもらいました。谷Bさんがいなければ、きっとあそこまでの成功は無かったと思います。
膨大な撮影時間の中から、放映用シーンを編集するのは、とてつもない労力と時間がかかったことと思います。難しいことでもちゃんと伝える努力をしてくれてありがたく思います。
これまでハッカソンの企画運営を数多くこなしてきたHackCamp社としても、大いに勉強になる経験でした。本当にありがとうございました。
校歌（おまけ）
今回、なんと校歌も完全オリジナルで作成しております。聞いているうちにソラで歌えるようになってしまいました(笑)。
チームメンバーの谷口直嗣さんが作詞したものに、友人の Bubble-B に協力してもらい曲を乗せました。
以下のリンクからフルバージョンを聴くことができます。リンク先には歌詞も掲載されています。歌っているのは、チームメンバー及び友人の方々です！
ちょっとだけ宣伝
さて、HackCamp と Guildworks が共同で、このピカピカードを題材にした、新規事業の仮説検証ワークショップを4月27日に行います。
https://hackcamp.doorkeeper.jp/events/42410/
参加者にはピカピカードを1枚プレゼントしますので、是非お申し込みください！