Hatena::ブログ(Diary)

Hacking My Way 〜 itogのhack日記 RSSフィード Twitter

2015-02-26

webhookとHubotを使ってBacklogをslack対応させる

slackというチャットツールが流行ってます。いろんなサービスと連携しやすいのが特徴で、例えばgithubとかはホント簡単に連携することが出来るのですが、国内サービスは対応していない場合があります。

国産の課題管理ツールBacklogもそのご多分に漏れずslack非対応で、これまではAPIを使って連携する方法しかありませんでした(git機能は別)が、Backlogの更新情報がwebhookで提供されるようになり、より簡単に連携出来るようになりました。

webhookはhttp postを使ったpush型APIで、この場合

  • Backlog -> Hubot
  • Hubot -> slask

と2段階でリクエストを送ることになります。

ここではslack, backlogを使っていること、herokuの知識があることを前提に

  1. Hubotの設定
    1. herokuへのデプロイ
  2. slackとHubotの連携
  3. BacklogとHubotの連携

という順番で設定方法を説明していきます。環境はMac OSX yosemiteです。

1.Hubotの設定

Hubotのインストール

HubotはNode.jsで動くボットフレームワークです。Node.jsをインストールしていない場合はインストールします。

以下のように、nodeとnpmがインストールされていることを確認して下さい。

$ node --version

v0.12.0

$ npm --version

2.5.1

npmコマンドを使ってhubotをインストールします。

globalにインストールする( globalかlocalかは http://blog.nodejs.org/2011/03/23/npm-1-0-global-vs-local-installation )ので、-gオプションを付けます。

$ sudo npm install -g hubot

そのままだとエラーになるのでcoffeeをインストール

$ hubot

env: coffee: No such file or directory

$ sudo npm install -g coffee-script

これでhubotが使えるようになりました。


botの作成

botの生成するのにgenerator-hubotをインストールします。

$ sudo npm install -g yo generator-hubot

ディレクトリを作成し、botを作成します。

$ mkdir -p bot

$ cd bot

$ yo hubot

_____________________________

/ \

//\ | Extracting input for |

////\ _____ | self-replication process |

//////\ /_____\ \ /

======= |[^_/\_]| /----------------------------

| | _|___@@__|__

+===+/ /// \_\

| |_\ /// HUBOT/\\

|___/\// / \\

\ / +---+

\____/ | |

| //| +===+

\// |xx|

botの名前などを入力します。Bot adapterにはslackを指定します。

? Owner: <Owner name and email>

? Bot name: <bot name>

? Description: A simple helpful robot for your Company

? Bot adapter: (campfire) slack

? Bot adapter: slack

create bin/hubot

create bin/hubot.cmd

create Procfile

create README.md

create external-scripts.json

create hubot-scripts.json

create .gitignore

create package.json

create scripts/example.coffee

create .editorconfig

_____________________________

_____ / \

\ \ | Self-replication process |

| | _____ | complete... |

|__\\| /_____\ \ Good luck with that. /

|//+ |[^_/\_]| /----------------------------

| | _|___@@__|__

+===+/ /// \_\

| |_\ /// HUBOT/\\

|___/\// / \\

\ / +---+

\____/ | |

| //| +===+

\// |xx|

以上でボットのひな形が作成できました。

herokuにデプロイする

Hubotはhttpリスエストを受けるサーバになるのでデプロイ先が必要になります。ここではherokuにデプロイします。

heroku command line toolを使うのでインストールしてない場合はインストールします。

https://devcenter.heroku.com/articles/heroku-command

herokuにデプロイするためにgit管理下に置きます。

$ git init

$ git add .

$ git commit -m 'First commit.'

herokuにログインします。

$ heroku login

Enter your Heroku credentials.

Email: <email>

Password (typing will be hidden): <password>

アプリを作成します。

$ heroku create <app name>

HubotをどうさせるのにはRedisが必要なのでAddonを追加します。

$ heroku addons:add redistogo:nano --app <app name>

(以下--appオプションは省略)

herokuにデプロイします。

$ git push heroku master

slackとHubotの連携

slackはHubotインテグレーションをサポートしているので、slackのUIからHubot integrationを追加します。

"Configure Integrations"からHubotを選択します。

Hubotのslack上でのユーザ名を入力します。

f:id:itog:20150226170749p:image

以下トークンが取得できます。

f:id:itog:20150226170746j:image

HUBOT_SLACK_TOKEN=<Your Token>

これをherokuに設定しておきましょう。

$ heroku config:set HUBOT_SLACK_TOKEN=<Your Token> --app <bot name>

また、botをidelingにさせないためにpingを送るような設定をします。

$ heroku config:set HUBOT_HEROKU_KEEPALIVE_URL=<app url>

<app url>は"https://<app name>.herokuapp.com/"です。

$ heroku apps:info

で確認できます。

動作確認

ここまででひとまずボットが動くようになっているので確認しましょう。

slackでbotに対してpingとダイレクトメッセージを送ってPONGと帰ってくればOK.

f:id:itog:20150226170747p:image

Backlog-Hubot間のwebhook設定

公式ヘルプページ

http://www.backlog.jp/help/adminsguide/webhook-setting/userguide2493.html

Hubotにscriptを追加する

Hubotのscriptsディレクトリに以下内容で"backlog.coffee"を作成します。

# Description:
#   Backlog to Slack
#
# Commands:
#   None

backlogUrl = 'https://mobileclip.backlog.jp/'

module.exports = (robot) ->
  robot.router.post "/room/:room", (req, res) ->
    room = req.params.room
    body = req.body

    console.log 'body type = ' + body.type
    console.log 'room = ' + room

    try
      switch body.type
          when 1
              label = '課題の追加'
          when 2, 3
              # 「更新」と「コメント」は実際は一緒に使うので、一緒に。
              label = '課題の更新'
          else
              # 課題関連以外はスルー
              return

      # 投稿メッセージを整形
      url = "#{backlogUrl}view/#{body.project.projectKey}-#{body.content.key_id}"
      if body.content.comment?.id?
          url += "#comment-#{body.content.comment.id}"

      message = "*Backlog #{label}*\n"
      message += "[#{body.project.projectKey}-#{body.content.key_id}] - "
      message += "#{body.content.summary} _by #{body.createdUser.name}_\n>>> "
      if body.content.comment?.content?
          message += "#{body.content.comment.content}\n"
      message += "#{url}"

      console.log 'message = ' + message
      # Slack に投稿
      if message?
          robot.messageRoom room, message
          res.end "OK"
      else
          robot.messageRoom room, "Backlog integration error."
          res.end "Error"
    catch error
      robot.send
      res.end "Error"

参照) http://qiita.com/mayukojpn/items/a9a9408c21a761adb7d0

Backlog側の設定

Backlogの"プロジェクト設定"から"Webhook"を選択します。

webhook urlに以下を入力します。

https://<app-name>.herokuapp.com/room/<room name>

この画面で「通知するイベント」を選択することが出来るのですが、フィルター・整形はhubot側でやらせる前提で「すべてのイベント」にチェックを入れます。

編集画面の下の方からテスト送信ができ、以下の様なデータが送信されます。

f:id:itog:20150226170745p:image

{

"id": 10,

"project": {

"id": 100,

"projectKey": "TEST",

"name": "TestProject",

"chartEnabled": false,

"subtaskingEnabled": false,

"textFormattingRule": null,

"archived": false

},

"type": 1,

"content": {

"id": 100,

"key_id": 100,

"summary": "test issue",

"description": "test description"

},

"notifications": [],

"createdUser": {

"id": 1073863424,

"userId": null,

"name": "itog",

"roleType": 1,

"lang": "ja",

"mailAddress": null

},

"created": "2015-02-23T22:52:28Z"

}

以下のように、slackにBacklogの更新情報がポストされていればOKです。

f:id:itog:20150226175929j:image

2015-02-24

MacにKiCadをサクッとインストールする

オープンソースの電子回路用CAD「KiCad」がMaker界隈で人気だが、これまではインストール方法が確立されていないのが課題だったのだが、Homebrewに対応して1コマンドでインストール出来るようになった。

https://forum.kicad.info/t/os-x-homebrew-kicad-tap-with-library/519

インストール方法

Homebrewを実行できる環境が整ったマシンで以下コマンドを実行。

$ sudo brew install Caskroom/cask/kicad

/Users/<user名>/Applications/Kicad 以下に作成される。

インストールされたKiCadのバージョン情報は以下。

f:id:itog:20150224111044p:image

まだこのbrew tap自体があたらしいので問題を発見したらgithubにissue登録すればすぐに対応するって言ってる。

https://github.com/metacollin/homebrew-kicad

2015-02-16

チームラボ展に行って来た(※ネタバレあり)

日本科学未来館で開催されている、『チームラボ 踊る!アート展と、学ぶ!未来の遊園地』に行って来た。

http://odoru.team-lab.net/

http://www.team-lab.com/news/miraikan

プロジェクタを使った大画面、部屋全体に広がるビジュアルに、リアルタイムにレンダリングするCG、それにインタラクティブ性を持たせ、特に遊園地部分は子供が喜ぶ作品で溢れていた。

f:id:itog:20150214110455j:image

壁一面のディスプレイは見るものを圧倒する。

f:id:itog:20150214110310j:image

日本画としての表面だけではなく、その仕組み部分をあえて見せる展示などエンジニア心をくすぐる演出も含まれている。

作品を見るだけではなく、その仕組を考えるのも一つの楽しみ方。というわけで、展示されているインタラクティブアート作品とそれに使われているセンサが何かを考えてみた。

花と人、コントロールできないけれども共に生きる、そして永久に – Tokyo

f:id:itog:20150214105557j:image

チームラボ展の象徴的な展示。

混んでると次の入り口までの行列になってしまい、インタラクティブ感はあまり味わえないが、立ち止まっているとそこに花が集まってきて、歩くと花びらが散る。

センサーは四つ角に配置。レーザーセンサ。

f:id:itog:20150214120523j:image

世界はこんなにもやさしく、うつくしい

f:id:itog:20150214111015j:image

壁の上部から反対側の壁に投影するプロジェクタがありそこから下向きにセンサがあった。近づけなかったのでなにセンサかは分からないが「花と人」と同様のものだと思われる。

天才ケンケンパ

f:id:itog:20150214112415j:image

壁側に3台?センサが設置してあった。これも同じく「花と人」と同様のセンサだと思われる。

つながる!積み木列車

f:id:itog:20150214114748j:image

積み木を置くと、同じ色の積み木が色に合わせて川や道路としてつながっていく。

天井からプロジェクタとkinect2らしきものが。

f:id:itog:20150214114820j:image

小人が住まうテーブル

f:id:itog:20150214114001j:image

動きまわる小人を手で助けたり邪魔したり。「積み木列車」と同様kinect2。

f:id:itog:20150214114026j:image

メディアブロックチェア

普通の状態の写真を撮り忘れてしまったが、ブロック同士を横か上下につなげると色が変わるというもの。裏面にいろいろついてるけど、これだけだとどんなセンサを使ってるかは判断できない。

f:id:itog:20150214113200j:image

光のボールでオーケストラ

f:id:itog:20150214115149j:image

色が変わる光のボール。加速度センサとかかな。

3Dお絵かきタウン/お絵かき水族館

f:id:itog:20150214112638j:image

お絵かきをしたらスキャナでスキャン。

f:id:itog:20150214112834j:image

2015-02-14

8pino使ってみた

f:id:itog:20150214211418j:image

8pinoはVITROが開発する世界最小クラスのArduino互換ボードです。

昨年末に手に入れていたので使ってみました。だいたいマニュアルに書いてある通りです。

開発環境をインストール

Arudinoの開発環境(IDE)Arduino Softwareをインストールします。Adruino Softwareには公式のもの以外に亜流のものがあって、8pinoの場合はAdafruit Arduinoを使います。

Adafruit Arduinoは以下からDLできます。

https://learn.adafruit.com/introducing-trinket/setting-up-with-arduino-ide

DLしたらzipを解凍してAdafruit Arduinoを実行します。

Macの場合、設定によってはSecurity & Privacy設定で許可する必要があります。

Arudino Softwareを起動したら、メニューから以下を設定します。

Tools->Board->Adafruit Gemma 8MHz
Tools->Programmer->USBtinyISP

接続

microUSBケーブルに8pinoを接続します。端子が接触する向きを確認して接続しましょう。

f:id:itog:20150214200549j:image

microUSBコネクタを上の辺が長い台形として見た場合にICが下にくる向きです。

f:id:itog:20150214200720j:image

書き込み

8pinoではIOポートがUSBと共用になっているので、書き込みは動作中にいきなり書き込むことは出来ません。以下の手順で書き込みを行います。

  • Arduino Softwareでスケッチを書く
  • Verifyでエラーがないことを確認
  • USBケーブルをPCから抜く ※micro端子から8pinoを抜くことは推奨されていない
  • USBケーブルをPCに挿す
  • Arduino Softwareでuploadしてスケッチを書き込む

スケッチ

公式サイトにあるLチカと、スイッチでのLED ON/OFFスケッチを実行してみました。以下スケッチで0番ピンをGNDにショートさせるとLEDが点灯します。

#define PIN_LED 1
#define PIN_SW 0

void setup() {
  pinMode(PIN_LED, OUTPUT);
  pinMode(PIN_SW, INPUT_PULLUP);
}

void loop() {
  if (digitalRead(PIN_SW) == LOW) {
    digitalWrite(PIN_LED, HIGH);
  } else {
    digitalWrite(PIN_LED, LOW);
  }
  delay(10);
}

digitalRead()/ digitalWrite()が期待通り動作することが確認出来ました。


注意点としては、8pinoのmicroUSBは挿抜耐久回数が少ないのでUSBの抜き差しを多様する用途には使えないのと、ヘッダピンでも付けない限りパーツをあれこれ試すというような用途にも向いていない。

開発にはAdafruit Trinket 8MHz (3.3v logic)を使い、見せる用にパッケージを小型化するために8pinoを使う、といった使い方が想定されます。

2014-12-08

Genymotionがadbで認識されない場合の対処

Genymotionでadbで以下エラーが出てデバイスが認識されない場合があります。

$ adb devices

adb server is out of date. killing...

cannot bind 'tcp:5037'

ADB server didn't ACK

adbでデバイス認識しない場合にまず試すkill-server, start-serverをしても同様のエラー。

$adb kill-server

$ adb start-server

adb server is out of date. killing...

cannot bind 'tcp:5037'

ADB server didn't ACK

これはadbが古いために起こるエラーです。Genymotionの設定によって2パターンの原因、解決方法があるので設定画面からADBタブを選択します。

f:id:itog:20141208153554p:image

1.Genymotionのadbが古い

上記設定画面で、「Use Genymotion Android tools」にチェックが入っている場合、genymotionに同梱されているadbが古いので、Genymotionを最新の2.3.1以降にするか、/Applications/Genymotion.app/Contents/MacOS/tools/adbを最新のものに差し替えます。

以下のようにシンボリックリンクを張っておくのが良いです。

$ cd /Applications/Genymotion.app/Contents/MacOS/tools/

$ mv adb adb.bak

$ ln -s $SDK_ROOT/platform-tools/adb adb

2. 参照しているadbが古い

「Use custom Android SDK tools」にチェックが入っている場合、設定したパスにおけるadbが古い場合があります。パスが正しいか確認し、SDK ManagerでAndroid SDK toolsを最新にしましょう。


以上です。

あわせて読みたいブログパーツ テクノラティのお気に入りに追加する