P4Dハッカソン( #p4dhack ) に参加して勤怠戦隊キンタイン というwebアプリを作成しました。 #kintain

デザイナー向けプログラム部の第2回デザイナー x エンジニアハッカソンに参加してきました。

事前勉強会にて決定したペアと一緒にハッカソン。私はエンジニア枠で参加してまして、パートナーのデザイナーさんは、@kkotaro0111さん。

会場はいつものKDDIウェブコミュニケーションズです。今回はハッカソンということもあり、とにかく時間が足りないので本当に作ることだけに集中した結果、当日の写真をほとんど撮っていないことに気付きました。ウッカリ！

当日のtogetter

hashtagは#p4dhackでした。togetterのまとめにまとめておきました。よろしければどうぞ。

作ったもの

勤怠戦隊キンタインという勤怠管理アプリを作成しました。

f:id:naoto5959:20120506213334j:plain

facebook、twitter、githubのいずれかのアカウントでログインすることで、家出た時間、会社ついた時間、会社出た時間、家ついた時間を記録していくアプリです。

現在は、mixiアカウントでのログインも対応しました。

f:id:naoto5959:20120506213339p:plain

p4dhackの懇親会がピザということで、なぜかピザを食べたボタンも実装しました。以下のようにログイン後の画面でボタンを押すだけで記録されます。

f:id:naoto5959:20120506213346p:plain

記録した勤怠データは以下のように記録されます。謎のチャートは青が家にいる時間、黄色が移動時間、赤が社畜勤務時間です。

f:id:naoto5959:20120506215945p:plain

事前準備

パートナーさんとアイデアを練る時間がとれなかったのもあり、とりあえずアイデアを色々出す作業をしました。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さんと、手分けする際に、こんな感じで画面考えてます。というのを伝えるのには役に立ちました。

f:id:naoto5959:20120506204631p:plain

ログイン周りの実装

いつも作るところの割には久々に作ると、色々な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サービスが発表されました。

f:id:naoto5959:20120429195533j:plain

twitterを見た限りでのurlを露出されていた方々のサービスにリンク貼ってあります。まずい場合は外しますので、@ppworksまでご連絡下さい。逆にリンク貼っても良い方いたら、url教えて欲しいです。

というわけで、その後は懇親会だったのですが、疲れすぎてあまり懇親出来なかったのがもったいないなかったなぁ自分。という感想。

当日の声

 

 

 

 

 

 

ktkr

その後

発表のタイミング残っていたbugやら、やり残し作業は後日じゃ絶対やらなくなるという確信があったのでその日の夜までスタバとか自宅とかで終わらせました。そう考えるとハッカソンの時間 x 2ぐらいが全体の作業量だったのかも知れません。

追加した機能

GW中にいくつか機能追加してます。

  • 日別のページデザイン
  • mixiアカウントによるログイン
  • 各イベントのラベル変更
  • ポストした内容の閲覧権限を設定

日別のページデザイン

f:id:naoto5959:20120506220005p:plain

mixiアカウントによるログイン

無理やりボタン追加したので大変なことになってます。あと2つ連携先を追加してごまかす方法で何とかしたいです。googleとhatenaとか？

f:id:naoto5959:20120506220411p:plain

各イベントのラベル変更

当日もラベル変えたいという意見をそれなりに頂いていたと言うのと、最初から本当は作りたかったというのもあり実装しました。

これで、「会社に着いた」を「チャリで来た！」に変えて見たり、「ピザ食べた」も「ピザ食べてない」に変えれば、「ピザ食べた」のtwitter連携後も、わざわざ「食べてない」とtwitterでつぶやかないで済みますね。

f:id:naoto5959:20120506220624p:plain

ポストした内容の閲覧権限を設定

勤怠の内容って、人に見えていいのだろうか？という疑問もあり、閲覧権限を変更できるようにしました。privateにしているときには、post時のfacebook連携、twitter連携もチェックボックスを出さないようにしています。みんなに見えちゃうのはちょっと、、、と思って居た人も、これで安心して使えますね！

f:id:naoto5959:20120506220639p:plain

やり残し作業

https://github.com/ppworks/kintain/issuesに色々ご意見・ご要望を貯めてます。#kintain つきでつぶやくか、@ppworksか@kkotaro0111さん当てにメンションを下さい。

心配

あれに似ているので

 

 

 

思ったこと

  • 1日で作れると思ったものは作れない
    • というのは予想していたので3時間ぐらいで作れるものを考えていきました
  • 1時間で作れると思うものを作ろう
  • railsは楽しい
  • 開発は楽しい
  • ハッカソンは楽しい
  • デザインが吹き込まれた瞬間、もうサービスとして成り立ちそうな感じがする
  • p4dは素晴らしい

というわけで、次回も楽しみです。

最後になりましたが、パートナーの@kkotaro0111さんお疲れさまでした！本当に楽しく作業出来て良かったです。

またこのような機会を作って下さったp4dの皆様感謝しております。