LINEでサンタさんに欲しいものをお願いするbotは簡単に作れるか？

#:calendar_spiral: gloops Advent Calendar 25日目

Ho! Ho! Ho!:santa_tone2: Merry Christmas!!:christmas_tree:
:link:[gloops Advent Calendar 2016](http://qiita.com/advent-calendar/2016/gloops) 25日目です!
24日目は @y_fujieda さんの「:link:[ブラウザでNode.js(KoaJS)サーバを走らせる](http://qiita.com/y_fujieda/items/b1b572ed816a6092cde8)」でしたね
Node.jsを強引に(?)ブラウザで動かしてしまおうという発想、
そして実際に実現してしまうことに脱帽です!

---

# :santa_tone2: サンタさんに欲しいものをお願いするには？
さて、みなさんのお家にサンタさんは来ましたか?
私が子供のころはサンタさんに広告の切り抜きつきの手紙を用意して、
それを親に渡していました:relaxed:
「サンタさんに届いて欲しい！」という願い、
そして実際に手紙を用意するという体験に心踊ったものですが、
最近の子供達は何でお願いするのがリアルな体験につながるのでしょうか。
そこで、サンタさんにLINEでお願いできる仕組みをつくれないか考えてみました:thinking:

# :robot: LINE BOTを準備する

まずは :link: [「LINE Business Center」](https://business.line.me)に登録し、
bot用アカウントを作成しましょう。
サンタさんっぽいアカウント画像を設定しておくとGoodですね。
(ペイントで描いてみましたが意外とソレっぽくなって気に入っています）
![image](https://qiita-image-store.s3.amazonaws.com/0/51543/9d801c07-1d47-689d-ab2f-1ca8731b8dcc.png)

botアカウントを作成したら、
LINE@MANAGERからアカウント設定を行います。
アカウント設定->bot設定で基本的な設定を行っておきましょう。
-　Webhook送信：利用する
-　自動応答メッセージ：利用しない
-　友達追加時あいさつ：利用する
あたりの設定を行えばよいでしょう。
![image](https://qiita-image-store.s3.amazonaws.com/0/51543/200d93c5-e494-f13c-d9f7-47cdb71ea6c8.png)

メッセージ->友だち追加時あいさつ
でbotアカウントを登録してもらったときに自動送信するメッセージを
設定することができます。
サンタさんぽい気の利いた挨拶を設定しておきましょう! Ho! Ho! Ho!:raised_hand_tone1:
![image](https://qiita-image-store.s3.amazonaws.com/0/51543/a19d41c1-39a6-0575-360a-171ff779da9e.png)

では実際にサンタさんをLINEの友達として登録してみます。
（サンタさんを使用するには、権限をアプリに付与する必要があるようです……）
![image](https://qiita-image-store.s3.amazonaws.com/0/51543/42149ed1-e149-a7ff-03e0-2c72566c4bd0.png) ![image](https://qiita-image-store.s3.amazonaws.com/0/51543/41acce46-e6db-003d-64e4-542f9ec10cf4.png)

いい感じですね!!
![image](https://qiita-image-store.s3.amazonaws.com/0/51543/8c487aa8-9ab6-c4e0-5968-958e8886706d.png)

今回のbotを作る話と大きく関係はしませんが、
botのアクセス設定で店舗位置などを登録できますので、
せっかくですから :link:[フィンランドのサンタクロース村](http://santaclausvillage.jp/santavillage/access/) あたりを設定しておくと、よりリアル感が増すのではないでしょうか。
![image](https://qiita-image-store.s3.amazonaws.com/0/51543/6c82801e-64cf-f464-10ec-8b9a34bb607f.png) ![image](https://qiita-image-store.s3.amazonaws.com/0/51543/cb165274-bae1-df5d-6467-c991a6472a2a.png)

:point_up: 注意
2016年4月に公開された LINE BOT API Trial Account ですが、
2016年9月に公開された 新しいMessaging API の公開に伴い、開発アカウントの削除や  API仕様の変更が行われているのでご注意ください

# :keyboard: webscript.io でWebhook返信する機能を作る

ではbotの準備が整いましたので実際に
サンタさんの中身を作っていきたいと思います。
今回は簡単にREST APIを用意するために :link:[webscript.io](https://www.webscript.io/) を利用します。
アカウント登録を行ったら、
» Create a new script...->(APIのURIを設定)->CreateからAPIの作成を開始しましょう。
![image](https://qiita-image-store.s3.amazonaws.com/0/51543/5892f02a-c1c9-2eb8-ab35-6ae57280a63d.png)

以下に今回作ったコードを掲載します。

```lua:santasan.lua
-- 認証情報
ChannelSecret = 'XXXXXXXXXXX'  -- XXXXXに自分のChannelSecret
AccessToken = 'Bearer XXXXXXX='  -- XXXXXに自分のChannel Access Token

-- 受信メッセージから送信メッセージを構築
body = json.parse(request.body)
reply = body.events[1].replyToken -- 返信先
inBoxMessage = body.events[1].message.text -- 受信メッセージ

-- 返答パターン
resTable = {}
resTable['こんにちは'] = 'Hello!'
resTable['Hello!'] = 'Hello!'
resTable['こんばんは'] = 'Good evening!!'
resTable['good evening!'] = 'Good evening!!'
resTable['クリスマス'] = 'Ho! Ho! Ho! Merry Christmas!!'
resTable['Christmas'] = 'Ho! Ho! Ho! Merry Christmas!!'

for key,value in pairs(resTable) do
    if (string.find(inBoxMessage, key)) then
        res = value
    end
end

-- 欲しいもの記憶
if (string.find(inBoxMessage, '欲しい')) then
    storage.wish = inBoxMessage
    res = 'Ho! Ho! I got it, boy. Look forward to it!'
end

-- 記憶したもの教えちゃう
if (string.find(inBoxMessage, '世界は愛で包まれている')) then
    if (storage.wish ~= nil ) then
	    res = 'お子さんは「' .. storage.wish .. '」と言っています'
		end
end

-- どのパターンにもマッチしなかったらここ
if (not res) then
    res = 'Ho! Ho! Ho!'
end

data = {
    ['replyToken'] = reply,
    ['messages'] = {{
        ['type'] = 'text',
        ['text'] = res
    }}
}

-- メッセージ送信
local response = http.request {
    url = 'https://api.line.me/v2/bot/message/reply',
    method = 'POST',
    data = json.stringify(data),
    headers = {
        ['Content-Type'] = 'application/json; charser=UTF-8',
        ['Authorization'] = AccessToken
    }
}

return 200
```

REST APIの作成を完全にするにはbotのChannel Access Tokenが必要です。
また、作成したAPIのURIをbotに登録する必要があります。
どちらもbotアカウントのMessaging API設定画面で行えますので
まずは作成したbotアカウントのLINE Developers画面を開きます。

Channel Access Token は「ISSUE」をクリックすることで発行されます。
上記コード内の所定の場所にコピー&ペーストしてSAVEしてください。
また、Webhook URL に作成したAPIのURIを設定しましょう。
設定時、WebscriptのURIをhttps://～で指定する必要があります。
![image](https://qiita-image-store.s3.amazonaws.com/0/51543/a9248e49-0e1c-ac80-aa66-6e1ae52e4786.png)

このあたり、botの基本設定はLINE@MANAGER側で行ったり
Message APIの設定はLINE Developers側で行ったりと
設定画面を行き来する必要がありますが、
Message APIを使わずにLINE@MANAGERのみでBOTを設定できるようにするために
LINE側で対象ユーザを切り分けているようです。
（実際、LINE@MANAGERのみでもかなり高機能なBOTが作成可能です）
ややこしいですが、わかってしまえばそんなに難しくはありません。

:point_up:ポイント
このwebscript.ioで作ったコードを使って
サンタさんにLINE Messaging APIで応答させる、というところが
今回やることの中でも一番難しいでしょう。
（というかココがキモですね）
基本的には、LINE DevelopersのWebhook URLにURIを設定し、
「VERIFY」ボタンを押せばURIにテストPOSTをすることができます。
まずは、この「VERIFY」を押したときにSuccessすることが大事です。
![image](https://qiita-image-store.s3.amazonaws.com/0/51543/70ef8258-6f45-e906-bea6-e90abfa8cc76.png)

ただ、SuccessしてもAPI実行には失敗していることがあります。
LINE Messaging APIは送信しているJSONの不備や設定の漏れなどでAPI実行に失敗している場合、エラー内容を返してくれます。
webscript.ioではコード下部にあるRequest logにてAPI実行結果を参照できるので
![image](https://qiita-image-store.s3.amazonaws.com/0/51543/d2670406-abba-3612-e24e-e1ac59f16f81.png)

ここのログを参照しながらエラーを解決していけば必ず解決できるでしょう。
（そもそもRequest logが出ないならURIの指定に失敗している、など）
ちなみに、下画像のエラーではServer IP WhitelistにAPIのIPを設定しろと言われているので、LINE DevelopersにてServer IP Whitelistを設定しましょう。
![image](https://qiita-image-store.s3.amazonaws.com/0/51543/22a331db-951b-193a-6bf5-8c6e72b02f01.png)

# :iphone: 使ってみる

お子さんにサンタさんに何が欲しいか連絡してもらいましょう。
「欲しい」で部分一致させているので「～が欲しい！」と言ってもらうことが重要です（開発者都合）

お子さんのトーク画面はこんなイメージ
![image](https://qiita-image-store.s3.amazonaws.com/0/51543/322ae57c-729c-d3d1-aad9-63cc12d6c898.png)

お子さんがサンタさんに連絡したと言ったら、
サンタさんに秘密の合言葉を言って
お子さんが何を言っていたか教えてもらいましょう。
合言葉はお子さんが使わなさそうなものがいいですね。
今回は「世界は愛で包まれている」を合言葉としてみました:kissing_heart:

ご両親のトーク画面のイメージ
（お子さんのLINEアカウントとご両親のLINEアカウントが別のほうがいいでしょう）
![image](https://qiita-image-store.s3.amazonaws.com/0/51543/238bf701-9d8b-9b14-2809-9c4172f1bc08.png)

やりました!
これで楽しいクリスマスを演出できそうですね!! :santa_tone1: :christmas_tree:

:snowman2:ここに、今回作ったサンタさんの友達登録用QRコードも置いておきます。
（Webscript.ioの都合上7日間しかAPIのコードが有効期間がありませんので
2016年内程度の稼働になるかと思います）
![image](https://qiita-image-store.s3.amazonaws.com/0/51543/d0f30ce1-4c24-c42c-d843-8390d7443a38.png)

# :kissing_heart: おわりに
今回はLINE Messaging APIとwebscript.ioを使って
かなり簡単にサンタさんbotを作れました。
アカウント作成の方法など細かい部分は今回の記事では省略しましたが、
下記参照にて私が参考にしたサイトを書いておきましたので
各々の記事を参考に進めれば難しくはありません。

私事で恐縮なのですが、この2016年末に結婚することになりました。
今後、自分の子供が生まれたときに使えればいいなと思い、今回の記事を書きました。
未来の自分、良いパパになれるかな?

以上、北山でした。

25日間に渡ってお送りした :link:[gloops Advent Calendar 2016](http://qiita.com/advent-calendar/2016/gloops) もこれで終わりです。
応援いただいた皆様本当にありがとうございました。
年末年始の時間を使って、ぜひ :link:[他のAdvent Calendar 2016](http://qiita.com/advent-calendar/2016) も見てみてくださいね。
それではみなさん、よいお年を!!:snowflake:

# :bow: 参考
- :link:[[LINE]メッセージングAPIのオープン化に先駆け、先着1万名限定でBOTアカウントを自由に開発できる「BOT API Trial Account」の無償提供を開始](https://linecorp.com/ja/pr/news/ja/2016/1320)
- :link:[[LINE]Messaging API のリリースとBOT API Trial Account廃止のご案内](https://business.line.me/ja/news/20051494)
- :link: [[LINE]chatbotの開発・普及に向けて新たな展開を発表、新たなMessaging APIを公開し、開発者への正式提供を開始](https://linecorp.com/ja/pr/news/ja/2016/1516)
- :link: [[LINE]Messaging API reference](https://devdocs.line.me/ja/)
- :link: [[Webscript.io]Webscript Documentation](https://www.webscript.io/documentation)
- :link: [[Qiita]webscript.ioを使って RESTful APIを作成](http://qiita.com/yokobonbon/items/c69f6bf4cff6df644d56)
- :link: [[uzullaがブログ]LINEのMessaging APIを使うメモ：事前知識と登録編](http://uzulla.hateblo.jp/entry/2016/10/06/230309)
- :link: [[ChatWork Creator's Note]サーバー不要で Lua 言語な webscript.io で ChatWork API を叩いてみる](http://c-note.chatwork.com/post/70464431401/webscript) 
- :link: [[No Regret No Life]webscript.ioでLINE BOT APIの事始め](http://yamamotomanabu.hatenablog.com/entry/2016/04/08/webscript.io%E3%81%A7LINE_BOT_API%E3%81%AE%E4%BA%8B%E5%A7%8B%E3%82%81)
- :link: [[デジマラボ]わずか5分。新LINE Messaging APIでbotを作ってみた手順全公開](https://bita.jp/dml/line-messaging-api-exp)

似たような記事やブログもありました

- [[Qiita]LINE bot(messaging API)でクリスマスプレゼントを受け付けるサンタクロースを作りました](http://qiita.com/Logy/items/00016f02004afec85fcc)
- [[やめて！ハハのライフはもうゼロよ！]サンタクロースへのリクエスト方法](http://www.hahalife0.com/entry/2016/11/21/070300)

---

:grinning:gloopsで働く人がもっとワカルのは:link:[こちら](http://gl.gloops.com/)から!:grinning: