マウスオーバーしたときだけ表示されるデジタル時計
投稿日：
ブラウザ上で使える、マウスオーバーしたときだけ表示されるデジタル時計を作った。
作ったきっかけ
パソコンで全画面で動画を観ていると、ふと今の時刻を知りたくなることがある。近くに時計もスマホもない場合は、一旦パソコンの全画面を解除してタスクバーで時刻を確認しなくちゃならない。ちょっと面倒だ。
ところで普段私は、14インチのノートパソコンに21.5インチのモニターを接続して使用している。ディスプレイの表示はもっぱら「セカンドスクリーンのみ」。つまりは21.5インチ（以下、メインモニター）のほうしか使っていなかった。
そこで、持ち腐れになっていたノートパソコンのモニター（以下、サブモニター）に時計を表示しておくことにした。
ブラウザ上で時計を表示できるサイトを探し、いくつかサブモニターに全画面表示してみる。ぱっと見いい感じだったけれど、メインモニターで全画面で動画視聴している際、隣にデカデカと時計が表示されていると結構気が散るなと思った。
サブモニターの明るさを最低にしても時計は見えるし、ディスプレイの表示を「拡張」から「セカンドスクリーンのみ」に切り替えるのもラグがある。いろいろ考えた末、ページにカーソルが当たっている状態、つまりマウスオーバーしたときだけ時計を表示し、それ以外のときは非表示にしておけばいいのではとひらめいた。
自分の要望に合うアプリが見つからなかったので、自作することにした。
作ったもの
作った時計のデモはGithub Pagesで公開している。
Ghost Digital Clockというおしゃれな名前はChatGPTが提案してくれた。
デフォルトではbody内にカーソルが当たると時計が表示され、カーソルが離れると非表示になる。設定パネルから常に時計を表示しておくようにも変更できる。
設定パネルでは、他にも時計の背景色や文字色、フォントの種類、日付の位置、日付・秒数の表示/非表示を設定できる。設定はローカルストレージに保存されるため、ページをリロードしても保持される。
ソースコードは以下のページで公開している。
ChatGPTに提示してもらったJavaScriptのコードを参考にしつつ、こだわりをガンガン詰め込んでいった。
いちばんのこだわりは、マウスが離れている間は時計表示の処理を止め、再びマウスが乗っかったら処理を再開させるようにしたこと。これは以下の2つのメソッドで実現できた。
あとがき
手前味噌な発言だけど超便利。誇張でもなんでもなく毎日使っている。マウスオーバーしたときだけ表示されること以外はどこにでもあるシンプルなデジタル時計なのに、なんだかんだ作るのに3日くらい掛かった甲斐があった。
とりあえず自分が使えればいいや精神で作ったので、だいぶ荒いところもある。特にCSS。あと、マウスアウトしたのに時計が消えないこともたまにあるので、原因がわかったらそのうち修正しようと思う。