html canvas でアナログ時計を作るためのライブラリ…、があればいいのに

いや「ガジェット」じゃなくてな、「任意の時刻をインプットとして描画するコンポーネント」な。

探せばきっとあるんだろうなぁと思いつつも、さっと見つからず、でも w3cschools のチュートリアルにそのものズバリのネタがあるのよね。これをパクろうか、と思うも、最低でも二つの問題があって、ワタシのケースにはそのままでは使えないんだよね。

問題てのは、一つはマルチインスタンスに対応してない件。世界時計を思い出してもらえればいいけど、チュートリアルのコードは複数の時計を同時に動かすことを想定してないので、それをしようとすると手間。もう一つは、「html ドキュメント全体をめいっぱい使って描画する時計」でしかない件。やってみればすぐにわかるんだけれど、たとえば動的にサイズが拡縮するようなテーブルのセルに入れるとか、動的にエレメントを挿入するとかして「canvas が何かしら移動しうる」と正しい描画にならない。ちゃんと解析してないけど、たぶん translate と rotate に頼った「クールな」(クレバーな)実装がよろしくないんじゃないかと思ってる。

とりあえずかなり雑に書き換えたヤツ:


Open Frame プラグインで遊んでおくれ。

何をしたかったのか、の元のネタは Tabulator ネタね。2017年に最初に書いたものは「かなり簡単な実例として Youtube の「プレイリストのようなもの」がやりやすかったので」てこと、つまり「Tabulator の実例」が本題だったのだが、個人的にそこで作った「単なる例」を結構実用的に日常使い出来ていて、なのでちょっとした進化を続けてた。その「実用性」に関して、「再生終了予定時刻」がアナログ時計でみれたらわかりやすいよなぁ、と思ったの。わかるでしょ、「現在時刻を表示してくれる時計」じゃダメなわけね、「再生中のビデオは 1.5 倍速で再生していて、その再生速度ならばあと2時間32分後に再生終了する、これは実世界時間における 13時54分である」みたいな計算結果をアナログ時計の形で示したかったわけね。

なお、「雑な措置」については、コードを見てもらったほうが早いとは思うんだけれど、要は「都度破棄して構築する」ようにしただけ。かなり気持ち悪い。ほんとにちゃんとした出来合いのライブラリがあるなら欲しいよ、てのと、「雑な」でない措置もそのうち考えたいなぁ、てのと。「クレバーでない愚直な」てのは要は原点を詐称しないで top, right あるいは bottom, right 起点での計算にしちゃえばいいと思うんだよね、ただ、ちょっとやりかけて、ボーダーの太さの計算がめんどっちいことに気付いてやめた。まぁ必要に感じればそのうちやるかもしれんし、やらんかもしれん。



Related Posts