satococoa's blog

主にサーバーサイド、Web 系エンジニアのブログです。Go, Ruby, React, GCP, ...etc.

開発コンテスト24に参加

URL: http://boku-watashi.heroku.com/
説明動画(音が出ます): http://www.youtube.com/watch?v=Wzmc1eW_HF8&feature=youtu.be
ソース: https://github.com/satococoa/boku-watashi

クックパッド主催の開発コンテスト24に参加しました。
結果としては何の賞ももらえずちょっと残念な気もしますが、個人的には十分頑張れたので満足です。

少しアプリの紹介などを。

コンセプト

(普段の生活で)半径3m以内にいる人が困っていることを解決するということなので、僕の半径3m以内にいる人といえば当然妻です。

課題発表後5分くらいを使って二人で色々とアイディアを出していたのですが、「おこづかいのやりくりをどうにかしたい」という非常にクリティカルな問題を解決するアプリを作りたいと思いました。

おこづかい、なのでせっかくだから夫婦間よりはむしろターゲットを子どもに置いて、子どもにも使えるようにしようと思い、平易な文章を使い、さらにrubyタグを使ったフリガナなどを用いることもこのあたりで決めました。

開発の進め方

時系列で、どんなふうに開発したのか書いてみます。参考になると嬉しいです。

画面設計

22日はまず、ざっくりとした画面設計を行いました。

(Cacooは画面設計に使いやすいです。おすすめです。)

認証機能あたり

その後はまずユーザー認証の機能の実装から始めました。

ソースコードをご覧いただくとわかりますが、今回はフレームワークにRails3を使っています。
Rails3で認証というと、Deviseというかなり有名で多機能なプラグインがあるのですが、
今回のアプリでは親ユーザーと子ユーザーという2種類のユーザーをそれぞれ違うフローで登録・ログイン・ログアウトさせる必要があったため、自分で1から実装することにしました。

たしかDeviseでも(というかwardenのレベルで)そのへんがScopeという機能でできるであろうことは知識としてはあったのですが、時間が限られているところもあり無駄にハマりたくないという考えからです。
ただでさえDeviseは多機能でソースを追うのも労力がいり、把握が大変そうですから・・・。

というわけで、なんとか親ユーザーと子ユーザーのCRUDとログイン・ログアウトまで完成したところで22日は寝ました。
睡眠時間をとらないと翌日の効率が下がると思ったので、若干の不安もありつつもちゃんと寝ました。

お願い機能

23日、8時起床。子ユーザーが欲しい物をお願いする機能の実装に入りました。
ここがこのアプリのキモですね。

お願い機能のCRUDができたら、それを許可・却下する親ユーザー側の機能の実装。この辺まででたしかお昼は過ぎていたはずです。 しばしお昼ごはんを食べたりして休憩。

GUIの改善

ここまででとりあえず機能としては動くところまで出来ました。あとは見た目です。

iPadiPhoneでも使えるようにしたいので、GUIjQuery Mobileを使うことにしました。本当は(やっぱり無駄なところでハマりたくないから)使わないつもりでいたのですが、残り時間から考えると自分でデザインするよりは早くできるであろう、という判断です。

それと並行してrailsi18nの機能を(中途半端に)使い、文言の見直しも行いました。子ユーザー側はなるべくひらがなで、分かりやすい用語で、さらに必要ならフリガナを。親ユーザー側はある程度漢字もつかって。

config/locales/translation_ja.ymlを見ていただくと、若干その努力が見えると思います。

最後の仕上げ

ほぼ出来上がり、さぁデモでも撮るか、と思ったときに恐れていたことが起こりました。

jQuery Mobileでハマりました。

jQuery Mobileで普通に作ると、基本的にフォームの送信を含む画面遷移がみんなAjaxになります。
そして、画面遷移を行うとURLが "hoge/#/hige/hage" のようになります。
まぁ、それはいいのですがキャッシュを読んでしまい、最新の情報が表示されなくなってしまったのです。

つまり、親ユーザーが承認・却下した結果が、ちゃんと子ユーザー側で反映されないのです。
これではまずいと思い、Ajaxを無効化する方法を調べて以下を実行したのですが、バグなのかどうかわかりませんが効きませんでした。

$(document).bind("mobileinit", function(){
  $.mobile.ajaxEnabled = false;
  $.mobile.ajaxLinksEnabled = false;
  $.mobile.ajaxFormsEnabled = false;
  $.mobile.hashListeningEnabled = false;
});

困り果てるとともに、残り時間が30分ほど。パニック寸前で、以下のコードで無理やり解決しました。

$(function(){
  $('a').attr('rel', 'external');
  $('form').attr('data-ajax', 'false');
});

これはひどい

動画撮影

とりあえず上記までやったところでひと通りちゃんと使えるレベルになったので応募を済ませ、ゆっくり動画を撮りました。

使ったツールQuickTime Playerの「新規画面収録」と、iMovieです。
あとから見るとちょっと画面操作が速すぎたりしましたが、締め切りギリギリの焦りをそのまま引きずっていた証拠でしょう。

そんなこんなで、完成しました。

技術的な話

技術的に新しいことは全くしていません。

Rails3で作ったアプリをherokuに上げただけです。テストはTest::Unitを使っています。また、GemfileにあるCapybaraさんは飼い殺しです。

以上

まとめ

結構がんばりました。体は辛かったです。でも楽しかったです。
24時間で自分でもこれだけのものが作れるんだ、というちょっと自信もつきました。

受賞はできませんでしたが、妻が「受賞した作品と比べてもいい出来だよ」と言ってくれるので、それだけで十分です。

まだまだものづくり、頑張って続けていきたいと思います。

今後に向けて

デザイナーさんと一度ものを作ってみたいなぁと思っています。
僕はまだまだ未熟な開発者ですが、何かの機会で僕程度の力でも必要とされている方がいらっしゃったらぜひ声をかけてくださいますと幸いです。

最後に

最後にURL貼っておきます。ご家族で使ってみていただけると嬉しいです。
ぼくの / わたしのおこづかい