デザイナー向けプログラム部の第2回デザイナー x エンジニアハッカソンに参加してきました。
事前勉強会にて決定したペアと一緒にハッカソン。私はエンジニア枠で参加してまして、パートナーのデザイナーさんは、@kkotaro0111さん。
会場はいつものKDDIウェブコミュニケーションズです。今回はハッカソンということもあり、とにかく時間が足りないので本当に作ることだけに集中した結果、当日の写真をほとんど撮っていないことに気付きました。ウッカリ!
当日のtogetter
hashtagは#p4dhackでした。togetterのまとめにまとめておきました。よろしければどうぞ。
作ったもの
勤怠戦隊キンタインという勤怠管理アプリを作成しました。
facebook、twitter、githubのいずれかのアカウントでログインすることで、家出た時間、会社ついた時間、会社出た時間、家ついた時間を記録していくアプリです。
現在は、mixiアカウントでのログインも対応しました。
p4dhackの懇親会がピザということで、なぜかピザを食べたボタンも実装しました。以下のようにログイン後の画面でボタンを押すだけで記録されます。
記録した勤怠データは以下のように記録されます。謎のチャートは青が家にいる時間、黄色が移動時間、赤が社畜勤務時間です。
事前準備
パートナーさんとアイデアを練る時間がとれなかったのもあり、とりあえずアイデアを色々出す作業をしました。10個ぐらい適当につぶやいていたものの中から、前日あたりに、「家出た時間、会社ついた時間、会社出た時間、家ついた時間だけを登録するアプリ。」で行こう!ということになりました。
そして夜と行きの電車で作ったのがこの辺
- 何となく仕様
- 画面一覧
- ログイン周りの実装
何となく仕様
こんな感じで、ものすごくざっくり。仕様と書きつつ何故かテーブル設計もしました。この中から出来るところだけに集中という感じです。
仕様
家出た時間、会社ついた時間、会社出た時間、家ついた時間だけを登録するアプリ。
共通
- ログインする
イベント記録
- イベントを選択する
- [記録]ボタンをクリックする
- 〜にも通知する?みたいなのでfb, tw連携
イベント閲覧
- 日別
- 月別
フォロー
- 友達をフォローとか?
タイムライン
- 友達の勤怠?
fb連携
- open graph action対応したい
table
- events
- id
- name
- user_id
- posts
- event_id
- user_id
- scope_id
- likes
- parent_type
- parent_id
- user_id
- scopes
- id(:public, :followee, :private)
- name
画面一覧
OmniGraffleで作成。超ざっくりだけど、@kkotaro0111さんと、手分けする際に、こんな感じで画面考えてます。というのを伝えるのには役に立ちました。
ログイン周りの実装
いつも作るところの割には久々に作ると、色々なgemのバージョンが上がっていたりして、ハマるところなので前日に実装。mixi対応までしたかったのですが、昔作ったwebサイトのときとoauth2バージョンが違い、うまく動かなかったのでwe love herokuと同じく、facebookとtwitterとgithub対応としました。
heroku の準備
herokuにアプリ作成しておきます。
heroku create kintain -s cedar
heroku addons:add newrelic:standard heroku addons:add pgbackups:plus heroku addons:upgrade pgbackups:auto-week
heroku labs:enable user_env_compile heroku config:add RUBY_VERSION=ruby-1.9.3-p125
当日の作業
スケジュール
9:00〜 スタッフ集合会場準備
9:30〜 開場・受付
10:00〜 趣旨・スケジュール・開場説明など @satococoa
10:15〜 開発
18:00〜 成果発表LT
18:30〜 懇親会
20:00 撤収
各SNSのアプリを作成する
本番用は前日の準備で出来ていたのですが、パートナーさんにもローカル環境で動作させてもらうために以下の3サイトからアプリ作成をお願いしました。
git cloneしてもらう
こんな感じでお伝えしました。
mkdir work # お好きなところ cd work git clone git://github.com/ppworks/p4dhack.git bundle --path vendor/bundle --without production
ローカルで動かす
database準備
mysql-serverを入れてもらったりしたのですが、これは出来ればsqliteが良いだろうなと思ってます。
rake db:create rake db:migrate
rake db:migrate
はハッカソン中に、何度も使うことを伝えておきました。
サーバー起動
各SNSのOAuthコンシュマーキーやコンシュマーシークレットが必要なので、それらを環境変数にセットしておきたい、というわけでforemanを使いました。
.envに以下のように記述してもらい
RACK_ENV=development FB_APP_ID=xxxx FB_APP_SECRET=xxxxx GH_APP_ID=yyyy GH_APP_SECRET=yyyyy TW_APP_ID=zzzz TW_APP_SECRET=zzzzz
以下のコマンドで起動してもらいます。
foreman start
作業タイム
10:30〜11:00
まずは環境構築をして、デザイナーさんの環境でもローカルでアプリが起動するところまでを作業しました。
11:00〜12:00
先の画面イメージを見せて、どの順番で機能を作りどんなページを作成して行くかをすり合わせながら作業。
12:00〜12:40
カレー食べた
12:40〜18:00
とにかく作業。まじ作業。周りの人と懇親的なことをする余裕がまったくなかったです。10:00に会社来たら、まだ何も作ってないシステムの顧客レビューが18:00に行われるというのを聞いた体で作業にいそしみました。ヤバい、時間ない!
18:00〜
発表。みんなの発表を聞きたかったので、作業は完全にストップさせました。以下のwebサービスが発表されました。
- comugi @satococoa x @coddledegg
- o-giri @naoty_k x @murokaco
- taskwell @tyabe x @retemo
- キンタイン @ppworks x @kkotaro0111
- weego @shu_0115 x @s_katsushima
- lunchtime @hyshhryk x @averagefury
- JogCalc @u1tnk x @mahohori
- FrontLine @amesel)) x @machida
- imakita @japboy x @ken_c_lo
- rails講座 @yotii23 x @inner_village
- Hakolog @r7kamura x @naoaky27
- deep "EXP" RECORD @tkawa x @honma_tora
- TREMU @quattro_4 x @binoske
- Ohanashi Shitter @jinho x @akrong_world
- た
て
が
き
言
葉 @iR3 x @yukiferret
twitterを見た限りでのurlを露出されていた方々のサービスにリンク貼ってあります。まずい場合は外しますので、@ppworksまでご連絡下さい。逆にリンク貼っても良い方いたら、url教えて欲しいです。
というわけで、その後は懇親会だったのですが、疲れすぎてあまり懇親出来なかったのがもったいないなかったなぁ自分。という感想。
当日の声
#p4dhack 勤怠戦隊キンタイン これは流行る twitpic.com/9f4k6g
— Kojiro Kamikawaさん (@K_Kamikawa) 4月 29, 2012
キンタインすてきです!!!!つかいます!@ppwork @kkotaro0111 #p4dhack
— あ子さん (@akrong_world) 4月 29, 2012
ktkr
その後
発表のタイミング残っていたbugやら、やり残し作業は後日じゃ絶対やらなくなるという確信があったのでその日の夜までスタバとか自宅とかで終わらせました。そう考えるとハッカソンの時間 x 2ぐらいが全体の作業量だったのかも知れません。
追加した機能
GW中にいくつか機能追加してます。
- 日別のページデザイン
- mixiアカウントによるログイン
- 各イベントのラベル変更
- ポストした内容の閲覧権限を設定
日別のページデザイン
mixiアカウントによるログイン
無理やりボタン追加したので大変なことになってます。あと2つ連携先を追加してごまかす方法で何とかしたいです。googleとhatenaとか?
各イベントのラベル変更
当日もラベル変えたいという意見をそれなりに頂いていたと言うのと、最初から本当は作りたかったというのもあり実装しました。
これで、「会社に着いた」を「チャリで来た!」に変えて見たり、「ピザ食べた」も「ピザ食べてない」に変えれば、「ピザ食べた」のtwitter連携後も、わざわざ「食べてない」とtwitterでつぶやかないで済みますね。
ポストした内容の閲覧権限を設定
勤怠の内容って、人に見えていいのだろうか?という疑問もあり、閲覧権限を変更できるようにしました。privateにしているときには、post時のfacebook連携、twitter連携もチェックボックスを出さないようにしています。みんなに見えちゃうのはちょっと、、、と思って居た人も、これで安心して使えますね!
やり残し作業
https://github.com/ppworks/kintain/issuesに色々ご意見・ご要望を貯めてます。#kintain つきでつぶやくか、@ppworksか@kkotaro0111さん当てにメンションを下さい。
心配
あれに似ているので
今、俺の一番の懸念事項は、 #kintain のボタンデザインがゴレンジャーを元にしている、という点。版権的に大丈夫だろうか。
— 川嶋 光太郎さん (@kkotaro0111) 5月 1, 2012
思ったこと
- 1日で作れると思ったものは作れない
- というのは予想していたので3時間ぐらいで作れるものを考えていきました
- 1時間で作れると思うものを作ろう
- railsは楽しい
- 開発は楽しい
- ハッカソンは楽しい
- デザインが吹き込まれた瞬間、もうサービスとして成り立ちそうな感じがする
- p4dは素晴らしい
というわけで、次回も楽しみです。
最後になりましたが、パートナーの@kkotaro0111さんお疲れさまでした!本当に楽しく作業出来て良かったです。
またこのような機会を作って下さったp4dの皆様感謝しております。