体感負荷指数

開発:さて。何かアナログ的で直感的な表示ということでしたが。

基盤:とりあえず棒ですかね。ぴこぴこ伸び縮みする。ありがちですが。

社長:見た目に流速を感じるものとしては、風車が思い浮かびますね。棒の長さはそれ自体が現在の値を直接表しているのでデジタル寄りですが、風車の回る速さというのは人間が時間軸で差分を感じる速さなので、より直感に訴える気はします。

開発:それではまずは棒で… 簡単なので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

流れる時(とき)ー ホストマシン負荷状況測定

開発:さて。

基盤:GShell採番だけして何も着手しなかったのは初めてでしたね。

社長:まあ色々忙しくて😄

開発:まずは要件を洗い出すことが重要というか。

社長:とにかく時というのはこの世界の一番重要な軸の一つなわけです。ほとんど全ての物事は、時で駆動されている。これをいかに表示し入力するかというのは、当たり前の事のようですが、本質的な課題です。

開発:時にまつわる全ての計算を統合したいですね。検索とかも。

基盤:タイムスタンプ付きの電子署名もそのつながりですね。

社長:時というのは勝手に流れます。エネルギーを使わずに。なんだか不思議です。相対論的には流速は視点によりますが、止まったり逆行したりはしない。

開発:表示についてはなんだか流れるような感じが醸せると良いかもです。

基盤:砂時計とかは流れます😄

社長:アナログ的な表示は流れてる感じがします。バー表示なんかはその類型。

開発:時計はオブジェクト化したいですね。ユーザは複数の時をクローンする。それぞれの内部では時が進んでいて、いろんな周期で、いろんな情報を、いろんなビューで表示する。

社長:そろそろ何か作りましょう。

開発:ではまず最初の一歩。現時刻の表示。

社長、基盤:おおーっ😃

開発:どんなささいなものでも動くものはなんかうれしいですよね。

社長:これは10ミリ秒インターバルですが、1ミリ秒の桁の値が動くということはそれだけズレがあるわけか。

開発:この値は少しずつ大きくなっていくので、JavaScriptのsetIntervalは前の時間から相対時間で動くものようです。なので、処理に時間がかかると徐々に遅れていく。次のトリガー発生の絶対時間を毎回指定すると良いと思いますが、それだとちょっと処理が重くなるかも知れない。

基盤:マシンの負荷の観測に使えそうですね。

社長:ずれを表示してみましょう。

開発:インターバル時間x回数と、実際の経過時間との差… あれ?蓄積しない😅

社長:人間の思い込みって面白いですね😄。というか所定の時刻より早くなることもあるのが面白い。誤差範囲は?

基盤:誤差が徐々に蓄積していって、1000msを超えそうになったらリセットしているようにも見えます。

開発:誤差範囲を表示… あれ?ずれがマイナスにならなくなった。関数内の動的局所変数を静的変数として使ってたみたいです。スタック上のゴミと比較してたというか🤣。普通の言語なら初期化されてない変数の使用とか警告が出るところだと思うんですが。JavaScriptっていったい…

社長:ウォーミングアップは順調ですね😁

開発:うーん、20分ばかり走らせていたら誤差が100ミリ秒を超えました。結局最初の想像が正しかったのかも。

社長:まあインターバルタイマーを使って時間を作るわけでは無いし、これはとりあえずそういう感じなのかなくらいで。

基盤:ただ、他に重い処理をさせるとどんとズレが増えるようなので、やはり負荷の推定に使えそうですね。マシン全体というよりそのブラウザのスケジューリング内でかも知れませんが。1秒ごととか定期的にズレをリセットして、それぞれの期間の中でのズレつまり負荷を見るとよさそうに思います。

開発:負荷変動をグラフにするのも面白いですね。あれ?あそうか、ウィンドウが表示されてない状態ではそのウィンドウの中のJavaScriptのインターバルタイマーも止まるもよう。そりゃ当然かな?となると継続的な負荷モニターは難しいですね。

* * *

開発:いやあ、ちょっとハマりました。ウィンドウが表示されていない時にはインターバルタイマーが止まるのだと思って、表示再開された時にリセットするようにしたのですが、なにやらうまくいかない。すごく不思議で。で、コンソールにログを出してようやくわかったのは、ウィンドウが非表示でも全く止まるわけではなく、1秒毎にハンドラを呼ぶんですね。まあChromeの固有の仕様かも知れませんが。なんにしろ document.hidden の時のインターバルタイマーはあてにならないという少なくとも一例があるわけなので、そういう判定をして対処することにしました。で、やれやれと思ったら今度はウィンドウのリサイズ中にも止まる。これって、タイマーのハンドラに、これは定刻の呼び出しじゃないよみたいな状況判別情報が渡ってきてるといいんですけどね。

社長:今日はさっそくいろいろと洗礼を浴びましたね😁

基盤:いやこれ、他のブラウザでimgurをリロードするととたんにズレの値がごんと数倍に、100msを超えたりして、負荷状況の推定に使えるんじゃないですかね。

社長:昔から負荷状況に使われてるロードアベレージっていうのは、今のコンピュータだと実際のアプリの反応状況と対応しなくなってますよね。実際のアプリの実行にどの程度の遅延が発生するかっていう情報は、役に立つ負荷情報かなと思います。負荷が重いようなら自分の処理を自粛するとかも出来ますね。

開発:JavaScriptからホストの負荷情報を取れると良いのですが、それはそれでセキュリティの問題だかで使えなくなってるみたいで。

基盤:iPhoneのブラウザでやるとこうなりますね。

開発:あれー、なんか遅延が、リセットされるまで単調に増加してますね… なにやら別の問題か…

社長:これって、各プラットフォームの処理性能やリアルタイム性能をざっくり比較するベンチマークにもなりそうです。

基盤:結局、時の表示とは全然違う方向に来てしまいました😁

社長:時の情報は色んな事に関わるということを改めて実感したといいますか。

開発:次はこれ、負荷状況をグラフにしたいですね。

-- 2022-0122 SatoxITS

GShell 0.9.1 − 統合型デジタルアナログ時計カレンダー

開発:なんか作りますか。簡単なもの。

社長:前々から時計とカレンダーが欲しいと思っています。

基盤:それなら簡単そう。

社長:そう。まずは表示を思い切りでっかくできて、ディスプレイを遠くから眺めても読めるものが欲しいのですが、少なくともmacOSの純正というかデフォルトには無いような。

基盤:スクリーンセーバにあったような気がしますが。

社長:常時見たいので。それに表示形式が色々欲しい。デジタル表示とアナログ表示は両方同時に見たい。見やすい世界時計が欲しい。あと、カレンダーもアナログ表示が欲しいですね。

開発:円形のと、バー形式ですかね。世界時計っぽいものは以前、地球を回す奴を作りましたっけ。

社長:最近は月にも興味があるので、月も回したいですね。月の形だけでなく、月の出る方位とかも。

基盤:月相表示が付いてる機械時計ってありますよね。

社長:満ち欠けする月の形は白黒半分ずつの球を3Dで作って回せばよいかと思います。

開発:その話って、一昨年にも出たような記憶がかすかにあります。

社長:西暦表示と元号表示も同時に見たい。

開発:現時刻の表示だけでなく、任意の時点の設定ですね。

基盤:大安とか仏滅とかも😁

開発:あれはどういう規則で回ってるのか全然わかんないですね。

社長:あれは六曜と言われてるように6日で一巡するんですね。ただ旧暦つまり太陰暦の月の1日目に、特定の曜に初期化されるそうです。なので、1週間が7曜でかつ太陽暦の現在だともう規則性がわけわかめなわけです。

https://ja.wikipedia.org/wiki/六曜

基盤:一週間が6日で週休2日ならパラダイスですね😁

開発:旧暦では月の満ち欠けの周期そのままで1ヶ月が30日なら5週間で6曜がぴったり回り続けると思うのに、各月で別のリセットをするという不規則性を入れるのがなんとも不可解。まあでも規則はシンプルで明快ですから、プログラムするのは簡単です。

社長:この話には続きがあります。太陰暦というのが月という天体の満ち欠け周期をそのまま、期間としての1ヶ月に使うものだとは知っていました。ですがそれだと、地球の公転による1年365日に対して、周期が約29.5日の月12周回ぶんの354日をあてると、1年に10日ばかり余って蓄積していく。どうするんだと思ったら「閏月」というものを3年に一度、一年のどこかに入れて調整する、その年は一年が13ヶ月なんだと、最近初めて理解したのです。そういえば中高生の頃に古文で閏何月という言葉を聞いたなと。たとえば3月の後に閏月を挿入して3月を繰り返したら閏三月ということだったのかと😃。

基盤:うるうという語のひびきはなんだかいいですよね😄

開発:月の周期が30日より0.5日短いと、暦の1ヶ月がちょうど30日でも、1日目が新月で15日目が満月というのもずれてくような気がしますが… 毎月60ぶんの1ずつ…ああ、その蓄積していくずれが、うるう月を入れることでリセットされるわけですね。

社長:そういうことでしょうね。たぶん、ひと月の中での日にちと期待する月のずれを見てれば、1年の中のどの時点にいるかもわかるんでしょう。まあ月の話は今日の本題では無いのでこのへんで😄

基盤:お腹空いてきました。

開発:そういえば、以前よく行っていたくいだおれのタイ料理の店、無くなっちゃいましたね。建物ごと😨

社長:まあ、あのコップンカーおばちゃんが居なくなった時点でワタシ的にはあの店は終わってました。フリーWiFiも繋がらなくなってたし。形のあるものはいずれ滅する。名前はさたぽんでも永久不滅ではなかったわけです😢

-- 2022-0120 SatoxITS

GShell 0.9.0 − 絵文字入力

社長:それでは何か作ってみましょう。

開発:できるだけ軽いのがいいですね。

社長:ツイッターでは顔文字を使うことが多いのですが、ワードプレスではデフォではそういう入力がサポートされてなくて、ちょっと不便かなと。

基盤:Google IMEのこれを使えば良いのでは。

社長:… ああ、そうですか😅

基盤:軽すぎましたね😁

開発:まあでも、ブロックエディタからキーボードだけで呼び出せて選択できるのが良いですよね。

基盤:MacOSではcontrol+command+SPACEで呼び出せてカーソル移動で選べるようですけど。

社長:😃。これでいいかな😄。ツイッターを一年近くやってて気づきませんでした😅

開発:ツイッターの絵文字選択画面は候補の表示が小さくてちょっと不便な感じはします🧐。Google IMEのにしてもそうですが。画面の小さいスマホで入力するのを前提にしてるんですかね。

基盤:Google IMEのは、ウィンドウを好きなように広げられるみたいです。お気に入り登録もできるし。

社長:😃🎉

開発:ツイッターのは、Unicodeの顔文字フォントが無い場合を想定しているのか、ちょっと違いますよね。コピペするとASCII文字列での名前になってしまう。インラインイメージじゃないかという気もします。

社長:コピペできる場合もあるんですけどね。ブラウザの違い?あと実際にフォントも違って、このどんぐりまなこ😃😀の上に眉毛に相当するような点が付いてる場合がある。あれはiPhoneというかiOSの場合かな??

開発:錯視のような気もしますが。

社長:なんとなくで使ってると、なんだかんだやってるうちに出たからいいやで終わっちゃいますよね😁

基盤:ああ、あれは実際インラインイメージのようです。というかSVGですね。twimg.comで提供されてる。たとえばこういう感じ(abs-0.twimg.com/emoji/v2/svg/1f603.svg)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#FFCC4D" d="M36 18c0 9.941-8.059 18-18 18-9.94 0-18-8.059-18-18C0 8.06 8.06 0 18 0c9.941 0 18 8.06 18 18"/><ellipse fill="#664500" cx="11.5" cy="12.5" rx="2.5" ry="5.5"/><ellipse fill="#664500" cx="24.5" cy="12.5" rx="2.5" ry="5.5"/><path fill="#664500" d="M18 22c-3.623 0-6.027-.422-9-1-.679-.131-2 0-2 2 0 4 4.595 9 11 9 6.404 0 11-5 11-9 0-2-1.321-2.132-2-2-2.973.578-5.377 1-9 1z"/><path fill="#FFF" d="M9 23s3 1 9 1 9-1 9-1-2 4-9 4-9-4-9-4z"/></svg>

社長、開発:どひゃー😆

基盤:ちょっと、下くちびるがグロいですね😁

社長:まあ、絵文字をコード情報だけで送ると、受け側のフォント次第で表示が変わっちゃいますからね。固定したイメージにして置きたい気持ちはわかります。

開発:しかしコピペやら検索やらに難がありますね。オフラインで見る場合とかも。実際、ツイッターのAnalyticsで顔文字がとうふになってしまう事が多い。

基盤:拡大したら劇画調になるとかしたら面白いのになー🤣

社長:そういえば一昨年、ROFLをSVGみたいなベクターで作りたいなという話がありましたね。

開発:それはちょっと、顔文字入力というお題に比べて少し重いかもですね😅

基盤:おなかすいたなぁ。

社長:食事に行きましょう。

* * *

開発:さてと。何かウォーミングアップをば。

社長:とりあえずホイールで操作できる拡大縮小鏡が欲しいですね。文字とか画像の。

開発:編集とドロップができるspanをzoomできるようにすれば良いですかね。どれ…

* * *

社長:それで?

開発:案の定、特にCSSについてはかなり忘れてますね😅。一昨年書いたコードをみようみまねみたいな感じです。編集とペーストはHTMLエレメントをcontenteditableにするだけで問題無しですね。それはそうとちょっと驚いた事実。MacOSの絵文字フォントはベクターじゃないようです。ツイッターからコピペしたSVG絵文字とUnicode絵文字を並べてズームするとこんな感じ。

社長、基盤:へーっ😃

-- 2022-0108 SatoxITS

2022年事始め

社長:さて何か始めますかね。

開発:まずはGShellの開発環境をチェック… あれ?makeが失敗する。

基盤:えーと。Go がバージョンアップされてますね。一昨年末頃には1.15でしたが、今現在は1.17.6の模様。パッケージをダウンロードしてインストール。OK。

開発:あれ?でもビルドしようとするとエラーで止まるな。最後にやった昨年の7月には通ってたはずですが。WebSocketのモジュールが無いとかなんとか。

基盤:えーと。なんか Go 1.16からモジュール管理機能が追加されたとか変更されたとか。go mod init しろよと。実行。通過。

開発:GShell make 通過 (^^)/

社長:いやー、ツイッターと違って記録が楽だなあ (^^)

開発:最後に作業した去年の7月22日版0.8.7はこんなんでした。

社長:東京五輪の開幕式のブルーインパルスみたいのを作りたかったんですね。

開発:でもすぐにメゲてテレビに釘付けになってしまった(^^; それまで8ヶ月何も書かなかったから、なんもかも忘れちゃって。

基盤:そしてそれからさらに5ヶ月w。ではmakeしたのをライトセールにアップロード。… あれれ?なにやらtarのエラーが出まくり。

開発:まさかtarの互換性を無くしますかね。

社長:最近MacOSをMontereyにアプデートした関係ですかね。

基盤:昔から指摘されてた問題ではあるようですが… 実際前にも見たことがあるようなエラー、というか警告です。

社長:Mac側にgnutarを入れるか、Linux側にbsdtarを入れるかですね。

基盤:Linux側にbsdtarを入れてみますが… ああ、エラーメッセージは違う文面で出ますね。

開発:警告だし、とりあえず気にしなければ良いのでわw

基盤:そうしますw

社長:なんだか他者との互換性を気にしないAppleの嫌な一面を見る気がしますねえ。

基盤:あれれ?0.8.7って0.8.6とファイルの内容が同じですが。

開発:ああ、一昨年の最終版が0.8.5で、去年の五輪記念が0.8.6ですね。0.8.7というのは何かやろうとだけ思って終わった版かなw

社長:今年は0.9.0で始めましょう(^^)v

-- 2022-0108 SatoxITS