LINE Beaconを試してみた

# 目的
LINE BEACONを使用して、LINEのトークルーム上に通知を飛ばしたい。

# 最終ゴール

LINE BEACONに近づくと、「到着！」と通知される。

<img width="375" alt="Image uploaded from iOS(5).jpg" src="https://qiita-image-store.s3.amazonaws.com/0/102862/56a218c8-476b-e583-3716-e6263cd34651.jpeg">


# 目的達成までのプロセス

1. LINE BOTを作成する
2. LINE BOTとLINE Beaconの連携
3. ビーコンイベントをハンドリングするプログラムの実装

## 手順

### 1. LINE BOTを作成する

*  LINE Business アカウントの作成。「LINE BUSINESS CENTER」から画面の手順に従って、新規登録を行います。
https://business.line.me/ja/services/bot

* Messaging API の申込み
アカウントリストの「Messaging API」のリンクから画面の手順に従って、利用申込みを行います。

<img width="853" alt="スクリーンショット 2017-10-02 午後2.38.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/102862/0beb6b2e-e62a-6558-b42d-e56777467bbd.png">

* 「LINE＠MANAGER」でBOT作成します。
管理画面の「BOT設定」から Webhook送信を「利用する」に変更します。
<img width="851" alt="スクリーンショット 2017-10-02 午後2.40.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/102862/ed345d22-f076-65a0-1e6e-82b85e4fe3fd.png">

* 「LINE Developers」にログインする

<img width="1298" alt="スクリーンショット 2017-10-02 午後2.50.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/102862/84c928d7-0f1d-9d2e-c3bb-cede367df094.png">

「アカウント名 > Channel名・Channel基本設定」から WebhookURLの設定をする

<img width="1325" alt="スクリーンショット 2017-09-29 午後9.30.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/102862/df88ee35-3c49-c433-d166-13436b1cb06c.png">


### 2. LINE BOTとLINE Beaconの連携

* LINE@MANAGER にログインする

<img width="1164" alt="スクリーンショット 2017-09-29 午後8.56.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/102862/690a9249-2ea8-6f59-dac3-be892530db66.png">

* 対象のアカウントを選択して、LINE beaconをクリック

<img width="1157" alt="スクリーンショット 2017-09-29 午後8.55.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/102862/e51dd19d-dd06-7ff3-11a6-83578e7c6078.png">

* 「ビーコン端末とBOTの連携」をクリック

<img width="1164" alt="スクリーンショット 2017-09-29 午後8.55.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/102862/f35259e3-b204-b3a2-68b4-8230894c7107.png">

* LINE beaconのHWIDとパスワードを入力する

注意: ひとつのボットに複数のビーコンと連携することができます。しかし、ひとつのビーコンに複数のボットと連携することはできません。

### 3. ビーコンイベントをハンドリングするプログラムの実装

 * LINE BEACONからWebhookURLに送られてくるJSONのフォーマット

```:BEACON経由のイベント
{
    "events": [
        {
            "type": "beacon",
            "replyToken": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
            "source": {
                "userId": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
                "type": "user"
            },
            "timestamp": 1506685872663,
            "beacon": {
                "hwid": "XXXXXXXXXX",
                "type": "enter"
            }
        }
    ]
}
```

* JSONの詳細説明

Field|Type|Description
|:------------|:------------|:------------|
type|String|beacon
replyToken|String|このイベントへの返信に使用するトークン
beacon.hwid|String|発見したビーコンデバイスのハードウェアID
beacon.type|String|ビーコンイベントの種別
beacon.dm|String|(OPTIONAL)|発見したビーコンデバイスのデバイスメッセージ

* beacon.typeとは

beacon.type|Description
|:------------:|:------------:|
enter|ビーコンデバイスの受信圏内に入った
leave|ビーコンデバイスの受信圏内から出た
banner|ビーコンバナーをタップした

* ビーコンバナーとは

<img width="928" alt="スクリーンショット 2017-10-02 午後4.07.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/102862/8cd73e09-96c3-5d0d-8758-202a3a786947.png">

# サンプルプログラム

```php:callback.php
<?php
$accessToken = 'アクセストークン';
$jsonString = file_get_contents('php://input');
error_log($jsonString);
$jsonObj = json_decode($jsonString);
$message = $jsonObj->{"events"}[0]->{"message"};
$replyToken = $jsonObj->{"events"}[0]->{"replyToken"};
$beacon = $jsonObj->{"events"}[0]->{"beacon"};
if (strpos($beacon->{"hwid"},'XXXXXXXXXX') !== false) {

  $messageData = [
      'type' => 'text',
      'text' => '到着！'
  ];
} else {
    $messageData = [
        'type' => 'text',
        'text' => $message->{"text"}
    ];
}
$response = [
    'replyToken' => $replyToken,
    'messages' => [$messageData]
];
error_log(json_encode($response));
$ch = curl_init('https://api.line.me/v2/bot/message/reply');
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($response));
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
    'Content-Type: application/json; charser=UTF-8',
    'Authorization: Bearer ' . $accessToken
));
$result = curl_exec($ch);
error_log($result);
curl_close($ch);
```

# 結果

LINE BEACONに近づくと、「到着！」と通知される！


<img width="375" alt="Image uploaded from iOS(5).jpg" src="https://qiita-image-store.s3.amazonaws.com/0/102862/56a218c8-476b-e583-3716-e6263cd34651.jpeg">