技術をかじる猫

適当に気になった技術や言語、思ったこと考えた事など。

LINE BOT 作ろう!

ちょうど明日勉強会で Jenkins セットアップするので、Line BOT で色々通知できないかなーというノリで参加してみました。
結論から言えば方向性が違いましたが、色々サービスに触れて面白かったのでここで紹介してきます!

x-hack.connpass.com

まず最初に使うサービスをザックリ紹介。

codenvy.io

Codenvy はオンライン IDE なんて言う素敵なアイテム。
勉強会でハンズオンするのに、IDE 宗教とか面倒だろうし、何かと重宝しそうですね。

Git リポジトリを選択すると、Docker 上の Linux に clone して色々な編集ができます。
Linux ターミナルが使える所がまたイイ!

関連記事: Codenvy使ってみた - Qiita

jp.heroku.com

Heroku はクラウド黎明期から速攻で PaaS を始めてるクラウドサービス。
昔使った事が一時期あったのだけど、長らく使う機会がありませんでした。

特徴は、ともかくシンプル!
サービス開始までの手順がもっとも少ない PaaS なのではないでしょうか?

developers.line.me

ラストは…説明不要のサービス。
BOT 作成には Developper アカウントが必要ですが、こちらも基本的に LINE の QR ログインで登録できてしまいます。
いやはや便利になったものです。

開始

自己紹介から開始。
今回の講師は、主:桑原さん、ヘルプ:マツダさん、長岡さん

本日の内容。

github.com

X-Hack さんは、非エンジニア向けにプログラミングの啓蒙等をされている会社さんです。
ごめんなさい現役エンジニアが興味本位で枠奪ってしまって(汗

LINE の設定

まず LINE Developper にログインするとこんな画面になります。

f:id:white-azalea:20190222211110p:plain

「新規プロバイダー作成」からプロバイダー名を入力して

f:id:white-azalea:20190222211318p:plain

「確認」「作成する」でさっくりプロバイダーを作ります。
次に「チャンネルを作る」に進んで、適当な名前の BOT を作りましょう。

f:id:white-azalea:20190222212111p:plain

「Developper Trial」ってイイですねー
ジャンルは適当に選びましょう。どうせ作り終わったら消します(汗

メールアドレスは、自動入力だとエラーになります。
必ず手入力で…キーバインドチェックか何かしてるようです。

確認画面などは代わり映えしないので省略します。
ハンズオンだったのでさして読みきれてませんでしたが、改めて読んでも常識的な事が書いてありました。

作ったチャンネルを選択して

f:id:white-azalea:20190222213104p:plain

チャンネル基本設定から「Channel Secret」と「アクセストークン」をコピーします。
(ここはそこそこ危険なエリアなので、スクショはなしです)

スクロールしていくと、「LINE アプリへの QR コード」があるので、それを経由で登録してしまいましょう。
ちなみに近くにある項目の「自動応答メッセージ」や「友達登録時あいさつ」は邪魔になるので、「利用しない」に設定しておきます。

Heroku

次は Heroku にログインします。
なお、アカウント作成などは特に説明しませんのでご了承ください。

f:id:white-azalea:20190222213750p:plain

とりあえずこれで放置(笑

Codenvy

Codenvy にログインしたら

Codenvy

f:id:white-azalea:20190222214422p:plain

サイドメニューから
Workspace > add workspace を選択し、

先に進むと、勝手に clone していじれるようになります。

f:id:white-azalea:20190222215727p:plain

terminal で unix コマンド使えるので Docker かなと思ったら Docker のようです。
10 分位放置するとコンテナ消される(汗

ターミナルに、Heroku のコンソールをインストール。プロジェクトルートに移動して

$ curl https://cli-assets.heroku.com/install.sh | sh
$ cd line-messaging-api

そしたら heroku にログイン

$ heroku login --interactive

ID/Pass は登録したものを使いましょう。

$ heroku create azalea-example-bot
$ git push heroku master

その場で heroku アプリ(兼リポジトリ)をこしらえて push 。
このあとで Heroku の画面をみてみると上がってる…

f:id:white-azalea:20190222215637p:plain

残りの環境変数設定

先ほど LINE から拾った 「Channel Secret」と「アクセストークン」を、Heroku に設定します。
先ほど作ったアプリケーションを開いて、「Setting」から「Config Vars」に設定します。

f:id:white-azalea:20190222220321p:plain

コラム: この手のパスワードを、ソースコードに絶対に書いてはいけません。github に上げようものなら、十数分でぶっこぬかれれ、最悪うん十万と支払いが飛んできます。

qiita.com

お次は、Heroku の右上の「Open App」を開きます。
おきまりの「Hello World」ですねーこの URL をコピーします。

f:id:white-azalea:20190222221000p:plain

最後は LINE Developper に戻って

WebHook URL に最後「/callback/」をつけて登録。WebHook 送信を「利用する」に設定します。

f:id:white-azalea:20190222221338p:plain

なんかバグっぽい挙動で、 WebHook送信の項目を後に設定しないと、なぜか設定が一部リセットされる模様。

ここまで来たら LINE を確認

初期動作仕様は、適当に喋ったらこんにちはで返してくれるのみです。

f:id:white-azalea:20190222221832p:plain

実際のハンズオンでは、ここから ぐるなびさん API と連携したりとか色々やりました。
とはいえ、中のソースをみる限りはシンプルに JSON でごにょごにょしてるだけ…!

Web 屋さんならお気づきだろう!なんでもできる…と!

というような内容でした。