Hubotを使ってSlack、Hipchatと連携してみる。さらにGitHubへ

Hubotをインストールする

はじめてのHubot – Qiita
こちらのまとめがすごく良かったです。

Hubotを使うにはnode.jsとredisが必要なのでインストールする。
ぼくはnodeはnodebrewですでに入れているので、redisだけをbrewから入れる。

% brew install redis

redisの起動しておく。

% redis-server &

HubotのコマンドはCoffeeScriptで書かれているので、Hubotと一緒にインストールしちゃいます。

% npm install -g hubot coffee-script

あとは、Hubotの環境を作ります。

% hubot –create projectName

するとprojectNameというディレクトリが作られるので、

% cd projectName
% ./bin/hubot

でHubotのコマンドが打てるようになります。

Hubot> hubot ping
Hubot> PONG

PONGと返ってくればHubotが動いています。
個人的にはパグ画像を引っ張ってきてくれるコマンドが好きです。(パグかわいい!)

Hubot> hubot pug me

これもかわいい!gifの犬画像ヤヴァい!

Hubot> hubot animate me dog

HubotをHerokuにデプロイしSlackと連携してみる

基本的にはここに書かれていることをやるとうまくいく。
hubot-slack/README.md at master · tinyspeck/hubot-slack

すでにHubotはインストールしているので、

% npm install hubot-slack –save

だけ実行しておく。

ここからはHerokuにデプロイする方法になります。
hubot/docs/deploying/heroku.md at master · github/hubot

Herokuにログインする。

% heroku login
Enter your Heroku credentials.
Email: youremail@example.com
Password:
Could not find an existing public key.
Would you like to generate one? [Yn]
Generating new SSH public key.
Uploading ssh public key /Users/you/.ssh/id_rsa.pub

Herokuにデプロイするためにgitリポジトリを作る。

% git init
% git add .
% git commit -m “Initial commit”

Herokuアプリケーションを作る。
redisを使うのでアドオンも追加しておく。

% heroku create my-company-slackbot
$ heroku addons:add redistogo:nano

ここでアプリケーションのURLが作成される。

HerokuへのデプロイファイルのProcfileを編集する。

web: bin/hubot –adapter slack

HubotとSlackをIntegrationさせる。

Team Integration | Frontend-Team Slack
こちらより、追加させる。

% heroku config:add HEROKU_URL=自分のHerokuアプリケーションURL
% heroku config:add HUBOT_SLACK_TOKEN=HubotとSlackをIntegrationしたときに表示される
% heroku config:add HUBOT_SLACK_TEAM=HubotとSlackをIntegrationしたときに表示される
% heroku config:add HUBOT_SLACK_BOTNAME=HubotとSlackをIntegrationしたときに表示される

忘れちゃいけないのが、Service Configuration先ほど作ったHerokuのアプリケーションURLを入れる。
これを忘れるといっこうに連携されない。

最後にHerokuにデプロイしてアプリケーションを起動すればOK!

% git push heroku master
% heroku ps:scale web=1

Slack上で

slackbot pug me

のようにコマンドを実行できるようなっているはず。
@はつけない。

HubotをHerokuにデプロイしHipchatと連携してみる

事前にHipchatでGroup Adminよりbot用のアカウントを追加しておく。
RoleはUserにしておいた。
Slackと違い、Hipchatは事前にユーザーを追加しておく必要があるみたいだ。

すでにHubotの環境があるので、そのまま続けてHipchatとも連携してみる。

hipchat/hubot-hipchat
基本的にはここのリンクの通りやるとうまくいく。

icu4cというのをインストールする必要があるが、すでに入っていたのでスキップした。

% brew install icu4c
% brew link icu4c

Hipchatと連携要のnpmをインストールする。

% npm install –save hubot-hipchat

Procfileに

web: bin/hubot –adapter hipchat

を追加する。
なので、slackの分を合わせると、

web: bin/hubot –adapter slack
web: bin/hubot –adapter hipchat

こうなる。

heroku config:add HUBOT_HIPCHAT_TOKEN=HipchatのAPIからtokenを作成する
heroku config:add HUBOT_HIPCHAT_JID=123_456@chat.hipchat.com
heroku config:add HUBOT_HIPCHAT_PASSWORD=アカウントのパスワード
heroku config:add HUBOT_HIPCHAT_ROOMS=123_hoge@@conf.hipchat.com

HUBOT_HIPCHAT_JIDはbot用に作ったユーザーのJabber IDです。
はじめ自分のJabber IDにしてて、まったくHubotが動かなくてハマりました。
XMPP/Jabber account settings

HUBOT_HIPCHAT_ROOMSが部屋のnameでなく、XMPP JIDなのでお間違えなく。

最後にデプロイすれば、自動的にHipchatにhubotユーザーが追加される。
追加されなければ何かが間違っている。

もしかすると、Roomのパーミッションをopenにしてないと追加されないかもしれない。
追加されたあとにprivateにすればよい。

% git push heroku master
% heroku ps:scale web=1

ちなみにHubotのコマンドはすごい量が公開されているので、必要ならこちらから取り込もう。
hubot-scripts/src/scripts at master · github/hubot-scripts

なかでも、hubot-scripts/src/scripts/zombies.coffee at master · github/hubot-scriptsがきになるが、コードを見ると特定の画像をrandomで出してるだけだったw

HipchatとGithubを連携させる

連携メモ – 優々自適
こちらの記事のとおりだが、一点気をつけるところは、

GitHub Integration – Help Center

RoomがXMPP JIDではなく、単純にRoom名なところ。
ここでもちょいとハマった。

GitHub実践入門 ~Pull Requestによる開発の変革 (WEB+DB PRESS plus)
大塚 弘記
技術評論社
売り上げランキング: 465

WebStormショートカット・機能メモ

今まではVimJavaScriptを書いていたんですが、WebStormも結構使っていて、ここ最近はWebStorm一本でJavaScriptを書き始めているので、
良かったなーというショートカットや機能をメモっていこうと思います。

ただやはりVimならこれできるのにーとモジモジすることは多々あります。

またショートカットの設定は、WebStormの設定にあるKeymapからできます。

WebStormってなあに?という方はWebStorm指南書こちらのすばらしいスライドを一読されると、おーーってなると思います。

Command + J

LiveTemplate一覧

TextMateのようにタブで保管できる候補が一覧で出てきます。
あれ、どんな候補あったっけ?というときに特に便利です。

Command + W (独自コマンド)

タブを閉じる

WebStormはデフォルトでこのコマンドでタブが閉じないので設定した。

Keymap Editor TabsのClose

Command + Shift + ], Command + Shift + [ (独自コマンド)

タブの移動

これもよく使うので設定した、Chromeとかと同じ方法での移動。

Keymap Editor TabsのSelect Next Tab
Keymap Editor TabsのSelect Previous Tab

Shift + Option + ↑ (独自コマンド)

Caret内の文字を選択、ダブルコートの中身とか、HTMLのタグの中身とか。
Vimっぽい機能としてこれは必須でした。
複数回実行すると選択の範囲が大きくなっていく。
なので、ハッシュの中身を選択もできる。

Eclipseと同じ操作のショートカットにした。

Keymap Select Word at Caret

Shift + Option + ↓ (独自コマンド)

Caret内の文字を選択の解除
選択が行き過ぎた場合にこれで戻れる。

Shift + Option + ↑の逆版

Keymap UnSelect Word at Caret

Command + Shift + O (独自コマンド)

ブラウザの起動

書いているHTMLをすぐに開きたいときに、わざわざブラウザのほうにHTMLファイルをドラッグとかしたくないので設定した。

Keymap ViewのOpen in Browser

Option + F2

どのブラウザで選ぶかのリストが出て、エンターでそのブラウザを起動

Command + Shift + Oでも十分なんですが、他のブラウザでも見たい場合に便利。
設定のWeb BrowsersでActiveにしとかないとリストに出てきてくれないので注意。

Keymap ViewのWeb Preview

Command + E

Recent Files

最近開いたファイルをリストで表示してくれるので、これも結構使います。

Keymap ViewのRecent Files

Command + 1

Project Tool Windowを表示

つまりファイルエクスプローラーのペインに移動。
目的のファイルでエンターを押し、Escでエディターペインに移動できる。
Recentのほうでは探せなさそうなときはこっちを使っている。

Keymap ViewのTool WindowのProject

Command + 7

Structure Tool Windowを表示

これもよく使うコマンドで、ファイル内のStructure情報を表示してくれる。
エンターでその定義メソッドなどに飛べて、さらにこのペイン内ではインクリメントサーチができるので、飛びたいメソッド名がわかる場合は少しタイプするだけで目的の場所に飛べる。

Keymap ViewのTool WindowのStructure

Command + Shif + A

アクション一覧を表示

操作したいアクションのコマンドを覚えていない場合は、これで一覧表示エンターで起動できる。
これすごく便利、TextMateにもSublime Textにもありますね。

Keymap HelpのFind Action

Command + B

定義場所に移動

もっともよく使うコマンドかもしれない。
さらに、これがWebStormの強みでもある。
メソッドやプロパティの定義場所に移動してくれる、さらにファイルもまたがっていてもOKだし、プロジェクト内のJavaScriptファイルはインデクシングされているので、jQueryなどの
ライブラリにももちろん飛べる。

そして、候補がいっぱい出てきたときは、ファイル名をタイプすればインクリメントサーチしてくれる!

Keymap NavigateのDeclaration

Option + F7

関数変数の利用箇所を検索

これもWebStormの便利機能、このメソッドどこで使われているのかなーというときに使います。

Keymap FindのUsages

Shift + F6

Rename

よく使うリファクタリングのRenameです。
WebStormの協力なのはこのリファクタリングがすごいですよね。

後になって、やっぱりこのメソッド名嫌だなーと思った場合、他のエディターで直すのは大変ですが、WebStormなら一発!

Keymap RefactorのRename

Command + Option + T

クイックタグ編集

選択範囲を囲むようにHTMLタグを生成できます。
もちろんZenCodingも可能。

Surround.vimのようにダブルコートとかで囲えたらいいのになー

Keymap CodeのSurround With

Command + Option + L

コードフォーマッター

一発でコードをキレイにしてくれるので、これはコード書いては実行しています。

Keymap CodeのReformat Code

Command + Shift + Enter

現在いるステートメントで最適なコードを保管してくれる

ifやforとタイプしてこのコマンドを打つと()やら{}を保管してくれる。
ただ普段はCoffeeScriptを書いているので、このコマンドはあんまり使わなくなってきてしまいました。

Keymap Complete Current Statement

Option + Enter

へんてこなコードのところには電球のマークが出ますが、ここでこのコマンドを実行するといい感じに修正してくれる。
AppCodeではほんとこのコマンドを多様する。

F11

ブックマーク

Shift + F11でブックマーク一覧が出てきます。
AngularやBackboneなんかを今コードリーディングしているんですが、いろんな箇所でブックマークしてあとから見ることが多々あるので重宝します。

Open URL

Command + Shift + AでOpen URLと入力すると速いが、入力したURLのHTMLをWebStorm内に表示してくれるので、
サクッとWebStorm上で目的のサイトのHTMLを見たいときに便利。

LiveTemplateを自作して速くコーディングする

High-speed coding with Custom Live Templates | WebStorm & PhpStorm Blogここの記事を読むとだいたいわかりますが、TextMateのようなタブで保管する機能をもっと自分オリジナルなもの追加したい場合にLiveTemplateを使います。

キーボードリファレンス

WebStorm_ReferenceCard.pdfからpdfをダウンロードしとくといつでもショートカットが一覧で見れる。
ありがたい!

Oh my gosh!zshをいい感じにしてくれるoh-my-zshがいいね!

いままでzshを使っていたのに、robbyrussell/oh-my-zsh · GitHubを知らなかったので導入してみた。

oh-my-zshをインストールする

curlで一発でoh-my-zshを入れてくれるみたいなんだけど、もう何が入ったのかさっぱり分からないので、これはあまりオススメできない。

curl -L https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh | sh

なので、gitから落として各種ファイルを配置する。

# gitからcloneする
git clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh-my-zsh

# すでにある.zshrcファイルをリネーム
mv ~/dotfile/.zshrc ~/dotfile/.zshrc.orig

# oh-my-zshからtemplate用の.zshrcファイルをコピー
cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc

既存の.zshrcを反映させる

.oh-my-zsh/customの下に自分の.zshrcを置くと読みこんでくれるんですが、拡張子を.zshにする必要があります。
また.zshを置くときに .zshrc.zshにようにファイルの先頭にドットがあるとうまく読み込んでくれなかった。

ln -s ~/dotfile/.zshrc.orig ~/.oh-my-zsh/custom/zshrc.zsh

テーマを変えてみる

.oh-my-zsh/themesの下にテーマが盛りだくさん!
とりあえずファンキーな僕にちなんで funky にしてみた。

コンソールの表示はこんな感じ。

╭─[~]─[hisasann]─[0]─[5984]
╰─[:)] %

参考リンク

zsh最強シェル入門
zsh最強シェル入門
posted with amazlet at 13.01.29
中島 能和
翔泳社
売り上げランキング: 557,668

iPhoneアプリをAdHocアプリとして配布するのは実は超絶簡単だった

はじめ、
Xcode4でのAdHocアプリ(ipa)の作成方法詳解 – iPhoneアプリ開発まっしぐら★ – iPhoneアプリ開発グループ
こちらの記事を参考にしてやっていたのですが、すぐに
じつはもっと簡単なAdHocアプリ(ipa)の作成方法があった件… for Xcode4 – iPhoneアプリ開発まっしぐら★ – iPhoneアプリ開発グループ
こちらの記事を見て、すごく簡単ということでここにもメモしておきます。

事前に、

  • Distribution用のプロビジョニングファイル
  • プロビジョニングファイルを作った人のMac上で作られた秘密鍵ファイル(証明書.p12)

をMacにインストールしておく。

  1. XCodeのOrganizerを開きます
  2. Archivesを開きます
  3. Distributeボタンを押す
  4. Save for Enterprise or Ad-Hoc Deploymentにチェックを入れる
  5. Code Signing IdentityにDistribution用のプロビジョニングファイルをを選択する
  6. ipaファイルの保存場所を決める

これだけ。
プロビジョニングファイルをこちら側で用意できない場合はこの方法が使えます。

iPhoneアプリ開発塾
iPhoneアプリ開発塾
posted with amazlet at 12.10.29
カワサキ タカシ
技術評論社
売り上げランキング: 2513

TitaniumMobile2.1.2とXCode4.5でハングした場合の対処

ちょっとハマったんですが、このバージョンでTiのRunConfigを開いたり、iOS Deviceで起動をするとXCodeとともにハングしてしまって強制終了するしかなかった。

結論としては、XCodeのCommand Line ToolsUpdateしたら直りました。
そうかーと、たしかにTiはこれを使っていると思うので、ここのバージョンアップが必要でした。

TitaniumMobile2.1.2とXCode4.5でハングした場合の対処

ふだんiOSアプリ作っているときは気にしないですもんね。

気がついたらiPhone5、iOS6対応されてた

  • iOS — Support for iOS 6 and XCode 4.5.
  • iOS — Addition of new API for authorization to access contacts.
  • iOS — iOS 6-specific fixes for issues surrounding labels, text fields, audio and layout.
  • via: Titanium SDK 2.1.3 Is Released « Appcelerator Developer Center

    Titanium SDK 2.1.3 Is Released « Appcelerator Developer Center

    iPhone5で試してみたら、ちゃんと縦長でした!

    気がついたらデフォルトアプリのサイズが7.1MBになってた

    ちょっと前まで5MB近くだったような気がするんですが、iOS6分が増えたからなのかただのSingle Windowなアプリが7.1MBになっていた。
    このサイズはちょっと使うのを悩むレベルですね。

    7.1MBあれば、それ相応なアプリが作れてしまうので、さらに画像を使うと平気で10MB超えてしまう。

    AppCodeメモ – ショートカットなどなど

    option + enter

    コンパイルは通って実行もできるんだけど、ちょっとアレだよと教えてくれるAppCodeの機能でCheckStyleのように黄色い下線が表示される場合があるんですが、
    この場合、自動で最適な状態にしてくれます。

    この機能を呼び出すショートカット。

    // CGFloatが返ってくると過程すると、キャストしてくれと忠告がでる
    NSInteger width = image.size.width / 2;
    

    自動で (NSInteger) を付けてくれる。

    // NSIntegerでキャストする
    NSInteger width = (NSInteger) image.size.width / 2;
    
    詳解 Objective-C 2.0 第3版
    詳解 Objective-C 2.0 第3版
    posted with amazlet at 12.10.16
    荻原 剛志
    ソフトバンククリエイティブ
    売り上げランキング: 7060