DECOPOCHIが出来るまで。COOKPAD主催 第4回「開発コンテスト24」で優勝しました。

COOKPAD主催 第4回「開発コンテスト24」で優勝しました。
はい。 http://info.cookpad.com/24contest4_award

24時間で発表されたテーマに沿ったプロダクトを作って応募しようというもの。
http://info.cookpad.com/24contest4

発表されたテーマは『年をとった自分が使うサービス』
作った作品は、 DECOPOCHI（デコポチ） という、オリジナルのポチ袋を作れるサービスです。

仲のいいwebデザイナ kentymmtさん と一緒に出てみるかぁという話になったのが始まりです。
1日でプロダクトを作るって結構面白くて、なかなか無い機会なので完成までの履歴をざっとskypeとgitのlogとともに紹介します。

赤裸々…///

当日デプロイでごちゃごちゃするのは嫌だなぁと思ったので、前日に色々と準備をします。
サクッとつくるのであればWebアプリだろうなと決め打ちでこの時点ですでにRailsのプロジェクトを作りました。
ruby 2.0.0-p195 / Rails 4.0.0.rc2 です。最新版大好き（＾ω＾）ﾍﾟﾛﾍﾟﾛ


[2013/06/14 11:17:39] Hisatake Ishibashi: 明日のためにそろそろ寝るかぁ
[2013/06/14 11:34:57] Kent Yamamoto: 今のうちにベースのテンプレート作っておくかぁ_(:3」∠)_
[2013/06/14 11:35:45] Hisatake Ishibashi: Railsのプロジェクト作る
[2013/06/14 11:37:21] Hisatake Ishibashi: bitbucketでいいかぁ


ここから始まりました。


[2013/06/14 12:06:33] Hisatake Ishibashi: /design/ 作ってる
[2013/06/14 12:08:54] Hisatake Ishibashi: デプロイ環境の準備だけしておくかぁ
[2013/06/14 12:30:06] Kent Yamamoto: ( ´ω`)ゞ


/design/とは、これはデザイナー（兼マークアッパー）の人と仕事するときによく使うんですが、/design/でhtmlをかけるようにします。
具体的な作業としては下記。

$ rails g controller design

config/routes.rb

Decopochi::Application.routes.draw do
  get '/design/:path' => 'design#index' unless Rails.env == :production
end

class DesignController < ApplicationController
  def index
    render "#{params&#91;:path&#93;}.html"
  end
end
&#91;/ruby&#93;

これで、 app/views/design/ 以下に hoge.htmlを作ると localhost:3000/design/hoge でアクセス出来る上に layout/application.html はそのまま読み込んでくれるのでデザイナー大助かりとの話です。皆さん良かったら使ってください。

&#91;shell&#93;
2013-06-14 12:05 Hisatake Ishibashi design
2013-06-14 12:02 Hisatake Ishibashi initail
&#91;/shell&#93;


<div class="timeline">前日 14:00</div>
昼ごはんを食べ終わったら、とりあえず開発環境と本番環境を準備

<code style="display:block;background: #d3dae1;">
[2013/06/14 14:17:31] Kent Yamamoto: gem install atomic -v '1.1.9ができない
[2013/06/14 14:17:39] Hisatake Ishibashi: (´；ω；｀)ﾌﾞﾜｯ
[2013/06/14 14:17:40] Hisatake Ishibashi: あれか
[2013/06/14 14:17:41] Hisatake Ishibashi: あれだ
[2013/06/14 14:17:56] Hisatake Ishibashi: ruby -v
[2013/06/14 14:17:59] Hisatake Ishibashi: おしえてくだしあ
[2013/06/14 14:18:39] Kent Yamamoto: ruby 2.0.0p0 (2013-02-24 revision 39474) [x86_64-darwin12.2.0]
[2013/06/14 14:18:57] Hisatake Ishibashi: rvm use ruby-2.0.0-p195 で
[2013/06/14 14:19:34] Kent Yamamoto: ﾃﾞｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!
[2013/06/14 14:20:27] Kent Yamamoto: ｳｺﾞｲﾀ━━━━(ﾟ∀ﾟ)━━━━!!
</code>

ここらへんで開発環境を揃えます。
これでデザイナーさんは安心して作業ができます。

次にインフラ構築です。

<code style="display:block;background: #d3dae1;">
[2013/06/14 15:00:17] Hisatake Ishibashi: ドメインはc.bucato.jpにしておくかぁ
[2013/06/14 15:27:52] Hisatake Ishibashi: 冷蔵庫開けたらビール落ちてきたので飲みますね
[2013/06/14 15:28:14] Kent Yamamoto: さっき一本のんだʅ( ´ω`)༿
[2013/06/14 16:18:41] Hisatake Ishibashi: http://c.bucato.jp/
[2013/06/14 16:18:43] Hisatake Ishibashi: サーバー出来た
</code>

ビールを飲みつつインフラ構築をします。
ここらへんはさすがに慣れてるのでさくっとAWSのインスタンス作って、
httpdやらrvmやらvimやらtmuxやらpassengerやらRailsやらmysql入れてインフラ構築完了。
これで前日は終わり。


<div class="timeline">コンテスト当日 9:00- ブレスト</div>
早速9時からブレストが始まります。

<code style="display:block;background: #d3dae1;">
[2013/06/15 7:45:13] Hisatake Ishibashi: ( ´ー｀)ﾌｩｰ．．．
[2013/06/15 9:01:44] Kent Yamamoto: ( ´ー｀)ﾌｩｰ．．．
[2013/06/15 9:02:01] Kent Yamamoto: 年をとった自分が使うサービスかぁ
</code>

いろんなアイディアが出ます。

<code style="display:block;background: #d3dae1;">
[2013/06/15 9:16:08] Kent Yamamoto: 老人時計
[2013/06/15 9:16:22] Kent Yamamoto: 毎日元気な老人の写真がpushで
[2013/06/15 9:17:07] Hisatake Ishibashi: デコ遺言
[2013/06/15 9:17:14] Kent Yamamoto: 遺言だょ（はぁと
[2013/06/15 9:18:08] Kent Yamamoto: 年をとった「自分」が使うサービスだからなぁ( ´ー｀)
[2013/06/15 9:19:01] Kent Yamamoto: お年玉かぁ
[2013/06/15 9:19:07] Kent Yamamoto: デコポチ袋
[2013/06/15 9:33:17] Hisatake Ishibashi: シャワー浴びながら考えるかぁ
</code>

開始20分で早速、今回のアイディア出ます。
ちょっと画面から離れて頭の中で一人ブレスト。

<code style="display:block;background: #d3dae1;">
[2013/06/15 10:05:38] Hisatake Ishibashi: 受賞履歴見てるとほのぼの系が受けるからやっぱりデコお年玉かなぁ
[2013/06/15 10:10:31] Kent Yamamoto: DECO POCHI
[2013/06/15 10:10:39] Kent Yamamoto: これ一個決まりで
[2013/06/15 10:10:45] Kent Yamamoto: もうちょい考えるかぁ
</code>

この時点でDECOPOCHIなら数時間で作れるかなぁと思い他のプロダクトを考えるために、この後もブレストは続きます。

<code style="display:block;background: #d3dae1;">
[2013/06/15 10:16:12] Kent Yamamoto: 歳をとっていく過程にフォーカスしても面白そうだけど
[2013/06/15 10:16:29] Kent Yamamoto: 自分の年齢+5くらいの人のニュースだけ集めてくるとか
[2013/06/15 10:12:31] Hisatake Ishibashi: 年齢下げるか 40〜50歳ぐらい
[2013/06/15 10:13:10] Kent Yamamoto: そのへんかぁ 一番イメージ湧かないな
[2013/06/15 10:26:43] Hisatake Ishibashi: だめだ 4,50代はだめだ脂っこい
[2013/06/15 10:26:49] Kent Yamamoto: ！！
[2013/06/15 10:27:23] Kent Yamamoto: ちょっと想像しにくい
[2013/06/15 10:29:32] Hisatake Ishibashi: うむ
[2013/06/15 10:29:38] Hisatake Ishibashi: おじいちゃんか
[2013/06/15 10:38:26] Kent Yamamoto: 孫の写真系は定番過ぎるよなぁʅ(´ω｀)༿
[2013/06/15 10:38:34] Hisatake Ishibashi: おじいちゃんが妻の写真を上げていく
[2013/06/15 10:39:07] Kent Yamamoto: 特定の嗜好の人に受けるな
[2013/06/15 10:39:23] Hisatake Ishibashi: クックパッドの中の人にそういう人がいれば….!!
[2013/06/15 10:40:02] Kent Yamamoto: ！
[2013/06/15 10:40:31] Hisatake Ishibashi: まぁでも情報共有系は出し尽くされてる感があるからなぁ
[2013/06/15 10:48:07] Kent Yamamoto: 老人毎日なにしてんだろなぁ。盆栽か
[2013/06/15 10:48:21] Hisatake Ishibashi: 盆栽かぁ
[2013/06/15 10:50:37] Kent Yamamoto: 盆栽の成長写真をgifアニメに
</code>

半分冗談を交えつつブレストしてました。
そろそろ案が出尽くしてDECOPOCHIを超えれなさそうだったので、一旦制作に入ります。
一旦、各自家作業を開始します。



<div class="timeline">コンテスト当日 11:20- 実装開始</div>
<code style="display:block;background: #d3dae1;">
[2013/06/15 11:21:18] Hisatake Ishibashi: とりあえずデコポチ作ってしまったほうがいいな
[2013/06/15 11:22:40] Hisatake Ishibashi: じゃあとりあえず作り始めで 一旦、家作業で
[2013/06/15 11:24:18] Kent Yamamoto: 12:30~13時くらいにランチmtgからのCHUBBYで
</code>

で、開始10分たちました。

<code style="display:block;background: #d3dae1;color: #ff6666;">
[2013/06/15 11:36:54] Kent Yamamoto: ロゴでｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!
[2013/06/15 11:37:00] Kent Yamamoto: ファイルlogo.pngをこのグループに送信しました
[2013/06/15 11:37:01] Hisatake Ishibashi: はやいｗ
</code>


爆速ですねー。ということで、logoが出来ました。さすがです。
僕も同時にcontrollerの作成だったりを開始。

[shell]
2013-06-15 14:15 kentymmt  come on
2013-06-15 13:56 kentymmt  エディター画面ベース
2013-06-15 12:38 kentymmt  topラフ
2013-06-15 11:38 Hisatake Ishibashi top and pochi
[/shell]


後は淡々と開発を進めます

<code style="display:block;background: #d3dae1;">
[2013/06/15 11:40:18] Hisatake Ishibashi: トップとポチ作成のコントローラーpushしますた(´ω｀)ゝ
[2013/06/15 11:40:25] Hisatake Ishibashi: app/views/home/
[2013/06/15 11:40:26] Hisatake Ishibashi: で
[2013/06/15 11:40:33] Hisatake Ishibashi: deco pochiは pc only で
[2013/06/15 11:45:39] Hisatake Ishibashi: db設計するかぁ
[2013/06/15 11:46:01] Hisatake Ishibashi: てか、画面遷移考えないとなぁ
[2013/06/15 11:46:51] Kent Yamamoto: トップ（新規作成ボタン）→作成→完成（jpg）的な
[2013/06/15 11:46:52] Kent Yamamoto: 的な？
[2013/06/15 11:47:07] Hisatake Ishibashi: それで
[2013/06/15 11:47:10] Hisatake Ishibashi: で、実際には印刷して
[2013/06/15 11:47:12] Kent Yamamoto: ぽち袋の展開図がpdfでダウンロードできて
[2013/06/15 11:47:29] Kent Yamamoto: プリントして切り抜いてのり付ければ使える的な
[2013/06/15 11:47:48] Hisatake Ishibashi: おｋ
<span style="color:#EF0000;">[2013/06/15 11:47:53] Kent Yamamoto: めっちゃええやん</span>
</code>

この時点で結構楽しげなサイトになりそうな予感は二人共感じてました。

<code style="display:block;background: #d3dae1;">
[2013/06/15 11:56:07] Hisatake Ishibashi: スタンプの座標とかをdbに組み込めればいいかなぁ
[2013/06/15 11:56:42] Hisatake Ishibashi: 他に追加したいものあります？
[2013/06/15 11:56:51] Hisatake Ishibashi: まぁ文言とかは手書きの方がいいだろうからスタンプのみで
[2013/06/15 11:57:33] Kent Yamamoto: おk
</code>

この時点でほぼ画面イメージの共有は終わりました。

<code style="display:block;background: #d3dae1;">
[2013/06/15 12:15:25] Hisatake Ishibashi: db設計出来たｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!
[2013/06/15 12:16:34] Kent Yamamoto: !
[2013/06/15 12:16:36] Kent Yamamoto: はやい
</code>

db設計を12時で終えました。後は機能の作り込み。
今回はフロントエンド重視で作ることになりそうだったので、jsのリサーチを開始。
jquery ui の draggableにビビる。

<code style="display:block;background: #d3dae1;">
[2013/06/15 12:58:03] Hisatake Ishibashi: D&Dはめんどいからクリックでいいか
[2013/06/15 12:58:04] Hisatake Ishibashi: クリックでコピーされる感じで作るんで
[2013/06/15 12:58:49] Kent Yamamoto: ﾋｮｰ
[2013/06/15 12:59:12] Hisatake Ishibashi: jquery draggableすごい
[2013/06/15 12:59:15] Hisatake Ishibashi: なにこれ
[2013/06/15 12:59:17] Hisatake Ishibashi: ビビる
[2013/06/15 12:59:18] Hisatake Ishibashi: ビール
</code>


<div class="timeline">コンテスト当日 14:00- 昼食後</div>
ここからは、skypeをやめて、お互いの家の近くのカフェ <a href="http://www.chubby.bz/">CHUBBY</a> に 昼ごはんを食べた後に集合。

設計が終わったので、実装を開始します。

20分で jquery ui draggable で 今回の肝となる js の配置のベースを実装完了。
それと並行して、 /design/ 以下で、画面のベースを kent さんが作成。
1時間ちょいで db に座標を格納する機能を実装
30分で 保存したものを編集する機能を実装。

その後 2時間ぐらいで /design/ にある html を実際のviewのロジックに組み込んで、細かいjsの調整とかを行いました。


[ruby]
2013-06-15 13:56 kentymmt           エディター画面ベース
2013-06-15 14:17 Hisatake Ishibashi ドラッグで位置を保存するjs部分出来たｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!
2013-06-15 15:03 kentymmt           favicon
2013-06-15 15:41 Hisatake Ishibashi ぽち袋のスタンプ配置ロジック
2013-06-15 16:15 Hisatake Ishibashi エディット機能とか
2013-06-15 17:59 Hisatake Ishibashi hoge

とりあえず、この hoge というどうしようもないcommitでひと通りの流れは完成しました。
この時点でPCの電源が結構尽きてきたので一旦家に戻って充電しつつ作業。

家に帰って実際に使ってみて、印刷までして組み立てたりしてニマニマしてました。
この時点で、ほとんど完成していたので もうひとアプリ作成をはじめます。
実はこのアイディアも11時ぐらいに出てたアイディアです。

「また来年」というサービスを作って提出してます。
こっちはあえなく落選しましたがｗ これはまぁあまり関係ないので割愛。


[2013/06/15 11:25:25] Hisatake Ishibashi: 同窓会自動幹事ツールとか
[2013/06/15 11:25:37] Hisatake Ishibashi: 毎年疎遠になっていくのを防ぐ的な
[2013/06/15 11:25:42] Hisatake Ishibashi: 又集まろうを
[2013/06/15 11:25:45] Hisatake Ishibashi: pushしてくれるサービス
[2013/06/15 11:26:43] Hisatake Ishibashi: 久々に集まって
[2013/06/15 11:26:50] Hisatake Ishibashi: 「来年もやろうよ！」ってなって
[2013/06/15 11:27:01] Hisatake Ishibashi: それのリマインダーを贈るだけのサービスよさそう


ここでテスターとして nacho を投入。


[2013/06/15 18:29:25] Hisatake Ishibashi: あれで
[2013/06/15 18:34:00] Hisatake Ishibashi: ナチョにdecopochi見せてみるかぁ
[2013/06/15 18:34:56] Kent Yamamoto: おk
----
[2013/06/15 18:35:00] Hisatake Ishibashi: http://c.bucato.jp/
[2013/06/15 18:35:04] Hisatake Ishibashi: できたよ
[2013/06/15 18:35:14] Yusuke Fujii: ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!
[2013/06/15 18:35:59] Hisatake Ishibashi: 使ってください
[2013/06/15 18:36:11] Yusuke Fujii: ！！
[2013/06/15 18:36:17] Yusuke Fujii: スタンプの消し方がわからない
[2013/06/15 18:38:10] Hisatake Ishibashi: はい
[2013/06/15 18:38:21] Yusuke Fujii: プリントページに行ったのに
[2013/06/15 18:38:29] Yusuke Fujii: 今までのデザインがなかったことに
[2013/06/15 18:38:54] Hisatake Ishibashi: ！！！！
[2013/06/15 18:38:55] Hisatake Ishibashi: ほんとや (´；ω；｀)ﾌﾞﾜｯ


と言った感じで、バグを洗い出してくれるなちょ。

その意見をひたすらbug fixだったり機能を洗練させたりして行きました。
commit logはこんな感じだんだんと適当になってきてます。

2013-06-15 19:54 Hisatake Ishibashi design 選択
2013-06-15 19:50 kentymmt           topの
2013-06-15 19:33 Hisatake Ishibashi editの色を選ぶの可変長化
2013-06-15 19:26 Hisatake Ishibashi （☁ω☁）ﾍﾟﾛﾍﾟﾛ bug fix
2013-06-15 19:24 kentymmt           （☁ω☁）ﾍﾟﾛﾍﾟﾛ
2013-06-15 19:20 Hisatake Ishibashi vanish
2013-06-15 19:13 kentymmt           背景
2013-06-15 19:07 Hisatake Ishibashi 色が消えるバグ
2013-06-15 19:05 Hisatake Ishibashi 削除
2013-06-15 18:54 Hisatake Ishibashi important
2013-06-15 18:48 kentymmt           文言変更
2013-06-15 18:43 Hisatake Ishibashi bug fix
2013-06-15 18:42 kentymmt           ＾ω＾）ﾍﾟﾛﾍﾟﾛ
2013-06-15 18:42 Hisatake Ishibashi bug fix
2013-06-15 18:40 Hisatake Ishibashi bug fix

晩御飯にバサノバのグリーンカレーラーメンを食べにいき再びCHUBBYへ。
別アプリの作成をしつつ、最後の微調整を終えてます。

2013-06-15 22:10 Hisatake Ishibashi bug fix
2013-06-15 22:04 kentymmt           微調整
2013-06-15 21:51 kentymmt           css
2013-06-15 21:49 kentymmt           文言
2013-06-15 21:44 Hisatake Ishibashi ドロップアンドドラッグ
2013-06-15 21:42 kentymmt           print
2013-06-15 21:26 kentymmt           戻るやつdone.
2013-06-15 21:25 kentymmt           戻るボタン等
2013-06-15 21:16 Hisatake Ishibashi bug fix
2013-06-15 20:54 kentymmt           印刷用ロゴの解像度

これでほぼ修正点がなくなったので、応募。

ここからは別アプリの開発をはじめ、それも2時ぐらいで終えて提出して、寝ました。

コンテスト参加も初めてだし、一日でサービスを2つ作ったのも初めてだし、結構面白かったです。
来年も出すかわかりませんが、また似たようなコンテストは出してみたいですね。

DECOPOCHIの今後としては、まだ特に何も決めてないですがｗ とりあえずはしばらくこのまま運用していきます。
気まぐれで追加機能足したりするかも？
背景画像とかスタンプは簡単に追加できるので興味あるイラストレータの方がいたら是非に。

我ながら実際にぽち袋作ってみると楽しいので、作ってみてください！

ではでは、他の参加者・運営の方もお疲れ様でした！