読者です 読者をやめる 読者になる 読者になる

time108.log

読書したり、考えたり、プログラミング試してみたり

Pomodoro Timerをjavascriptで制作してみた

プログラミング HTML CSS JavaScript

ドットインストールの「JavaScriptでストップウォッチをつくろう」を学習して、これを元に「PomodoroTimer」を作ってみました。

PomodoroTimer

 

PomodoroTimerって何?

スタートボタンを押すと、赤文字で25分間のカウントダウンが始まります。

25分が経過すると、文字色が青に変化して5分間のカウントダウンをします。

5分が経過すると、スタートボタンを押した状態に戻り、ループします。

 

なぜ、作った?

数日前、メンタリストDaiGoさんの「自分を操る超集中力」を読んだのですが、この中で「ポモドーロテクニック」が紹介されてました。(Hatena Keywordに解説があります)

 

自分を操る超集中力

自分を操る超集中力

 

 

よし、実践してみよう。

どうせなら専用のタイマーをプログラミングで作ってみようかな。。

興味持っていたJavaScriptなら作ってすぐに実行できそうだし、ドットインストールに参考になりそうな動画がある! ↓

"JavaScriptでストップウォッチを作ろう”

http://dotinstall.com/lessons/stop_watch_js_v3

よし作ろう!!

そんなこんなで制作したわけです。

 

どんなふうにプログラミングした?

まずは、ドットインストールのプログラムを写経していき、無事実行されることを確かめました。

次に、それぞれのコードがどんな意味を持っているか、グーグル先生にも聞きながら確認していきました。

そして、「ポモドーロ・タイマー」のイメージを考え、文字色・計測する時間の異なるタイマーを、カウントが0になるごとに切り替える機能を追加。文字やボタンの大きさを小さくして、画面のすみっこに置けるように変更。

実行確認をして、完成しました。

 

 どのくらいの時間がかかった?

日・月・火とつくってました。

合計で7時間くらいです。

色々調べたり、失敗したりで長くなりました。。。

 

つまずいたこと・学んだことなど

CSSについて、親要素から子要素へ値が継承するところでつまずいた

 実をいうと、元々はボタンの色についても赤・青と変化させようと思っていましたが、値の継承についてつまずいて、省くことにしました。今回は「とりあえず制作してみる」ということで、CSSJavaScriptの学習はすっ飛ばして、つまずくごとに調べていってました。しかし、CSSについてはドットインストールさんの動画で一度学習すべきだったと思います。

●「それは本当に必要な要素なのか」を考える必要があった

 しかしながら、上記についてよくよく考えると「2種類の時間のタイマーを判別できればよい」ので、ボタンの色を変える必要はなかったんですよね。もっと簡単な要素にもできたはずです。ここらへんは経験を積み重ねる必要がありそうです。

●少しずつ成果をブログで公開してもよかった

 こつこつ3日で作ってたので、1日毎に途中経過を報告してもよかったですね。。自分のモチベーションにも繋がるでしょうし、小さくても成果が出たら報告していきたいです。

はてなブログはHTMLファイルを直接、アップロードできないため、無料のwebサーバをレンタルしてファイルを置いた

 コードをコピペして貼り付けてもJavaScriptの実行が可能だそうですが、慣れてないので「ウェブクロウ」を利用することにしました。後には、レンタルサーバーのHPをHTML,CSSで編集して、開発したプログラムの保管庫として整備したいと思います。

www.webcrow.jp

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ページ作成のキホンの「キ」 - しろかい!

簡単なページをwebに公開する方法について参考にしました。

JavaScript | MDN

HTMLクイックリファレンス

わからないことがあったときに調べるリファレンスです。

Color Hex - ColorHexa.com

Color Hex Color Codes

色を探すときに参考にしました。