IoTハッカソン優秀賞から実際の本屋さんで展示するまで

## 本屋さんの実店舗で実証実験中！
ハッカソンで作ったIoTプロダクト「Bookkey」を本屋さんに置かせてもらうことができました。

[「書店体験を変えるIoTプロダクト HACKATHON」入賞3プロダクト　書店での実証実験を順次開始](http://www.nippan.co.jp/news/iot_hackathon_20170424/)

### Bookkeyとは
「本棚の前に立つ」「本を手に取る」など、売り場で人間が行う様々な動作に応じて
「ディスプレイに表示させる動画を切り替えたり」「桜の香りを出したり」「ライトを付けたり」と
五感を刺激するインタラクティブ装置です。

[<img width="500" alt="スクリーンショット 2017-04-30 19.44.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/7132/5ca14a4e-1bff-6e75-1ede-b4a9dc64a510.jpeg">](http://www.nippan.co.jp/news/iot_hackathon_20170424/)

今回は『君の膵臓をたべたい』とコラボさせてもらい、世界観を構築。
「人感センサー」「重さセンサー」「カメラ」などを**Raspberry Pi**や**マイコン**で制御し売り場を操っています。

このお店には入り口に「ブックルート」という車が置いてあって、この裏を使わせてもらってます。
この車、ナンバープレートも付いてて、ちゃんと走れるらしい。すごい。


## IoT&BookShop Hackathon

そもそものきっかけは、今年１月末に開催された日販主催のハッカソンに参加し、
そこで優秀賞をいただいたことです。（優勝ではない・・・）

[<img width="600" alt="スクリーンショット 2017-04-30 19.44.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/7132/c3542dc9-270b-87a7-6c87-5766aed036cf.png">](http://gsacademy.tokyo/nippan_hack/)

「ネットや電子書籍で購入できる時代、本屋の売り上げはどんどん下がっていて、
町の本屋さんが減っていっているんだよ、どうにかしよう！書店体験を変えよう！」といった内容
要は日販が辛い


## プロトタイプ版
そのとき作ったのがこんなやつ
![image](https://qiita-image-store.s3.amazonaws.com/0/7132/4fc8f63d-a544-760f-1ef8-4e7b2f2dc817.png)
装置に本を置くと、ISBNのバーコードを読み取って、Androidで実装したViewerに表示されるコンテンツが変わる。
本の種類によってYouTube・Twitter・Amazonのレビューを出し分け表示させるといったものでした。

### コンセプト
**脱スマホ**
「本屋でスマホ弄ってたら、そのままAmazonアプリ開いてそのまま買うよ、
本屋さんにいるのであれば『本』に集中してほしい」

**ワンオフにしない**
「課題は全国の町の本屋が減ってること、全国の本屋で使える形にする、
コンテンツはサーバーで管理し本部的なところで一気に適応、運用が前提」

**エンターテイメントに振らない**
「チームラボの展示が全国の本屋さんで365日やってたらウザいでしょ？
あーいうのは休みの日にたまに行くから楽しいんだよ、ディズニーランドはいらない」

### ハコの中身
ハッカソンに相応しくカオスです。
![Artboard.png](https://qiita-image-store.s3.amazonaws.com/0/7132/9a70f016-4014-8e2a-5b8b-0b8a3d7f6ffa.png)

アーキテクチャもカオス
![16403386_1301701296543240_6993854520650353236_o.jpg](https://qiita-image-store.s3.amazonaws.com/0/7132/5ae86b1e-ee3f-622f-b3d1-9f4de602a898.jpeg)
ネイティブ・サーバー・フロントまわりを主に担当したので、
この２日間でswift、java、nodejs、php、Webフロントと使い分けてました。得意分野

このハッカソンのときのチーム名が「ルノアールで」だったから香りのイラストが珈琲になってる
最終的には「ベルサイユのばら」にちなんで薔薇の香りを出していました。

## 日販のイベントでデモ
その後、ハッカソンで受賞した３チームが、２月中旬に日販の社内イベントでデモを行うことに。

<img width="500" alt="2017-04-30 19.44.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/7132/1abfa349-3cc3-adb4-52cc-93300c5db3d4.png">

「自分から、わざわざ本を装置に持っていくような奇特な人はいないよね」ということで、
ハッカソンのときから構成を大きく変更しました。

ISBNを読み取るカメラをやめて、
代わりに重さセンサーで本が取られたかどうかを検知し、Webカメラで顔認識しています。
それに応じてAndroidやディスプレイの画面が切り替わったりする仕組みです。

Microsoft Azureの[Face API](https://azure.microsoft.com/ja-jp/services/cognitive-services/face/)を使って、何時何処でどんな本がどういう人に手に取られている情報が管理画面から確認できるようになっている

またViewerの通信部分をhttpでポーリングしていたものを、RailsのActionCableに実装を変更して速度改善させたりで、地味にブラッシュアップ
ディスプレイもCSSアニメーションさせまくってる、PCに繋げてるディスプレイは普通にChromeを表示しているだけ

このときデザイナーを勧誘してチームに入ってもらったので、少し見た目がマシになっている


## 実証実験へ
デモが終わって実店舗での実証実験が決まってからは、プロダクトのブラッシュアップ期間に入ります。
ちょうど「君の膵臓をたべたい」の文庫本が発売されるということで、
これに合わせて映像やデザインなどのコンテンツを作っていくことになりました。

### 最終アーキテクチャ
![Artboard.png](https://qiita-image-store.s3.amazonaws.com/0/7132/fe21b2cf-1dd2-e469-1a15-e18ca134955f.png)

・人感センサー（超音波）で前に人がいるかどうかを検知
・顔認識で性別年齢によってコンテンツを出し分け
の機能を新しく実装しています。

また1週間以上連続稼動するので、リスクを抑える構成にするため、
PCとRaspberry Piを有線LANで繋ぎ、オフラインであっても動作するようしました。
PCの中はElectronで作ったアプリが動いており、Expressでサーバーを起動しています。
このサーバーから各Raspberry PiやWebViewと通信させています。

さらに映像を遠隔で操作したり、状態を確認するため、Serverlessで作ったAPIにWiMAXに繋がったルーター経由で投げています。
DynamoDBにデータを溜め込んで、毎日CSVに変換してAthenaに送ってる。

他にもSlackで在庫情報が確認できたりw
<img width="395" alt="スクリーンショット 2017-05-01 6.32.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/7132/3954edd6-7b88-f34d-822c-6b49a07cd4e1.png">


### 準備
声の素材を録音したり（顔出して良いか聞くの面倒なので・・・）
![Artboard.png](https://qiita-image-store.s3.amazonaws.com/0/7132/249204be-a6a7-4db2-74b0-c58c01899506.png)
（マンションの音楽室だそう、部屋が反響する・・・）

結合テストしたり（[G's Academy Tokyo](http://gsacademy.tokyo/)をミーティングとかでめっちゃ使わせてもらった）
![IMG_1593.JPG](https://qiita-image-store.s3.amazonaws.com/0/7132/14de3802-c6fb-59c5-8150-c7d8b2f9c104.jpeg)
（ライトや香りを出す扇風機は100Vで動いてる）

設営したり
![Image uploaded from iOS.jpg](https://qiita-image-store.s3.amazonaws.com/0/7132/12bde15c-faf8-826c-ea7f-345f3c0b3321.jpeg)
（香りを送る扇風機とライトとディスプレイ固定具）

![Image uploaded from iOS (1).jpg](https://qiita-image-store.s3.amazonaws.com/0/7132/b57c163e-471a-d423-6d9e-d4faed0971ac.jpeg)
（超音波センサー）

## さいごに宣伝
5月7日（日）までハッカソンで作った「Bookkey」を文禄堂荻窪店で展示しています。
[<img width="500" alt="スクリーンショット 2017-04-30 19.44.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/7132/557bf908-8ce5-b44d-eb97-b0493412093c.jpeg">](http://www.nippan.co.jp/news/iot_hackathon_20170424/)

[<img width="500" alt="スクリーンショット 2017-04-30 19.44.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/7132/ee8377f5-bbfb-c80b-9569-6063ddfe97c0.jpeg">](http://www.nippan.co.jp/news/iot_hackathon_20170424/)


**荻窪駅**は新宿から中央線で10分くらい、是非行って体験してみてください！
[<img width="931" alt="スクリーンショット 2017-05-01 7.04.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/7132/3673beae-6d9a-979f-074b-993038b9eb41.png">](https://goo.gl/maps/avQn1e3CYXA2)


## おわり
ハッカソンが終わってからなんだかんだで週２回くらいメンバーで集まりミーティングをやってました。
これまでハッカソン等のイベントに出たことはありましたが、全部その場限りのものでした。
その後も続いていくというのは初めてで、更には実証実験という形でプロダクトを
実際のお店を置かせてもらうという貴重な体験をさせてもらいました。
まだ１週間あるので最後まで調整して、ブラッシュアップして、がんばる。

技術的なことを書こうと思ってたんだけど、全然そんな感じにならなっかた
小出ししていこう