LINE Thingsでオリジナルの入力デバイスを作ってみた

![IMG_0027.JPG](https://qiita-image-store.s3.amazonaws.com/0/164153/419cd130-d9ef-25df-6178-07ccb5d93886.jpeg)


こんにちは。LINEでお祭り男(テクニカルエヴァンジェリスト)をしております立花です。
<img width="150" alt="スクリーンショット 2018-12-10 12.41.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/164153/7fbef190-2e5e-0323-1417-9d48c8b3662c.png">

この投稿は[IoTLT Advent Calendar 2018](https://qiita.com/advent-calendar/2018/iotlt)の2日目の投稿です。前日の投稿は[m_ando_japan](https://qiita.com/m_ando_japan)さんの「[Nefry BT と Firebase を連携して NeoPixel を光らせる](https://qiita.com/m_ando_japan/items/46ab4f1082acdee4896a)」です。

本記事では、[LINE Developer Day 2018](https://www.youtube.com/watch?v=9St8v4Z_Bxo&list=PLI2S-k0Fa59uvsnbkf2naoqmpbwtux6sI)で発表された[LINE Things](https://engineering.linecorp.com/ja/blog/line-things-developer-trial/)でオリジナルの入力デバイスを作る手順を解説します。

# LINE Thingsとは？

公式ブログより引用します。

> LINE Things とは、Bluetooth LE に対応した IoT デバイスを LINE のアプリ上で接続し Bot や Web サービスと連携することができるプラットフォームです。
> ![598ef81183eda48a9ce2287bbef7d136-1024x576.png](https://qiita-image-store.s3.amazonaws.com/0/164153/f79bc951-a816-3877-3ece-a0f93280d0d3.png)
> 今まで Bluetooth LE (BLE) を利用するデバイスをスマートフォン上から操作するには、専用のアプリを作成したり Web Bluetooth を利用する必要がありました。 そこで、LINE Things は、皆さまに日々お使いいただいている LINE アプリ上で、Bot および LINE Front-end Framework (LIFF) を組み合わせるだけで、もっと気軽にデバイスとの連携を実現できるようなプラットフォームを提供すべく開発されました。
>
> LINE Things では、大きく以下の3つの機能が提供されます。
> 
> LINE アプリ上で Bluetooth LE 接続可能な LINE Things 対応デバイスを登録する
> LIFF 上から JavaScript API を経由して LINE Things 対応デバイスを操作する
> LINE アプリがデバイスに対して自動で通信を行い、対象の Bot に情報を送信する(今後対応予定)
> つまり、LINE とつながる “”もの”” なので LINE Things であり、これを実現するプラットフォーム全体のことを LINE Things と呼びます。

簡潔にまとめると、既にたくさんのユーザーに利用されているLINEアプリ上からBLEを搭載したデバイスに接続し、デバイスを操作したり、デバイスからデータを受信したりということができるようになる技術ということになります。現在はLIFFが開いている時のみ通信が可能ですが、今後はLIFFを経由しない通信(デバイスから任意のタイミングでデータを送信する等)も対応予定です。

# つくるもの

[LIFF](https://engineering.linecorp.com/ja/blog/liff-our-latest-product-for-third-party-developers/)は単なるWebビューではなく、ユーザーの登録情報を取得できたり、ユーザーの代わりにトークルームやグループにメッセージを送信することが可能です。今回はそのLIFFの機能を活かし、ソフトウェアキーボードを使わずにブレッドボード上に配置したタクトスイッチでテキストの入力ができるインプットデバイスを開発します。

# 開発の流れ

開発の流れとしては以下となります。

- Bot側
    - Botチャネルを作成する
    - LIFF上で動くWebアプリケーションを作成する
    - `ble`のパーミッションが付与されたLIFFをcurlコマンドで作成する
- デバイス側
    - [ESP32 DevkitC](http://akizukidenshi.com/catalog/g/gM-11819/)とブレッドボード等を利用しデバイスを作成する
    - LINE Thingsのトライアルプロダクトをcurl経由で作成する
    - Arduino IDEからESP32 DevkitCにスケッチを書き込む
    - LIFFの`serviceUuid`を書き換える

# 開発

## Bot側
### Botチャネルを作成する

では最初に、Botチャネルを作成しましょう。[LINE Developers](https://developers.line.biz/ja/)へ移動し、右上の「ログイン」をクリックし、LINEアカウントでログインします。

ログイン後はプロバイダの一覧が表示されますので、サービスを作成したいプロバイダをクリックします。未作成の方は作成してください。プロバイダとはBot、Clovaスキル等をグループ化して管理できる機能です。次に、「新規チャネル作成」をクリックして`Messaging API`のチャネルを作成します。この際、アプリ名に`LINE`が入っていると弾かれますのでご注意ください。

![bot_create.png](https://qiita-image-store.s3.amazonaws.com/0/164153/181b86cd-4e88-30f5-8ad7-27ffb5bb6c2a.png)

作成できたら、「アクセストークン（ロングターム）」の横の「再発行」をクリック、失効までの時間を0のままで`再発行`をクリックし、ロングタームのアクセストークンを発行しておきます。この後使いますので控えておいてください。

合わせて最下部に友だち追加用のQRコードがありますのでスマートフォンのカメラで撮影し友だちになっておいてください。

### LIFF上で動くWebアプリケーションを作成する

次に、LIFF上で動くWebアプリケーションを作成します。今回はGithub Pagesを利用してWebアプリケーションを公開し、そのURLをLIFFに紐付けることでLIFF上で開けるようにします。

[https://github.com/stachibana/input-device-with-linethings](https://github.com/stachibana/input-device-with-linethings)へ移動し、右上の「Fork」ボタンをクリックします。

リポジトリが自身のgithubアカウントへForkされますので、「Setting」をクリックします。

<img width="1042" alt="スクリーンショット_2018-12-10_13_57_14.png" src="https://qiita-image-store.s3.amazonaws.com/0/164153/718ddd05-d00b-7efd-0403-73347ce64bcf.png">

下の方に「Github Pages」という項目がありますので、`master brunch`を選択し、「Save」をクリックします。

<img width="1070" alt="スクリーンショット_2018-12-10_13_58_01.png" src="https://qiita-image-store.s3.amazonaws.com/0/164153/d8041a3c-2223-abc5-f880-0e0b73b3a7aa.png">

アプリケーションが公開されました。URLを控えておいてください。LIFF用のURLは表示されたURL`https://{username}.github.io/input-device-with-linethings/`の最後に`liff-app/`を付け加えたものになります。(例：`https://stachibana.github.io/input-device-with-linethings/liff-app/`)

### `ble`のパーミッションが付与されたLIFFをcurl経由で作成する

では次に、BotチャネルにLIFFを追加しましょう。LIFFは既に管理画面のGUIから作成できるようになっておりますが、Thingsに必要な`ble`パーミッションを付与する必要がありますので、`curl`を利用して作成します。

以下のコマンドを実行してください。`channel access token`は先程発行したものを、`view size`は`full`、`tall`、`compact`のいずれかを、`LIFF APP URL`は__作成したWebアプリケーションのURLの最後に`liff-app/`を加えたもの__を、`LIFF APP name`は任意のアプリケーション名に置き換えてください。

```bash
curl -X POST https://api.line.me/liff/v1/apps \
 -H "Authorization: Bearer {channel access token}" \
 -H "Content-Type: application/json" \
 -d '{
  "view":{
    "type":"{view size}",
    "url":"{LIFF APP URL}"
  },
  "description" : "{LIFF APP name}",
  "features" : {
    "ble": "true"
  }
}'
```

成功すると`liffId`が返却されますので控えておいてください。

## デバイス側
### ESP32 DevkitCとブレッドボード等を利用しデバイスを作成する

ではボードとブレッドボードを利用して配線を行いましょう。以下の図を参考に、タクトスイッチを3個設置してください。

<img width="1303" alt="LINE Things Input Device" src="https://qiita-image-store.s3.amazonaws.com/0/164153/31050f8a-ec03-6b33-0a03-d84298d14b3e.png">

写真も貼っておきます。

![IMG_2865.JPG](https://qiita-image-store.s3.amazonaws.com/0/164153/2020bd9e-83e3-9ab4-1fc5-f1934efc9c64.jpeg)


### LINE Thingsのトライアルプロダクトをcurlコマンドで作成する

LINE Thingsのトライアルプロダクトをcurlコマンドで作成します。アクセストークンと`liffId`をパラメーターとして渡すことで`LIFF`とデバイスを紐付けるための`serviceUuid`を発行できます。以下のコマンドを入力してください。`trial product name`は任意のプロダクト名です。

```bash
curl -X POST https://api.line.me/things/v1/trial/products \
 -H 'Authorization: Bearer {channel access token}' \
 -H 'Content-Type:application/json' \
 -d '{
  "name": "{trial product name}",
  "liffId": "{LIFF APP ID}"
}'
```

成功すると以下のようなレスポンスが返ってきます。`serviceUuid`の値を控えておいてください。

```bash
{
  "id":{productId},
  "name":"{trial product name}",
  "type":"BLE",
  "channelId":{channelId},
  "actionUri":"{LIFF APP URL}",
  "serviceUuid":"{serviceUuid}",
  "psdiServiceUuid":"{psdiServiceUuid}",
  "psdiCharacteristicUuid":"{psdiCharacteristicUuid}"
}
```

### Arduino IDEからESP32 DevkitCにスケッチを書き込む

Arduino IDEを起動し、[こちらのページ](https://github.com/line/line-things-starter/blob/master/esp32/README.ja.md)の「インストール方法」を参考にセットアップしてください。

新規スケッチに[https://github.com/{githubユーザー名}/input-device-with-linethings/blob/master/esp32/arduino/sample/sample.ino](https://github.com/{githubユーザー名}/input-device-with-linethings/blob/master/esp32/arduino/sample/sample.ino)をコピーします。

10行目あたりに`USER_SERVICE_UUID`という定数が定義されています。この値を先程控えておいた`serviceUuid`に変更します。終わったら書き込んでください。

### LIFFの`serviceUuid`を書き換える

合わせてLIFFの方も`serviceUuid`を自身のものに書き換える必要があります。

[https://github.com/{githubユーザー名}/input-device-with-linethings/blob/master/liff-app/liff.js](https://github.com/{githubユーザー名}/input-device-with-linethings/blob/master/liff-app/liff.js)を開き鉛筆のアイコンをクリックして編集モードに入り、2行目の`USER_SERVICE_UUID`の値を書き換えます。終わったら保存(コミット)します。

## デモ

これで完成しましたので、試してみましょう。

まずは[こちらの手順8まで](https://developers.line.biz/ja/docs/line-things/try-line-things/)を参考にLINE Thingsを有効化、デバイスと連携をしてください。

できたら先程作成し友だちになっておいたBotとのトークルームを開き、`line://app/{控えておいたliffId}`を送信します。このアクションに意味はなく、クリックできるようにするためです。送信するとリンクがタップ可能になりますのでタップします。

LIFFが開きますので、デバイスの左側2つのタクトスイッチを押して文字を入力、右側のスイッチで確定、確定済みの状態で更に押すとルームにテキストが送信されます。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">LINE Thingsで自作のインプットデバイス作りました。明日のIoTLT Advent Calendarで詳しく書きますのでお楽しみに！ <a href="https://twitter.com/hashtag/linethings?src=hash&amp;ref_src=twsrc%5Etfw">#linethings</a><a href="https://t.co/1VHPZjix2h">https://t.co/1VHPZjix2h</a></p>&mdash; tachibana (@stachibana) <a href="https://twitter.com/stachibana/status/1073470860021788672?ref_src=twsrc%5Etfw">2018年12月14日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## ドキュメント

ドキュメントは[こちら](https://developers.line.biz/ja/docs/line-things/)にあります。適宜参照してください。

## まとめ

いかがでしたでしょうか。LINE ThingsではLINEアプリからBLE搭載デバイスを操作したりデータを受け取るだけでなく、LIFFの機能を利用することでトークルームやグループ等にメッセージを送信することも可能です。

ハッカソンやプロトタイプの作成では無類の強さを誇るLINEのプラットフォームで動きますので、何かアイディアの思いついた時には是非ご利用いただければと思います。フィードバックもお待ちしております！

明日の記事は[nanbuwks](https://qiita.com/nanbuwks)さんの「[文明のHack](https://qiita.com/nanbuwks/items/9f3f3d67b7222ad6d397)」です。