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

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

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

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

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

- linebotアカウント

細かい説明は省略しますが[公式サイト](https://developers.line.me/ja/)の方でアカウントを作成して下さい

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

[ここから](https://github.com/jyukikami/linebot_lib)ライブラリのソースをダウンロードして下さい
Clone or downloadのボタンでダウンロード可能です

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

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

```php:define.php
define('ACCESS_TOKEN','test_token');  //アクセストークン
define('CHANNEL_SECRET','channel_token');  //シークレット
```
line developersの[管理画面](https://developers.line.me/console/)から確認して書き換えて下さい

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

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

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

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

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

# 動作確認
適当なメッセージを送ると返信が来ます
![686135.jpg](https://qiita-image-store.s3.amazonaws.com/0/276245/00c74c05-077c-4c4c-1698-651177dfe68a.jpeg)

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

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

![686195.jpg](https://qiita-image-store.s3.amazonaws.com/0/276245/792b7482-aeba-ab5f-4333-e9329abe6ca8.jpeg)
![686196.jpg](https://qiita-image-store.s3.amazonaws.com/0/276245/1a431d03-953f-f95f-7209-e22abeb639db.jpeg)
![686197.jpg](https://qiita-image-store.s3.amazonaws.com/0/276245/c3320bb9-ceae-056b-f301-073a3dfb85ff.jpeg)
![686193.jpg](https://qiita-image-store.s3.amazonaws.com/0/276245/6d2f26e3-a97d-d482-2175-d702c67fe06b.jpeg)
![686194.jpg](https://qiita-image-store.s3.amazonaws.com/0/276245/80b8c4e0-1380-8981-cacb-6d47c16d11f6.jpeg)
![686189.jpg](https://qiita-image-store.s3.amazonaws.com/0/276245/b4589c45-551a-cbbf-f37f-ea41ba40d476.jpeg)
![686191.jpg](https://qiita-image-store.s3.amazonaws.com/0/276245/25621a2e-e23d-2889-3aa1-a2d905f7c677.jpeg)
![686190.jpg](https://qiita-image-store.s3.amazonaws.com/0/276245/1468b3d9-7f0b-a4f5-8feb-0c2f24741321.jpeg)

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

```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つまでメッセージを送れます


```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->add_text_builder($text);
	// 返信
	$bot->reply();
}
```

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


```php: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();
}
```


# テンプレートの作成
ボタンテンプレートのサンプル


```php: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は、複数の要素を組み合わせてレイアウトを自由にカスタマイズできるメッセージです
![686421.jpg](https://qiita-image-store.s3.amazonaws.com/0/276245/b8b48c9d-d6eb-5b40-b8a6-d0ca095d4f35.jpeg)

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

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

最低限4つのうちどれか1つ以上のパーツを持つ必要があります
4つ全てでもいいしbodyだけでも大丈夫です
![flex_構造.png](https://qiita-image-store.s3.amazonaws.com/0/276245/c38f0dde-0f04-a0ad-6b12-73887433c772.png)

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

```php: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メッセージを作れます
もう少し細かく解説します

まず必要な変数の宣言

```php:index.php
$flex_box_mein = array();
$flex_components = array();
$flex_bubble = array();
```

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

```php: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を作成します

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

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

```php:index.php
// ブロック
$bubble_blocks = array(
	"body" => $flex_box_mein['body']
);
```

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

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

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

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

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

# LIFF管理
ライブラリにはLIFFアプリの追加と削除が簡単に出来る画面が用意されています
ブラウザからライブラリ内のsample_liff.phpにアクセスして下さい
![admin_liff.PNG](https://qiita-image-store.s3.amazonaws.com/0/276245/0c03a575-fe64-d8a4-4512-cde84f8a6d02.png)

LIFFアプリに関しては[公式サンプル](https://github.com/line/line-liff-starter)があるのでこちらをダウンロードしてサーバーにアップして下さい
詳しくは[こちらで](https://developers.line.me/ja/docs/liff/trying-liff-app/)

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