IoTでいろいろたのしいことをやっていくブログ

マトリョーシカ的IoTブログ

M5Stack

M5Stackで頑張る!LINE Thingsのはじめかた

投稿日:

LINEThingsとは?

 LINE ThingsとはLINEでIoTができてしまう楽しいものである!LINEはたくさんの人が使っているので、IoTがより楽しくできるぞ。

STEP1. M5Stackの開発環境の構築

ここでは割愛する。私のnoteにもいろいろ書いてある。

STEP2. LINE Developerへ登録


コンソールにログインする。

STEP3. プロバイダーとMessaging APIの作成

 画面右上の自分のアイコンをクリック。
 プロバイダー新規作成をクリック。プロバイダー名に好きな名前をつけて登録しよう。
 新規作成が終了したら、つぎはMessaging APIを作成する。作成したプロバイダーのページで、「新規チャンネル作成」をクリックする。ただし、LINEという文字列は使わないこと。 原因不明のエラーが出るらしい。

STEP4. LIFFアプリの作成

 次はLIFFアプリを作成する。githubに公開されている「LINE Thingsスターター」のリポジトリを操作する必要があるので、githubアカウントを取得する。
アカウントの取得が終わったら、以下のページへ飛び、自分のアカウントへフォークする。
https://github.com/line/line-things-starter/
 Forkというのをクリックする。フォークというのはリポジトリをコピーすることだ。フォークしたものを編集してもコピー元には影響を与えない。

 フォークが終了したら、自分のgithubのページに遷移している。そこで、「Settings」をクリック。少し下に行ったところにある「Github Pages」の「Source」をNoneからmaster branchに変更する。

 終了すると、

Your site is ready to be published at https://{アカウント名}.github.io/line-things-starter/.

 という表示が出てくるのでメモをしておく。あとでエンドポイントの設定に用いる。
こんどはLINE Devloperのページを開き、さきほど作成したMessage APIを開く。そこからLIFFアプリを作成する。LIFFのタブから「追加」をクリック。

 各項目を記入してLIFFを追加する。

  • 名前:  任意の名前を入力(LIFFという文字列は使わないこと!)
  • サイズ: FULLでOK
  • エンドポイントURL: さきほどgithubで取得したURLに/liff-app/を追加したもの。 最後のスラッシュを忘れないように。
  • Scope:チェックはしなくてOK
  • オプション BLE feature :ON
  • オプション Scan QR :OFFでOK

 最後に「追加する」ボタンを押す。そうすると、LIFF URLという項目が表示される。下の写真の赤枠の部分は、LIFF APP IDとしてあとで使うので控えておくこと。

STEP5. LINE Things プロダクトの作成

 ターミナルを使ってLINE Thingsのプロダクトを作成する。そのまえにアクセストークンを取得する。さきほど作成したチャンネルの「チャンネル基本設定」から「メッセージ送受信設定」のアクセストークンの項目へ移る。
 再発行を押して、トークンを取得。失効までの時間は空白のままでいい。
 表示されたものはコピペしておく。

 ターミナルで以下のコードを入力する。
<channel access token> はアクセストークンのことだ。
<trial product name>は任意の名前をつけていい。
<LIFF APP ID> はLIFF URLの一部を使う。

そうすると、たくさんの文字が出てくる。それらをメモ帳などに貼り付けて改行していこう。

***のところには色々入る。これらのうち、serviceUuidはチャンネルに固有なものなので控えておく。

STEP6. LIFFアプリの書き換え

 先ほどgithubでフォークしたリポジトリ内のファイルを一部書き換える。githubのページを開き、liff-app>liff.jsへ移る。

liff.jsの2行目、USER_SERVICE_UUID の値をさきほど取得したserviceUuidのものに書き換える。書き換えは画像の鉛筆マークをクリックすればできる。

書き換えが終了したらページ下の「Commit Changes」をクリック。

STEP7. LINE Botと友達になる

 いよいよM5Stack、といきたいところだがその前に作成したLINE Botと友達登録をしておく必要がある。そうしないとデバイスとLINEの連携ができない。
作成したチャンネルのチャンネル基本設定のページを表示する。下の方に「Bot情報」という見出しとQRコードがある。スマホでそのQRコードを読み取ろう。

LINEが立ち上がるので、表示されたBotと友達登録をしよう。これで準備OK。

STEP8. M5Stackへの書き込み

 やっとM5Stackが出てくる。さきほどフォークしたgithubページのline-things-starterから「M5Stack」のフォルダを選択。

arduino > sample.inoをクリック。ひとまずコードをArduino IDEにコピーしよう。そしてArduino IDE内で11行目の USER_SERVICE_UUID**** をさきほどSTEP5で取得したserviceUuidに変更。

Arduino IDEからM5Stackへコードを書き込む。うまくいくと、M5StackにQRコードが表示されるはずだ。それを読み取り、LINE Thingsを有効化しよう。

STEP9.LINEとM5Stackの連携

有効化が終わったら、スマホのBluetoothをONにする。LINE Thingsの連携可能なデバイスをタップ。

これが表示されたらOK。M5Stackのボタンを押すと、スマホのClick CountやSwitch LED ONの内容が変わる。確認してみよう。

けっこう詰まったところ

連携可能なデバイスが表示されない

  • 原因1: M5Stackに書き込んだUUIDと、github上のUUIDが異なる。
  • 原因2: LINE Botと友達登録をしていない
  • 原因3: Bluetoothの不調
    Androidはけっこうなりやすい。Bluetoothを一旦OFFにして再度トライ。また、LINE ThingsはBLEというBluetoothの新機能を使っている。古いスマホでは使えない場合もある。 nRFConnectというアプリをつかって、BLEができるかどうか確認してみよう。
    https://play.google.com/store/apps/details?id=no.nordicsemi.android.mcp&hl=ja

連携可能なデバイスをタップしてもつながらない。Disconnectのまま。

  • 原因1:UUIDが違う
  • 原因2:連携可能なデバイスを一旦解除していない。
     UUIDを書き換えたら、連携可能なデバイスを一旦解除して、再登録する必要がある。LINEのデバイスを長押ししてみよう。ダイヤログが表示されて解除ができる。
    それが終わったら、もう一度BluetoothをON M5StackをONしてみて確かめよう。

  • 原因3:LIFF名に「LIFF」が入っている。
     自分がこれで2週間ほど悩んだ。LINE Devloper上で設定するチャンネル設定において、LIFF名に「LIFF」という文字列をいれるとおかしな挙動を示すらしい。心当たりのあるひとは変更してみよう。

  • 原因4:LIFFの設定でBLE featureをOFFにしている。
     ONにしましょう。

おわりに

 非常に楽しくなりそうなThingsだった!もっといろいろ改造してLINEに通知がくる面白い装置をつくるぞ!

参考URL


-M5Stack

Copyright© マトリョーシカ的IoTブログ , 2020 All Rights Reserved Powered by STINGER.