#FJMK blog

citrus+というバンドをやってます。 http://citrusplus.jp 平日昼間はインターネットの会社@紀尾井町でエンジニアやってます。

【エンジニアじゃなくてもできる】一切お金をかけずにブラウザ上で10分でLINE BOTを作る方法

f:id:sfjmk:20170903180145p:plain

LINE Bot Trial Apiが開放されて、Bot作ってみた系を沢山見かけるようになりましたが、「1万人限定らしいからアカウントとってみたけど、BOTの作り方とかよくわかんない」という方も結構いるんじゃないでしょうか。

LINE BOTを動かすには、プログラムを書く必要があるのは勿論のことながら、

  • サーバーを用意しなきゃだったり、
  • SSL証明書を用意しなきゃだったり、
  • 固定IPを用意しなきゃいけなかったり

等々色々やることがあり、この辺の知識がない状態で必要な環境を自分で用意するとなると結構骨が折れます。(とはいっても調べながらやればなんとななるとは思いますが!)

色々調べてみたところ、技術的な前提知識がなくてもとりあえずLINE BOTで遊べる方法があったので、まとめてみました。


Botに関する情報共有用のFacebookグループを作ってみました。 記事の内容についてやBotについての質問があれば、ここに書いていただければ分かる範囲でお答えするので、興味がある方は是非入って下さい!

こちらです ↓↓↓

Bot Developers


この記事で目指すゴール

プログラミング未経験/初心者の方でも、お金をかけずに最短距離でとりあえず動くLINE BOTを作って遊ぶことをゴールとして記事を書きました。

こんな風に、ある文字列を送信したら、予め決めておいた返事が返ってくるようなBotを作ります。 enter image description here (本当はアイドルの画像とかにするとだいぶテンションが上がるのですが、肖像権的なアレがあるので一応フリー素材のロボットにしました笑)

利用するサービスの都合上、マイナーな言語を使うので正直ベストな方法ではありませんが、難しいことをしなくてもこの通りやればLINE BOTをすぐに作れるよくらいに考えていただければと思います。

※ 無料サービスを使うので、7日間しか動かないです (作りなおせばまた7日間使えます) ※ 作業自体は10分程度でできますが、LINEに諸々の設定が反映されるのに時間がかかる場合があるので、実際にBotが動くまではもっと時間がかかる可能性があります。 ※ エンジニアじゃなくても分かるとかいたものの、多少はITの前提知識がないと厳しいかもしれないです…笑

LINE Trial Botでできること

この記事を見ておけば、LINE Trial Botでできることを一通り把握できると思います。今回はこの辺を読まなくても作れますが、時間があるときにでも読んでみてください。

LINE BOT API Trialでできる全ての事を試してみた - Qiita

公式ドキュメント (英語)

LINE Developers - BOT API - Overview

作り方

それでは作り方について順を追って説明していきます。

LINE developerに登録

LINE BUSINESS CENTER

こちらのページにアクセスしてLINE developerアカウントを作ります。

こちらでスクリーンショット付きで詳しく解説されていますのでアカウント作成の流れはこちらの記事をご覧ください。

【LINE BOT】 アカウント設定の仕方 〜アカウントを取ってみた!〜 - Qiita

WebScriptに登録

LINE BOTを動かすには、BotAPIを用意する必要があります。 普通にやろうとすると自分でサーバーを立てたり環境構築をしたりSSL証明書を取得したりと面倒なので、今回はWebScriptというサービスを使います。 webscript - scripting on the web

Lua言語というあまり使われない言語ですが、基本的な書き方については他の言語と大して変わりません。

WebScriptはこちらの記事で知りました (コードもかなり參考にさせていただいてます…) webscript.ioでLINE BOT APIの事始め - No Regret No Life

まず、webscriptにアクセスしてください。

webscript - scripting on the web

enter image description here 右上のlogin/signupをクリック enter image description here sign up for free を押します。 enter image description here メールアドレスとパスワードを入力して Sign Upをクリック enter image description here これでwebscriptにアカウント登録がされました。右上のLogin/Signupを押してログインに進みます。 (正しく入力しててもこんな風にエラーがでてしまうことがあるのですが、気にせずログインできるか試してみてください。) enter image description here enter image description here

実装

それでは実装に入っていきます。 ` enter image description here 利用規約を承諾するとこの画面になると思うので(なってなかったらScriptと書いてある上部のタブを押してください)、左側にある “Create New Script"をクリックします。

enter image description here するとこんなポップアップが出るので、お好きなアルファベット文字列を入力してください 。(他の人と被った文字列は使えません) これが今回作るAPIのURLになります。 入力したら"Create"を押して下さい。 enter image description here

ここに、以下の内容をコピペします。認証情報のところだけ自分の情報に書き換えてください。

https://developers.line.me/channels こちらで設定されているChannel ID, Channel Secret, MIDをそれぞれ入れてください。

-- 認証情報
-- 以下の3つを書き換える。今は適当な文字列が入ってます。
line_channel_id = '1234566789'
line_channel_secret = 'abcdefghijklmnopqrstuvwsyz123456789'
line_mid = 'qwertyuiopas1234'

--以下の2つはこのままで大丈夫です
line_to_channel = '1383378250'
line_event_type = '138311608800106203'

-- 受信したデータを整形して、変数request_bodyに代入
request_body = json.parse(request.body)

--- 変数received_messageに受信したメッセージ内容を代入
received_message = request_body.result[1].content.text
--- 変数reply_toに受信元情報(BOTに対してメッセージを送った人のID)を代入
reply_to = request_body.result[1].content.from

--- メッセージを決める処理
if received_message == 'おはよう' then
response_message = 'おはようございます!今日もがんばりましょう!' --- 変数received_messageの中身が「おはよう」だったら、「おはようございます!今日もがんばりましょう!」を変数response_messageに代入 (以下コピペで条件を追加していけます)
elseif received_message == 'おやすみ' then
response_message = '今日も一日お疲れ様でした'
elseif received_message == 'やられたらやり返す' then
response_message = '倍返しだ!'
else --- 上のどの条件にも該当しなかったら、変数response_messageに「[送信内容]? ちょっとなに言ってるかわからない」を代入 \n は改行するコードです。
response_message = received_message .. '? \nちょっとなに言ってるかわかんない'
end

-- メッセージを送るためにデータを整形
data = {
['to'] = {reply_to},
['toChannel'] = line_to_channel,
['eventType'] = line_event_type,
['content'] = {
['contentType'] = 1,
['toType'] = 1,
['text'] = response_message
}
}

-- メッセージ送信
local response = http.request {
method = 'POST',
url = 'https://trialbot-api.line.me/v1/events',
data = json.stringify(data),
headers = {
['Content-Type'] = 'application/json; charser=UTF-8',
['X-Line-ChannelID'] = line_channel_id,
['X-Line-ChannelSecret'] = line_channel_secret,
['X-Line-Trusted-User-With-ACL'] = line_mid
}
}

return true

また、

-- 変数received_messageに受信したメッセージ内容を代入

こんな風に所々解説を書いていますが、– (ハイフン2個)に続く文字列は"コメント"といってプログラム上では無視されます。 (Lua言語では – ですが、他の言語では // や # や / / が使われることが多いです)

callback URLとIPアドレスをLINEに登録。

今回APIを利用するにあたって、 「LINE側からリクエストを飛ばされるURL(callback URL)」と「LINE側にリクエストを飛ばす元のIPアドレス(サーバーの住所のようなもの)」を設定する必要があります。

「LINE側からリクエストを飛ばされるURL(callback URL)」については ダッシュボード ( https://developers.line.me/channels )に行き

Basic Information を選択し、webscriptで設定したurlの最後に:443 (SSLのポート番号)をつけて、 入力して保存します。

また 「LINE側にリクエストを飛ばす元のIPアドレス」 については Server IP Whitelist を選択し、IPアドレスを入力します。 利用するサーバーやサービスによって違うのですが、webscriptの場合から1つに固定されてないようなので

54.159.34.187 54.235.119.11 23.23.140.37 この3つを入力しておいてください。

以上で設定は完了です。

設定が反映されるまで待つ。

これらの設定が反映されるまで時間が 人によってはすぐに反映されるようですが、自分の場合30時間ほどかかったので気長に待ちましょう。 反映されたら連絡がくるわけではないので、時々BotにLINEして返事がくるか確認します。

完成

しばらくして返事がきたら完成です!

コードのこの辺をいじるとメッセージの条件を変えられるので色々いじって遊んでみましょう (変更したらsaveを押すのを忘れずに!)

if received_message == 'おはよう' then
response_message = 'おはようございます!今日もがんばりましょう!' --- 変数received_messageの中身が「おはよう」だったら、「おはようございます!今日もがんばりましょう!」を変数response_messageに代入 (以下コピペで条件を追加していけます)
elseif received_message == 'おやすみ' then
response_message = '今日も一日お疲れ様でした'
elseif received_message == 'やられたらやり返す' then
response_message = '倍返しだ!'
else --- 上のどの条件にも該当しなかったら、変数response_messageに「[送信内容]? ちょっとなに言ってるかわからない」を代入 \n は改行するコードです。
response_message = received_message .. '? \nちょっとなに言ってるかわかんない'
end

最後に

作ったBotはちゃんと動きましたでしょうか? webscriptはあくまでプロトタイプ用なので、これが上手くうごいたら次はサーバーを用意するなりして他の言語 (rubyとかphpだと情報源が多そうです)でもうちょっと高度なBot作成も試してみてください。

また、Botに関する情報共有用のFacebookグループを作ってみました。 記事の内容についてやBotについての質問があれば、ここに書いていただければ分かる範囲でお答えするので、興味がある方は是非入って下さい!

こちらです ↓↓↓ Bot Developers