LINE ThingsでBeetleC動かしてみた

この記事は[IoTLT Advent Calendar 2019](https://qiita.com/advent-calendar/2019/iotlt)の19日目の記事です。
BeetleCという二輪駆動車をLINE Thingsで動かしてみたという内容です。

# はじめに
BeetleCはM5StickCと繋いで遠隔操作する小型のロボットカーです。
BeetleCのスペックは以下の通りで、非常にシンプルな作りです。

* RGB LED × 7
* 内蔵バッテリー（80 mA）
* デュアルモータードライバ

![s100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/c8c9d6da-68bc-095f-e440-ab85b4fc4a96.png)

# デモ動画
LINE Thingsで動かしてみたデモ動画です。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">LINE ThingsでBeetleCを動かしてみました<a href="https://twitter.com/hashtag/LINEThings?src=hash&amp;ref_src=twsrc%5Etfw">#LINEThings</a> <a href="https://twitter.com/hashtag/BeetleC?src=hash&amp;ref_src=twsrc%5Etfw">#BeetleC</a> <a href="https://twitter.com/hashtag/M5StickC?src=hash&amp;ref_src=twsrc%5Etfw">#M5StickC</a> <a href="https://twitter.com/hashtag/linedc?src=hash&amp;ref_src=twsrc%5Etfw">#linedc</a> <a href="https://t.co/PNHEmx2zp1">pic.twitter.com/PNHEmx2zp1</a></p>&mdash; がおまる@LINE API Expert (@gaomar) <a href="https://twitter.com/gaomar/status/1172774217848221698?ref_src=twsrc%5Etfw">September 14, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 実装方法
これから実装方法について解説します。前提条件としてAndroidのみ対応可能です。
iOS版LINEでは技術的な問題のためLINE Things機能が使えないです。
（※2019年12月現在）

## 1. チャネルの設定
下記URLにアクセスしてLINEログインしてください。
https://developers.line.biz/console

### 1-1. 新規チャネル作成
Messaging APIで新規チャネルを作成します。
<img width="743" alt="s200.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/d6c68e01-ddf4-fd30-ccc5-e196be15f8a9.png">

各種項目を埋めていきます。

|項目|値|
|:--|:--|
|①チャネル名|M5BeetleC|
|②チャネル説明|M5BeetleC|
|③大業種|個人|
|④小業種|個人（その他）|
|⑤メールアドレス|あなたのメールアドレス|

<img width="818" alt="s201.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/ae16f097-6c44-e544-5b5f-8d0f08a36392.png">

下の方にスクロールして、下記2箇所にチェックを入れます。
<img width="477" alt="s202.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/02ccf51f-b738-30f4-d184-b98f7d5b0366.png">

［同意する］をクリックします。
<img width="847" alt="s203.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/d7379c4b-cc85-6eaf-2fb2-744c35ea2251.png">

### 1-2. アクセストークンを発行する
アクセストークンを発行します。Messaging API設定から一番下にスクロールして、
チャネルアクセストークンカテゴリの［発行］ボタンをクリックします。

<img width="1517" alt="s204.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/6fbf2778-d3d1-84f9-4bdc-5cc02821efba.png">

### 1-3. ボットと友だちになっておく
LINEボットと友だちになっておいてください。Messeging API設定の一番上にQRコードがあるので、
LINEアプリから読み取ってください。

<img width="788" alt="s205.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/74f60877-13ea-2a0b-b13f-02ba40c222fc.png">

### 1-4. LIFFアプリを設定する
［LIFF］のタブをクリックして、［追加］ボタンをクリックします。
<img width="840" alt="s206.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/1b296e87-80a0-e2d6-0f5b-93777eae84ce.png">

|項目|値|
|:--|:--|
|①LIFFアプリ名|B5BeetleC|
|②サイズ|Full|

<img width="798" alt="s207.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/f290d3a5-06c1-6245-dad5-0a234e1789ef.png">

|項目|値|
|:--|:--|
|③エンドポイントURL|https://www.google.co.jp<br>※後ほど設定するので今は仮で入力してください|
|④Scope|profileにチェック|
|⑤BLE通信|有効にする|

最後に［作成］ボタンをクリックします。
<img width="844" alt="s208.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/ee50422e-b26a-ba02-81a5-a053db9e40e9.png">

### 1-5. LIFFのIDをメモ
発行されたLIFFのIDをメモしておきます。
<img width="844" alt="s209.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/293180fb-e98a-668f-406b-c8a04cb208a6.png">

## 2. サービスUUIDを発行する
LINE Thingsを使うためにサービスUUIDを生成します。

### 2-1. アクセストークンを設定する
下記URLにアクセスしてアクセストークンを設定します。
https://n0bisuke.github.io/linethingsgen/

左側のメニューの `Setting` から 1-2で発行したアクセストークンを貼り付けてください。

<img width="1141" alt="s300.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/9c235dbf-a5d1-281b-c5df-44d42b1b40bb.png">

### 2-2. トライアルプロダクトを作成
左側のメニューの `Create Product` をクリックして、 1-5で作成したLIFFアプリを選択します。
トライアルプロダクト名はお好きな名前をつけてください。今回は `M5BeetleC` にしました。

［作成］ボタンをクリックします。
発行された `サービスUUID` は後ほど使いますので、メモしてください。

<img width="1135" alt="s301.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/f15d5a0d-192d-9ed4-2377-668cb690dc0a.png">

## 3. プログラムの環境設定
プログラムをダウンロードして、動作させるための環境を整えます。

### 3-1. GitHubからクローンする
下記URLからプログラムをダウンロードします。

Macな方

```
$ cd ~/Documents
$ git clone https://github.com/gaomar/m5-beetlec.git && code m5-beetlec
```

Windowsな方

```
> cd %homepath%\Documents
> git clone https://github.com/gaomar/m5-beetlec.git && code m5-beetlec
```

### 3-2. envファイルを書き換える
`.env` ファイルを開いてください。これまでに発行されたLIFFのIDとService UUIDを貼り付けます。編集したら保存を必ずしてください。

|項目|値|
|:--|:--|
|VUE_APP_LIFF_ID|1-5でメモしたLIFFのID|
|VUE_APP_USER_SERVICE_UUID|2-2でメモしたサービスUUID|

<img width="1136" alt="s400.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/d14afbb5-75c9-33a1-d9ca-ed9152c37eec.png">

### 3-3. 必要モジュールをインストールする
プログラムを実行するのに必要なモジュールをインストールします。
Macの方は `control + shift + @` Windowsの方は `ctrl + @` でターミナルウィンドウを開いてください。

インストールするために下記コマンドを実行します。

```
$ npm install
```

<img width="1136" alt="s401.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/16b533e0-4362-d18c-cb97-5103c81b5685.png">

### 3-4. プログラムを実行する
実行は下記コマンドを入力してください。

```
$ npm run serve
```

<img width="1136" alt="s402.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/35464ad8-30d8-f0c3-97ea-1615821d7d50.png">

### 3-5. ngrokを起動する
ngrokを起動してローカルプロジェクトにアクセスできるようにしましょう。
ターミナルウィンドウを分割して、そこに下記コマンドを実行します。

```
$ ngrok http 8080
```
<img width="1219" alt="s403.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/78bd9713-3e41-aa69-35c3-3a96e0d508fd.png">

ngrokの `https` のURLをメモしてください。

<img width="632" alt="s404.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/0f9a5efc-fa1a-ea01-2330-587588898112.png">

### 3-6. LIFFのURLを更新する
ngrokのURLに差し替えます。

<img width="816" alt="s405.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/5764a3e4-ceb7-6c5c-e066-e8096cd15771.png">

## 4. ArduinoからM5StickCに書き込む
### 4-1. プログラムを編集する
Arduinoを開いて、プログラムを編集します。2-2で取得している `サービスUUID` に書き換えてください。
M5StickCに書き込みを行ってください。

```c:src/sketch_m5_beetlec/sketch_m5_beetlec.ino
#include <M5StickC.h>
#include <ArduinoJson.h>
#include <BLEDevice.h>
#include <BLEServer.h>
#include <BLEUtils.h>
#include <BLE2902.h>
#include "carControl.h"

// Device Name: Maximum 30 bytes
#define DEVICE_NAME "M5-BeetleC"

// あなたのサービスUUIDを貼り付けてください
#define USER_SERVICE_UUID "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"

```

<img width="687" alt="s500.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/6175eb33-963f-c032-cea5-23bf76673e70.png">

書き込みが終わると、画面に `Ready to Connect` と表示されます。
![s501.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/60c461ee-c91d-57b1-cd52-1e71f14ffe9a.jpeg)


## 5. 動作確認する
### 5-1. LINE Thingsを有効化する
下記のQRコードを読み取って、LINE Thingsを有効化してください。
LINEアプリにLINE Thingsのメニュー項目が追加されます。

![s502.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/d4594e30-5224-9c9a-1612-0146cfd51980.png)

項目が追加される
![s503.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/ad77dab1-6a7b-f808-f08b-64c573ce99a3.png)

### 5-2. ペアリングする
LINE Thingsをタップすると、 `M5BeetleC` の項目が表示されます。
表示されていない方はまだLINEボットと友だちになっていなかったり、Bluetoothが有効になっていなかったりします。

![s504.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/2fe2159c-a918-cb5d-314a-e5840306a2a4.png)

`M5BeetleC` をタップしてペアリングを行ってください。
![s505.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/bc126ed9-6b24-ed9a-3e6f-5d4d28991337.png)

［今すぐ利用］をタップします。
![s506.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/591472ba-4f35-acbe-bfa8-f3b8c9c7474d.png)

［許可する］ボタンをタップします。
![s507.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/40214f97-62dc-df64-99a8-195eadce0e51.png)

### 5-3. 動かしてみる
LIFF画面が下からにょきっと出てくるので、画面を触ってみましょう。仮想のジョイスティックが出てくるので、
前に倒したり、後ろに倒したりしてみましょう。
前進だとLEDが緑に、後進だとLEDが赤色になります。

|前進|後進|
|:--:|:--:|
|![s508-1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/3d9939e6-7e0e-68ea-41e5-50e0c487fa0c.jpeg)|![s508-2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/7a993e1a-d332-21c6-ee29-ed2d5cdcb7b1.jpeg)|

# まとめ
LINE ThingsでBeetleCを動かしてみました。LINE Thingsは今後のアップデートで使えなくなる可能性があります。
今は（※2019年12月現在）Androidでしか確認することができませんが、とても面白い仕組みなので是非試してみてください！

システム化のご検討やご相談は弊社までお問い合わせください。
https://i-enter.co.jp/contact/