ポモドーロタイマーを作りました(JavaScript)

辺岡
·
公開:2024/10/27

個人サイトを作りました。 https://ataoka.work/ です。

この個人サイトのメニュー内に『やる気スイッチ』というお遊びのコンテンツを実装しました。なんの説明もないのですが、記事タイトルでネタバレしている通り、いわゆるポモドーロタイマーです。

説明としてはスタートボタンを押すと開始のSEが鳴り、25分の「集中タイム」が始まり、緑のドーナツ状のタイマーが減っていきます。5秒前からはタイムアップの注意喚起にカウントダウン用のSEが鳴ります。そのあと同じようにSEが鳴り、水色のドーナツに切り替わってシームレスに5分間の「休憩時間」が始まります。

1サイクル30分を4回、4回目の休憩は30分休憩と少し長めにとってあるはずです。すみません。そこまでテストしたことがまだないので、30分タイマーがちゃんと動作するかわかりません。

もしお気に召していただけたら私のサイトに来ていただいてもいいし、ポモドーロタイマーのURLだけをブックマークしてくださってもいいし、もっというと「へえ、ポモドーロタイマーか。おもろ」と思ったらこれにこだわらずもっと洗練されたアプリを探していただければいいかなと思います。

〜ここからまったく読まなくていい話〜

ドメインを取得してサーバ代を支払い始めたのがなんと1年前になります。推しのWebオンリーを開催する彼の誕生日(実は誕生日でもなんでない)までに公開できたらめっちゃいいなあと思いながら重い腰が重いまま無駄に1年虚無のサーバ代を支払っていました。ドメインはまだ取得したまま保持しておくということに若干のいいわけもきくのですが、もったいなかったのは確実で…

いちおう、htmlとcssとJavaScriptとphpができます!という感じでやってきていたにもかかわらず(なんとホームページ作る講座の先生もしていた)、数年まるまる別業種に就いており、パソコンも買ったっきりYouTube専用機みたいになってしまっており、なぜかというとipad proがあればなんでもできすぎるけどコーディングはめちゃめちゃやりづらい…など、口をひらけばいくらでもいいわけは出てくるのですが、実際記述すべきことのすべてを忘れていてかなりショックを受けました。それでもヒイヒイいいながらコピペしたりうろ覚えで書き換えたりして土曜日を潰し、10時間が経つ頃にはそれなりに読める程度には思い出してきました。はじめてPCを触った小学生の頃の記憶まで出てきてちょっとよくないんだが。XHTMLより前で、cssもなかったんじゃないか…?

ただ、個人サイトを作るというのは私に取って「まず作りたいものがあって手探りで実装していく」ことの原体験みたいなものでした。小学生の頃にはじめて個人サイトを作ったんです。ていうか同人で今もやってるのと同じジャンルだ。怖い。

少し前まで原稿をする際に重宝されていた、もくりという通話アプリで似たようなタイマーが実装されていたのですが、通話しながらだと結局喋ることに集中してしまうのと、もくり自体がサービス終了したこともありこのようなアプリが私のスマホからなくなってしまいました。また、そのあとに類似の機能をもつアプリをダウンロードしてもそれを起動すること自体が億劫で定着しませんでした。だからこれも私以外にとっては使いやすいかどうかといえば、もっと適切なアプリはすでにあると思います。私がJavaScriptを久しぶりに自分でやってみたいとか、そういう意図で作っただけです。あったらいいなと思うものって、自分で作るのも楽しいんですよね。

ちなみにこの記事は作業タイマーと休憩時間のあわせて30分で書きました。休憩せんのかい。

@ataoka
XとBlueskyにいます。漫画が不調になると小説を書いたり、料理をしたり、いい感じにるまでフラフラしています。