LoginSignup
11

More than 5 years have passed since last update.

RichMenuを使ったLINEBot開発

Last updated at Posted at 2017-11-14

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

RichMenuについてはこちらを参考

今回はこの画像をRichMenuにして、ボタンを押したら「Button押されたよー」とBotにメッセージを送るようにします。
button.png

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

環境

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

  • MacOS Sierra 10.12.6
  • PHP 5.6.29

RichMenuの登録

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

Rich Menu API Util

このWebサービスは
Rich Menu APIをブラウザから使えるWebサービス
こちらの記事で説明されているのですが、RichMenuの作成や画像の登録を簡単にできるものです。

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

Rich_Menu_API_Util_Unofficial_.png

Access TokenやuserIDなどの情報はLINE Developersのサイトから取ってきてください。
Rich_Menu_API_Util_Unofficial_ 3.png

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

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

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

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

userIDとの紐付けと解除

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

Rich_Menu_API_Util_Unofficial_ 5.png

なので、こんな感じで、Submitを押したら、
IMG_3402.png
このように、Botを作成したアカウントであればRichMenuを使えますが、

Screenshot_20171113-021108.png
別のアカウントではメニューに追加されていません。

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

まずは、PHP用のLINEBOTSDKをインストールします。
line-bot-sdk-php

インストール

$ composer require linecorp/line-bot-sdk

コード

メッセージの処理はSDKで行なって、RichMenuの登録や解除はcurlで行なっています。

細かいリクエストの中身の設定はAPIのドキュメントを参照してください。
ドキュメントはこちら

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

このように、ボタンとメッセージを送ると、RichMenuが出現し、ボタンを押すと「ボタン押されたよー」とメッセージが遅れるようになりました。
さらにリセットを送ると
Screenshot_20171114-021524.png
こんな感じでButtonのメニューは消えるようになりました。

以上で完成です。

あとがき

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11