開発:さて。何かアナログ的で直感的な表示ということでしたが。
基盤:とりあえず棒ですかね。ぴこぴこ伸び縮みする。ありがちですが。
社長:見た目に流速を感じるものとしては、風車が思い浮かびますね。棒の長さはそれ自体が現在の値を直接表しているのでデジタル寄りですが、風車の回る速さというのは人間が時間軸で差分を感じる速さなので、より直感に訴える気はします。
開発:それではまずは棒で… 簡単なのでdivタグのバックグラウンドでやります😁
基盤:重くないですかね?
開発:どうですかね。canvas とか SVG よりDOMの操作として軽いかも知れない。測定間隔は表示が30fpsと想定して33msインターバルで…負荷は定評のあるimgurで😁。で、こんな感じ。
基盤:おー、ものすごい勢いでビコビコしますね😄
社長:表示の振り切れを対策したいですね。対数表示かな?
開発:表示を複数桁にする手もあるかと思いますが… 人間の直感に合うのは対数かもですね。表示が一つで済むし。で、こんな感じ。
社長:対数だと逆に今ひとつインパクトに欠けるかな😁
開発:ユーザが何を知りたいかですが、実際に自分の仕事にどの程度支障が出るような負荷なのかという事が第一かなと。要は処理に遅延さえなければ良い。リアルタイム性がひどく落ちなければ良い。例えば30ミリ秒以下の応答遅延であれば、まず気にならないと思います。それと、遅延の度合いは地震のマグニチュードみたいに一桁の数値で表せるとすっきりするかなと。
社長:ユーザの不快指数ですかね😄
基盤:ところで前回に気になった遅延の蓄積ですが、どうもブラウザによるようです。基本、Chromium系では起こらない、独自系のSafariとFirefoxだけで起こっています。こんな感じ。
社長:ああ、これは蓄積状況が見える化されるという副次的効果ですね😄
開発:蓄積する理由は別として、5秒おきにクリアしていますので左上Safariの挙動はわかりますが、左下Firefoxの挙動は不審です。
基盤:観測のインターバルを66ms未満にすると起こるような。同じホストで同時に動かしているわけですから、負荷状況によるゆらぎではないですね。
社長:setInterval()の実装の違いですかね。
開発:まるめの誤差とかかも?🤔インターバルを2のべき乗にしてみては?
基盤:… 32ms, 64ms, 128ms, 256ms… 変わらないですね。同様にずれが蓄積します。
開発:謎ですね。256ms間隔でイベントがこぼれるってあり得ない。
社長:よくわからないけど、面白いな😁
開発:こんなところにもブラウザ間の互換性の問題が潜んでいるという意味で。
基盤:おっと、iPhoneの上ではChromeでもずれが溜まります。ああ、それでこないだ混乱したんだ。
開発:てことはiOSの上ではChromeもSafariとかと共通のエンジンを使っているということかな。User-Agentを見てみればわかると思いますが。
社長:おっと、もう5時をまわりました。ハッピーアワーですよ🍺😆
基盤:最近航続距離がめっきり落ちましたね😁
社長:最近はあの、昔若筑波があった場所の店がメインです。5時から7時までハッピーアワーなんです😄
-- 2022-0127 SatoxITS