目次

Webアプリ入門です。基本的にはPaaSで動かします。Botの作り方なども紹介します。

はじめに

Webアプリとは基本的にはWebからリクエストを受けて何らかの処理を実行するアプリのことです。

方針について

当記事の方針の一つは、著者が後々利用しやすいように作っていく方針です。

一部、表現等に正確ではないものも含まれると思いますが、この記事では正確さよりも分かりやすさを重視します。もし正確な情報が欲しければ、公式ドキュメントなど参照してください。

著者のレベル

著者はコンピュータは全くの初心者です。一緒に勉強していきましょう。

Heroku

hubot

hubotというものがあります。hubot-slackではSlackで動作するBotを作成することができます。

$ npm i -g hubot hubot-slack yo generator-hubot coffee-script
# yoでhubotを作成
$ mkdir hellobot
$ cd hellobot
$ sudo yo hubot

# mail addressの削除など
$ vim package.json

# -Sは--save
$ npm i hubot-slack -S
$ ls ./node_modules/hubot-slack
$ vim Procfile
web: bin/hubot --adapter slack

hubotを動かしてみます。

$ ./bin/hubot
hellobot > hellobot ping
hellobot > PONG
hellobot > exit

次にHerokuにホストします。

# herokuにAppを作成
$ heroku login
$ heroku create appname
# appnameはherokuのApp名{https://appname.heroku.com}になる、既に登録されていたら使えない

# Freeでアドオンのredistogoを追加
# クレジットカードの登録が必要になります
$ heroku addons:add redistogo:nano

# FreeではH6/H24の時間休ませなければならず、かつM30呼ばれなければ、Sleepしてしまうので、連続で動かすための設定
# schedulerアドオンの追加
$ heroku addons:create scheduler:standard
# schedulerをブラウザで設定
$ BROWSER=""
$ heroku addons:open scheduler
# curl ${HUBOT_HEROKU_KEEPALIVE_URL}heroku/keepalive
# 23:00

# keepaliveをインストール
$ npm i hubot-heroku-keepalive -S
$ vim ./external-scripts.json
[ "hubot-heroku-keepalive" ]
# keepaliveの設定
# https://devcenter.heroku.com/articles/scheduler
$ heroku config:add HUBOT_HEROKU_WAKEUP_TIME=8:00
$ heroku config:add HUBOT_HEROKU_SLEEP_TIME=24:00
$ heroku config:add TZ='Asia/Tokyo'
$ heroku config:set HUBOT_HEROKU_KEEPALIVE_URL=$(heroku apps:info -s | grep web-url | cut -d= -f2)
# process-schedulerアドオンの追加
# https://devcenter.heroku.com/articles/process-scheduler
# これで行けるとは思うけど試してない
$ heroku addons:add process-scheduler:nano
$ heroku addons:open process-scheduler
# 範囲指定して0を入力するのですが、"1:00-6:00"で良いと思います。0の時間を寝かせます

# スケールを最小限にする
$ heroku ps:scale web=1

# とりあえずherokuにdeploy
$ git init
$ git commit -m "first deploy"
$ git push heroku master

$ curl -sL https://appname.heroku.com/

ある程度の設定ができましたが、私は、GitHub(Source Code) -> Wercker(Deploy) -> Heroku(App) -> Slack(Bot)という形でデプロイすることにします。

wercker.yml

box: wercker/nodejs
build:
  steps:
    - script:
         name: build
         code: |
                 ls -a

deploy:
  steps:
    - heroku-deploy:
         key: $HEROKU_KEY
         user: $HEROKU_USER
         app-name: $HEROKU_APP_NAME
  after-steps:
    - wantedly/pretty-slack-notify:
         webhook_url: $SLACK_WEBHOOK_URL
         channel: general

次に、hubotの基本的な拡張方法はscripts/にスクリプトを置くことで実現します。例えば、HELLOとつぶやかれたらworldと返す内容は以下の通りになります。

scripts/hello.coffee

module.exports = (robot) ->
  robot.respond /HELLO$/i, (msg) ->
    msg.send "world"
$ ./bin/hubot
hellobot > hellobot hello
hellobot > world
hellobot > exit

新しいアプリをインストールして使います。例えば、RSSを流すなら以下のようになります。

# https://github.com/shokai/hubot-rss-reader
$ npm i hubot-rss-reader -S
$ vim external-script.json
[ "hubot-rss-reader" ]
$ ./bin/hubot
hellobot > hellobot rss list
hellobot > hellobot rss add https://qiita.com/tags/docker/feed.atom
hellobot > exit

Twitter検索とかはHerokuに環境変数を追加することで使用可能です。アクセストークンはこちらから。

# https://github.com/estiens/hubot-twitter-mention-v2
$ npm i hubot-twitter-search -S
$ vim external-scripts.json
[ "hubot-twitter-search" ]

# テスト用
$ export HUBOT_TWITTER_CONSUMER_KEY='Your–consumer-key-here'
$ export HUBOT_TWITTER_CONSUMER_SECRET='Your-consumer-secret-here'
$ export HUBOT_TWITTER_ACCESS_TOKEN_KEY='Your-access-token-here'
$ export HUBOT_TWITTER_ACCESS_TOKEN_SECRET='Your-access-token-secret-here'
$ export HUBOT_TWITTER_MENTION_QUERY='検索キーワード'
$ export HUBOT_TWITTER_MENTION_ROOM='general'
$ ./bin/hubot

# Heroku用
$ heroku config:add HUBOT_TWITTER_CONSUMER_KEY='Your–consumer-key-here'
$ heroku config:add HUBOT_TWITTER_CONSUMER_SECRET='Your-consumer-secret-here'
$ heroku config:add HUBOT_TWITTER_ACCESS_TOKEN_KEY='Your-access-token-here'
$ heroku config:add HUBOT_TWITTER_ACCESS_TOKEN_SECRET='Your-access-token-secret-here'
$ heroku config:add HUBOT_TWITTER_MENTION_QUERY='検索キーワード'
$ heroku config:add HUBOT_TWITTER_MENTION_ROOM='general'