とっちゃん@nyanco! です。
今回は、広告なし&超シンプル&メモ機能付軽量Webタイマーアプリを作成したので共有するよというお話です。
OS・ブラウザ問わず、無料でどなたでもご利用いただけますにゃ~
スマートフォンでも使えますが、基本はパソコンでの利用を想定して開発しているのでPCユーザー向けのwebアプリとなります。
クリプト案件は時間縛りのタスクが多い
クリプト界隈のプロジェクトに複数触れていると、以下のようなお悩みを持っている方も多いのではないでしょうか?
○○分後に○○するといったタスクが多過ぎてワケワカメですにゃ~
筆者もその一人でなんとか効率良く管理できないものか…と色々なタイマーアプリを試したりと試行錯誤するうちに「ちょうど良いアプリがないなら自分で作ってしまえ!」という考えに至り開発したのが本記事でご紹介する「メモ付き軽量webタイマー」です!
生成AIにベースを作ってもらい、細かい箇所は自分好みにカスタマイズしましたにゃ~
▼その名もズバリ「Simple Timer(シンプルタイマー)」!見た目はこんな感じです。
パッと見ると何の変哲もないタイマーですが、随所に筆者なりのこだわりポイントを盛り込みました。
▼詳しい仕様解説は後述しますが、タイマーの解説なんか不要!という方は以下からどうぞ。
ぜひブックマークしてお使いくださいにゃ~
こだわりポイント解説
概要
早速ですが、こだわりポイントはこちらです。
- ページを開いた時点で「分」に自動フォーカスされるので入力後エンターで即スタート
- タブのタイトルにタイマーリアルタイム表示
- タブ複製で同時稼働可能
- タイマー表示前に任意の文字を追加できるメモ機能
- カウント0になったらタブ点滅でお知らせ
- 広告なし!
以下、それぞれについて詳しく解説していきます。
「分」に自動フォーカス+エンターでスタート
▼ページにアクセスすると「分」に数字が入力できる状態となっており、さらにエンターキーでタイマーがスタートする仕様にしています(「分」以外は無記入でもOK)。
つまりページを開く→タイマー設定入力→エンターでスタート!とキーボードだけの快適スピード操作が可能ですにゃ~!
【Tips】「時間」指定したい場合は?
時間指定をしたい場合は、分換算(例:3時間なら3×60=180)することで設定可能です。個人的には時間指定は不要と思ったのと、後述する「タブにタイマー表示」での表示幅をなるべく小さくしたかったので「時間指定」フォームはあえて省きました。
タブにタイマーリアルタイム表示
▼タイマーはページ内にも表示されますが、タブのタイトルにもリアルタイムで表示されるので別ページを閲覧しながらでも進捗が確認可能です。
基本はタブでタイマーを確認する想定ですにゃ~!
ページのタイマーを下に設置したのはその為ですにゃ~
タブ複製で同時稼働可能
▼タブを複製すると複製した数の分だけタイマー管理ができます。
タブで確認できるので複数タイマーの管理も超省スペースで可能ですにゃ~
▼ただあまりにたくさんタブを複製すると以下のようにタイマーが隠れてしまい確認しにくくなるので、その場合はウィンドウ幅を拡げるかウィンドウを複製するかで対応可能です。
【Tips】ブラウザタブの複製ショートカットキー(Chrome系ブラウザ)
Windows:ctrl + l(小文字のエル) → alt + エンターキー
Mac:command + l(小文字のエル) → command + エンターキー
→参考記事【Chrome】「タブを複製する」ショートカットキーのご紹介
タイマー表示前に任意の文字を追加できるメモ付
▼複数タブでタイマーを稼働させるとどれが何のタイマーだったかな?状態になりがちなので区別ができるように任意のメモを付与することもできます。
▼このようにMEMOに入力したテキストがタイマーの前に挿入される仕組みです(日本語も可能)。
メモが長いとタイマー表示が隠れてしまうので、1~3文字程度まで推奨です。
▼絵文字も使えるので、絵文字で表現できるものは絵文字を使うのが個人的にオススメです。
カウント0になったらタブ点滅でお知らせ
▼タイマーのカウントダウンが「0」になったら以下のようにファビコンとタブタイトルが点滅して知らせてくれます。
点滅すると結構目立ってすぐ気付くので、サウンドで知らせる機能はあえて無しにしてますにゃ~
広告なし
▼既存のwebタイマーサイトは広告だらけだったりしますが、見ての通り広告枠はなしとしています!
今後も広告を入れる予定はありませんですにゃ~
カスタマイズ承ります!
完全に自分仕様で作成したので個人的には非常に満足なのですが、もう少しここがこうなったらもっと使い勝手良いのに…!といった要望がもしありましたらコメント欄までお気軽にどうぞ!
対応可能な範囲でカスタマイズしたwebタイマーアプリを作成・公開いたします。
技術的に無理だったらごめんなさいですにゃ~
おわりに
本記事がどなたかの参考になれば幸いです。
今回は以上となります。
最後まで読んでいただきましてありがとうございました!
それではまた〜✧٩(ˊωˋ*)و✧
コメント