RichMenuを使ったLINEBot開発


最近、LINEのRichMenuAPIを使った開発をする機会があったので、使い方のメモ

RichMenuについては[こちら](https://qiita.com/stachibana/items/5dcb5ed3c6b3015601a7)を参考

今回はこの画像をRichMenuにして、ボタンを押したら「Button押されたよー」とBotにメッセージを送るようにします。
![button.png](https://qiita-image-store.s3.amazonaws.com/0/150295/92fa3177-e612-1933-5a23-b404f615921e.png "button.png")

さらに、わかりやすいように、「ボタン」というメッセージを送ると、RichMenuが使えるようになり、「リセット」を送るとRichMenuを解除することができるようにします。


##環境
今回はPHPを用いて開発します。

* MacOS Sierra 10.12.6
* PHP 5.6.29


##RichMenuの登録
RichMenuを使うにはまずはRichMenuをサーバに登録しないといけないです。
curlを使って、登録したいボタンの座標とかひたすら書いて送らないといけないのですが、結構面倒なのでWebサービスを使います。


[Rich Menu API Util](http://richmenuapi-util.herokuapp.com/)

このWebサービスは
[Rich Menu APIをブラウザから使えるWebサービス](https://qiita.com/stachibana/items/562a98156d0bfd4172e8) 
こちらの記事で説明されているのですが、RichMenuの作成や画像の登録を簡単にできるものです。

まずは、RichMenuを使いたいBotアカウントの情報を入力します。

![Rich_Menu_API_Util_Unofficial_.png](https://qiita-image-store.s3.amazonaws.com/0/150295/a2e1b591-8fce-6567-6c70-210c68c4c249.png "Rich_Menu_API_Util_Unofficial_.png")

Access TokenやuserIDなどの情報はLINE Developersのサイトから取ってきてください。
![Rich_Menu_API_Util_Unofficial_ 3.png](https://qiita-image-store.s3.amazonaws.com/0/150295/dce2deae-5d7e-dac0-204c-b4bf9a4c1d8f.png "Rich_Menu_API_Util_Unofficial_ 3.png")

「Create new Richmeun」の項目に画像を入れて、ドラッグでボタンにしたいスペースを選択し、Actionを選択します。
Message以外にもURLを開いたりもできます。
用意ができたら、下にあるSubmitボタンを押します。

![Rich_Menu_API_Util_Unofficial_ 4.png](https://qiita-image-store.s3.amazonaws.com/0/150295/e85aac82-6163-43a2-b3c0-0dab14a13934.png "Rich_Menu_API_Util_Unofficial_ 4.png")


下部のコマンド画面のResponseに200が出力されていれば成功です。
ここで発行される、「richMenuId」はこの後にも使うのでメモっといてください。

##画像の登録
先ほど、RichMenuの登録をしたと思いますが、これだけではRichMenuを使えません。実は先ほどの操作は、ボタンの位置と押した時の動作を登録しただけです。
ということで次は画像の登録をします。
登録できる画像のサイズは2500x1686もしくは2500x843です。
画像の登録も「Rich Menu API Util」で行えます。
![Rich_Menu_API_Util_Unofficial_のコピー 2.png](https://qiita-image-store.s3.amazonaws.com/0/150295/766d33a1-426c-4ba8-6a4d-94f4bdc6e198.png "Rich_Menu_API_Util_Unofficial_のコピー 2.png")

さきほどのrichMenuIdをIDの項目に入力し、ボタン生成の際に使用した画像をもう一度アップロードします。

そして、Submitを押し、Responseに200が帰ってくれば成功です。~~（僕の環境では500が帰ってきましたが成功していました）~~
コメントいただきました。500が帰ってきて成功しているのは不具合だったようです。
現在は修正されています。

##userIDとの紐付けと解除
あとは、userIDとRichMenuを紐付ければいいのですが、ここで１つ問題が発生します。
それは、自分のuserIDはDeveloperのサイトから取得できるのですが、自分以外のuserIDが取得できないということです。
Webサービスの方にも「Link to User」の項目があるのですが、こちらをSubmitしても、使えるようになるのはBotを作成したユーザーのみです。

![Rich_Menu_API_Util_Unofficial_ 5.png](https://qiita-image-store.s3.amazonaws.com/0/150295/90f0d871-4f81-68ca-8107-2c155442cb9c.png "Rich_Menu_API_Util_Unofficial_ 5.png")

なので、こんな感じで、Submitを押したら、
![IMG_3402.png](https://qiita-image-store.s3.amazonaws.com/0/150295/edc4fc07-03cd-8520-ff86-fe3823e975e5.png "IMG_3402.png")
このように、Botを作成したアカウントであればRichMenuを使えますが、

![Screenshot_20171113-021108.png](https://qiita-image-store.s3.amazonaws.com/0/150295/97fff81e-18c2-5438-62f2-8ba918414f39.png "Screenshot_20171113-021108.png")
別のアカウントではメニューに追加されていません。

ということで、コードを書いていきます。


まずは、PHP用のLINEBOTSDKをインストールします。
[line-bot-sdk-php](https://github.com/line/line-bot-sdk-php)

###インストール
```bash
$ composer require linecorp/line-bot-sdk
```
###コード
メッセージの処理はSDKで行なって、RichMenuの登録や解除はcurlで行なっています。

細かいリクエストの中身の設定はAPIのドキュメントを参照してください。
ドキュメントは[こちら](https://developers.line.me/ja/docs/messaging-api/reference/#anchor-1e57ec8125584a6f34a80d7aa6ee4ad5972c0094)


```php:index.php
<?php

require_once __DIR__ . "/vendor/autoload.php";

// POST
$input = file_get_contents("php://input");
$json = json_decode($input);
$event = $json->events[0];

$accessToken = "<channel access token>";
$channelSecret = "<channel secret>";
$richMenuId = "<richmuen id>";

// HTTP通信用
$httpClient = new \LINE\LINEBot\HTTPClient\CurlHTTPClient($accessToken);
$bot = new \LINE\LINEBot($httpClient, ["channelSecret" => $channelSecret]);

//イベントタイプ判別
if ("message" == $event->type) { //メッセージ(文字・イメージ・音声・位置情報・スタンプ含む)の場合
    if ("text" == $event->message->type) { // テキストメッセージの場合
        $data = $event->message->text; //送られてきたメッセージの内容を変数に代入
        
        
        if($data == "ボタン"){ //「ボタン」という文字が送られてきた場合
        
        $userId = $event->source->userId; //userIdを取得
        //curlでRichMenuの紐付け
        $url_richMenu= "https://api.line.me/v2/bot/user/".$userId."/richmenu/".$richMenuId;
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $url_richMenu);
        curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
        curl_setopt($ch, CURLOPT_HTTPHEADER, array('Authorization: Bearer '.$accessToken));
        curl_setopt($ch,CURLOPT_HEADER,TRUE);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        $response = curl_exec($ch);
        curl_close($ch);
        } 
        
        if($data == "リセット"){ //「リセット」という文字が送られてきた場合
        
        $userId = $event->source->userId; //userIdを取得
        //curlでRichMenuの解除
        $url_richMenu= "https://api.line.me/v2/bot/user/".$userId."/richmenu";
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $url_richMenu);
        curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "DELETE");
        curl_setopt($ch, CURLOPT_HTTPHEADER, array('Authorization: Bearer '.$accessToken));
        curl_setopt($ch,CURLOPT_HEADER,TRUE);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        $response = curl_exec($ch);
        curl_close($ch);
        }
    }
}

```

BOTの開発者以外のuserIDはメッセージを送った際のメッセージオブジェクトに情報が含まれているのでそれを取得して、PHPのcurlを使って、RichMenuとの連携と解除を行なっています。

このコードをhttpsの使えるサーバーで動かすと

![Screenshot_20171114-021456.png](https://qiita-image-store.s3.amazonaws.com/0/150295/251a2715-0621-437a-d0fa-3f4175e66762.png "Screenshot_20171114-021456.png")

このように、ボタンとメッセージを送ると、RichMenuが出現し、ボタンを押すと「ボタン押されたよー」とメッセージが遅れるようになりました。
さらにリセットを送ると
![Screenshot_20171114-021524.png](https://qiita-image-store.s3.amazonaws.com/0/150295/6c49f17e-0cba-c4e2-1fae-2927eb310800.png "Screenshot_20171114-021524.png")
こんな感じでButtonのメニューは消えるようになりました。

以上で完成です。

##あとがき
RichMenuは1つのBOTアカウントにつき10個まで登録することができるので、メッセージの内容などで、別々のRichMenuも出せるので、
かなり、いろんなことができるかなと思います。