puck.js + LINE things + Rails + heroku で動かしてみた

##  はじめに
2019/07/13 に開催された ProtoOut LINE Things ハッカソンの振り返り＋発展の記事です。
最終的にpuck.js + LINE things + Rails + heroku で通知を送れるようになってます

## ProtoOut LINE Things ハッカソンでやろうとしたこと
2019/07/13 に開催された ProtoOut LINE Things ハッカソンでやろうとしたこと

概念図
<img width="988" alt="スクリーンショット 2019-07-06 11.38.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/ca3c4912-3d01-af41-b251-9e49f69e7f52.png">
スマホにぶら下げられるお守り型のデバイス（LINE things）を作る
機能は
・お守りのボタンを押すとGPSで位置情報を取得できる
・お守りはLINEbotから色を変更でき、お守りのボタンが押されて時のLEDの色がわかる
以上、お守りのボタンを押された時に「ボタンの色、位置情報」がWEBアプリケーションにLINEbotを通じて送信され、WEBアプリケーションはそれをMAPにプロットし視覚化する

導入のイメージも考えてみました
![setumei.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/b36071b7-4745-b9ca-7539-0b5ece39f7b5.png)

詳しくはこちら
[最終構想ラフスケッチ](https://qiita.com/cog1t0/private/7efcb4290c52a9deb024)
[ハッカソンラフスケッチ](https://qiita.com/cog1t0/private/86d417dfc7949164305f)
＊限定公開

## ハッカソン終了後の課題
・GPSモジュールがうまく動かず、解決できなかった
・聞くところによるとGPSモジュールは電源を入れてから数分〜数十分待たないと取得し始めないことが一般的で、電池の消費量に問題があった
・GPSモジュールの電池消費量が激しく、キーホルダーサイズにするのが現実的ではない
以上のことから、ハッカソンのネタはそれはそれとして、

**楽に持ち運べて、必要な時にパッと使える**LINE thingsプロダクトの開発をやり直した。

## puck.js
puck.jsとは手のひらサイズのボタンデバイスで、BLEに対応しているので、
**ボタンを押したことをLINEthigsを通じて通知できる**
ボタン電池なので持ち運びも非常に便利
ただし、日本では買えないので海外の[ECサイト](http://www.espruino.com/Order#puckjs)から購入になります

![2017-01-10T16_21_03.892Z-box_and_parts.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/5e639967-651b-fbd7-c01d-54f0ca5d1f10.jpeg)

## puck.jsでやりたいこと
![スクリーンショット 2019-07-31 21.43.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/cb1859ab-9b6a-6934-c806-73cd02f08a11.png)
これは、あまり髪型にこだわりのないような自分にとってはめちゃくちゃ助かるサービス。
しかし、「写真を撮る -> 共有用のアプリを開く -> アップロード -> カテゴリ分け」というプロセスを踏まないといけなくてめんどくさそうだったので、以下の手段で自動化できないか考えた

![スクリーンショット 2019-07-31 21.54.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/a164c110-df76-c947-9a0a-f9a19280bc6e.png)
これなら「ボタンを押す -> 通知からbotとのトークルームに直行しURLをクリックする -> カメラが起動し写真を撮る -> ~~共有用のアプリを開く~~ -> ~~アップロード~~ -> カテゴリ分け」となり、便利なのではないかと考えた。

# 実装
RailsでLINEbotを作るのは[これ](https://qiita.com/y428_b/items/d2b1a376f5900aea30dc)を参照
LINEthingsまわりの設定は[これ](https://qiita.com/n0bisuke/items/7f3da133a2363b549e3e)を参照(ServiceUUidが手に入るので控えておく)

puck.jsのLINEthings連携はline-things-starterに[サンプル](https://github.com/line/line-things-starter/tree/master/puckjs)があるのでそれを使います
ServiceUUid部分を先ほど入手したので書き換えるのを忘れずに


IDEで書き込みます
[公式ガイド](https://www.espruino.com/Quick+Start+BLE#using-the-espruino-ide)
[IDE](https://www.espruino.com/ide/)
[IDEの使い方の参考](https://qiita.com/rockymanobi/items/bbc9481d43cd4fc19d65)
**LINEthingsの設定画面にデバイスが表示されなかったりするので、何度かIDEとの切断やボタン電池を抜いて強制的にシャットダウンしたりしたらなおりました**

webhook用のコントローラーを作成し、webhook用のメソッドを用意します

```ruby
    def webhook
        body = request.body.read

        signature = request.env['HTTP_X_LINE_SIGNATURE']
        unless client.validate_signature(body, signature)
            head :bad_request
        end

        events = client.parse_events_from(body)

        events.each do |event|
            case event
            when Line::Bot::Event::Things
                message = {
                    type: 'text',
                    text: 'line://nv/camera/'
                }
                client.push_message(event['source']['userId'], message)
            end
        end
        head :ok
    end
```

ここまでやるとものすごく単純ですが、puck.jsのボタンを押すとbotからカメラを起動するURLが送れるようになりました！

## これからの課題
~~・Botからのメッセージだと通知が来ない（iOSだけ？）。これができないと導線が短くならない。。。~~ 「おやすみモード」を解除しよう！
・LINEのカメラにはOCR（光学的文字認識）の機能があるので、画像だけでなく文字も取り込めるようにして、美容師さんのカルテ以外にも用途を拡げたい
・puck.jsのボタンを押してなくても通知がガンガン飛んでくる。。。