Github

前にこのサイトでも紹介させていただいた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