2016-04-09

【 LINE BOT】無料で公開するまでのチュートリアル ( sinatra + heroku )

linebot

LINEのBOT APIが無償提供

https://business.line.me/services/products/4/introduction

最近、1万人限定でLINEから「BOT API Trial Account」が無償提供されました。
それと同時にLINE BOTに関する記事が続々と出てきていますが、気をつけないといけないところなどがあったので、備忘録として残しておきます。

参考記事

qiita.com

このあたりを参考にして、進めていきました。
本当にありがたいです。

LINEのdeveloperアカウントを作成する

https://business.line.me/services/products/4/introduction

先ほども紹介した上記サイトから、利用開始を選択します。
案内に沿って進めていけば、LINE BOTが作れます。
「Basic infomation」が見れるところまでいったら、いったんOKです。

sinatraアプリを作る

続いてsinatraアプリを作りましょう。

一応。
dotinstall.com

Gemfileはこんな感じ。

source "https://rubygems.org"

gem 'sinatra'
gem 'rest-client'

config.ruファイルはこんな感じです。

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

class App < Sinatra::Base
  post '/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

ほぼ参考記事のソースコードを使わせて頂きました。

herokuで公開

次にherokuでこのappを公開していきます。

一応。
dotinstall.com

使ったことない人いたら、これとかみて感覚つかんでもらえれば。
流れに沿ってheroku appを作っていきます。

$ heroku addons:create fixie:tricycle

続けてコマンドラインから上記コマンドを入力します。

「Your IP addresses are」のあとにIPアドレスが２つ発行されるので、メモしておいてください。
※あとから、herokuの管理画面で確認することも可能です。

LINE developersの設定, 環境変数の設定*

ここまで終わったら、再びLINE developersの画面に戻り、諸々設定していきます。
注意点がいくつかあるので、おさえておきましょう。

まずは「Basic infomation」画面から、

Channel ID
Channel Secret
MID

を確認しましょう。

qiita.com

config.ruの変数名と見合わせながら、各項目を登録していきます。
※FIXIE_URLはすでに定義されています。

次に「Basic infomation」の中身を編集していきます。
「Callback URL」をお使いの環境に合わせて入力するのですが、ポート番号の:443をつけなければいけません。
なので、入力するURLは

https://hogehoge.com:443/callback

というようになります。「hogehoge.com」にはherokuで作ったappのURLを入力してください。

最後は、左上のメニューから「Server IP Whitelist」を設定していきましょう。
先ほどメモしたIPアドレスを２つ入力してください。

これで準備は完了です！
QRコードから友達登録して、話かけてみましょう！

github.com

githubにもあげておきます。
これから色々いじっていきたいと思います〜。

2016-01-18

【 Gulp入門】Web制作には絶対Gulp！自動化して作業効率をあげよう！

gulp

自己紹介

はじめまして。札幌でエンジニアをやってます。
Gulpの名前はちらほら聞きますが、あまりWeb制作では使ってる人少ないのかなーと思い、記事書きました。
ほんとに便利なので、みなさん一旦使ってみましょう。

Gulpの話を始める前に、さくっとWeb制作の作業工程から見ていこうと思うのですが、

デザイン
スライス
コーディング
( WordPress化 ) ※必要がある場合
テストアップ
本番アップ

だいたいこんな感じですね。
昔は気合でなんとか頑張って単純作業やってました。つらかったです。
今はSketch×Gulpでやってるので、全ての工程において、かなり作業効率が上がってきました。

Web制作してるけど、あんま自動化してないなーって人は一度は検討してみたほうがいいと思います。
惚れます。

Gulpってなに？

gulp (公式サイト)

↑ 公式サイトのリンクです。
まずGulpをご存知ない方のためにGulpの説明から。一言で言うと「タスクランナー」です。
Sassのコンパイルや、コードの構文チェックなどはもちろん、ブラウザのリロードなんかも自動的に行ってくれます。

タスクランナーではGruntが有名ですが、僕がGulpを選んだ理由として、

基本的に非同期処理で行ってくれるため、処理時間が短い
タスクの処理をいつも使ってるJavaScriptで書ける
Gruntよりも容易にタスクをカスタマイズできる

という利点があります。
Web制作やってる人は大体Javascript触ってると思うので、馴染みやすいですよね。

具体的になにをしてくれるの？

sketchファイルのスライスデータをインポート（ディレクトリを自動で分けてインポートも可能です）
BrowserSyncによる、ブラウザ間のURL・スクロール値共有（スマホからもアクセスできます）
ブラウザのライブリロード
SCSSのコンパイル
FTPサーバーへのデプロイ
HTML, SCSS, CSS, JavaScriptの整形、構文チェック、統合・圧縮
静的なWebページから、WordPress用のソースコードへ自動置換( 自動でテンプレートタグをいれてくれる )

箇条書きで申し訳ないですが、上記のようなことを自動でやらせています。
これらのタスクをするために、いちいちコマンドを打ち込むのではなく、gulpのwatchという機能を使って、ファイルの監視などをさせることも可能です。
なので、HTMLが変更されたらブラウザをリロード、scssが変更されたらコンパイルというように自動で行ってくれるので、コーディングすることに専念できます。

Gulpのインストール

つべこべ言わず、Gulpをインストールしてみましょう。
僕の環境がMacなので、Mac前提で話を進めさせて頂きます。Windowsの方はググってください。

まずはGulpを動かすためには、nodeが必要なので、下記サイトからLTS ( 安定版 )を選択し、インストールします。
Node.js

インストールが終わったら、ターミナルで下記コマンドを打ち込みます。

node -v

versionが表示されれば成功です。

では、さっそくフォルダを作ります。

cd /path/to/your/project

作成したら、cdコマンドで自分のフォルダがある場所まで移動します。

npm init

そこで上記コマンドを打ち込んでください。
なにやら英語で色々聞かれますが、今回はテストなので、Enter連打でおっけーです。
そしてディレクトリの中身をみてみると、package.jsonというファイルが生成されています。

このファイルはいっぺんに必要なモジュールをインストールしてくれたり、色々便利ですが、今はわからなくても結構です。そのままにしておきましょう。

ではお待ちかね、gulpのインストールです。
まずは、

sudo npm install -g gulp

このコマンドを打ち込み、gulpをグローバルインストールします。
sudoはルート権限での実行、-gはグローバルのオプションですね。

次にgulpをローカルにもインストールします。

npm install --save-dev gulp

「--save-dev」というオプションがついていますが、このオプションをつけることによって、packege.jsonにもモジュールの情報が追記されていきます。あとあと便利なので使っていきましょう。

npm install --save-dev モジュール名

gulpでは様々なモジュールをインストールすることによって、できることが増えていきます。上記のようなコマンドは何度も使うので、覚えておきましょう。

これでgulpのインストールは完了です。
次はgulpを使えるようにするため、gulpfile.jsというファイルを生成します。

f:id:shinyafurumata:20160406231927p:plain

package.jsonファイルと同じ配下に配置してください。

次にgulpfile.jsに以下のコードを追加すれば準備完了です。

var gulp = require('gulp');

ここまでうまくできましたか？
これで準備完了です。そんなに知識がなくとも簡単に導入できてしまうところが魅力だったりします。
HTMLやCSSしか触ったことしかありませんという人でも、使いこなすことができると思うので、どんどん触ってみましょう！

次回からは、実際にタスクを作っていきます〜。

Shinya Furumata's Blog

フロントエンドエンジニアの開発ブログです。直近は主にgulpについて書いていくと思いますー。