Hello, LINE Beacon 【2019/08最新版】

# はじめに

LINE Beaconを触り始めたのですがLINEアカウントのサービス統合があったりでネットの情報が古くなりはじめているようなのでまとめました。
ユーザがビーコン圏内に入ったらeventオブジェクトをトークに送信するBOTを作るところまでが目標です。

# 環境

この記事で使っているビーコンデバイスは[これ](https://beacon.theshop.jp/items/6617930)です。
単3エネループを別途用意しました。

# 解説

## BOTの作成

[LINE Developers](https://developers.line.biz/ja/)から作れます。
任意のプロバイダー（なければ新規プロバイダー作成からスタート）を選択し、ビーコンBOT用のチャネルをMessagingAPIで作成します。
<img width="798" alt="スクリーンショット_2019-08-12_1_01_19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71342/7be8fa2e-4e2c-a696-122b-9ef20cc4daa3.png">
次の画面では任意と書かれたフォーム以外を埋めます。業種なども適当で大丈夫です。最後に各種利用規約に同意して完了。
**アプリ名に`line`という文字列が含まれていると「指定されたパラメータ、もしくは入力された値が正しくない可能性があります。」エラーで先に進めません。**
<img width="238" alt="スクリーンショット 2019-08-12 1.05.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71342/362494e5-d6f3-25af-8a94-adfe347970ca.png">

## ビーコン端末のセットアップ

[管理画面](https://manager.line.biz/beacon/register)にアクセスし、`ビーコンとBotアカウントを連携`をクリック。
<img width="1435" alt="スクリーンショット_2019-08-12_1_12_40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71342/3cf2091e-6b67-4384-a82b-24eb13674705.png">
次のアカウントリスト画面で先ほど作ったBOTを選択し、ハードウェアID（HWID）とパスコード（CODE）を入力します。購入したビーコンデバイスでは側面にラベルで貼ってありました。
なお、**1つのLINE公式アカウントを複数のビーコンとリンクできます。しかし、1つのビーコンを複数のLINE公式アカウントとリンクすることはできません。**
正しいIDとパスを入力しているはずなのに`ハードウェアIDかパスコードが正しくありません。もう一度お試しください。`というエラーが出て進めない場合はビーコンが既に連携済みである可能性が高いです。
ビーコンのアカウント連携を解除するには[LINE Official Account Manager](https://manager.line.biz/)にアクセスします。すでに連携されているアカウントを選択すると、サイドメニューにLINE Beaconメニューが出現するのでそこから連携済みのビーコンを解除してください。
<img width="1436" alt="スクリーンショット_2019-08-12_1_18_43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71342/46549f1c-9e98-efd4-49f9-31bae06d919d.png">

## コードのデプロイ

LINE BOTのサンプルコードを改造したものをngrokで公開します。言語はnodeを選択しています。

```node:app.js
"use strict";

const line = require("@line/bot-sdk");
const express = require("express");

const config = {
  channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN,
  channelSecret: process.env.CHANNEL_SECRET
};

const client = new line.Client(config);

const app = express();

app.post("/callback", line.middleware(config), (req, res) => {
  Promise.all(req.body.events.map(handleEvent))
    .then(result => res.json(result))
    .catch(err => {
      console.error(err);
      res.status(500).end();
    });
});

function handleEvent(event) {
  if (event.type === "message") {
    return client.replyMessage(event.replyToken, {
      type: "text",
      text: event.message.text
    });
  } else if (event.type === "beacon") {
    return client.replyMessage(event.replyToken, {
      type: "text",
      text: "ビーコンを検出しました\n" + JSON.stringify(event)
    });
  } else {
    return Promise.resolve(null);
  }
}

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`listening on ${port}!`);
});
```
[README](https://github.com/line/line-bot-sdk-nodejs/tree/master/examples/echo-bot)を参考にConfigurationを済ませます。
`$ node .`でBOTサーバが起動します。更に`$ ngrok http 3000`でワールドワイドに公開します。forwardに払い出しURLが表示されているのでクリップボードにコピー。
もう一度[LINE Official Account Manager](https://manager.line.biz/)に戻り、今度は右上の設定をクリック。
<img width="1436" alt="スクリーンショット_2019-08-12_1_18_43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71342/7c66f6ae-5e3b-21f4-3aee-0080451a99a0.png">
`応答設定`->`詳細設定`と進み、`webhook`をオンに。更に`Messaging API設定`へ。`Webhook URL`にさっきコピーしたURLをペーストし、末尾に`/callback`を追加。
<img width="717" alt="スクリーンショット 2019-08-12 1.40.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71342/fcfdd409-6d18-be05-c29c-07a032d11d4f.png">

## 動作の確認

[LINE Official Account Manager](https://manager.line.biz/)の`ホーム`->`友だち追加`から作ったBOTを自分のLINEの友だちに追加しておきます。
ビーコンデバイスに電池をセットするとLEDが30秒ほど点滅したあとに消灯し電波が発信され始めます。
![IMG_7239.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71342/9e029985-79a6-3f0a-f8e4-302abab8ec03.jpeg)
LINEがビーコンの電波をキャッチできればBOTとのトークにメッセージが届くはずです。
<img width="375" alt="IMG_7242.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71342/6742aac0-f0c9-ed83-08d6-260357f3789b.png">
LINEアプリを再起動することでビーコン電波は何度でも取得し直すことができます。