LINE ThingsのLIFFアプリ(とデバイス)を自前で作る #JavaScript

さっそくLINE Thingsを触ってみた（ESP32でリモートLチカ） #linedevdayの続きになるイメージです。

とりあえずデバイス側もLIFF側も用意されてたもので試してみたの次はLIFF側を自分で実装してみたいと思います。とはいえLINE ThingsのLIFFを自前でやるにあたり諸々必要になってデバイス側もいじることになります。

後から追記: 書いてて結局デバイス側もコード変更しないといけなかったので(とデバイス)って感じにしました。

ソースコード

こちらのLINE Things StarterのLIFF APPサンプルから

index.html
liff.css
liff.js
loading.gif

を手元に落とします。Git Cloneした方が早いかも

ホスティングする

ngrokとpythonのサーバーでやります。8080ポートです。

上記のコードがあるディレクトリでローカルサーバー起動

$ python -m SimpleHTTPServer 8080

トンネリングサーバー起動

$ ngrok http 8080

ngrok by @inconshreveable                                                    (Ctrl+C to quit)

Session Status                online
Account                       n0bisuke (Plan: Free)
Version                       2.2.8
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://a17dd6e4.ngrok.io -> localhost:8080
Forwarding                    https://a17dd6e4.ngrok.io -> localhost:8080

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

生成されるhttpsのアドレスを利用します。今回はhttps://a17dd6e4.ngrok.ioです。

LINE BOTの作成

1時間でLINE BOTを作るハンズオン (資料+レポート) in Node学園祭2017 #nodefestなどを参考に作成します。

LIFF アプリの作成

最近は管理画面からLIFFアプリを作成出来るようなったんですよね。（少し前は出来なかった）

ただ、今回は画面からじゃなくてcurlでやる必要があるっぽいです。

こちらのドキュメントから進めましょ。

https://developers.line.biz/ja/docs/line-things/regist-liff-app/

以下を実行します。

$ 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"
  }
}'

このサンプルリクエストに以下を入れ込んでリクエストしましょう。

channel access token: BOTのチャンネル基本設定にあるアクセストークン
view size: full / tall / compact の3種類から指定
LIFF APP URL: 先ほどのLIFFアプリをホスティングしているURL(今回はngrokのアドレス)
LIFF APP name: 適当に！

では実行します。xxxxxxxxxxxxxはアクセストークンです。全部書くと長いので...(この辺のトークンなどはマスクしないであとで破棄するスタイルです。)

$ curl -X POST https://api.line.me/liff/v1/apps \
 -H "Authorization: Bearer xxxxxxxxxxxxx" \
 -H "Content-Type: application/json" \
 -d '{
  "view":{
    "type":"tall",
    "url":"https://a17dd6e4.ngrok.io"
  },
  "description" : "のびすけのLIFF",
  "features" : {
    "ble": "true"
  }
}'

問題なくリクエストできると以下のようにliffidがサーバーからかえってきます。

{"liffId":"1483456697-oPzkQ2Rb"}

リクエストでfeatures.ble=trueがあるのでここでLINE Thingsを有効にしているみたいですね。

LINE Thingsの登録

ドキュメント通りに進めてみます。

先ほどのliffidが必要になります。

以下のサンプルリクエストにliffidを詰め込んでリクエストします。

$ 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}"
}'

channel access token: BOTのチャンネル基本設定にあるアクセストークン
trial product nameL: 適当に！ 今回はn0bisukeTestDeviceにしてみました
LIFF APP ID: 先ほど↑で取得したliffid

$ curl -X POST https://api.line.me/things/v1/trial/products \
-H 'Authorization: Bearer xxxxxxxxxxxxx' \
-H 'Content-Type:application/json' \
-d '{
  "name": "n0bisukeTestDevice",
  "liffId": "1483456697-oPzkQ2Rb"
}'

リクエストに成功すると以下のようなレスポンスが返ってきました。

{"id":xxxxxxxxxxxxxxx,"name":"n0bisukeTestDevice","type":"BLE","channelId":xxxxxxxxxxxxxxx,"actionUri":"line://app/1483456697-oPzkQ2Rb","serviceUuid":"1444a9ac-9aa5-42f4-9ca1-894f2a937a05","psdiServiceUuid":"e625601e-9e55-4597-a598-76018a0d293d","psdiCharacteristicUuid":"26e2b12b-85f0-4f3f-9fdd-91d114270e6e"}

ここではserviceUuidの値さえ覚えればOKデス。
僕の場合では、このserviceUuidの1444a9ac-9aa5-42f4-9ca1-894f2a937a05の値を利用します。(この値は個別に変わるので各自のserviceUuidを利用しましょう。)

諸々生のデータでちゃってるよう見えて、以下の二つの値はDeveloper Trial用という試しに使ってね的な値で固定値です。 以下の二つの値はサンプルコードに載っているままなので特に今回書き換えは不要です。

psdiServiceUuid: e625601e-9e55-4597-a598-76018a0d293d
psdiCharacteristicUuid: 26e2b12b-85f0-4f3f-9fdd-91d114270e6e

参考: LINE Things Developer Trial用のLINE Things対応デバイスを作成するときの制限について

デバイス側のコードを書き換え

前回（さっそくLINE Thingsを触ってみた（ESP32でリモートLチカ） #linedevday）の記事で書き込みをしているsample.inoの10行目を変更します。

lifftest.ino

省略
・
・
・
// User service UUID: Change this to your generated service UUID
#define USER_SERVICE_UUID "1444A9AC-9AA5-42F4-9CA1-894F2A937A05"
・
・
・
省略

レスポンスが小文字で返ってきますが、大文字に直して入れ込んだ方が安心だと思います。

手作業で1444a9ac-9aa5-42f4-9ca1-894f2a937a05を1444A9AC-9AA5-42F4-9CA1-894F2A937A05にしておきました。

(過去にその辺でハマった記憶が...)

LIFFアプリ側のコード書き換え

liff.jsのUSER_SERVICE_UUIDの箇所も先ほどのUUIDに書き換えます。
ここも、先ほど生成されたUUIDです。

liff.js

// User service UUID: Change this to your generated service UUID
const USER_SERVICE_UUID         = '1444A9AC-9AA5-42F4-9CA1-894F2A937A05'; // LED, Button
・
・
・
省略

LIFFアプリ側とデバイス側で同一のServiceUUIDを設定してあげる感じですね。

あと、変更がわかりやすいように

index.htmlに以下のようにimgタグを追記しておきます。（任意）

index.html

省略
・
・
・
    <!-- Title -->
    <h2>LINE Things Starter</h2>
    <img src="https://pbs.twimg.com/profile_images/1182958704/9a09649f-0b54-4c57-8c91-60d76cbcabfa_400x400.jpg" width="100">
・
・
・
省略

試す

実際に動かしてみましょう。

STEP1: デバイス側

Service UUIDを書き換えたら起動させておきましょう。

m5stackでエラー出る人はこっちでどうだろ。。。？
https://gist.github.com/n0bisuke/7208879b47561292f621036bc6480207

STEP2: 前回の連携削除（必要ない人は必要ない）

ここめちゃハマりました笑

今回のように一回試していて同じデバイスでUUIDを書き換えた時にうまく更新されない問題みたいなのがあるみたいです。

OS では、同じデバイスでファームウェアを書き換えた場合に、うまくデバイスを検出できなかったり、正しく Characteristic が動作しない問題が発生します。(iOS 自身のキャッシュによる問題) ファームウェアを書き換えた際には、iOS の設定画面から Bluetooth デバイスの登録を解除して、Bluetooth を一度 OFF にしたあと、もう一度 ON にすると解決する場合が多いです。また、LINE Things の連携画面から、デバイスを一度古い product を unlink してください。

ってちゃんと記事に書いてましたね。

Androidの人は大丈夫そうなのかな？

ということでやってみます。

こんな感じでとりあえずLINE Things Starterで一回連携試したりしてるとBluetoothのペアリングログがスマホに残ってます。(iPhone画面)