26
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

obniz x LINE Thingsハンズオン

Last updated at Posted at 2019-07-29

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

作るもの

LINE Things名物、無限PUSH通知

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

作成の流れ

  1. 事前チェック
  2. LINE BOTを作成する
  3. 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/
上記URLの通りにやってDisplayInfoが確認できない場合は、firmwareバージョンが古いのでアップデートが必要です
LINE v9.8.0 https://digitalnews365.com/check-line-version

LINE BOTを作成する

サーバーを立てて、その後LINEの設定をしていきます。

サーバー立ち上げ

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

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

スクリーンショット 2019-07-23 18.21.37.png

上のフォークボタンを押してプロジェクトをコピーします
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f61633033653931642d613561632d343463662d633365352d3235636133663565353061372e706e67.png

左のファイル一覧で.envファイルを作成し、.env.exampleの内容をコピーします
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f33643835333466322d643639312d323739392d663638632d3961326639373931643336352e706e67.png

右側の"Hello LINE BOT!"と書かれているタブを消します。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f33643835333466322d643639312d323739392d663638632d3961326639373931643336352e706e67.png

スクリーンショット 2019-07-23 18.24.14.png

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

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f33626664666639632d626132362d613933372d393235302d3937383565323134613532652e706e67.png スクリーンショット 2019-07-23 18.28.50.png

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

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

LINEのbot立ち上げ

LINE DevelopersへLINEアカウントでログインします。
LINEアカウントでのログインにはID/Passwordが必要です。まだない人は、スマホのLINEアプリで登録することができます。

スクリーンショット_2019-07-29_15_10_57.png 68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f64653839633762372d343463632d363730302d646665322d6134653636666235303935662e706e67.png

プロバイダーを選びます。必要に応じて新規作成して下さい
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f66333562313566302d646639632d366435362d623330312d6566303663396638666462302e706e67.png

新規チャネルを作成します。
プロバイダーを新規作成した場合はこの画面ではなく、次のチャネル種類選択画面が出ていますので、ここはスキップします。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f66313363323935372d636237662d313032382d333936612d6330363832346362616366382e706e67.png

MessagingAPIで新規Botを作成します。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f34336235653662652d303937312d376462382d656630362d6366383233616633393432372e706e67.png

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

・アプリ名 (LINEの文字を入れると弾かれます)
・大業種
・小業種
・メールアドレス
スクリーンショット 2019-07-21 14.45.24.png

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

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f32373138636433642d636336662d313237662d633564652d3739396235363833636365362e706e67.png

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

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f65393163343534312d383834382d323237652d613039652d3163386434306131316338342e706e67.png スクリーンショット 2019-07-21 14.46.21.png

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

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f62353763643566362d303362622d303937382d653538332d3236643563393032636565372e706e67.png 68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f39343236373039362d663832382d613962302d376638302d3535373861666331336365622e706e67.png

下の方でアクセストークン(ロングターム)を発行します
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f64306238626637392d343239322d656538662d383131612d3134326634633930326337322e706e67.png

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f65336163376538302d646537382d616665392d636165372d3139666631393937333935342e706e67.png

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

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f32643462653530382d393733382d346465382d363932632d6537316665646139653931332e706e67.png

Webhook送信を"利用する"に設定します。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f30306633396464372d616238392d303737322d643965362d3731336138383337363339372e706e67.png

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

https://はもうすでに左側に書かれていますので、xxxxxx.repl.co/webhook の部分だけ記入します。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f38623634353764632d653431332d303765632d333030652d6232636235616662383234642e706e67.png

LINE自動応答のメッセージの「設定はこちら」から、設定を変更します。

  • あいさつメッセージをオフに
  • 応答メッセージをオフに
  • webhookをONに
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f62633533643338642d653663322d373461632d376531362d6533316563616339333763652e706e67.png 68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f63356662616433392d663562662d323462372d333535372d3337303836616664623631382e706e67.png

これでLINEの設定も完了です。
LINEで友達登録してなにか送ってみましょう
スクリーンショット 2019-07-23 15.29.08.png
IMG_4614.PNG

LINE Thingsとしてつなげる

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

LIFFアプリ設定

LIFFタブから新規LIFFアプリを作成します。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f35636631626664362d393330652d346430632d393235332d3763386138383331323536352e706e67.png

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

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f35646561613663312d643261352d323835352d353165642d6236323738663064323362362e706e67.png

これで無事作成完了です。
スクリーンショット 2019-07-23 15.42.36.png

シナリオ設定は @n0bisuke さんが作っているアプリを使って設定します

( @n0bisukeさんありがとうございます)
https://n0bisuke.github.io/linethingsgen/

スクリーンショット 2019-07-23 15.43.38.png

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

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f38353665643862302d656634662d383138312d613866382d3964626138616666653034632e706e67.png

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

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f34383462303731302d373331382d613365652d306466362d3462316565646135343036352e706e67.png

そのままCreate Scenarioへ行きます。先程作ったproductが選べますので、選択します。
トリガーがBLE_NOTIFICATIONになってるのを確認してシナリオセットを登録します。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f32303232653766622d623861372d393731632d656231342d3032376632373938313433382e706e67.png

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

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f38313237336634622d626439652d366663392d646431642d3532333836626533323633612e706e67.png 68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3232373031352f65626564333739662d653939652d366662342d323833612d6237353062663066333639312e706e67.png

repl.itのrestartボタンを押して反映させましょう
obnizに"Obniz Ready"と表示されていればうまく動いています。
IMG_4629.JPG

試してみる

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

68747470733a2f2f646576656c6f706572732e6c696e652e62697a2f6d656469612f6c696e652d7468696e67732f71725f636f64652d33313166333530332e706e67.png

LINE Thingsの画面で自分の作ったproductを選んでペアリングします
ペアリングがうまくできない場合は、Bluetoothのオンオフ、端末の再起動を試して下さい。
IMG_4624.PNG

連携できれば完了です。
IMG_4625.PNG

obnizが自動的に接続され、connected表示になります。
IMG_4627.JPG

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

IMG_4647.png

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

IMG_4646.PNG

LIFFで十分に遊んだたら、LIFFを閉じます。
その状態で左上のスイッチを押すとLINEを経由してサーバーに通知が行き、replyにてbotがチャットします。
IMG_4628.PNG

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

26
21
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
26
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?