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に公開する方法について参考にしました。
わからないことがあったときに調べるリファレンスです。
色を探すときに参考にしました。
開発準備中です。。(あとサイト名少し変えました)
お久しぶりです。
現在、Androidアプリ開発を試すための環境整備と、基本の学習中です。
また、実際にアプリを出すまでの準備（モチベーション含む）が時間かかりそうなので、すぐ開発できるjavascriptもドットインストールさんで見てみます。
実のところ、こんなものを作ってみたいという考えはあるので、一部学習すっとばしてつまずいたら調べるを繰り返しながらさっと開発していくスタイルのほうが良いかもです(；・∀・)
では。。
蛇足
サイト名を「Web試すログ」から「開発ためすログ」に変えました。
こっちのほうがしっくりきました。
ブログでやりたいこと（また更新(_ _;)（2016/10/15））
なかなかモチベーションが上がらず、進みません。。。。
短期間で作れそうなものを試し、とりあえず公開できるようにしたいなと思い、やりたいことリストを更新。
ころころ変わってすみませんm(_ _)m
・やりたいこと
・Android アプリ開発
低費用でとりあえず簡単なものを作ることができるらしい。
・プログラミングによるホームページ作成
ブラウザさえあればすぐ作成可能。
・機械学習
興味が強い。
・コードをgithubで公開
※webサービスは必要な知識が多く、サーバーを借りる必要があることもあり、今は考えない。
・HTML,CSS,Javascript
ホームページ作成のために必要。すぐに実行・確認が可能。現在もJavascriptの需要は多い。
機械学習で最も用いられる。情報がweb上に多数あり、試すことはできそう。
・Java
Androidアプリ作成のために必要。簡単なアプリならweb上の情報のみで可能なようだ。アプリ以外でも様々な開発で用いられ、需要が高い。書籍も多い。
この中で、思い立ったものをやっていきたいと思います。
毎日数十分でも書いていけるようになりたい。。。
Pythonの基礎を学ぶ
こんばんは。一気に秋の気温になり体が戸惑ってます。
さて、できることが多く、学びやすいということでPythonを試してみることに。
まずはさっと基礎を学ぶためにドットインストールのPython入門を見てみました。
IDLと似ている部分もあり、実際に使う機会を増やせば、スムーズに慣れていけそうです。
ただ、Pythonにはpython2系とpython3系があり、調べてみると情報としてはまだ2系のほうが多い印象でした。
今のところは、あまり片方に偏らずに情報収集してどんなことができるかを試していこうと思います。
幅広くできるのは、今だけの特権ですから。。。
進歩
ドットインストール
Python入門 #01~#24
ブログでやりたいこと(2016/10/03)
方針の代わりにやりたいことを書いておく。（できるかは考えない）
プログラミング
・Webアプリケーションを作ってみる
・機械学習をやってみる
・ディープラーニングやってみる
・書いたプログラミングを公開する
・勉強会に参加してみる（関西）
興味あるプログラミング言語
できることが多数。特に機械学習は最も使われてる。webアプリケーションもできる。情報も多く取得しやすそう。
・Ruby
Ruby in Railsによるwebサービス開発で有名。短期間での取得も簡単で優しい言語だそう。。
・PHP
web系に特化。企業で求められている事が多い。比較的早く作成ができる。情報源も多い。
Cは大学の講義で学んだが忘れている部分も多い。また、使ったのは運動方程式をとくなど計算ばかり。ソフトウェアは書いたことがほぼ無い。C++やC#は企業で使っているところが多い。とくに組み込み系。
・HTML、CSS
webページ作成の基礎言語。必ず学ぶことになるかな。。
プログラミング以外でやりたい
・本の紹介
本を読むのが好きなので記録がてら書いていきたい。
どんなスタイルで書くか。できるだけ短く書きたいと思う。
・プログラマーの交流サイトに記事を書く
とりあえずこんな感じ。。
追記（2016/10/05）
書いた記事が10にも満たないが思ったこと（少し）
まだ少ししか記事を書いていないけど、思ったことをつらつらと。。
方針は細かく決めないほうがいい
自分は興味がコロコロ変わり、考え方もいろんな影響を受けてたくさん考えてしまう。だから計画をしてもそのときの状況によって変更をする事が多い。だから方針は立てないようにしよう。
ドットインストールはとりあえず通して１レッスン見るのが良い
HTMLを学ぶために、ドットインストールを利用した。やり方としては１回ずつ動画を見ながらプログラムを真似して実行をしていくようにした。しかし、なかなか時間がかかり、通して学べずに間隔が空いてしまった。１レッスン通してやって概要をつかみ、すぐに何かつくってみるほうがあっていそう。
興味でやっているのであまり考えずにいろいろやってみる（まだ観覧者も少ないし）
色々試すために始めたので思ったことをどんどんやっていく。
もちろん、迷惑をかけないように慎重に。
HTMLのレッスンをとりあえず終えた。
土日で残りのHTML入門を見てレッスンを終えました。
いつも見ているwebページの仕組みを軽く知ることが出来ました。
今までとwebページの見方が変わると思います。
やっていく中でまた色々と考えたのでブログ、学習のスタイルについて追記する予定です。
ドットインストール進捗
HTML入門#11-#24
