LINE BOT AWARDSにエントリーしてみました！（前半）
2017年3月06日
haino
こんにちは。クリエイティブディレクターの灰野です。社内では主にデザイナーという立場でお仕事をしておりますが、実際にはフロントのコードなんかも書いてもおりますし、まぁいろいろやっていますので、今日はこんな肩書きで自己紹介させもらいました。さて、さて、今回は「LINEのMessage API」を使ってボットを制作して「LINE BOT AWARDS」にエントリーしたというお話です。
しかし今回の「LINE BOT AWARDS」グランプリ作品の賞金額がなんと1,000万円！というなんとも気合の入ったコンテストです。金額からしてLINEがいかにこの分野に熱い視線を注いでいるのかが分かります。コンテストをきっかけに優秀な人材やAIを応用したベンチャーを探しているんでしょうね〜。
そんなこんなで、どんなボットを制作したかというと…まずは下記の動画をご覧ください。
「ラーメンにゃんこ先生」
主な機能：
・「〇〇〇について教えて」と投稿することでラーメンのうんちくを教えてもらえる。
・位置情報送信機能を使ってぐるなびAPIを参照し、カルーセルビューで店舗情報を表示。
とまぁ、こんなお遊びボットです。
会話はAIなどを実装しているわけではなく（そんな凄いもの自分には作れない…）想定されるキーワードに対して定型のメッセージを返すという単純仕様で組んであります。また、ぐるなびのAPIを叩いてJSONで結果を返してもらい、カルーセルで表示するというものです。
とにかく今回は、締め切りまで時間がない…（仕事もありますからね）…ということで、調査も含めほとんど3日程度で作りました。週末も使ってほとんど一人ハッカソン状態です。
＜準備編＞
開発環境
・MacOS 10.12
・PHP 7.1
・heroku
サーバーですが、herokuを使いました。PaaSってやつです。今回のようなちょっとしたWebアプリのバックエンドとしてはお手軽でいいですね。アクセスが少なければタダですし。
https://www.heroku.com/
登録は下記の画面から行ないます。
登録が済んだら、早速ボットのバックエンドappを作成します。
「App Name」はオプション扱いですが、何か適当な名前をつけましょう。あとで変更も可能です。「Runtime Selection」は「United States」でいいと思います。
appの作成が完了したら、次はFixieというアドオンを追加します。LINEボットのサーバーはhttpsかつ固定IPであることが条件になりますが、このアドオンはプロキシ経由でIPを固定にしてくれるというものです。
Fixieをクリックしてアカウントのページを表示すると、プロキシのURLとIPが2つ表示されるのでそれらを控えておきます。
herokuの初期設定はざっとこんな感じです。
ついでLINE BUSSINESS CENTERで登録します。ここではボットの設定などを行ないます。
https://business.line.me/ja/
まずはアカウントを作成します。法人でも個人でも作れますが、今回はお試しなんで個人で作成してみました。アカウントの作成が済んだらログインして、「Messaging API」をクリックします。下記のような画面が表示されると思います。
とりあえず「Developer Trialを使う」が開発用ということだと思いますので、とりあえずこちらを選んで開発してみました。「Developer Trialを使う」では「REPLY_MESSAGE」だけでなく、「PUSH_MESSAGE」も使えるようです。
「アカウント名」にボットの名称を入力し、大業種・小業種の設定を行ないます。ボットの名称が「アカウント名」というのがわかりにくいですが、ここは当初は適当で構いません。あとで変更できます。業種もボットでやりたいことに合致する内容を選んでもらえばいいんではないでしょうか。
ついで、アカウント一覧の画面から今作成したボット（アカウント）のカラムから「LINE@MANAGER」を撰択して必要な設定をします。
この画面はサイドメニューの「アカウント設定」 > 「bot設定」で表示できます。ポイントは「Webhook送信」を「利用する」、「自動応答メッセージ」を「利用しない」に設定することです。「友だち追加時あいさつ」はコード側でも対応できそうですが、「利用する」としてこの管理画面で設定されているメッセージを表示するということにしました。
今度は再びLINE BUSSINESS CENTERに戻り、アカウント一覧画面のボット（アカウント）のカラムから「LINE developers」の画面に遷移します。
ここで重要なのは「Channel Secret」と「Webhook URL」と「Channel Access Token」です。「Channel Secret」は「SHOW」で表示できるので控えておきます。「Webhook URL」は「https://(herokuで設定したapp名称).herokuapp.com/」となります。また「Channel Access Token」はそのまま控えておきます。
今度はサイドメニューの「Server IP Whitelist」をクリックしてherokuのFixieで取得したIPアドレスを登録します。
ここで注意点があります！LINEのMessaging APIは固定IPが条件となると述べましたが、ここで設定するだけでOKというわけでなく、LINEが用意している「SDK of the LINE Messaging API for PHP」を少しカスタマイズしてやる必要があるのです。自分はここでハマりにハマりまくりました。この点はこのエントリーの後半をお楽しみに！
ざっくりLINE BUSSINESS CENTERでの設定を完了しました。今度はぐるなびWebサービス for Developersの登録です。
ぐるなびWebサービス for Developersにアクセスして「新規アカウント発行」から登録を行ないます。
http://api.gnavi.co.jp/api/
取得したAPIキーは控えておいてください。
今度は再びherokuに戻り、これまでに取得したアクセストークンやAPIキーをherokuの管理画面から環境変数に登録します。herokuの今回設定したapp設定画面から「Setting」に進み、「Reveal Config Vars」をクリックして各環境変数を設定します。
CHANNEL_ACCESS_TOKEN -> 「LINE developers」で取得したもの
CHANNEL_SECRET -> 「LINE developers」で取得したもの
FIXIE_URL -> 「FIXIE」を「heroku」に追加されると自動でここに追加される ※「：80」は削除
GNAVI_API_KEY -> 「ぐるなびWebサービス for Developers」で取得したもの
お疲れ様でした。今度はローカル環境を構築します。
＜ローカル環境構築編＞
heroku toolbeltをインストールしますが、Homebrewが必要となりますので、Homebrewをインストールします。
Homebrew
https://brew.sh/
その後、下記のページに従い「heroku toolbelt」をインストールします。
Heroku CLI
https://devcenter.heroku.com/articles/heroku-cli
herokuへのデプロイはgitで行ないますが、上記でインストールする「heroku toolbelt」にはgitも含まれているため、gitをインストールしていなくても大丈夫です。
次に、ターミナルを使って開発を行なうローカルフォルダを作成し、gitの管理下に置きます。
mkdir folder name cd folder name git init
※「folder name」は任意の名称です。
これでようやく環境構築ができました。次回はコーディングに関してお届けします！
後半はこちらです。