ラーメンタイマー？おれはバリ固で食べたいんだ！！ || 素人が3日でカッコイイラーメンタイマーをがんばって作る。
せっかちな人用に固麵用のラーメンタイマーをつくる.
こんにちわ。ふぃふぃです。
「ラーメンタイマー１つまともに作ることもできないエセ開発者・・」
「まさしく自分のことじゃないか・・・」
悔しさと焦りから、ラーメンタイマー制作にチャレンジしてみることにしました。
バリ固で！！
(注：この記事は少し長いです。長い割には大したことはしてないうんこ記事です)
もうあるアプリの調査
まずはなにはともあれ、先人の作品から学ばさせてください。
online-stopwatch.cm
可愛いけど少しweb2.0を思い出す
http://www.online-stopwatch.com/countdown-timer/
ソフトのがらくた箱
シンプル。このサイト他にもコンテンツがあってたのしかった。
http://park6.wakwak.com/~wmasa/soft/wbt/kitchen_timer/
Time and Date .com
フラットデザインできれいです。タイマーを複数走らす事もできる！
http://www.timeanddate.com/timer/
ラーメンタイマー メイド
名前に惹かれた。。ラーメン作りたいだけなのに悔しい。。メイドがいいな。
http://www.mobogenie.com/download-jp.co.firstchoice.maidtimer-1292871.html
プレゼンタイマー
学会で使いたいですが、Webアプリは少し怖い？
http://conference-timer.appspot.com/
ラーメンタイマー麵達
ありました。固麵タイマー！！！！
http://apps.microsoft.com/windows/ja-jp/app/3680cc23-aab4-4902-9068-b2664b94f234
みんなのラーメンタイマー
サービス展開されてます。
『みんなのラーメンタイマー』は、カップ麺についているバーコードを読み込むだけで、ラーメンができあがるまでののタイマーを設定してくれるアプリです。ちょっと固めの麺が好き、という人も安心。タイマーは10秒単位で好きな茹で時間に変更することが可能です。 バーコードを読み込んだらあとはカップ麺にお湯を注ぐだけ。時計を気にしなくても、茹であがったら教えてくれます。ちなみに本アプリは純粋なタイマーとしても利用できます。 バーコードを読み込んで見つかる商品は、『みんなのラーメンタイマー』を利用した誰かが事前に登録してくれた情報です。商品が見当たらなければ、新たに商品名・タイマー時間・カップ麺の写真を登録することもできます。自分が登録した情報を使って、今どこかの誰かがラーメンを作っているかもしれません。 読み込んだ商品はお気に入りに30件まで登録され、一度設定した時間は履歴として保存されます。同じカップ麺を食べるなら履歴から商品をタップするだけで、利用可能です。
http://andronavi.com/2011/05/89855
感想
簡単に作れるので、やっぱり量は多いんですかねー。ただ、その分惹かれるようなアプリはなかなか出会えませんでした。
ただ、おもしろいのもいくつかみつけました。
カップラーメンタイマー
そうだ。。別にプログラムじゃなくてもいいんだ。。動画でかっこ良く3分待てば良いじゃないか!!これが視野がせまくなるってことか。。。
AKB48 CM カップヌードル サプライズリレー
このシリーズみながら3分まちたい。
Web画像の調査
デザインも勉強しておかないといけないので、画像も調べてみました。
そうそうこれこれ
抽象化するとこれ
最近のはやりだとこれ
男が好きそうならこれ
いかにも未来大好きならこれ
ふぃ。
雰囲気もつかめてきた？ところでそろそろ作りましょう。
ラーメンタイマーの開発
デザインを作る
まずはデザインから作ります。これまで、「あくまでプロトタイプ（お遊び）」的な考えで、後ろのプログラムばっかり作ってました。がお遊びはやっぱりお遊び。プログラムが完成してもつまらない。人に見せきれない。モチベーション下がる。やめる。といったつまらない循環をしてました。「頭のなかではこんなにかっこいいのに・・・」そう、想像だけで終わってしまい、なにも創れない。そんな経験あるのではないでしょうか。やっぱり人に見せるサービスはデザインが命。さぁIllustratorを開きます。
1. まずは背景画像！
素材サイトから見つけてきます。おすすめはunsplash。こちらのサイトは高画質なかっこいい画像が沢山公開されています。
なんと、ダミー画像として使うためのURLも公開してます。超便利。今すぐブックマーク。(開発中に思い出してもおそいです)
2. illustoratorでいっきにつくる。
Zantedeschia
カラーの花の背景をつかいました。ラーメンというより、パスタですね。
Ferris wheel
観覧車？が時計の様に見えたので。。こちらは、少し若い女性をイメージしてつくりました。
にゅーよーく
若いビジネスマンをイメージ。いかにもって感じですが、まずは定番からということでつくってみました。
やま
「外国人が見た日本」をイメージしました。
さて、上のデザインを使って、ラーメンを、いやラーメンタイマーを、いや固メンタイマーを作っていきたいと思います。
仕組みをつくる
さて、今回は簡単なアプリなので、javascriptを使ってタイマー部分を作っていきます。プログラムを書き始めますので、とりあえずgithubにリポジトリをつくりました。
タイマー部分をどう作るかというところなのですが。。。あまり時間をかけたくありません。というのも、結局仕組みの部分は作るのが楽しいんです。ただ、そればかりをしていても、モノとしては完成しない。それでは、今回の作戦の趣旨がかわってしまいます。「動くものをつくる」中身はあとから、好きなだけ時間をかければよい。ということで、数行でかけるタイマーをみつけました。
非常にシンプルに作られていて、jsコードは20行程度。表示時間からタイマーで一秒後に関数を呼び出し表示を1引く。 誤差がつもりそうなので、あまり好きではないが、非常に簡単に実装できる。
harryNoodleTimer_mock.html
サンプルコード
できた。こんなものです。全然カッコ良くなくて感動が薄い。さぁ動くのをつくっていきます。
デザインをWebページにする
先ほど編集していたIllustratorから、Photoshopへデータを送ります。ここがAdobeの便利なところですね。いろいろとコツがあるみたいなのですが、のちのちHTMLでグループとして扱いたいものに関してはレイヤー化しておきます。(グループではないです） 
右に移っているレイヤーパネルの右上にオプションを開ける小さなボタンがあるので、そこを開いて、「サブレイヤーに分解{シーケンス）」とすれば、選択している複数の要素を一つの”レイヤー”のしたにまとめてくれます。こうすることでPhotoshopに読み込んだときにきれいにまとめられて、”とても”作業が楽になり、楽しくなります。(こころに余裕があれば、名前も付けましょう、さらに幸せになれます）
Photoshopへの書き出し
ファイル>書き出し
今回の様にモバイル用と、デスクトップ用でアートボードを分けている場合は、ダイアログが開いてあと「アートボードごとに保存」にチェックをつけておきます。 フォトショップで開きます
どちらもレイヤーがうまく整理されています。気持ちい！
レスポンシブでざいんをつくる
さて、webサイトにするため、HTML+CSSをかいていきたいところですが。スマホ対応したい。。これは絶対です。しかし、手打ちでするなんて。。恐ろしくてできない。 のと、僕のスキルでは、先ほど作ったデザインをスマホ対応まで考えながらコーディングするのは無理です。実感してます。 そこで、ツール解禁です。Adobe Edge flowを使います。 
こういうツールはたくさんあるのですが、どのツールも結局は、こだわればこだわるほど、手打ちで編集するのが必須です。 今回はデザインすべてではなくて、大枠の要素の動きを、Adobe Edge flowを使って作り、詳細は手打ちで作ります。 雰囲気を知る 基本的な使い方
Photoshopで作ったデザインをEdge flowへ渡す！
PSDファイルを基にしたリリースレベルのレスポンシブデザインの作り方 (1/2) 
いろいろ調整すること(1. Photoshop側で解像度を合わせておきましょう。今回は1200pxの画面を想定していますので、事前にイメージ>画像解像度から、1200pxに合わせておかないとEdge Reflowでサイズがうまくいきません。2. 背景画像を使いたいので、レイヤーを選び>アセットを抽出をしましょう。) さて、Edge flowをからファイルをエクスポートします.
すると、htmlとcssが吐き出されます boilerplate.cssは初期化用のcssです。実際のレイアウトのcssはEdgeflowでのプロジェクト名.cssとなります。変な名前が付いちゃってます。 プロトタイプ用レイアウトHTML 意外とすっきりしているんです。これが。ただ、それぞれにidタグがついてしまうので、改造する場合はクラスを使って変更していきましょう。githubで公開してますので、よかったら使ってください。
公開！！！
やっとこの時がきました。レンタルサーバーにFTPでアップロードして確認します！
できた。。
時間になると教えてくれます。（執筆時点では試作のため2:10で通知されます）。あとは大好きなプログラムを描くぞー。
長文読んでいただきありがとうございました。
気合を入れて書いたのですが、結局はうんこタイマーです。 しかもまだ動きません。汗(2015/06/04)
ラーメンタイマー
http://fififactory.sakura.ne.jp/HurryNoodleTimer/index.html
