LINE botでオウム返しをブラウザ上で作る全手順【初心者向け】(Cloud9+heroku+git)

LINE botでオウム返しをブラウザ上で作る全手順【初心者向け】(Cloud9+heroku+git)

LINE botが発表されて新しい技術が好きなので飛び込んでみて、さっそくブラウザ上だけで特別な開発環境なんて必要なくしてLINE botでオウム返しを作る手順を紹介します。
ベースとなる手順は、@hatahataさんの手順を参考にさせて頂いています。「これでもかっ!」ってくらい上手く行かなかったので、@hatahataさんに質問までしてこの手順でlinebotを動かせるようにしました。私のようにcloud9もHerokuもgitも良く知らないくせにLINEbotには興味のある仲間のために、LINEbotの作成方法を全て手順を一切省略せずに書きます。
LinebotのHello Worldのつもりでとりあえずは疑うことをせずこの手順通りに作成すればうまくいきます。

このLINE bot作成方法で夢にまで見た文鳥と会話することが出来るようになりました。

 

参考にさせて頂いた手順

【参考リンク】

LINE BOTを試してみる(Cloud9 + Heroku) – Qiita

 

Cloud9で新しいworkspaceを作成する

Cloud9にログインして、dashboradから新規workspaceを作成するためにグレーの領域をクリックします。

LINE botでオウム返しをブラウザ上で作る全手順【初心者向け】(Cloud9+heroku+git)

このような画面に切り替わるので、エディタ画面が表示されるまで大人しく待ちましょう。

LINE botでオウム返しをブラウザ上で作る全手順【初心者向け】(Cloud9+heroku+git)

 

必要な情報を入力してワークスペースを作成する

  • Cloud9で管理するアプリ名
  • アプリの公開/非公開
  • アプリの開発言語

それぞれ選択して、ワークスペースを作成します。

LINE botでオウム返しをブラウザ上で作る全手順【初心者向け】(Cloud9+heroku+git)

 

ワークスペースの不要なファイルを削除する

コンソールから以下のコマンドを入力し、LINE botの作成では不要となるRailsに関連するファイルを全て削除します。

LINE botでオウム返しをブラウザ上で作る全手順【初心者向け】(Cloud9+heroku+git)
rm -rf /home/ubuntu/workspace/*

 

Gemから不要なものを削除する

gem uninstall -axI $(gem list --no-versions | egrep -v "bigdecimal|io-console|json|psych|rake|rdoc")
gem install bundler

 

config.ruファイルの作成

手順5.と同様にフォルダアイコンを右クリックし”NewFile”から「Gemfile」というファイル名でファイルを作成し、下記のプログラムを設定します。

require 'bundler/setup'
require 'sinatra/base'
require 'json'
require 'rest-client'

class App < Sinatra::Base post '/linebot/callback' do params = JSON.parse(request.body.read) params['result'].each do |msg| request_content = { to: [msg['content']['from']], toChannel: 1383378250, # Fixed value eventType: "138311608800106203", # Fixed value content: msg['content'] } endpoint_uri = 'https://trialbot-api.line.me/v1/events' content_json = request_content.to_json RestClient.proxy = ENV["FIXIE_URL"] RestClient.post(endpoint_uri, content_json, { 'Content-Type' => 'application/json; charset=UTF-8',
        'X-Line-ChannelID' => ENV["LINE_CHANNEL_ID"],
        'X-Line-ChannelSecret' => ENV["LINE_CHANNEL_SECRET"],
        'X-Line-Trusted-User-With-ACL' => ENV["LINE_CHANNEL_MID"],
      })
    end

    "OK"
  end
end

run App

 

必要なgemのインストールを行う

コンソールに下記コマンドを入力します。そうすることでLINEbotを動かすために必要な物を取り込むことが出来ます。
正常にgemインストールが完了すれば、「Gemfile.lock」というファイルが生成されるはずです。

bundle install

 

Gitの準備

いま作業を行っているフォルダをHeroku上で動かすためにgitに登録する準備を行います。

git init

 

Herokuへのログイン

下記コマンドをコンソールに入力し、Cloud9からHerokuにログインします。

heroku login

メールアドレスとパスワードを聞かれますので入力します。

 

Cloud9からHerokuにアプリケーションを作成する

ここで登録したアプリケーションと現在編集しているソースコードがひも付きます。

heroku create APPNAME

APPNAMEには任意のアプリケーション名を設定します。ここに何も入力しなくてもアプリケーションの名前は問題なく設定されます。(ちょっと長ったらしい程度です)

 

FIXIEアドオンの追加

Herokuではアプリケーションをサーバ上で稼働させることが可能ですが、IPアドレスは動的で変動しています。
しかし、LINE botは固定のIPアドレスでしかWhiteList設定が行えないので動的に変化するIPアドレスを固定化してやる必要があります。それを実現するのはFIXIEアドオンです。このアドオンを導入して固定のIPアドレスを獲得します。ただし、2点注意点があります。

  1. FIXIEは無料だがHerokuでクレジットカード情報の登録が必要
  2. 1月に500トランザクションまでしか許容されない

この2点だけ注意点があるだけですので、登録してしまいましょう。クレジットカード番号を登録したとしても無料なので大きな問題はありません。

クレジットカード情報の登録後、アドオン導入のコマンドをコンソールから入力します。

heroku addons:create fixie:tricycle

もし、このコマンドでエラーが出た場合は下記を試してみてください。複数アプリがHeroku上に存在している場合、Herokuが「どのアプリに追加したらいいんだ?」と困っています。

heroku addons:create fixie:tricycle --app APPNAME

わたしはこの方法でクリアできました。アプリ名を指定しなくても問題なく通過デキる人が多いとのことなので発生原因の細かくは分かっていません。

 

FIXIEの管理画面からIPアドレスとProxy URLを取得する

LINE botでオウム返しをブラウザ上で作る全手順【初心者向け】(Cloud9+heroku+git)

 

callback用のURLの取得と設定

LINE Developersのページから取得します。

LINE botでオウム返しをブラウザ上で作る全手順【初心者向け】(Cloud9+heroku+git) LINE botでオウム返しをブラウザ上で作る全手順【初心者向け】(Cloud9+heroku+git)

LINE Developersのページに下記の様にCallBack用URLを設定します。

LINE botでオウム返しをブラウザ上で作る全手順【初心者向け】(Cloud9+heroku+git)

設定を行う際に以下の3点に注意してください

  1. https://から始まること
  2. :443を明記すること
  3. 末尾は /linebot/callback であること

 

WhiteListIPアドレスの登録

FIXIEで取得したIPアドレスの2つをLINE Developersのページより登録します。

LINE botでオウム返しをブラウザ上で作る全手順【初心者向け】(Cloud9+heroku+git)

 

Channel ID,Channel Secret, MIDの取得

LINE botでオウム返しをブラウザ上で作る全手順【初心者向け】(Cloud9+heroku+git)

 

Herokuの環境変数(ENV)を設定する

Channel ID , Channel SecretやMIDは他人に知られてはいけないものなので、ソースコードに埋め込んで使うと悪用されてしまう恐れがあるのでサーバに対して環境変数という形で埋め込みを行います。下記の通りコマンドを入力します。

heroku config:add LINE_CHANNEL_ID="xxxxxx"
heroku config:add LINE_CHANNEL_SECRET="xxxxxx"
heroku config:add LINE_CHANNEL_MID="xxxxxx"
heroku config:add FIXIE_URL="http://xxxxxx"

それぞれ先ほど取得したものを設定します。FIXIE_URLについてはport番号などを省略しないように設定します。

 

gitへのコミットとデプロイ(プログラム実行)

gitにコミットを行います。

git add .
git commit -m 'First Commit'
git push heroku master

最後のpushコマンドが正常に完了すると無事にLINE botが使えるようになります。
なお、わたしの場合はgit pushが上手く行かず何度もやり直しを行っていましたが、未だその原因は特定出来ていません。ただし、ここで書いた手順通りに作業を行えば問題なくLINE botが作成できることを確認したので、詳しい方が現れて助言してくれることを待つことにします。

 

CallBackやWhiteListの適用には若干時間がかかるみたい

すぐにLINE botの挙動を確認したいところですが、LINE側に登録した情報はバッチ処理で適用されているようで、登録まで若干の時間がかかります。私の場合は約40分くらい経ってから反応があったのでそのくらいかかると思います。

 

けにーちゃんと会話

LINE botでオウム返しをブラウザ上で作る全手順【初心者向け】(Cloud9+heroku+git)

ああ・・・かわいい。

 

あとがき

今回、Cloud9もHerokuもGithubも初めて使ってみたのですが、やっぱり癖があって慣れなければ使いにくい印象でした。しかし、いまのWeb業界、エンジニア界隈ではこれらのツールを使いこなすのが常識であり最低限のラインだということを知り、焦りを感じました。
なんにせよ、自分が飼っている文鳥と会話できるなんて夢の様な体験ですね。次は特定のワードに対して反応するようなカスタマイズができればなと考えています。

 

 

らいか
自分の家族の文鳥と会話できるようになるなんて何て幸せなんだ・・・!
LINE botでオウム返しをブラウザ上で作る全手順【初心者向け】(Cloud9+heroku+git)

SNSへのシェアはこちらから!

ABOUTこの記事をかいた人

工業高等専門学校を卒業後、NTTグループのSI企業に就職。数々の炎上案件を鎮火するために日本各地を5年間転々とする。2015年に一般ユーザ向けのWebシステム開発案件のチームリーダとして業務に従事し、改めて”Webのものづくりの楽しさ”に気付きWeb制作会社に転職。Web制作やアクセス解析を使ったオウンドメディアの運用改善などを行っていく中で、もっとユーザー目線でWebをただ制作するだけではなく企画や運用まで幅広い領域で仕事がしたいと感じるようになり、Webディレクターのキャリアを目指す。日本中のビジネスホテルに詳しく、犬や猫よりも鳥派。