Zenn
😎

M5StackでLINE Beaconを作成する手順を久々にまとめてみる 2020年9月版

2020/09/17に公開
JavaScript
LINE
Arduino
m5stack
#
linebeacon
tech

試しに。 (Qiitaで書いたネタを)

最近LINE Beaconを触ってみているので久々に少しまとめてみます。

調べると出てくる記事はもう結構古いと思うので改めて自分用にも。

必要なソフトウェアなどは省略せずに書いてるつもりですが、完全初心者向けハンズオン記事とかではないのでご留意下さい。

何よりも登録のこのURLをいつも忘れるので記録です。(後述)

https://manager.line.biz/beacon/register

LINE Beaconとは

LINEが提供するLINEと連携できるビーコンの仕組みです。詳細は参考記事へ。

参考: LINE ThingsやLINE Beaconの立ち位置おさらいなど #linedc #linethings

選択肢として公式デバイスもありますが、今回はLINE Simple Beaconを利用します。

M5Stack

M5Atom Liteが安いかつコンパクトかつケース個人的にオススメです。1000円で買えます。

https://www.switch-science.com/catalog/6262/

必要な要素

ざっくり言うとサーバーサイド実装+マイコンボード実装が必要です。

  • STEP0. [下準備] LINE BOT作成
    • LINE BeaconはLINE BOTに紐づく仕組みです。LINE BOT開発が必要になります。
    • サーバーサイドの言語ならなんでもOKですが、ここではNode.jsで進めます。
  • STEP1. マイコンボードのLINE Beacon化
    • LINE Simple Beaconを利用してESP32などのマイコンボードに書き込みます。
  • STEP2. LINE BOT開発
    • 作成したLINE BOTをLINE Beaconのイベントに対応させます

ちなみに筆者環境は、macOS Catalina / Arduino IDE 1.8.12 / Node.js v14.10.1です

実際に作ってみる

STEP0. [下準備] LINE BOTを作成

Node.jsでLINE BOTを作成します。Node.jsのインストールなどは事前に済ませておきましょう。

1時間でLINE BOTを作るハンズオンを元にLINE BOTを作成しましょう。

STEP1. マイコンボードのLINE Beacon化

この記事ではM5Atom Liteを利用しますが、M5Atom MatrixやM5Stack Basic、M5Core2などでも試せました。

1.1 マイコンボードへの書き込みまで

  • Arduino IDEの準備

Arduino IDEで開発をしていきます。準備しましょう。

https://www.arduino.cc

  • Arduino IDEにESP32ボードライブラリの追加

Arduino IDEでESP32系のボードの書き込みが出来るようにします。

Arduino IDEの設定から、追加のボードマネージャのURLに以下のURLを追加

https://dl.espressif.com/dl/package_esp32_index.json

ボードマネージャでESP32と検索し,espressif/arduino-esp32をインストール

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/f9498995-30c5-05e6-4b2b-57d6705af55d.png" width="400px">

  • Arduino IDEにLINE Beacon用ライブラリのGreen Beaconを追加

ライブラリマネージャ（ライブラリを管理）でGreen Beaconと検索しgreen-beacon-esp32をインストール

  • シンプルなコードを書き込む

PCとマイコンボードをケーブルで接続して書き込みを行います。

void setup() {
  Serial.begin(115200);
  Serial.println("start");
}

void loop() {
}

書き込み時の設定はこんな感じ。

スクリーンショット 2020-09-16 11.00.31.png

M5Atom系の場合、ボードはESP32 Pico Kitを選択、Upload Speedを115200に変更しましょう。

Upload SpeedをそのままにするとA fatal error occurred: Timed out waiting for packet headerというエラーになります。

...ちなみに同じエラーでもこんな事象(↓)が発生することもあるので気をつけましょう。

こんな事象: M5Stack Core2にArudino IDEで書き込みと発生したまさかのエラー #iotlt

1.2 LINE Simple BeaconのID発行

LINE Simple BeaconのID発行のページへ行きます。このページのURLがいつもどこにあるか分からなくなる......

https://manager.line.biz/beacon/register

line simple BeaconのハードウェアIDを発行を選択 -> 利用するLINE Botのアカウントを選択 -> ハードウェアIDを発行

と進んでIDを発行します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/6f8e8703-a0d3-544f-ea56-3da113a4d3bc.png" width="400px">

123456abczのような10桁のIDが発行されると思います。

1.3 マイコンボードへ書き込む

以下のようなコードで実装できます。

#include "GreenBeacon.h"

void setup() {
  GreenBeacon beacon = GreenBeacon("123456abcz"); // 取得したIDを指定
  beacon.start("Hello!");
}

void loop() {}

これを書き込みます。

無事に書き込まれたらマイコンボードがLINE Beacon化してビーコン電波を発信してくれます。

STEP2. LINE BOT開発

1時間でLINE BOTを作るハンズオンの記事を元に作ったコードのhandleEventの関数を差し替えます。

//省略

async function handleEvent(event) {
  //BOTが生きてるか確認用のおうむ返し
  if (event.type === 'message' && event.message.type === 'text') {
    return client.replyMessage(event.replyToken, {
      type: 'text',
      text: event.message.text //実際に返信の言葉を入れる箇所
    });
  }

  //ビーコン反応
  else if(event.type === 'beacon') {
    console.log(`beacon enter`);
    // ここに処理を書いていく
    
    return Promise.resolve(null);
  }
}

//省略

実際に試すと、LINE Beaconの反応があった際にターミナルにbeacon enterと表示されます。

あとは// ここに処理を書いていくとコメントした箇所を中心に処理を書いていきましょう。

動かない場合

  • 基本
    • LINE BOTと友達になっているか確認
    • スマートフォンでBluetoothがオンになっているか確認
    • LINEアプリでLINE Beaconがオンになってるか確認
    • Arduino IDEで書き込みエラーは出てないか確認
  • それでもダメなら
    • おうむ返しが帰ってくるか確認
    • LINEアプリを一度落としてから再起動
    • LINE BOTを一度友達削除してから再度友達に

こんな手順で確認しましょう。

おまけ: マイコンボードからビーコンでメッセージを送る

LINE Simple BeaconではDMというパラメータでマイコンボードからLINE BOT側にメッセージを送ることができます。

センサーデータをLINE BOT経由でユーザーに送ったり、その値によってLINE BOTがユーザーに話しかける内容を変えたり出来ます。

beacon: { hwid: '000000000', dm: '48656c6c6f', type: 'enter' }
  • Arduino側のコード
#include "GreenBeacon.h"

const String hwid = "xxxxxxxxx";

GreenBeacon beacon; // Require in case using globally

void setup() {
  beacon = GreenBeacon(hwid, "MyBeacon"); // "MyBeacon" is optional
  beacon.start(); // start advertising
}

void loop() {
//  String mes = String(millis());
  String mes = "Hello";
  log_i("setMessage(%s)", mes.c_str());
  beacon.setMessage(mes);
  delay(1000);
}
  • Node.js側のコード

マイコンボードからのメッセージがevent.beacon.dmに格納されています。

このままだと16進数の文字列で送信されてくるので変換してあげましょう。

const dmHexStr = event.beacon.dm; //16進数文字列
const dmStr = Buffer.from(dmHexStr, 'hex').toString('utf-8');
console.log(dmStr); //マイコンボードからのメッセージ

参考: Node.jsで16進数文字列を文字列に変換メモ

以下、handleEventの関数をまるっと置き換えられるようにしてます。

//省略

async function handleEvent(event) {
  //おうむ返し
  if (event.type === 'message' && event.message.type === 'text') {
    return client.replyMessage(event.replyToken, {
      type: 'text',
      text: event.message.text //実際に返信の言葉を入れる箇所
    });
  }

  //ビーコン反応
  else if(event.type === 'beacon') {
    console.log(`beacon enter`);
    // ここに処理
    const dmHexStr = event.beacon.dm; //16進数文字列
    const dmStr = Buffer.from(dmHexStr, 'hex').toString('utf-8');
    console.log(dmStr); //マイコンボードからのメッセージ

    return client.replyMessage(event.replyToken, {
      type: 'text',
      text: `マイコンボードからのメッセージ: ` + dmStr //実際に返信の言葉を入れる箇所
    });
  }
}

スクリーンショット 2020-09-16 17.09.32.png

まとめ

一旦一通り使えるようにまとめてみました。

何よりもこのビーコンのID払い出しURLがいつも忘れてしまう問題がデカいのでこの記事にまた戻ってこれるようにしたい。

https://manager.line.biz/beacon/register

ドキュメントやBOT管理画面からの導線がいつも分からないんだよなぁ......

Discussion