blog by izumiz

動作環境

PiP機能は，ChromeやChromium Edgeのみサポートしています．

まずは動画デモ

アプリのURL

http://timer.izumiz.me/

メカニズム（おおげさ

もう作成して時間が経ったのであまり覚えてないのですが，

仕組みとしては

1. 時計の文字部分のDOMをCanvasに変換
2. Canvasをvideoにstreamで渡す
3. そのVideoをPictureInPictureで表示させる

といった具合です．

適当にStack Over Flowなどで調べたり，試行錯誤したらいい塩梅になりました．

追加したい機能

• PictureInPictureに時計モードがほしい．
• 経過時刻になったら点滅する機能．（音がうるさいんですよね…）

Github リポジトリ

https://github.com/izumiz-dev/timer

かなり余談コーナー　なぜ negative-timer なのか

ゼミ発表時に，1人60分のようなルールがあるのですが，実際のところ60分を超えるようなことがしばしば発生．

そこで，60分を経過したあと，どれくらいが経過したかを含めて測定したいというニーズがあった．

しかし，通常のタイマーアプリは，予定した時刻になったら当然終了する．

また，ストップウォッチはカウントアップするが，予定した時間にアラームが鳴るわけでもない．

そこでNegative-timerは負の領域である，経過後の時間も測定できるという意味が込められています（なんかそんな、大そうなものではない）