ブラウザで動くストップウォッチを作るメモ。
サンプルサイト、取り入れたいストップウォッチの機能とか
- ストップウォッチweb
https://stopwatch.onl.jp
数字が青文字で爽やかシンプル。ブラウザーを閉じてもタイマーが作動し続けてくれる。再訪問しても起動している。しかしブラウザー閉じてもタイムウォッチが動いてることに個人的にはそれほど需要はない。 - ストップウォッチ
https://garakutabako.jp/timer/
便利な機能が備わっているシンプルなストップウォッチ。
・小さなウィンドウを開いてタイマーの表示//画面右上などに置いておけるので便利。
・設定時間で音で知らせる機能などは取り入れたい - オンラインクロック
https://vclock.jp/time/
デジタル風の時計で少しオシャレかも。他にも目覚まし・タイマー・世界時計など別ページにリンクさせているのでリンク効果で集客は強そう。設定なども良さそう。 - https://crocro.com/tools/item/stop_watch.html
ラップタイマーとメモ機能つき。 - https://jp.piliapp.com/timer/stopwatch/#start=1564464856261
エコモード、ミリ単位で描画から秒単位に変更することでcpu負荷を抑える。 - https://stopwatchtimer.yokochou.com
flashで作られたストップウォッチ、フラッシュの知識はないので参考程度に。 - google検索から使えるストップウォッチ機能
https://www.google.co.jp/search?hl=en&q=stopwatch
シンプルなタイマーとストップウォッチ、秒数の表記も英語で洗練されている。全画面も可能 - macの場合
http://fanblogs.jp/macyarounanoka/archive/369/0
これらのツールを参考にした結果、取り入れるべき要素は
- 小窓タイマー（小さい画面で邪魔にならないように使える為）
- 秒単位（ミリ秒単位より秒単位の方が描写に負荷がかからない）
- スタートとストップを一つのボタンで切り替え（シンプルにする）
- 大画面表示（遠くからでも見えるようにする）
- 何秒後にアラームまたはポップアップ警告でお知らせ
その他作るタイマー
・カウントダウンタイマー
・メモ機能付きストップウォッチ
・ラップ機能付きタイマー
作る
作業時間計測にアナログのストップウォッチ使ってたけど、ブラウザ上で使えるストップウォッチも便利なので作る事にした。ネット上に色々なストップウォッチツールあるけどいいとこ取りして作ってみる事にする。
簡単なjqueryを使って作る事にする。
デモサイト
とりあえずストップウォッチの機能だけは簡単に出来るらしい。後は使いやすいようにする。
JS Bin
A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...
jsbin.com
完成品
今作ってる途中なので完成したらリンク貼る。
ストップウォッチツール
無料のブラウザーストップウォッチツール。オンラインツール
www.webtoolss.com
作った。そこそこの機能を取り入れた。余裕あったらカウントダウンタイマーやカラータイマーなどアイディアがあるので別のツールを作ることにする。
改良点
- 全画面表示にしてもSTART、STOP画面を押せるようにする。
- googleの白っぽいデザインを取り入れる。
- 00:00:00のカウントをやめてgoogleの 1m30s といったオシャレカウントにしようかな。
コメント