レンタルWordPressサーバでCGI

開発:さて、それでこのCGIをXSOのWordPressサーバで動かしたいと思うのですが。

基盤:WordPress cgi でググる。・・・ なんだかよくわからないですね。でも、これって単に apache サーバだと思いますから、WordPress のお世話になる必要も無いかと。

開発:まあそうですね。

基盤:ただし!xsoのサーバには Go がありません。su にはなれませんから、apt とかではインストールできません。まあ、手作業でインストールすれば良いとは思いますが。

* * *

開発:xso のレンタルサーバって実体は何なんですかね?

基盤:Linuxで、カーネルは3.10のようです。

xso% uname -a
Linux xso 3.10.0-962.3.2.lve1.5.24.8.el7.x86_64 #1 SMP Fri Jan 4 06:55:54 EST 2019 x86_64 x86_64 x86_64 GNU/Linux

基盤:/usr/lib に yum なんちゃらがあるので、RedHat 系なのかなという気配がします。

xso% ls -ld /usr/lib/yum*
drwxr-xr-x. 2 root root 198 Jan 23 2019 /usr/lib/yum-plugins

基盤:ちなみにうちはレンタルサーバの最安プランでストレージの使用可能総量は300GBという契約になっていますが、このWordPressサーバぶんで物理的には8TBまでは行けるようです。

xso% df .
df: Warning: cannot read table of mounted file systems: No such file or directory
Filesystem 1K-blocks Used Available Use% Mounted on
8415360000 457725056 7957634944 6% /home/oreore

開発:これってSSDという話でしたっけ?8TBの塊なんて拝めるとは?

基盤:このマシンに他のどんなお客さんが居るのかはわかりませんが、ロードアベレージが1を超えているのは普通なので、まるでガラ空きというわけではないように思われます。

開発:メモリが26GBというのはなんだか微妙な数字。しかし、up 511 days って、結構な鉄人ですね。

基盤:CPUの処理能力的には並の下みたいな感じですね。

* * *

開発:では、CGIプログラムをこのサーバに置いてみましょう。とりあえず Goが無いので、.go はコンパイルして持っていきます。コンパイルする側のカーネルは5.3ですが、単にテキストファイルを読んでPNGに変換するだけのプログラムだからカーネルとか関係ないと思います。

開発:で、これを ~/public_html/its-more.jp/pointillism の下に置いて、おもむろにアクセス。

基盤:ふつうに動きますね。

開発:ただし。サーバ側でPNGをキャッシュしているらしく、打った点を含んだPNGがなかなか帰って来ません。

基盤:応答コードがほぼ 304 になりますね。Apacheかnginxの設定なのかな?そういえば、xso のWordPressにサーバ側のキャッシュを無効にするというプラグインが入ってて、有効にしてあります。「サーバーキャッシュの設定を有効にしたままで、新規の投稿をすぐに確認できるようになります。」という説明です。てことは、「そもそものサーバのキャッシュの設定を無効にする」のが簡単な対処法かなと思います。

開発:どういう設定なんですかね。

基盤:nginx server side cache で検索。… これですかね。

https://blog.runcloud.io/nginx-fastcgi-cache/
How To Use Nginx FastCGI Cache (RunCache) To Speed Up Your WordPress Performance

開発:サーバは xso が抑えてるからユーザには手が出なそうです。.htaccess 的なもので制御できないもんですかね。… そもそも何をキャッシュの対象に設定しているのやら。うーん、考えてみればこの cgi の出力自体は毎回更新されるし、*.cgi は除外されているのかも。じゃあ、生成した png を CGI として返してみましょう。

開発:で、どうかな?ぽち、ぽち、ぽち、…

基盤:作戦成功ですね (^-^)

開発:なるほど。普通に使えそうですね。自分の知らないCGIを勝手にキャッシュするような横暴はしなそうですから、これは一般的に通用する解決法と思います。

開発:というかそもそも、今どきのサーバでも普通に .cgi が使えるとは知りませんでしたけどね。

基盤:Go の処理系も持ってきてみますかね。さすがにカーネルの版が遠すぎるのが不安ですが。

開発:そうですね、いずれ手が空いたら試しましょう。

-- 2020-0703 SatoxITS

CGIでうっかりエラー

社長:今ポインティリスムで打刻しようとしたらこんな事になってしまいました。

開発:あれ?昨日から何も変えてないと思うんですが。しかし、ソースを見ればわかるとは言え、適当に書いたソースが直にこう出てきちゃうと恥ずかしいですね。

基盤:HTTP DeleGate のログにはこう出ています。

開発:ああ、その文字列はCGIの標準出力に吐いた記憶があります(笑)。なるほど、HTTPヘッダを吐くより前にエラーメッセージを吐いちゃったということか。

社長:CGIではそういうことをしちゃいがちでしたね。

基盤:何のエラー?

開発:((bad-XY)) と出しているのがDeleGateのログに記録されていますが、要するにHTTPリクエスト・メッセージ中の x, y 座標情報が変だ、特にこの場合には情報が無いというエラーです。キャンバスをクリックしてこのページを呼んだ場合でないと、そうなります。エラーというより、単なるテスト・デバッグ用の情報です。

社長:CGIでは、ヘッダだろうがボディだろうが、一連のストリーム出力でしか無いという事ですね。

開発:何にしても私は、ページ全体を作るのには今どきCGIではいかがなものかという気はしますが、個別部品を作るぶんにはCGIで全然問題ないと思うんです。

社長:ページ固有なCSSを生成するぶんにも問題ないですね。

開発:できることが基本クライアントとの情報交換だけで、自分の実行環境のことを知らないから、逆に環境独立というか、どこに持っていっても動くという強みはあるかなと思います。

社長:インタフェースは最少最小が良いという原則でもありますね。

-- 2020-0703 SatoxITS

WordPressでぞっとするエラー

基盤:ダッシュボードでこういうのが出ました。

ダッシュボード

基盤:編集状態のウィンドウではこういう状態になっています。

投稿編集

開発:同じようなエラーが、XSOで http と https を切り替えた時に出ましたね。ぞっとしました。

基盤:タブを複製しても出ます。ところが、新規にウィンドウを作って同じアドレスにアクセスすると、このように問題なく表示ができるわけです。

新規ダッシュボード

開発:Cookieの違いですかね。ウィンドウ毎に別のものを持っているんでしょうか??

基盤:それで、各ウィンドウでクッキーを見ると、このような違いがあります。

基盤:Cookieを覗いてみると、一つは wp-admin のセッション情報で、これを削除すると当然ログアウト状態になりました。面白いのは、それによって他のウィンドウのCookieも更新されたのです。

基盤:でこの状態でリロードをすると、エラーを表示していた画面が回復しました。

ダッシュボード
投稿編集

基盤:この状況から考えると、問題は2つ。一つは、WordPress が不適切なエラーメッセージを返している。特にedit.php においては、単に必要な Cookie が無いことが異常の根源だと思うのですが「PHPがー、MySQL がー」異常だと、人を恐怖に陥れるデマのような返答をしてくる。index.php にしてもそうです。要は Cookie が腐ってるということでは無いかと思いますが、その可能性について検討も言及もしていない。

基盤:もう一つの問題はVivaldi側。Cookieの更新やタイムアウトをウィンドウ間でシェアするところに不具合があるようにも思われます。まあ、エンドユーザ側のフロントエンドはあらぬ嫌疑をかぶる被害者であることは多いですが。

社長:放送側の問題であっても、映らんといってテレビ受像機がガンガン叩かれてたり。

開発:システムからのメッセージというのは非常に重要ですね。特にエラーメッセージは。

基盤:XSOの「失敗しました。」は傑作でしたが。

社長:そこのところが、有史以来ないがしろにされている感がずっとするのです。正常系は作るけど、異常系の手当に力が入れられていない。もっとも、想定外の異常は正常の場合よりはるかに広いでしょうからわからなくもないのですが。

開発:我々的にはログを見ればなんとかなる、ならまだ良いのですが、ログすらちゃんと提供しないシステムやツールは多いですからね。

社長:まあ、プログラムを書く時に異常処理を書き始めるとごちゃごちゃ膨らんでしまって嫌だというのはあるんですが、あのあたりを自動化して、しかもエンドユーザにわかるレベルのエラーメッセージを生成できたら、すごいことだと思いますね。

-- 2020-0703 SatoxITS

裸電球

社長;ふー、帰りました。今日はうってかわって夏の日差しですね。

経理:酒臭いですね。

基盤:ちかくのそば屋で牛丼ですか。

開発:優香みたいな子が居たとか。

社長:あー、あそこはおそらく中国系の学生バイトさんで回してますね。忙しいとは思えないのに厨房に2人、バイト1人。不思議ワールド。

社長:で帰りがけにゥエルシァに寄った時に、ハッとひらめいたのです。

開発:ポインティリズムの件ですか。

社長:いや、トイレのLED電球がもう海王星から冥王星になりつつあることを。それで入り口そばの雑貨コーナーで見たんですが、なーんと、昔風の電球が2つで200円、LED電球が一個で500円なのです。

基盤:HDDとSSDの価格差より大きいですね。

社長:でスペックを見たら、40W型のシリカ電球は消費電力38Wで定格寿命が1,000時間、一方LED電球の40型相当品は4.7Wで40,000時間なわけです。

基盤:大体ラズパイ vs 省電力PCみたいな感じですね。電球て宣言通りに40Wも食うのかー。ほとんど熱になっちゃってるんでしょうね。

開発:まあ昔は100Wのつけっぱなしくらいなんとも思わなかった時代はありました。

社長:電力消費のランニングコストでもとがとれるかどうか知りませんが、40,000時間といえば1,666日、4.6年なわけです。一方1,000時間というのは、つけっぱなしだと2ヶ月持たないから、頻繁に交換が必要。LED電球はこの間に電球交換の手間が要らないし、一回の交換の作業コストを100円と見積もっても、それだけで1年でもとがとれる勘定です。

社長:ですが、今冥王星化しているLED電球は、まあほぼつけっぱなしだったとは言え、2年弱しか持たなかった。もっとも、あれ自体の定格寿命とか見てなかったですが。それはともかく、さっそく電球交換しましょう。

開発:おっと、今日はまた新しい光り方をしてますね。20Hz くらい?で高速点滅。

社長:うーん、この点滅は高速ビデオカメラでないと撮影不可能ですね。

基盤:なんかそういう光り方をさせる回路かMCUでも内蔵しているですかね?一種のエラーメッセージみたいな。

社長:それではご苦労さんと。うーむ、全然熱くないところが元祖裸電球と違ってありがたいですね。さ、これが新しい電球ですよっと。ぐりぐり。おー。

開発:おー、明るいですね。今度のは昼光色っぽくてより良いと思います。

基盤:それで、終了した電球の頭にはこんな風に。

開発:同じメーカーですね。

経理:台所にその電球のケースが残ってました。

社長:捨てられない症候群。

基盤:60W相当方、8.2W、寿命20,000時間とあります。

開発:おー、ほぼ天命を全うしたと。

基盤:しかし、それから2年でこれだけ長寿命化が進歩したのか、そもそも低輝度のものは寿命が長いのか。数ミリアンペアレベルのインジケータ用LEDだとほぼ半永久的ですよね。

開発:しかしあの不思議な光り方、レギュレータあたりがイカれたんじゃないですかね。

基盤:私はマジで屋内の電源配線はUCB-CかPoEでいいんじゃないかと思うんですが。

社長:うーん。この新しい電球は5年近く持つと期待されます。それよりはわが社も長く頑張りたいものです。

基盤:ところでこの足元のサザエさん、E26口金と言うらしいです。すごい長寿命のスタンダードなんでしょうね。

経理:この旧式電球2つ、200円とは言え、何かに使うんでしょうね?

社長:冬になったら暖房用かな。ひよこを育てて楽しむとか。

開発:裸電球と言えばかぐや姫赤提灯でした。

社長:雨が続くと仕事もせずにキャベツばかりをかじってた♪

基盤:でもキャベツって結構高いですよね。

-- 2020-0702 SatoxITS

窮極のお絵かきツール

開発:ふあー、よく寝た。っていつの間に寝てましたが。

基盤:点描スペースに最後に打った点のタイムスタンプが07時00分54秒と出ています(笑)

開発:これは、ミリ秒単位まで記録すると面白いかもですね。

基盤:体にセンサー付けといて動きを点描したら面白いかも。

開発:なんにしても、人間が手書きで入れるだけではつまらないですね。なんでもモニターとして使うと良いかな。

社長:それで、まず、流石に1点を1ピクセル表示では厳しいので拡大表示したいですね。

開発:これはCSSの拡大率をJavaScriptで制御すれば良いでしょうね。2, 4, 8, 16, 32 倍拡大、あるいは縮小程度でしょうか。

開発:ではズームボタンを定義して、ここがクリックされたらズーム関数を呼ぶと。あれ?onmouseoverとかいうからonmouseclickとか言うのかな。検索。あー、同じ質問をしている初心者が居たw。onclickと。

基盤:マウス以外でのクリックというのもアリですかね。

開発:要素を選択してENTERとか、どういうイベントなんですかね。まあともかく、クリックされたらalertでもしてみる。あれ、何も反応しないな。ここはDevToolでお願い。うーん、関数未定義。… そうか、func じゃなくて function なんだ。Go と混線してます。function に直して。alert ポップしましたOK。onmouseoverでフォントをredにしてみる。…あれ?undefined。そうか、red とかいうのはcssを解釈する時の予約後か何かなんですかね。では e.style.color="ff0000"。はい、赤くなりました。

基盤:しかしその、リモートマシンで vi で編集して、ローカルなブラウザでデバッグするという、不思議な開発環境ですね。

開発:それなんですが、手元のマシンでテンポラリにでもそのファイルを編集する機能があれば。WebDavと連携したブラウザ上のエディタとかあるんですかね… しかし笑っちゃうほどタイプミスとかミススペルが多いのは昔からです。最近はIDEに体が慣れてしまったので、変数名とか間違うとその場で警告がでるとかオートコンプリートしてくれないとちょっと。まあ即テストができるので、つらいというほどのことでも有りませんが…

開発:それで、ズームボタンが押されたらキャンバス部分を拡大…って、id から要素を検索する関数ってなんでしたっけ。ちょっと疲れたので一服。

基盤:しかしログを見ていると、ロボットさんがキャンバスをクリックするとはとても思われないですね。

社長:よくわからないのは、HTTPリクエストをしてくるだけのロボットがマウスのイベントを発生できるとは思えないので、そもそもマウスの動きが検出できたるようなら、そこにはロボットでは無く人がいるようだ、で良いような気もするんですけどね。

開発:そもそもスマホではマウスの動きとはな無いんで、スマホ版のreCAPTCHAって何を見てるのか不思議です。

開発:されてそれで、何日か前にCSSがらみでJavaScriptの切れ端を書いたのでブログを見ればわかるはずという… ええ!6月13日の初めてのJavaScriptですよ。あれから2週間以上も経ったんですね。

基盤:検索できるように、画像じゃなくてテキストとして貼り付けておくことも重要ですね。

開発:それで document.getElementById(name) という長ったらしい関数でした。さてそれではキャンバスの style.width *= 2。これで2倍化するはず… げ、爆縮してしまった。なんか現在の値を参照できないとか?ではとりあえず4倍でwidth=1600 でお願いします。えいっ。

実サイズ
4倍拡大

基盤:でかい。ハッブル宇宙望遠鏡のよう。しかし、打ったところと別のところに点が現れますね。

開発:そうか、座標はあくまでもピクセル位置でサーバに送られる、サーバ側はクライアント側で拡大されているとは知らない、ということですかね。てことは拡大率をサーバに知らせないといけない。

社長:サーバに知らせる x, y の値はいじれないですかね?

開発:どうなんでしょう。でもとりあえずクライアントは拡大して見てますってのも、サーバ側としてもそれなりに参考にな情報ではあるでしょうね。というか、クリックしてリロードされるたびにサイズが元に戻ってしまいますから、それを維持する意味でも表示サイズをFORMで送る必要はあるかと。

基盤:お腹すきましたね。

社長:ここのところ連チャンでカップ麺ですからね。今日は外でちゃんと食べましょう。

* * *

社長:これはあれですね、既存の点をクリックすると、その点をいつ誰が打ったのか情報がみえると便利かも。

開発:それは簡単ですね。というか私、少し前にFPGAの設計ツールをいじっていた時、回路図を拡大して素子をクリックすると、それがなんというモジュールのどういう回路かが表示されるというのに、とても感動しました。

基盤:それはそうとこのWordPressの検索機能、検索結果に、ヒットした検索語の前後の文脈が表示されないのが、非常に不便です。

社長:それもあって、GoogleとかBingでも検索できるように工夫はしています。ただ、やはりWordPress自体でちゃんと表示できるのに越したことは無いです。

開発:なんでそういうところをサボるんですかね。理解不能。

社長:まあいずれ暇ができたら、自分たちで作ればよいのでは。

開発:あと、FPGAの設計ツールでは、あの業界ではIPって余分ですが、部品がグラフィカルにクラスみたいになってて、それをインスタンシエートして使うのが普通です。お絵かきツールだって、X Windowの時代の idraw とかはそうなってました。それがMSのパワポなんかだと、すごくめんどくさい。ああいうのもなんとか出来れば良いと思います。

社長:部品を自分で作る時には、既存の図全体を背景画像みたいにインアクティブな下敷きにできると良いですね。

* * *

開発:はっ、また寝てしまった。

社長:眠い時は寝たいだけ寝る。我社の方針です。

基盤:ところでこの、画像を拡大したときに補完されてもやっとなるのをやめさせたいですね。CSSで指定できるんでしょうか?

開発:どうなんでしょう。CSS 拡大。ああ、zoom っていうプロパティがあるんですね。これは width hight とかで指定するより適切です。%指定ですかね。style.zoom = 400 ... おお!

基盤:電子顕微鏡のようですね。

開発:倍率でしたか。この変、CSSではシンタックスシュガーがかかってるけど、JavaScipt でプロパティを入れる時は生の値だというのが面白いですね。

開発:うーむ、CSS的には image-rendering、canvas に明示的に描く場合には imageSomoothingEnabled = false で制御できるようですが、周辺との平均値を取ってなめらかにしたがるというのは避けられないような… いやまてよ、単に image-rendering:pixelated でした。16倍で、じゃん。

社長:おー、これならきっちり目的の点をクリックできますね。

基盤:しかし、いつのCSSからかは知りませんが、こんな楽しい表示オプションがあったとは。

社長:んー、となりのアパート新築工事ももうそろそろ竣工っぽいですね。これからは静かになります。ちょっといっぷくしましょう。

* * *

開発:私はMonzilloのビルドトライアルの時に、MDNってもうオワコンなのかと思ったら、そんなこと全然ないんですね。わかりやすい簡潔な記述は素晴らしいと思います。助かります。

開発:というわけで、queryに来たzoom率で座標を変換してPNGへの座標値とする、生成して返すCSSにzoomの値を埋め込み、これでクリックしたところに点が打てます。

基盤:JavaScript要らなくなりましたね。

社長:作り方が完全に25年前にタイムスリップしています(笑)

基盤:時々書いた点が反映されないことがありますね。

開発:うーん、生成したPNGをロードしに来るタイミングが変なのかな。なにか自分のキャッシュした情報でプリフェッチしてるとか。

基盤:ログを見ると、304 Not modified が出てますね。Last-Modified が1秒単位でしか無いから、高速に変更すると、変化したことが検出できないのでは。

社長:なるほど。最近のHTTPの仕様では秒以下まで拡張されてないんですかね。ファイルシステムがその情報を持っているかですが。というか、HTTP/1.1 でもコンテンツのハッシュ値で変化を確認してもらえるはずなんですが…

開発:そういえばさっきCSSを調べた時、そうだ z-index ぜひ使いたいなと思いました。機能的にも見栄え的にも。

社長:あとは色と透明度の選択を入れたら一応の点描のお絵かき的には一区切りですかね。

開発:これはとりあえず32ビットで、8ビットずつ、R, G, B, A を生指定すれば良いかなと思います。

社長:色の件は次のステップということにして、ちょっと休憩しましょう。

* * *

社長:しかし、点じゃないオブジェクトを置く時には、後で編集する時にIDが必要ですね。

開発:時間との組合わせで行けるかなとは思ったんですが。あるいは、ある部分空間に追加された時のシリアル番号。

社長:うーん、それで一応一意性は保てると。でもなんかかっこ悪いような。

基盤:再利用性の高いオブジェクトとしてはやはり文字かなと思います。7セグとか。

開発:うーん、結果として点の集合としてオブジェクトなら、元の情報量は関係ないような。

基盤:手作りフォントを作りたいですね。メタじゃないベタなフォント(笑)

開発:その昔 X11 で k14 というフリーの日本語フォントを作ってくれた人がいましたね。

基盤:14px で漢字を?

開発:少くとも当時は違和感もなく使えてました。すごいですね。

社長:今見ると、これはこれで味のあるグリフだなーと思いますね。

開発:そういえばIPAから各国文字のフリーフォントを出してませんでしたっけ?

社長:あ、あれは私の学生時代からETL時代の友人がやってたんですよ。

基盤:点描空間でベースとしてサポートするテキストオブジェクトの文字として使わせていただくと良さそうですね。

基盤:それにしても、DNSサーバのログを見ていると面白いです。どういう名前のどういうレコードを取りに来ているか、かなり敵の意図が見えます(笑)。たとえば MX 取りに来るやつとかミエミエですよね。登録直後にあさりにくるロボットの挙動は特に特徴的でした。

開発:そういえば、ドメイン名って世界全体で見ると一日10万くらい取得されているようですね。.com が大半の模様。

社長:怪しげなgTLDだとXSOみたいに1円で投げ売りしてたりしますしねえ。なんにしても、1ドメイン1000円平均としても、一日1億円。全世界で年間365億円。小さいパイだなと思いますね。

基盤:名画1枚でもそのくらいのありますよね。

* * *

開発:それにしても、色を選んだりするうのにいちいちその入力フィールドまでカーソルを持ってって入力するってかったるいですよね。

基盤:右クリックのコンテクストメニューで選べたり、現在ポインタで指しているピクセルの色をピックアップできると良いですね。

開発:extension の助け無しにコンテクストメニューに参加できるものかなぁ。

開発:色を円グラフみたいのとスライダーで選ばせるのがあるけど、あれって思ったとおりの色が選べないんですよね。計算機屋の浅知恵みたいな。

社長:その点では色見本というか色図鑑的なサイトにいくと、目移りしてしまういい色が陳列されてますね。色のプロフェッショナルという感じがします。あれはどういうテクなのでしょう?

基盤:色の詰め合わせですよね。せいぜい数色に抑えないと、色気違いになる。

社長:色見本のサイト、以前さんざん眺めたんですが、ブックマークもしてなくて忘れちゃいました。今 royalblue で検索してみますと…

社長:とにかく、色を選ぶ時には、良い色して歴的に人間が選んできた色、名のある色を参考にしたいのです。たとえば graf1x.com では同系色の色の選択肢としてこういうのを提供している。

開発:よりどりみどりですね。

社長:こういう、歴史に洗われた色の見本の中から選べたら気持ちが良いなと思うわけです。

社長:たとえば私は、私が「オレンジ色だ」と感じられる色をパワポなんかで作るのは非常に困難で、ディスプレイ上では出ないのかな?とか自分の視覚に問題が?とまで思ったのですが、上の見本のオレンジは、まさに私が思うオレンジなんです。

開発:良い色見本というかパレットは、文書の各部の配色を決めるのには、とても重要というか必須と思います。ただ、絵画と言うか、お絵かき点描では色は完全に自由に選べる必要はあるとは思います。

基盤:欲しい色をピックアップをする方法は、それだけで重要な機能かなと思います。まあその辺が、プロが使ってるツールの売りなのかも知れませんね。

* * *

社長:ちょっとお絵かきからは外れますけど、QRコードを自動生成して貼り付けたりfavixconにしたりする機能もほしいですね。

開発:ああ、そのパッケージはGoにありますから、CGIで、…あ言っちゃった(笑)作るのは簡単です。

社長:じゃあまあ、だいたい見通しは付きましたから、今日はこのへんで飲みに行きますか。

-- 2020-0702 SatoxITS

点描宇宙空間

社長:点描空間の次元はやはり X, Y, Z と T の4次元ですかね。

開発:とりあえずそれだと思いますが。

基盤:各次元32ビット?

開発:そうですねえ。合わせて128ビットというのは、ユニークIDなんかも考えると、今どきの桁数としてはいい感じかなと思います。

基盤:時間軸の収まりが厳しそうですね。

社長:メッシュというか区切りはどのくらいの単位がいいでしょうね?

開発:うーん、例えばファイル化する単位だとしますと、8KBに収まると現状のコンピュータのハードウェア的にも、ネットワーク転送上も効率が良さそうに思いますね。ちょっと細切れになりますが、32 x 32 で約1K。まあアイコンサイズですね。

基盤:アイコンの点描くらいなら耐えられれそう(笑)

* * *

経理:ポーン。G Suite から請求書メールが来ました。2ドメイン分。

基盤:そういえばこの間ネームサーバの引っ越しをした時に間違ってits-more.com までうちのいい加減なDNSサーバに移してしまいまして、1日2日 its-more.com のメールが不通になってしましました。回復してよかった。

開発:というか、せっかくの GoogleDrive 1TB x 2 が休眠状態ですね。

基盤:それをぜひ、ライトセールから活用したいです。あと、実は、これ絶対いらんだろうというドメイン名で試しにドメイン廃止をしてみました。XSOのコンソールメニューから廃止を探すのは難しいですが、個別ドメインを選択してドメイン詳細ページに入ると、そこにひっそりと「>ドメインを廃止する」というリンクがあったんです。いろいろ脅しをかけられたりしますが、淡々と廃止できました。そこには「変更履歴」というリンクもあって、なんだここをみれば時間軸を含めて経緯が全部見られたのかー、と思いました。あの山のようなメールを検索しなくて済むかと思うとほっとします。

開発:機能を調べたい時にいちいちヘルプページとかに飛ぶんじゃなくて、機能を検索してジャンプできるといいんだよね。OperaやVivaldi みたいに。なんで世の中はそうなってないのかなー。WordPress とかにそういう機能を入れれば、多少は改善するかしら。

社長:ああ、あのドメインは逝ってしまわれたのか。4月の頭にユニークIDについて考えて居た時に取ったんですが… まあ、語呂が全然よくなかったとは思います。しかしあの当時は、高価な .org とか平気で取ってましたね。おーっと、.space 空いてるじゃないですか、しかも50円。ポチポチっと。んー?最後のポチッとの前に利用規約というのがひっそりありますね。

開発:勝手に自社サーバのアドレスを向けますよってここに書いてあるんですかね。あとでじっくり読みます。

経理:「クレジットカード」で申し込んだ場合には自動更新に設定しちゃうからね、とも書いてありますね。設定の解除をお忘れなく。

社長:じゃあ、申し込みますよ。ポチッと。

基盤:速攻でNSを変更します。あちゃー、またくるくるして応答が無いっす。

基盤:これって固まってるのかと思っていたのですが、1分くらい辛抱すると応答があるらしいことに気づきました。速攻でNSを変更。自動更新解除も忘れずにと。ところでこれ、.org の NS を変えようとしたら「失敗しました」になるんで何かと思ったら、どうやらセカンダリの名前が違ってもアドレスが同じだとバレると拒否しているような感じです。TLDごとに運営方針が違うのが面白いなと思いました。

基盤:あと1点、残念なことに、あのクソツールの解約がされてなかったことがわかりました。気づいて速攻でやったのですが、8月末日にようやく解約という悲しい事になりました。それと、この Exchange の契約ってなんですかね?

社長:うーん、当時、クラウドのメールサーバがあったほうが良いかなと思ってポチったんですが… まあもう Gmailで独自ドメイン確定したからもう不要なんですが。以前、解約の手続きもしたはずで…

経理:ここ、自分が今何を契約しているのか全体像を把握するのが極めて難しく出来てますね。まあ外でも一般的にそうですけど。

基盤:その点でも、ライトセールは素晴らしいです。

経理:あとレンタルサーバと抱き合わせで契約した365も解約しなくては。別途MSに直接サブスクライブしましたし。

社長:まあそのOneDriveはそこそこ、これまで有効利用できたとは思うんですが。でも最近、Office アプリもほとんど使わなくなりました…

* * *

社長:うーん、これはやはり、同じところに何度も上書きすると盛り上がって立体感が出るとか。透明度を定義して重ね塗りで色を出すとかしたいところですね。点描的では無いですが。

開発:そうですが、立体表示はPNGとは直交する話かなとは思います。透明度を持つ色を重ねたらどういう意味になるのかは面白いですね。

基盤:あたたたたたー。左上に青い島を作ってみました(笑)

開発:点描空間の切り取りとURLをどう対応づけるかが興味深いと思います。まあ / で分けて上位に向けて合成していくっていう感じなのかなと思いますが。しかし、どういう単位でまとめ上げたり分解するのか。たとえば256倍ずつズームってのは無いですよね。

基盤:直感的には一桁ずつというか、対数的というか。現実的な線ではベースは2ですかね。縦横2倍ずつが静的に保存されてればいいのかなという気がします。あとはそれに収まらない場合には、動的に生成する。

社長:最終的には点のアドレスという事になりますね。点までたどり着くと、その点の属性、履歴とかノートが表示されるみたいな。

開発:しかし最終的な点の行き止まりがあるというのも何かつまらないですね。いくらでもミクロにズームできるのが良いかと。

社長:てことは全ての点は下位の世界を代表する値、色を持つって感じですかね。

開発:点の集まりをURL的にどう表現するかですね。まあ矩形だとすれば、x, y, w, h ということになりますが。最上位では断面を規定するのかな。しかしやはり、規定の区画のサイズというものが無いと、合成とかすごく重そうですね。

社長:いずれにしてもそこは、階層的な静的なURLとは別の、query 的なものになりますよね。query 部分で結合とか変換を指示する。

基盤:点とか区画の所有権とかアクセス権も規定したいですね。

開発:可変長のURLで管理するとなると、特に128ビットのユニークアドレスである必要は無いですね。

社長:下へはいくらでもズームインできるとして、てっぺんをどこに置くのかというところも気になります。予め2段くらいは予約しておくんでしょうか。

基盤:ところでこれ、連ちゃんでクリックすると、ブラウザの画面の書き換えが結構気になります。ブラウザによりますけど。

開発:まあ、このお試し実装に性能を求めないで下さい(笑)。いずれ考えましょう。

社長:既存の画像のアップロードを可能にするのも良いですね。一種のタイルというか、ワールドワイドモザイクみたいな(^-^)

基盤:Google Map とか Earth みたいになめらかにズームしたらすごいだろうなぁ…

社長:いずれにしてもこういうのって、世界を全ての視野に入れて、各層の区画にユニークなIDを振りたいって話の一つではあるんですよね。しかもユニークIDはぜひ人間が読み書きしたり記憶できるようなものであってほしい。となると、識別子は数字で12桁程度、ドメイン化、チャンク化は必要。さっき廃棄されてしまったドメイン名を考えてた頃って、そういうことができるといいなって考えてたんです。

開発:特定の区画はプライベートアドレスみたいにグローバルにはユニークで無いというのも、ある種の安心感がありますね。というか、上位を補完すれはグローバルにもユニークになるって話かも知れませんが。

基盤:ところでこれまでの点描のPNGをダウンロードしたらこんな感じで、なんとなく星空のようです 。

開発:赤い。やはり宇宙は膨張しているようですね。

社長:私の星はどれかな。

-- 2020-0702 SatoxITS

点描.click

社長:なんか面白い事したいですね。

開発:昔からの夢だった、世界で一つだけのホワイトボードを作ってみたいと思います。

社長:誰でも書き込めるOneNote みたいなやつですかね。

基盤:JavaScriptでAjaxとかいうやつかな。

開発:いえ、とりあえずクリッカブルマップでPNGかなと。

社長:Google Mapsに書き込むようなやつですかね。

基盤:Google Earthみたいなやつかな?

開発:いえ、とりあえずいわゆる点描です。

社長:詳しく。

開発:いえ、今の所それ以上のものではありません。まあキャンバスはフラクタルになってて無限にズームイン・アウトができたり、時間を自由に前後できると良いなとは思いますが。

基盤:NASA でしたっけ、3Dで宇宙のいろんな視点で遠ざかったり近づいた入りして見れるアプリ出してましたね。

開発:いえ、とりあえず2Dのみです。ただし、点には自由に属性を付けられる。点は要するに座標情報です。その座標に属性を付ける。一番シンプルなのが、その点を表示する色です。それだけであれば、まさに点描画ということになります。まあ、トランスペアレントにすれば、何にでも重ねて点を打つことはできるはずです。

社長:ふーむ。思い切りスモールスタートというか、マイクロスタートですね。わかりました、ドメイン名を取て気分を盛り上げましょう。点描… pointillism、ポインティリズムっていうんですか。では、安いところで pointillism.click と 点描.jp をポチッと。

開発:べたですね。

基盤:取った名前をXSOのサイトに流用されないように、取得後速攻でNSを当社ネームサーバに向けないと… はい、大丈夫のようです。開通即自社サイト向きになりました。

基盤:まあ100歩譲って名前のアドレスを登録するまで使ってくれてもいいけいど、使用料を払うべき。そして、アドレスが登録されたら速攻で、新しいアドレスのほうへの転送に切り替えるべき。そう思いますね。

社長:いわゆるクリッカブルマップで90年代の技術だと思いますが、現状では何がそれに相当するんですかね?

開発:まずそこから調べようかと。それはそうと、朝目が覚めた時にスマホの小さい文字が読めないのが辛いですね。特に最近ルテインを飲み忘れてるせいなのか…

* * *

社長:とりあえずお腹が空いたので飯に行きますか。

基盤:昨夜から外が荒れ模様でイマイチ出たくないですね。昨日買った辛ラーメンで済ますとか。

経理:先程のドメイン代金の出費もありますし。

社長:そうですか。… これって以前一度食べたことがあるのですが、少し辛さがマイルドになったような。ズズっ。

基盤:袋麺をカップにつめたらこうなりましたみたいな感じですね。麺に工夫が無いのがある意味斬新です。ズズッ。

開発:しいたけの切れ端なんて載ってましたっけね。おかげでか少し旨味が感じられるようにも思います。ズズ。

社長:あとこのカップ、以前はもっと薄っぺらくて、とても手で持てなかったような気がするのですが。今日は持てますね。お湯の温度が低めだったからですかね。ズズっ。

経理:ズズ。ゲホゲホ。ケホッ。完食いたしました。これ、100円はまあ、妥当な価格かなとも思います。

* * *

基盤:この麦茶のほうが高かったりして。

経理:コンビニとか自販機で買ったら高いですね。

社長:当社認定の麦茶はサントリーのやさしい麦茶と決まっております。以前はつるべの麦茶で、デビュー当時は香りも味もキリッとしていてとても良いと思っていたのですが、ちょっときついとも感じてました。でこのやさしい麦茶というのが出て飲んでみたら、とてもやさしくて気に入ったのです。

経理:現在ゥエルシァの棚ではつるべが4列、やさしい麦茶が3列ですね。

社長:いずれ逆転すると思いますよ。

基盤:これの良い点は、ラベルが剥がしやすい点ですね。ゴミ捨てにもやさしい。

開発:てか私は、ラベルを剥がして捨てるっていう作業自体の意味がわからないんですけどね。それよって最終的にどういう総合的なコストになっているのか。ラベルを剥がす作業自体だって、人件費として累積計算すれば馬鹿にならない。アマチュアがやるよりプロとか機械でやるほうが効率が良いと思うんですが。あるいは、いっそラベルは紙にするとか。

基盤:何にしても、剥がすのに苦労するようなボトルを作ってる会社はその時点でアウトですね。

社長:レジ袋も昔みたいに紙袋になったら面白いですね。めぞん一刻で響子さんが買い物帰りに抱えてた紙袋が、途中からぶら下げ型のレジ袋に変わったのを記憶していますが、あれはその当時から見た目に趣きがないなと思ったものです。

開発:レジ袋は自宅での小分けのゴミ袋としても便利だったんですけどね。レジ袋が少なくなったら、結局、別途ビニールの小分けゴミ袋を買って使っているという無駄。

経理:今的なら、お買い物はマイバッグってことになるんでしょうけど。

基盤:そしてやがて宅配になって人がレジに並ぶこともなくなるのです。

* * *

開発:さてそれでクリッカブルマップですが、その後は JavaScript でマウスのアクションを拾って、必要な時に座標をサーバに投げるという事になっているんだと思います。というか、普通はクライアントの中でクリックした区画によってアクションを規定する。クライアントの中で閉じた動作かも知れません。

開発:一方いまやりたいことは、その点が何を意味しているかはサーバが解釈する。クリックごとにサーバに座標を投げる、というものです。で、その結果何らかのアクションをしてオリジナルのマップなり解釈なりを変える。それを全クライアントに周知する。周知するのはとりあえず簡単とは思えないので、これはクライアントによるリロードを待つことにします。

開発:クライアント側のアクションでサーバに対するリクエストを発生させると言えば、古典的なHTTPの手法では A か FORM かと思います。でこの場合はもちろんFORMですが、HTMLの仕様を見ると、どうも input の要素として image Button という属性があるらしい。

開発:というところで引っかかってしまったのですが、何のことはない、type=subumit とか type=button と同じように、type=image と書けば良いのだということがわかりました。なので、点描.click の最初の一歩はこれです。単なるクリッカブルマップですが(笑)

基盤:form の action とかオプションだとは知りませんでした(^-^;)

開発:それで、早速クリックされた部分のピクセルを変えるとかしたいところですが、PNGの生成とか面倒なんで後の楽しみにします。

開発:そもそも思うに、バイナリじゃない画像表現が無いものかと思うんです。PNG互換で良いとしたら、それを単にシンボリックにテキストで表現するニモニック的なものでも良いです。Portable Textual Graphics とか。まあそれと、PNGを相互変換するツールを作れば良いと思いますが。PostScriptというのはそういうものだったかも知れないですけど。

開発:それで次にやりたいのは、複数のクライアントからパラパラとやってくるクリック情報を集積して全員に見えるようにすること、あと単に座標だけでなく何かの属性情報も受け取って集積したい。どこに集積するかと言うと、これはmethodがGETであれば、単にHTTPのアクセスログでも良いです。ただ、このページだけのログが、永続的なものとして欲しい。

社長:例えば 1024 x 1024 の画像を1点ずつ全部埋めたら、上書き無しとしても 100万件のアクセスログになるわけですね。

開発:今の計算機のリソースから考えればたいしたことでは無いですね。

基盤:ただ、ログからの合成を考えると、座標ごとのログに分かれていたほうが良いようにも思います。

開発:プロトタイプというかモックアップの段階では性能のことは考えません。一桁二桁遅かったり大きくても無問題です。標準形式とかも考慮しません。

開発:HTTPのログの情報の中で使用するものとしては、日付、アクセス元、URL の query 部分つまり座標と属性が必須です。他の部分も役に立つとは思います。

開発:べたにファイルに追加していくとして、時刻で2分サーチはしたいとかありますから、固定長が望ましい。テキストとして見たいので、Base16でやるとすると、32ビットが8バイト。これを4つ使うとして32バイトということになります。まあ区切りの空白も入れたり当面の拡張性も考えたりで、1レコード64バイトかなと。これだとテキストとして端末で見る時に見やすい。1メガピクセルの画像が64MBという計算です。

社長:というかそのログ自体が、画像表現形式でもあるわけですね。

* * *

開発:というわけで、とりあえず第一モックアップを作って、クラウド上のサーバにアップロードしました。

基盤:記述言語は?

開発:それは極秘です(笑)。表示している画像のサイズは、幅が400ピクセル。真っ黒画面で、pngにして16KBしかありません。この上でチクチククリックするたびにサーバとやり取りするわけですが、0.1秒以下で転送終了するので、ローカルホスト上のサーバで実験した場合と感覚的にはほとんど変わらない応答性です。

社長:ノートが付けられるから、この部分で昔あった駅の掲示板程度には使えそうですね。

基盤:やはりundoはしたいですね。

開発:おっと、MacMini が勝手にリブートしました。ちょっといじめ過ぎですかね…

開発:自分の打った点を取り消したりしたいですしね。キャンバスのリセットの権限というのもあるから、やはり何らかの認証は必要かなと思います。

社長:権限やIDごとに表示、非表示とか、重ねる層とかもできると良いですね。

開発:とりあえず点描でやってますが、最終的には四角とか円とかテキストとか、そういうオブジェクトを置くことになるんでしょうね。HTMLのcanvasを共有できるみたいにするのが理想形なのかなとは思います。

基盤:しかしそういう事を始めると、それこそ昔からありがちなツールになりそうですが。

開発:まあ我々の空白の間の歴史を追体験をするわけですね。自分で体験的に作っていくうちに何か面白い発見ができたら、儲けものという。アプリの機能というよりは、現在のコンピュータのリソースとネットワーク環境で性能的に何ができるのかなとか。

基盤:そういえば昨日計測したところでは、Amazon Lightsail はダウンロードが 15MB/s くらい出ますね。Azureでは5MB/s、XSOのレンタルサーバが10MB/sくらいでしたから、意外でした。ますます、ライトセール一択です。

社長:とりあえずこの掲示板的モックにロボットさんがやってくるかが見ものですね。ぜひ、ロボットがクリックしたくなるような何かを仕掛けたいものです。

開発:クライアント側で区画を決めるクリッカブルと違って、古典テクなマップはサーバ側でしかその区画的構造の意味を知らないですから、いかなロボットと言えども狙い撃ちは難しいんじゃないかと思うのですが。

基盤:そう言えば最近、XSOの管理者コンソールが、私はロボットではありません版 Google reCAPTCHAをやめてしまって、例の信号機だのトラクターだの選べというやつになってウザくなりました。

社長:なぜデジタル証明書でクライアント認証しないんでしょうね?sshでログインスルときには顔パス的にしてるのに。管理用のHTTPをSSHの口から入らせても良いと思うし。

基盤:端末からssh した時に私はロボットではありませんてのがCLI的に出てきたら面白いですね。

開発:そういえば最近、MSだかアマゾンだかで、昔流の文字認識をさせるやつにも出会って超不愉快でした。reCAPTCHAで何か不具合があったんですかねえ?

* * *

基盤:点描.click を見てて気づいたのですが、各ページごとにアクセスログが簡単に見えるってとても便利ですね。

開発:アクセス者のプライバシー保護という観点では、通常のアクセスログと同じレベルで管理する必要はあると思いますが、コンテンツ情報とそれに付随する情報が同じ塊として切り分けられていて管理できるのは良いと思います。特にこの場合、アクセスのログからコンテツが生成されるので、ログ≒コンテンツのようなものです。

社長:サーバ単位のアクセスログだと膨大になってしまい、長期の保存とか統計分析が難しくなりますが、注目したいリソース、特にHTMLのページやダウンロード用ファイルのログは全体のごく一部ということがほとんどですから、それだけを特出しでログの形にしておけるのは良いですね。実際、サーバがログを作成する際に、全体のログに書くのと同時に、個別リソース毎のログに書くようにするというのは、技術的には簡単な事です。

基盤:たとえば10年間で10万回のアクセスのあるページにしても、各アクセスログを 0.25KB程度とすれば、100,000*0.25KB、25,000KB、わずか25MBということになりますね。とても扱いやすいサイズで、そこから統計を作るのも簡単。しかもそんな人気ページは滅多にないと思います。通常は、他のログと一緒くたにアーカイブされてしまったりして、後から参照するのが簡単ではなくなるのが嫌。

* * *

開発:それで、点情報の列を画像にする方法ですが、ぱっと考えられる方法は2つ。1つはGoに食わせてPNGにする。もうひとつはJavaScriptに食わせてCanvasに書かせる。前者は以前プログラム例を見ているので、簡単なことがわかっています。後者はもっと初歩的な話です。こちらはインタラクティブな更新が可能ですが、描画点数が多数になると厳しい。なので、PNGでまずロードして、差分をJavaScriptで加えたり削ったりしていくというのが実際的かなと思います。JavaScriptでは、点ではなくて部品単位の図を扱うのに良いのかなと思います。PNGを背景にしてJavaScriptで描くというのが自然かなとは思います。

開発:ということで、まずはGoで描くことにします。このマシンでこのサイズのPNGを生成するGoの実行は、go run だと 250ms以上かかってしまうので、ヒトが意識する応答性に支障をきたしますが、ネイティブコード版であれば10msです。通信が100msかかると見込まれますし、いずれにしてもヒトが感じ取れる遅延要因にはならないと思われます。

開発:さてそれで最大の難所はGoでsscanf相当をどうやってやるかなのですが、package bufio で無駄な回り道をした後、fmt.Sscanfというのがあることがわかりました(笑)。

開発:で、さっそくポチポチと点描をしてみたのですが、200点くらいで疲れました。こんな感じ。

社長:よくわからないですが、宇宙の大規模構造のようにも見えますね(笑)

開発:それでつくづくおもったのですが、これ式でやるとすると、HTTPサーバは専用に分けないと、アクセスログがとんでもないことになってしまうということです。

基盤:そうですね。ではライトセールで点描専用のサーバを作ります。

開発:あと、PNGは赤い点ばかりなので圧縮が効くのでしょう、200点でも1KB程度です。ですがいずれ、区画ごとにPNGを分けた版を作るとか、分けて生成して結合することも必要と思います。

社長:分割して作るなら、座標的にはもう無限大でいけますね。

開発:あとこれは、単に X, Y, R, G, B, A の値の羅列なので、これもまた一種の画像フォーマットかなと思います。きっと、PNG のそのほかのチャンクと合わせて、PNGのテキスト表現フォーマットとかあるのでは無いかと思います。Z軸も入れて3次元にということも考えられます。ですが、Z軸は別のレイヤのPNGにというのが自然かなとは思います。

基盤:時間軸と合わせて4Dから2Dのアニメーションを切り出すのは面白そうです。

社長:で、それに対してクリア署名かQR署名をすると、我々の野望は達成ですね(^-^)

-- 2020-0701 SatoxITS