Pomodoro Timerをjavascriptで制作してみた
ドットインストールの「JavaScriptでストップウォッチをつくろう」を学習して、これを元に「PomodoroTimer」を作ってみました。
PomodoroTimerって何？
スタートボタンを押すと、赤文字で２５分間のカウントダウンが始まります。
２５分が経過すると、文字色が青に変化して５分間のカウントダウンをします。
５分が経過すると、スタートボタンを押した状態に戻り、ループします。
なぜ、作った？
数日前、メンタリストDaiGoさんの「自分を操る超集中力」を読んだのですが、この中で「ポモドーロテクニック」が紹介されてました。（Hatena Keywordに解説があります）
よし、実践してみよう。
どうせなら専用のタイマーをプログラミングで作ってみようかな。。
興味持っていたJavaScriptなら作ってすぐに実行できそうだし、ドットインストールに参考になりそうな動画がある！ ↓
"JavaScriptでストップウォッチを作ろう”
http://dotinstall.com/lessons/stop_watch_js_v3
よし作ろう！！
そんなこんなで制作したわけです。
どんなふうにプログラミングした？
まずは、ドットインストールのプログラムを写経していき、無事実行されることを確かめました。
次に、それぞれのコードがどんな意味を持っているか、グーグル先生にも聞きながら確認していきました。
そして、「ポモドーロ・タイマー」のイメージを考え、文字色・計測する時間の異なるタイマーを、カウントが０になるごとに切り替える機能を追加。文字やボタンの大きさを小さくして、画面のすみっこに置けるように変更。
実行確認をして、完成しました。
どのくらいの時間がかかった？
日・月・火とつくってました。
合計で７時間くらいです。
色々調べたり、失敗したりで長くなりました。。。
つまずいたこと・学んだことなど
●CSSについて、親要素から子要素へ値が継承するところでつまずいた
実をいうと、元々はボタンの色についても赤・青と変化させようと思っていましたが、値の継承についてつまずいて、省くことにしました。今回は「とりあえず制作してみる」ということで、CSSやJavaScriptの学習はすっ飛ばして、つまずくごとに調べていってました。しかし、CSSについてはドットインストールさんの動画で一度学習すべきだったと思います。
●「それは本当に必要な要素なのか」を考える必要があった
しかしながら、上記についてよくよく考えると「２種類の時間のタイマーを判別できればよい」ので、ボタンの色を変える必要はなかったんですよね。もっと簡単な要素にもできたはずです。ここらへんは経験を積み重ねる必要がありそうです。
●少しずつ成果をブログで公開してもよかった
こつこつ３日で作ってたので、１日毎に途中経過を報告してもよかったですね。。自分のモチベーションにも繋がるでしょうし、小さくても成果が出たら報告していきたいです。
●はてなブログはHTMLファイルを直接、アップロードできないため、無料のwebサーバをレンタルしてファイルを置いた
コードをコピペして貼り付けてもJavaScriptの実行が可能だそうですが、慣れてないので「ウェブクロウ」を利用することにしました。後には、レンタルサーバーのHPをHTML,CSSで編集して、開発したプログラムの保管庫として整備したいと思います。
●JavaScriptは初めてのウェブ系言語としていいなと思った
やはり、プログラム書いてブラウザで表示すれば、すぐ反映してくれるのがとてもやりやすいです。また、はてぶを見てると日々JavaScriptの話題が飛び交ってるのもいいですね。（まだ知らないことがたくさんあるからこそ、楽しいと思えるのかもしれないけれど(；・∀・)）しばらくJavaScript周辺で色々試そうと思います。
●「やりたいこと」はムシしてくださいm(_ _)m
日々、コロコロやりたいことが変わるので、いちいち書くのやめます。
まとめ
まだ、サンプルのプログラムを変更・加筆する段階ではありますが、多くのことを学ぶことができました。こんな感じで少しずつ経験を積み重ねます。。。
参考資料
他にも多数のサイトを参考にしましたので、紹介します。
時刻表示を参考にしました。
誰かのホームページ (Ajax, JavaScript, PHP)
http://www.24w.jp/study_contents.php?bid=javascript&iid=javascript&sid=css&cid=002
CSS属性値を変えるコードを参考にしました。
簡単なページをwebに公開する方法について参考にしました。
わからないことがあったときに調べるリファレンスです。
色を探すときに参考にしました。
