LINE Beaconを使ってみた

こんにちはかわです。

http://kawakawa.hatenablog.com/entry/2017/12/04/LINE_Beacon%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F

をqiitaに移しました。

去年のLINEBOTの勉強会に行った際、

もらって使ってなかったので使いたいと思います。

# LINE Beaconとは

![DSC_0044.jpg](https://qiita-image-store.s3.amazonaws.com/0/191305/d33fc86f-4e6a-8d0e-ab28-196a6ed84295.jpeg)

これがLINE Beaconです。

![DSC_0045.jpg](https://qiita-image-store.s3.amazonaws.com/0/191305/a879c9e6-a453-bdfc-00cd-670d2c536475.jpeg)

中身はこんな感じ

電源を入れると緑のランプが光りました。![DSC_0046.JPG](https://qiita-image-store.s3.amazonaws.com/0/191305/80f151a0-4c54-d90f-3a47-656db4731bad.jpeg)

このBeaconは、

Beaconと紐づけされているBotと友達になっているアカウントが

Beaconの利用範囲に入った際にWebhockイベントがトリガされます。

いまから使い方を説明します。

#前提
まず前提としてLINE Botを作ってください。

https://developers.line.me/ja/docs/messaging-api/getting-started

上記のURLに公式の説明が載っています。

近々記事にします。

#BotとBeaconの紐付け

https://admin-official.line.me/beacon/register

このページにとんでください。

するとこの画面が出ます。

<img width="1191" alt="スクリーンショット 2017-12-04 17.57.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/191305/37756bc1-6922-4895-51b7-3f2ffbd3b543.png">


Beaconを作成することもできるみたいです。

興味がある方はこちらのページを


https://engineering.linecorp.com/ja/blog/detail/117



今回は連携なので「ビーコンとbotの連携」を選択

<img width="1209" alt="スクリーンショット 2017-12-04 17.57.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/191305/1b3374e6-85af-5184-e44d-e113c733afb2.png">


すると自分が作成しているBotが出てきます。

いずれかを選択すると、

<img width="1220" alt="スクリーンショット 2017-12-04 17.57.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/191305/0795d735-9e05-f40b-7a20-d6d5a06e25e6.png">


この画面が出てくるので、

Beaconに記載されているIDとパスコードを入力してください。

これで、連携が完了しました。

#スマートフォン側での設定
スマートフォン側での設定も必要です。

設定ー＞プライバシーの管理を選択

![Screenshot_20171204-181505.png](https://qiita-image-store.s3.amazonaws.com/0/191305/a6306cab-810b-6afd-2e16-1a7d08e12597.png)


一番下のLINE Beaconの利用にチェックをつける

![Screenshot_20171204-181516.png](https://qiita-image-store.s3.amazonaws.com/0/191305/5d2a6b88-c47c-e0e2-2a27-7a23e79051cd.png)


####LINE Beaconを使用する際はBluetoothをオンにしておく必要があります。

#サンプル作り
設定は一通り終えたのでサンプルを作ります。

リファレンスはこちらから

https://developers.line.me/ja/docs/messaging-api/reference/#anchor-fb4abbd10cc4cb9325d24af83f310fdb00d2063d

これを参考に作っていきます。

<img width="792" alt="スクリーンショット 2017-12-04 20.29.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/191305/dd8fd8df-141d-791d-c4b5-4444331470a7.png">


ビーコン部分の抜粋です。

イベントのタイプでバナーってあるんですけど、

それはこれです。

<img width="511" alt="スクリーンショット 2017-12-04 20.32.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/191305/4857516e-bddc-a3a9-0e36-6a711d3b920f.png">


緑の部分です。

この機能はエンタープライズ ユーザーのみに開放されているらしいです。

使うのは「enter」のみっぽいね。

作ったものはこれです。

    <?php
        $accessToken = ACCESS_TOKEN;
        $json_string = file_get_contents('php://input');
        $jsonObj = json_decode($json_string);
        $replyToken = $jsonObj->{"events"}[0]->{"replyToken"};	   //ReplyToken取得
        $userId = $jsonObj->{"events"}[0]->{"source"}->{"userId"};        //userId取得
        $eventType = $jsonObj->{"events"}[0]->{"type"};  //typeの取得
        if($eventType == "beacon"){
          ResponseLineText( $accessToken, $replyToken, "僕との距離が近づいてきました！！" );
        }
        function ResponseLineText($accessToken,$replyToken,$text){
            $response_format_text = [
              "type" => "text",
              "text" => $text
            ];
            $post_data = [
               "replyToken" => $replyToken,
               "messages" => [$response_format_text]
            ];
            $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($post_data));
            curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: 
            application/json; charser=UTF-8','Authorization: Bearer ' . $accessToken));
            $result = curl_exec($ch);
            curl_close($ch);
         }
    ?>


Beaconを検知したらメッセージを送ります。

![Screenshot_20171204-211632.png](https://qiita-image-store.s3.amazonaws.com/0/191305/40acf1fd-9eb3-6c30-db7e-68fc839fdc31.png)


でもちょこちょこ通信が切れたらしく

![Screenshot_20171204-223612.png](https://qiita-image-store.s3.amazonaws.com/0/191305/eaf8d375-a8c4-c563-4292-3355f34c8b23.png)


連続してきました。

怖い

##まとめ
こんな感じでできました。

やれる幅は広そうです。

Beaconは作れるらしいのでそっちの方もいつか挑戦してみたい。

以上です。