このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2016.04.30

LINE BOT API Trial で WordPress + LINE BOT の Web帳BOT を作ってみました。

スクリーンショット 2016-04-27 16.51.50

さて、今回は、何かと盛り上がっているLINE BOTの話題を。

先日、(4月7日ですかね)「LINE BOT API Trial Account」の募集をしておりましたので、応募してアカウントを作成いたしました。

先着1万名限定だったのですが、4月15日には上限数に達したようなのですが、

更に、追加募集を行っているようなので、未応募の方は是非。

BOT API Trial Account
BOT API Trial Account

と、登録だけ行い、しばらく放置していましたので、せっかくなので触ろうと、ちょこっと扱ってみました。

LINE BOT API Trial Account」で何ができるの? といったところですが、

とりあえず今回、自分は、「Web帳 LINE BOT」を作ってみました。

スクリーンショット 2016-04-29 21.40.22

記事のカテゴリをつぶやくと、そのカテゴリの記事をランダムに「タイトル」と「URL」を返す様にしています。

また、「new」をつけるとそのカテゴリの最新記事を返す様にしております。

動作の確認は、以下のQRコードから友達登録が行えますので、登録する事によって利用できます。

宜しくお願いしますー。

LINE webcyou

jhj1793a

何はともあれ早速作ってみましょう。

必要なものとしては、

LINEビジネスアカウント (https://business.line.me/ja/

SSL通信可能なサーバー(コールバック用URLはSSLのみ許可されている。)

となっています。

まずは登録が必要となってきます。

LINE BOT API Trial Account 登録

スクリーンショット 2016-04-29 21.50.02

LINE BOTを利用するにはBOT APIの利用登録が必要なので、以下のURLから登録しましょう。

BOT API Trial Accountのご紹介 | LINE BUSINESS CENTER

とりあえず、50人まで無料(制限がついている)となっているようですね。

スクリーンショット 2016-04-29 21.51.55

ページ一番下の「利用開始」ボタンを押して開始しましょう。

スクリーンショット 2016-04-29 21.51.41

LINEアカウントでのログインが求められます。入力して「ログイン」しましょう。

この時、本人確認をされますので、スマホ等でLINEアプリを起動し、コードを入力し本人確認を行いましょう。

本人確認を行うと、上記で登録したメールアドレス宛に以下のようなメールが届きますので、

こちらのURLをクリックし、「LINE Business Center」に登録します。

スクリーンショット 2016-04-29 22.33.16

 

このような感じのフォームが表示するかと思いますので、必要事項を埋めていきましょう。

個人でも利用可能なので、個人にチェック。

スクリーンショット 2016-04-29 21.54.47

指示に従って入力し、個人の登録が完了させましょう。

 

ビジネスアカウントの設定

個人の登録は完了したのですが、Developer Toolを使用するには、ビジネスアカウントが必要となってきます。

LINEビジネスアカウント

https://business.line.me/ja/

スクリーンショット 2016-04-29 23.53.33

ビジネスアカウントを作成する」ボタンを押して作成しましょう。

表示する画像もアップロードしましょう。

登録できたら、BOT API Trial Accountの「始める」ボタンをクリックでBOT 作成を始めましょう。

 

LINE BOT作成に必要な設定

アカウントが作成され、BOTが利用できるようになると、このような画面を確認できるかと思います。

BOT作成に必要な事項は「Channel ID」「Channel Secret」「MID」となってきます。(伏せているところ)

スクリーンショット 2016-04-29 22.14.30

と、上記で述べたようにBOTのCallbackURLに使用する

SSL通信可能なサーバー(コールバック用URLはSSLのみ許可されている。)

が必要となってきます。

スクリーンショット 2016-04-30 0.01.51

[code]https://ドメイン名:443/linebot/callback[/code]

このようにポート番号「443」の指定も必要となります。

(/linebot/callbackは、任意のパスです。 callbackのファイルパス)
 

SSL通信可能なサーバー」ですが、当方ではロリポップのレンタルサーバーを使用していまして、

共有SSLが利用できましたので、そのまま利用することにしました。特に料金の発生もありません。

ロリポップを使用で『ライトプラン』『スタンダードプラン』『エンタープライズプラン』の方は共有SSLをご利用いただけます。

スクリーンショット 2016-04-29 23.50.19

詳細はこちらから

https://lolipop.jp/manual/user/ssl/

 

ロリポップの場合は、

[code]https://ドメイン-アカウント名.ssl-lolipop.jp:443/任意のパス[/code]

となりますね。

サーバーのIPアドレスを設定

あと、利用するサーバーのIPアドレスを登録する必要があります。

左上に「Server IP Whitelist」のメニューがありますので、こちらを選択してIPアドレスの追加を行います。

スクリーンショット 2016-04-30 0.06.20

スクリーンショット 2016-04-30 0.07.47

これでひとまず設定は終了。

とりあえず、テキストメッセージを返してみる

何はともあれ、とりあえず、テキストメッセージを返すBOTファイルを作りましょう。

言語は何でも良いかと思いますが、Wordpressを利用したいので、PHPで記述します。

callback.php
[php]/* 設定 */
$channel_id = "あなたのチャンネルID";
$channel_secret = "あなたのチャンネルシークレット";
$mid = "あなたのMID";

/* 受信 */
$json_string = file_get_contents('php://input');
$receive = json_decode($json_string);
$from = $receive->result{0}->content->from;
$text = $receive->result{0}->content->text;
$content_type = $receive->result[0]->content->contentType; // 送信されたデータ形式。(後で利用)

/* 返信 */
$header = array(
"Content-Type: application/json; charser=UTF-8",
"X-Line-ChannelID:" . $channel_id,
"X-Line-ChannelSecret:" . $channel_secret,
"X-Line-Trusted-User-With-ACL:" . $mid
);

$message = "送りたいメッセージ";

sendMessage($header, $from, $message);

/* メッセージを送る */
function sendMessage($header, $to, $message) {
$url = "https://trialbot-api.line.me/v1/events";

$data = array("to" => array($to), "toChannel" => 1383378250, "eventType" => "138311608800106203", "content" => array("contentType" => 1, "toType" => 1, "text" => $message));

$context = stream_context_create(array(
"http" => array("method" => "POST", "header" => implode(PHP_EOL, $header), "content" => json_encode($data), "ignore_errors" => true)
));
file_get_contents($url, false, $context);
}[/php]

メッセージを送る」箇所の「toChannel:1383378250」「eventType:138311608800106203」は固定となります。

APIが、Sending multiple messagesの場合は、eventTypeは「140177271400161403」となります。

 

[php]"toChannel" =>; 1383378250, "eventType" =>; "138311608800106203"[/php]

また、「content」の「contentType」の1がテキスト、2が画像などなど、返信の形式も任意で様々な返信を選択することが可能です。

ContentType values
contentType value 内容
1 テキストメッセージ
2 画像メッセージ
3 動画メッセージ
4 音声メッセージ
7 位置メッセージ
8 ステッカー(スタンプ)メッセージ
10  コンタクトメッセージ

画像を送信したい場合は、以下の様な形で送信する事が可能です。

[php]array('contentType'=>2,"toType"=>1,'originalContentUrl'=>"画像URL","previewImageUrl"=>"サムネイル画像URL");[/php]

LINE BOT API 」で、用意されているAPIは以下の様になります。

・ Receiving messages
・ Receiving operations
・ Sending messages
・ Sending multiple messages
・ Sending rich messages
・ Getting message content
・ Getting previews of message content
・ Getting user profile information

Receiving API
API 内容
Receiving messages 送信された際に情報取得
Receiving operations ユーザーが、友達追加などのアクションの際に取得

 

Sending API
API 内容
Sending messages メッセージ送信(テキスト、JPG画像、mp4動画、m4a音声、ロケーション、スタンプ)
Sending multiple messages メッセージを複数送信
Sending rich messages リッチメッセージ送信(画像のタップエリアの設定可能)
Getting API
API 内容
Getting message content 画像、動画、音声を受信した際にバイナリデータを取得
Getting previews of message content 上記のサムネイル画像取得
Getting user profile information ユーザID(MID)をキーにユーザ情報を取得

詳細は公式ドキュメントを参照ください。

APIのドキュメントはこちら

LINE Developers – Account types – BOT API Trial

また、上記では、stream_context_create関数でPOSTしておりますが、curlを用いてPOSTする際は以下の様な形になります。

[php]$data = array("to" => array($to), "toChannel" => 1383378250, "eventType" => "138311608800106203", "content" => array("contentType" => 1, "toType" => 1, "text" => $message));
$ch = curl_init($url);
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($data));
curl_setopt($ch, CURLOPT_HTTPHEADER, $header);
$result = curl_exec($ch);
curl_close($ch);[/php]

動作確認

動作をすぐに確認したい気持ちなのですが、どうやら反映に1日程かかってしまうようです。

LINE developer で Callback URL を設定しても即反映ではなさそうですので気をつけてください。

なので、しばらく放置して、再度確認するのですが、

う、う、動いてない。。

2日ぐらい経つのにうんともすんとも言わない。。

なぜだ。。。

アクセスログを確認するため、簡単なログを用意してみたところ、

簡易PHPログ作成はこちらから

PHP 簡易アクセスログ 出力

 

[code]{"statusCode":"427","statusMessage":"Your ip address ['IPアドレス','IPアドレス'] is not allowed to access this API. Please add your IP to the IP whitelist in the developer center."}[/code]

どうやら、IPアドレスが許可されていないとの事。

おお。Whitelistに追加したIPアドレス間違っていたのか。。。

ちなみに成功時のレスポンスは

[code]{"failed":[],"messageId":"","timestamp":,"version":1}[/code]

のような感じで返ってきます。

とにかく、IPアドレス2つ許可してください。と来ていますので、「Server IP Whitelist」に追加したところ、

すぐに返信来た!!!!

ついつい「きたーーー」言っちゃいました。

スクリーンショット 2016-04-30 1.04.00

いやぁ。良かった。

こちらが何か投げると任意のメッセージが返ってきます。

でも、何言っても「hello」とクールを決められても何にも面白くないですよね。

WordPressの記事を投げていただきましょう。

ランダムでWordPressの記事取得

さて、いよいよ本番ですね。

と言ってもそんなに大した事はしないです。

まず、変数$messageを編集。

送信する、メッセージを取得できる getSendMessage関数を作成。

その際に、$content_type, $textを引数に渡します。

[code]$message = getSendMessage($content_type, $text);[/code]

$content_typeが1、すなわちテキストの場合だけ処理を実行し、それ以外はナビゲーションのメッセージとします。

例:画像が送信された場合

スクリーンショット 2016-04-30 1.16.09

[php]if ($content_type === 1) {
この時にメインの処理を実行...
} else {
$send_message = getNavigationMessage();
}
return $send_message;[/php]

newが含まれている場合は、$is_newのフラグをtrueにします。

[php]if(preg_match('/new/i', $value)) {
$is_new = true;
}[/php]

その他、キーワードが含まれていたらそれに該当するカテゴリIDをセットします。

[php]if(preg_match('/javascript/i', $value)) {
$category_id = 12;
} else if ...[/php]

カテゴリIDがセットされていた場合は、WordPressの記事を取得します。

[php]if (is_null($category_id)) {
$send_message = getNavigationMessage();
} else {
$send_message = getArticleDetail($category_id, $is_new);
}[/php]

WordPressの記事を取得は、前回書いた、こちらの

WordPress 外部から関数呼び出し・記事一覧表示・ランダム表示

のとおり、WordPressの外からWordPress関数を呼び出せるようにします。

[php]require_once( 'パス/wp-load.php' );[/php]

getArticleDetail関数では、記事のタイトルと、URLを結合させたメッセージをここで生成します。

[php]function getArticleDetail($category_id, $is_new) {
$title = '';
$url = '';
$order = '&orderby=rand';

if($is_new === TRUE) {
$order = '&orderby=date';
}

query_posts('cat='. $category_id . '&showposts=1' . $order);

if(have_posts()):
the_post();
$title = get_the_title();
$url = str_replace("https", "http", get_the_permalink());
endif;

wp_reset_query();

return $title . "\n" . $url;
}[/php]

「$is_new === TRUE」の場合は$order = '&orderby=date';に変更。それ以外はランダム取得行う処理となります。

と、これで完了なので、確認しましょう!

「new CSS3」とつぶやくと、最新の「APBCSS」の記事が取得できますね!

いいですね!new CSS3 でAPBCSSが出るのは、如何にも最新ぽい雰囲気ですね w< スクリーンショット 2016-04-30 1.33.54

と、以上になります。

結構簡単にできちゃいますね。

初回の反映こそ時間はかかりますが、ファイルの更新はすぐに反映されますので、デバックなどは困らないかと。

今回はテキストのみでしたが、画像も一緒に送ったり、動画がある場合はそれも一緒に送ったりと、いろいろとできそうですね!

上記のBOTはこちらから友達追加で確認できますので、良かったら使ってください!

LINE webcyou

jhj1793a

GWにLINEのBOT作成なんていかがでしょうか。

と、カテゴリも何かと盛り上がっているカテゴリをまとめた「AI・Bot・algorithm」を新設いたしましたので、

今作っているAIなんかの記事も近々書ければと思っております><

ではではぁー。mm

スクリーンショット 2016-04-27 16.51.50

 

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。