Heroku

前にこのサイトでも紹介させていただいたmyGengoハッカソンが楽しかったので、またエンジニアとデザイナが集まって何かを作るっていうハッカソンをやりたいなー、と思ってたTweetしたところ、Lokkaのコミッタもやってくれてるエンジニアのsatococoaさん、エンジニアのmgさん、株式会社シロクロの社長さんでデザイナの伊藤さんがお付き合いいただけることになり、四人でハッカソンをやりました。

当初はエンジニアとデザイナの二人組を二つ作ってタッグマッチにしようかなーと思ってたんですが、結構やることが多いので四人ひとつのチームになって一つのものを作ることにしました。これが今回の場合上手くいって、ちゃんと一日でリリースまですることができました。

詳しい話はsatococoaさんのブログ、mgさんのブログにも載ってますが、一応KUROIGAMENでもレポート。

集合〜ブレスト

場所は伊藤さんのメインマシンがiMacということもあって、株式会社シロクロさんのオフィスを使わせていただきました。デザイナはデスクトップで作業をする人が多いので、こういった作業をする集まりのときは、マシンを外に運べないということがネックになってしまうんですよね。幸い伊藤さんは自分のオフィスを持ってらっしゃるのでこの問題はクリア。休日だというのに朝10:00に集まってもらいました。

続いて自己紹介。まぁ、今は実際にお会いしたことなくてもTwitterやBlogでお互いのことは既に知ってる、ってことがほとんど。自己紹介なんて特にいらない便利な時代になってきました。なので自己紹介はサクっと終了。

で早速、今日は何を作るか、についてのブレスト。それぞれが持ってるアイディアを発表したり、人のアイディアに自分のアイディアを追加したり、沈黙が数分なんてことはなく、割とあっさり作るものが決まりました。satococoaさんもmgさんも伊藤さんも普段から自分で何かを作ってる人なので、これから作るものに関しての作業量や作り方、画面図などをイメージをするのが得意な人ばっかりだったのが大きいです。特にデザイナは普段、仕様を考えたりすることがない人も多いかもしれないのですが、伊藤さんはバリバリ自分でphpも書いてしまうし、サービスも立ち上げてしまう、スペシャルなデザイナなので今回の企画にはぴったり。

で、ブレストの結果、mgさんの作っていたツイートを色やSVGに変換するツールを起点とした「ちょっと便利でおしゃれな」ツールを作ることにしました。

作業開始

当日の役割は、

• satococoaさん
  Sinatraで全体的なscaffoldを作る＋クライアント側のプログラミング（CoffeeScript）
• mgさん
  ツイートを数値やRGBに変換するモジュール、Twitterから発言を取得するメソッド
• 伊藤さん
  デザイン全般
• machida
  @9dさんデザインのhaml化（いわゆるコーダー）、gitやgithubのレクチャーなどの調整役

あれ？僕ってあんまり必要ないポジションかも...

僕の作業の流れ

まずは、伊藤さんが書いたラフスケッチを元に僕がHTMLを作成。その間に伊藤さんはPhotoshopで画面デザイン。伊藤さんのpsdをSkypeで送ってもらって、HTMLにCSSを追加。

HTMLとCSSの大枠ができたところで、satococoaさんのSinatra部分が完成。Githubにあげてもらったものをclone。それをHamlでviewに組み込みつつ、push & pull。pullをする度に機能が実装されていてわくわくしてきます。

その間、伊藤さんはTOPページのデザイン。アイコン作成やLoadingの画像作成も。せっかくなので、TOPページは伊藤さんにHamlでコーディング、画像もGit addしてもらうってことに。元々伊藤さんのMacにはXcodeもGitもインストールされていたので、RVMを入れてRuby1.9.2を入れて、Gemsetを作って、git cloneしてアプリをローカルで立ち上げる環境構築はあっさり終わり、伊藤さんにもgitを使った共同開発に加わってもらいました。伊藤さん、Hamlの書き方は一瞬で理解するし、すぐにgit commitもgit pushもできるようになるし、さすがでした。

完成

途中、お昼休憩に出て、あとはひたすら黙々作業。完成したのは結局20時過ぎでした。完成したのでみんなで最後の仕上げに完成告知のTweet。かなりクタクタになりましたが、楽しい一日でした

Masher*

URL : http://masher.heroku.com/

※このツールはTweetをプロジェクターで映すことだけに特化しているので、スクロールもクリックもできません。

まとめ

Heroku、Githubはやっぱりすごい、ってこと。リポジトリを一瞬で作れて、数秒でデプロイしてリリースできる。これらがなかったら一日でサービスをリリースするなんてなかなか出来ないですよね。やっぱりデザイナも黒い画面を使ってHerokuとGithubを使えるようになったほうがいいです。

myGengoハッカソンのレポートでも書きましたが、やっぱり成果物が生まれるイベント、実際に手を動かすイベントは楽しいです。手を動かしながらコミュニケーションするって、飲み会で話すよりも短時間で深く仲良くなれるし効率もいいですね。さすがにクタクタになるのでしょっちゅうは出来ないですが、引き続きエンジニアとデザイナのハッカソンを続けていきたいと思います。

あと、mgさんの作っていた文章を色やSVGに変換するツールをもっと手軽に色んなところで使えるようにplugin化して欲しいなー、と思いました。

宣伝

今回会場をお貸しいただいた株式会社シロクロさんのサービス「KOYOMI」。カレンダー＋メモ帳のシンプルなスケジュール管理サービス。Googleカレンダーって複雑、って思う方や、手帳みたいにスケジュールを書き込みたい、って思う方にオススメのサービスです。

• 4696
• Github
• Heroku
• Sinatra

今回はRuby製のオープンソースのタスク管理システム、Redmine（レッドマイン）をサーバにインストールして使う、っていうのに挑戦してみたいと思います。サーバはHerokuなのでサーバ代は無料（無料とは言っても、Herokuは従量課金なので、あまりに使いまくってると有料ゾーンに突入する可能性があります、そこは自己責任で）。

RedmineをGithubからクローン

僕の場合、プロジェクトはMacの

HDD / ユーザ / machida / サイト

に入れてるので、まずはそこへ移動。

$ cd Sites

このディレクトリ内でKUROIGAMENではお馴染みの「git clone」でGithubにあるRedmineをローカルにクローン（複製）します。Heroku上で簡単に動くようにいじったRedmineがkomagataさんのGithubにあったので、今回はそれを使います。

komagataさんが作った redmine のブランチ 0.9.6-for-heroku

git clone git://github.com/komagata/redmine.git -b 0.9.6-for-heroku

すると、ディレクトリ「サイト」の中に「redmine」というフォルダが出来てます。

次にこのディレクトリへ移動。

$ cd redmine

とりあえずこれでRedmineのクローンは完了。

Redmine用のGemsetを作る

では、次にRVMを使ってRedmine用のGemsetを作ります。プロジェクトごとにGemsetを作っておくと、そのプロジェクトが不要になったときに、そのプロジェクトのために入れたGemも簡単に捨てることができるので、Macの中に不要なものが残らないのがメリットです。

$ rvm gemset create redmine

と打ってGemsetを作り、

$ rvm gemset use redmine

で、それを使う設定が完了。

Herokuにリポジトリ置き場を作る

Herokuに今クローンしたRedmineを置くリポジトリ置き場を登録します。ここで、いつもなら、「heroku create XXXX（リポジトリ名）」と打つのですが、前回書いた通り、HerokuのRubyのデフォルトが1.9.2になってます。Redmineは1.8.7でしか動かないので、「heroku create」をするときに、使うRubyのバージョンも指定します。

$ heroku create kuroigamen-redmine --stack bamboo-ree-1.8.7

この、

--stack bamboo-ree-1.8.7

の部分がRubyのバージョンを指定しているところです。

ちなみに、「kuroigamen-redmine」の部分がリポジトリ置き場の名前になるのですが、Heroku上に同じ名前のリポジトリ置き場は作れないので、別の名前を指定してください。

このときに

Could not find RubyGem heroku (>= 0) (Gem::LoadError)

「herokuっていうGemが見つからないよ」、というエラーが出ます。これは先ほど作ったGemsetに「heroku」Gemが入っていないからですね。なので、

$ gem install heroku

で、heroku gem をインストールしてから、

$ heroku create kuroigamen-redmine

「kuroigamen-redmine」のリポジトリ置き場がHeroku上に出来ました。Herokuの管理画面「My Apps」にも出来てます。

HerokuにPush

Redmineの場合は、まずはDB（データベース）を先にpushします。これは、Hrokuコマンドでデータベースの初期値を設定できないので、git clone したRedmineに梱包されてる初期化されたDBのデータをプッシュしてるそうです。

$ heroku db:push

すると、エラー発生。

sudo gem install taps

tapsっていうGemを入れてね、って言ってます。tapsは前にLokkaのDBをローカルに取ってくるにも出てきたGem。tapsはDBのやりとりに使うGemですね。

では、言われた通りに、

$ gem install taps

と打ちます。

入りました。

そうそう、何で「sudo」を付けないの？という疑問があるかもしれないですね。本来、Gemがインストールされる場所はMacの「sudo」を使わないと入れられない場所に入るのですが、RVMを使って、Gemsetを作って、そこにGemを入れる場合、そこは「sudo」をしなくてもいい場所なので、「sudo」を打つ必要がなくなります。

では、もう一回、

$ heroku db:push

「WARNING:」なんて怖そうなメッセージが表示されましたが、ここで怯えずに「type "kuroigamen-redmine"」のメッセージに従って打ちます。「kuroigamen-redmine」はHerokuでcreateした名前が出ますので人によって違います。

> kuroigamen-redmine

無事にDBをHerokuに送れました。なんか、このときターミナルに出てくるDBの名前の羅列を見てるだけでもRedmineって複雑そうなシステムって感じがする...。

では、いよいよ本体をHerokuにpush。

% git push heroku 0.9.6-for-heroku:master

今回はいつもの「git push heroku master」とはちょっと違うみたいです。

出来たので、早速URLにアクセスして確認。

出来た！

「ログイン admin / パスワード admin」で入れます。

Redmineの使い方は、

• Redmineの使い方

今回のRedmineはHerokuに立てたので、画像を添付するとすぐ容量オーバーしてしまいます。画像はRedmineにアップするのではなくGyazoやFlickrを使ってください。

訂正

cherenkovさんに間違えを見つけていただきました。ありがとうございます！

$ rvm gemset create redmine

と打ってGemsetを作り、

$ rvm gemset create redmine

で、それを使う設定が完了。

↓

$ rvm gemset create redmine

と打ってGemsetを作り、

$ rvm gemset use redmine

で、それを使う設定が完了。

• Heroku
• redmine