LineBot PHPで簡単シンプルに使えるライブラリを使ってLineBotを作る FlexMessaging対応

linebotを作る時つまずくポイントはいくつかありますがコードの意味が分からなくてつまずく人も多いんじゃないでしょうか
そこで誰でも簡単にlinebotを作れるライブラリを作りました
最初の認証やら複雑なメッセージ構造やら、そんなのは全部ライブラリに任せてしまいましょう
この記事はライブラリを使うことが前提で書かれています

*2018/08/02 ライブラリの修正に伴ってオウム返しのコードを修正

準備

• httpsで接続可能なサーバー(ssl)の準備

何でも大丈夫です
heroku
Bluemix
さくらサーバー
この辺がメジャーでしょうか
私はさくらサーバーを使っています、前はBluemixを使ってました

• linebotアカウント

細かい説明は省略しますが公式サイトの方でアカウントを作成して下さい

• GitHubでライブラリをダウンロード

ここからライブラリのソースをダウンロードして下さい
Clone or downloadのボタンでダウンロード可能です

設定

ライブラリ内のサンプルを動かしてみましょう

• ライブラリのdefine.phpにトークンを追記

define.php

define('ACCESS_TOKEN','test_token');  //アクセストークン
define('CHANNEL_SECRET','channel_token');  //シークレット

line developersの管理画面から確認して書き換えて下さい

• ソースをサーバーに上げる

用意したサーバーに全てのソースを上げてください

• line developers管理画面からWebhookURLを設定

上げたソースのsample_linebot.phpをWebhookURLに設定して下さい
例：https://ご自身のドメイン/sample_linebot.php
置いた場所によって変えてください

設定は以上です
これで動くはずです

動作確認

適当なメッセージを送ると返信が来ます

コマンドを送るとさまざまなメッセージタイプを返します

• イメージ
• 位置情報
• スタンプ
• ボタン
• 確認
• カルーセル
• イメージカルーセル
• flex
• flex2
• flex3
• flex4
• all_flex

コード

サンプルをみたらほとんどのメッセージを作れると思います
オウム返しする最小のコードを書いてみましょう、index.phpを作って以下のコードを

index.php

<?php
// ライブラリを読み込み
require_once __DIR__ . '/linebot.php';
// クラスをインスタンス化
$bot = new LineBotClass();
// メッセージがなくなるまでループ
while ($bot->check_shift_event()) {
	// テキストを取得
	$text = $bot->get_text();
	// テキストメッセージを追加
	$bot->add_text_builder($text);
	// 返信
	$bot->reply();
}

シンプルですね
これをサンプルと同じ階層のアップし、line developers管理画面からWebhookURLでindex.phpを指定すればオウム返しするBOTの完成です

メッセージを増やすのは簡単です
一回の返信で5つまでメッセージを送れます

index.php

<?php
// ライブラリを読み込み
require_once __DIR__ . '/linebot.php';
// クラスをインスタンス化
$bot = new LineBotClass();
// メッセージがなくなるまでループ
while ($bot->check_shift_event()) {
	// テキストを取得
	$text = $bot->get_text();
	// テキストメッセージを追加
	$bot->add_text_builder($text);
	$bot->add_text_builder($text);
	// 返信
	$bot->reply();
}

画像のメッセージを作成
urlはhttpsから始まるものじゃないとエラーします
サムネと本体画像を引数に渡します
本来は別々に用意するべきですが同じでも問題はありません

index.php

<?php
// ライブラリを読み込み
require_once __DIR__ . '/linebot.php';
// クラスをインスタンス化
$bot = new LineBotClass();
// メッセージがなくなるまでループ
while ($bot->check_shift_event()) {
	// 画像のurl
	$photo_url = "https://hoge/hoge.jpg";
	// 画像メッセージを作成
	$bot->add_image_builder($photo_url,$photo_url);
	// 返信
	$bot->reply();
}

テンプレートの作成

ボタンテンプレートのサンプル

index.php

// アクションボタンの作成
$action_button = array();
// テキストのアクション
$action_button[] = $bot->create_action_builder("text","TypeText",["text"=>"test_text"]);
// postのアクション
$action_button[] = $bot->create_action_builder("post","TypePost",["post"=>"post_text"]);
// urlのアクション
$action_button[] = $bot->create_action_builder("url","TypeUrl",["url"=>"https://developers.line.me/ja/reference/messaging-api/"]);
// 日時のアクション
$action_button[] = $bot->create_action_builder("date","Typedate",["post"=>"date_text"],"datetime");
$default_action = $bot->create_action_builder("text","TypeText",["text"=>"デフォルトアクション"]);
$result = $bot->add_button_template_builder("代替テキスト","アクションボタンのテストもかねて",$action_button,"テンプレートボタンテスト",$photo_url,$default_action);

タップした時に動作するアクションには4種類あります

• text
  タップした際に指定した文字列をユーザーに送信させます
• post
  タップした際に指定した文字列をpostで送信されます
• url
  タップした際に指定したurlを開きます
• date
  タップした際に日時選択画面を開き、日時を送信させます

Flexの作成

Flex Messageは、複数の要素を組み合わせてレイアウトを自由にカスタマイズできるメッセージです

大まかな構造を理解するれば簡単に作る事が出来ます
ざっくりいきます
Flexにはまず4つのパーツを持つことが出来ます

• header(ヘッダー)
  一番上に来るパーツ
• hero(ヒーロー)
  画像を入れるパーツ
• body(ボディ)
  中間に来るパーツ
• footer(フッター)
  一番下に来るパーツ

最低限4つのうちどれか1つ以上のパーツを持つ必要があります
4つ全てでもいいしbodyだけでも大丈夫です

そして各パーツにはかならずbox要素を持たせる必要があります
このbox要素に表示したいテキストやアクションやボタンを詰めていきます
まずはbodyのみのサンプルコードを書いていきます

index.php

// 必須の各メインボックス
$flex_box_mein = array();
$flex_components = array();
$flex_bubble = array();

// テキストを追加していく
$flex_components['body'][] = $bot->create_text_component("タイトル",array("size"=>7,"weight"=>"bold"));
$flex_components['body'][] = $bot->create_text_component("小タイトル",array("size"=>5));
$flex_components['body'][] = $bot->create_text_component("本文",array("size"=>4,"wrap"=>true));

// ボディメインボックス
$flex_box_mein['body'] = $bot->create_box_component("vertical",$flex_components['body'],array("spacing"=>3));

// ブロック
$bubble_blocks = array(
	"body" => $flex_box_mein['body']
);

// バブルコンテナを作成追加
$flex_bubble[] = $bot->create_bubble_container($bubble_blocks);

// flexメッセージを追加
$bot->add_flex_builder("sample_flex",$flex_bubble);

これでFlexメッセージを作れます
もう少し細かく解説します

まず必要な変数の宣言

index.php

$flex_box_mein = array();
$flex_components = array();
$flex_bubble = array();

表示するテキストを作成します
create_text_componentで表示するテキストを作成出来ます
第一引数に表示するテキスト
第二引数にオプション、連想配列で指定します

index.php

// テキストを追加していく
$flex_components['body'][] = $bot->create_text_component("タイトル",array("size"=>7,"weight"=>"bold"));
$flex_components['body'][] = $bot->create_text_component("小タイトル",array("size"=>5));
$flex_components['body'][] = $bot->create_text_component("本文",array("size"=>4,"wrap"=>true));

必須のメインboxを作成します

index.php

// ボディメインボックス
$flex_box_mein['body'] = $bot->create_box_component("vertical",$flex_components['body'],array("spacing"=>3));

基本のパーツを作成します

index.php

// ブロック
$bubble_blocks = array(
	"body" => $flex_box_mein['body']
);

バブルコンテナに追加します
バブルコンテナに追加する事で横並びに10ページまで増やす事が出来ます

index.php

// バブルコンテナを作成追加
$flex_bubble[] = $bot->create_bubble_container($bubble_blocks);

最後にFlexメッセージを追加します
これで返信すればメッセージを送れます

index.php

// flexメッセージを追加
$bot->add_flex_builder("sample_flex",$flex_bubble);

詳しくはライブラリ内のsample_linebot.phpとlinebot.phpを見れば細かいオプションなど書いてあります

LIFF管理

ライブラリにはLIFFアプリの追加と削除が簡単に出来る画面が用意されています
ブラウザからライブラリ内のsample_liff.phpにアクセスして下さい

LIFFアプリに関しては公式サンプルがあるのでこちらをダウンロードしてサーバーにアップして下さい
詳しくはこちらで

あとがき

はじめてのQiitaなのでつたない部分があると思いますがご容赦ください
これでlinebotに挑戦してくれる人が増えてくれたらうれしいです
こちらTwitterのアカウントになります、よろしければフォローして下さい
質問などあればDMなどでお気軽にお問合せ下さい
ラインの方でlinebot開発グループを作成し日々情報交換や相談などを行っています
どうぞ参加希望者は私にDM下さい