obniz x LINE Thingsハンズオン 

この資料はobniz x LINE Thingsのハンズオンを行ったときの資料です

## 作るもの

LINE Things名物、無限PUSH通知


こちらを構築してみましょう



作成の流れ

1. 事前チェック
1. LINE BOTを作成する
2. LINE Thingsとしてつなげる

# 事前チェック

obnizのfirmwareとLINEアプリを最新のものにアップデートしてください
下記で動作確認をしています。

| アプリ       |      バージョン |     確認方法 |    
|:-----------------|:------------------:|:------------------|
| obniz firmware |    v1.1.0|  https://poche.xsrv.jp/iot-gym/2019/02/25/obniz-firmware-version-and-mac-address/ <br/>上記URLの通りにやってDisplayInfoが確認できない場合は、firmwareバージョンが古いのでアップデートが必要です|
| LINE           |    v9.8.0 | https://digitalnews365.com/check-line-version |



# LINE BOTを作成する
サーバーを立てて、その後LINEの設定をしていきます。

### サーバー立ち上げ
予めプロジェクトを作っておきましたので、これをコピーしてサーバーを立ち上げます。

こちらにアクセスします。
https://repl.it/@9wick/line-things-handson

<img width="1254" alt="スクリーンショット 2019-07-23 18.21.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/94ed731a-17bf-fb6d-2b15-35f4f0621faf.png">

上のフォークボタンを押してプロジェクトをコピーします
<img width="1254" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f61633033653931642d613561632d343463662d633365352d3235636133663565353061372e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/939bd055-24c6-c508-490a-72140da7a0dc.png">

左のファイル一覧で.envファイルを作成し、.env.exampleの内容をコピーします
<img width="1254" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f33643835333466322d643639312d323739392d663638632d3961326639373931643336352e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/1aaedeec-1379-07ab-edb5-fd65c3302a64.png">


右側の"Hello LINE BOT!"と書かれているタブを消します。
<img width="1254" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f33643835333466322d643639312d323739392d663638632d3961326639373931643336352e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/0f651d6d-e364-54c1-b79e-2db217f84400.png">

<img width="1254" alt="スクリーンショット 2019-07-23 18.24.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/3bfdff9c-ba26-a937-9250-9785e214a52e.png">

runボタンを押して実行します。再度"Hello LINE BOT!"が出てくればサーバーの立ち上げ完了です。

<img width="1254" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f33626664666639632d626132362d613933372d393235302d3937383565323134613532652e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/a62385ed-11f3-830d-e4e5-70e1d24dfd2e.png">

<img width="1254" alt="スクリーンショット 2019-07-23 18.28.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/a9c0e7c0-1d86-b5e3-ff14-c6361ccb959e.png">

"Hello LINE BOT!"の上のバーに出ているURLが立ち上げたサーバーのURLです

プログラムのエンドポイントは次のようになっています

* 確認用トップページ GET https://xxxxxx.repl.co/  
* LINEからのWebhook受付 POST https://xxxxxx.repl.co/webhook  
* LIFFアプリ用URL GET https://xxxxxx.repl.co/liff


### LINEのbot立ち上げ

[LINE Developers](https://developers.line.biz/ja/)へLINEアカウントでログインします。
LINEアカウントでのログインにはID/Passwordが必要です。まだない人は、スマホのLINEアプリで登録することができます。

<img width="554" alt="スクリーンショット_2019-07-29_15_10_57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/5a823b35-d049-50cb-19ea-daea60287bdb.png">
<img width="752" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f64653839633762372d343463632d363730302d646665322d6134653636666235303935662e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/90d282de-2289-e5f6-1cff-4c011de56f3f.png">


プロバイダーを選びます。必要に応じて新規作成して下さい
<img width="752" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f66333562313566302d646639632d366435362d623330312d6566303663396638666462302e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/c2877424-2cb5-6b12-17e0-c9f79af7d45b.png">



新規チャネルを作成します。
プロバイダーを新規作成した場合はこの画面ではなく、次のチャネル種類選択画面が出ていますので、ここはスキップします。
<img width="752" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f66313363323935372d636237662d313032382d333936612d6330363832346362616366382e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/dd863c99-0d97-e041-424e-d6e3718321d9.png">


MessagingAPIで新規Botを作成します。
<img width="752" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f34336235653662652d303937312d376462382d656630362d6366383233616633393432372e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/2cd4295a-23fd-b084-33c0-a933ccd17feb.png">


新規チャネルでの入力項目は下記のとおりです

```
・アプリ名　(LINEの文字を入れると弾かれます)
・大業種
・小業種
・メールアドレス
```

<img width="732" alt="スクリーンショット 2019-07-21 14.45.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/ad92a2a6-4f66-fa10-6b86-9b5c5b3d498d.png">

問題なければ規約にチェックして次へ進みます。

<img width="752" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f32373138636433642d636336662d313237662d633564652d3739396235363833636365362e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/a80090b0-7c33-cb64-1b09-fb1e8c0a9a0d.png">


作ったBotが出てきていますので、そちらに入ります。

<img width="752" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f65393163343534312d383834382d323237652d613039652d3163386434306131316338342e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/1323271f-a72d-3c38-f4b0-fc1c36956a6e.png">


<img width="732" alt="スクリーンショット 2019-07-21 14.46.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/a2827b3d-a13d-b848-ce7e-80d304c7c594.png">


チャネルシークレットをrepl.itの.envファイルに記載します。

<img width="737" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f62353763643566362d303362622d303937382d653538332d3236643563393032636565372e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/e4fc813c-a657-e53d-3e04-795a719b96c5.png">

<img width="737" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f39343236373039362d663832382d613962302d376638302d3535373861666331336365622e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/bcc384b2-d4d9-3b6f-7dd0-40cd86852bda.png">

下の方でアクセストークン（ロングターム）を発行します
<img width="752" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f64306238626637392d343239322d656538662d383131612d3134326634633930326337322e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/b75a2f79-bef9-5bb5-ff41-79f90f20d950.png">

<img width="752" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f65336163376538302d646537382d616665392d636165372d3139666631393937333935342e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/965869ea-5575-7cb9-cb6c-88156cb15fdc.png">



発行したアクセストークンをrepl.itの.envファイルに記載します。記載が終わったらrestartボタンを押してサーバーを再起動させておきましょう。

<img width="1254" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f32643462653530382d393733382d346465382d363932632d6537316665646139653931332e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/2fccc21f-f0ee-d1fc-545b-3de3e9653448.png">



Webhook送信を"利用する"に設定します。
<img width="752" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f30306633396464372d616238392d303737322d643965362d3731336138383337363339372e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/fc9358c7-5270-6dd0-bd38-9c5977175ed8.png">

WebhookURLを立ち上げサーバーのURL + "/webhook"にします 
https://xxxxxx.repl.co/webhook  

`https://`はもうすでに左側に書かれていますので、`xxxxxx.repl.co/webhook` の部分だけ記入します。
<img width="752" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f38623634353764632d653431332d303765632d333030652d6232636235616662383234642e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/3a3b43e9-fd8f-fac3-9eef-6d16924f7891.png">



LINE自動応答のメッセージの「設定はこちら」から、設定を変更します。
* あいさつメッセージをオフに
* 応答メッセージをオフに
* webhookをONに
<img width="764" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f62633533643338642d653663322d373461632d376531362d6533316563616339333763652e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/d44e1b08-62fb-6d5d-31bd-362f71527de9.png">

<img width="737" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f63356662616433392d663562662d323462372d333535372d3337303836616664623631382e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/d68eae64-10a1-4491-5306-3ef7f71892f7.png">



これでLINEの設定も完了です。
LINEで友達登録してなにか送ってみましょう
![スクリーンショット 2019-07-23 15.29.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/2956767c-9da2-b7a9-25fb-2380f0b4ee1c.png)
<img width="375" alt="IMG_4614.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/487f01ea-5860-f9ba-df16-95f6d243b8f4.png">


# LINE Thingsとしてつなげる
LINE ThingsにはLIFFアプリが必須なので、LIFFアプリを作りその後自動応答のためにシナリオを作ります。


### LIFFアプリ設定


LIFFタブから新規LIFFアプリを作成します。
<img width="648" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f35636631626664362d393330652d346430632d393235332d3763386138383331323536352e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/b7bfa35a-4697-7058-6ed1-ee08eb643495.png">


設定でBLEをONにするのを忘れずに行います。
エンドポイントは立ち上げたサーバーのURL + "/liff"にします 
https://xxxxxx.repl.co/liff  

<img width="648" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f35646561613663312d643261352d323835352d353165642d6236323738663064323362362e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/7c90622b-e5ca-2aca-e771-be5a226dbace.png">



これで無事作成完了です。
<img width="648" alt="スクリーンショット 2019-07-23 15.42.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/9ce9b6b4-9a47-df20-6c34-9690420e4dfe.png">


### シナリオ設定は @n0bisuke さんが作っているアプリを使って設定します
( @n0bisukeさんありがとうございます)
https://n0bisuke.github.io/linethingsgen/

<img width="667" alt="スクリーンショット 2019-07-23 15.43.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/62329dfb-c263-2e1d-bd70-bc9590dce3e5.png">

まずはSettingに行って、アクセストークン（ロングターム）を入力して保存します。

<img width="667" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f38353665643862302d656634662d383138312d613866382d3964626138616666653034632e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/459765d7-91f5-1c8c-b4b8-541e62c07ebb.png">



Create Productに戻って少し待つと、先程作ったLIFFアプリが出てくるので選択します。プロダクト名を入力して作成ボタンを押すと、下に緑色で結果が表示されます。
このとき、プロダクト名はユニークな名前にして下さい。他人とかぶるとどれが自分のデバイスかわからなくなります。

<img width="745" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f34383462303731302d373331382d613365652d306466362d3462316565646135343036352e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/bc125eda-7bb7-a84e-dfae-b5f067253686.png">


そのままCreate Scenarioへ行きます。先程作ったproductが選べますので、選択します。
トリガーがBLE_NOTIFICATIONになってるのを確認してシナリオセットを登録します。
<img width="745" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f32303232653766622d623861372d393731632d656231342d3032376632373938313433382e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/bcf875ff-0487-74ff-3816-ae9914cd6918.png">


シナリオセットの登録時に出てきたBLE_NOTIFICATIONのserviceUuidとcharacterisitcUuidを.envファイルに記載します。ついでに自分の持っているobniz_idも入力します。

<img width="745" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f38313237336634622d626439652d366663392d646431642d3532333836626533323633612e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/70d2e760-39de-fa86-d50d-68ce91e8a9a7.png">
<img width="656" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f65626564333739662d653939652d366662342d323833612d6237353062663066333639312e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/407ef844-c9a9-73f7-c9c4-2fededdc0b68.png">


repl.itのrestartボタンを押して反映させましょう
obnizに"Obniz Ready"と表示されていればうまく動いています。
![IMG_4629.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/a5f92651-4bcd-5baf-8137-0d295126b317.jpeg)


### 試してみる

こちらのQRからLINE Thingsを有効化します

![68747470733a2f2f646576656c6f706572732e6c696e652e62697a2f6d656469612f6c696e652d7468696e67732f71725f636f64652d33313166333530332e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/07407b21-3ff4-bfe5-0082-c1ef7ea6fb41.png)

LINE Thingsの画面で自分の作ったproductを選んでペアリングします
ペアリングがうまくできない場合は、Bluetoothのオンオフ、端末の再起動を試して下さい。
<img width="375" alt="IMG_4624.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/b9c446da-f22a-cca4-0956-e519c6168767.png">

連携できれば完了です。
<img width="375" alt="IMG_4625.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/ab6d9e4a-bcd7-ad8e-85b4-f21739682a01.png">

obnizが自動的に接続され、connected表示になります。
![IMG_4627.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/3eb98dc7-c487-c58d-54a6-335fad7970b2.jpeg)

まずはLIFFでLINE Thingsを触ってみましょう。
マイデバイスで選択します。場合によっては認証を求められるので、よく読んで許可しましょう。

<img width="375" alt="IMG_4647.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/81fe2bcc-3483-4373-ca68-a4387b1f8d33.png">

LIFFが立ち上がります。
obnizのスイッチを押すとLIFF上でボタンが押されたり、
LIFF上のスイッチを押すとobnizのディスプレイの表示が変わったりします。

<img width="375" alt="IMG_4646.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/72ef327a-7855-1d96-7aa1-69185f28f3b2.png">

LIFFで十分に遊んだたら、LIFFを閉じます。
その状態で左上のスイッチを押すとLINEを経由してサーバーに通知が行き、replyにてbotがチャットします。
<img width="375" alt="IMG_4628.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/0d009715-2c4c-736d-19bf-b9c369011979.png">

これでLINE ThingsのLIFFとが体験できました！