日: 2020年6月19日

社長：このサイトの背景画像ですが、バナー的な状態になった時の色合いが暗くて嫌です。

開発：縮小とか圧縮するアルゴリズムがイマイチなんでしょうかね。誰がやってるんでしょう？

基盤：ページのソースはこうなってますね。

開発：へー、img に srcset っていう属性があるのか。

基盤：1000w というのがオリジナル、300w と 768w は WordPress が生成したものと思います。しかし、1000w とかめっちゃ笑ってそうですねwww

1000w

768w

300w

開発：なるほど、WordPressが縮小した段階では色合いは正常なんですね。てことは、表示するブラウザ側の問題なのか。

基盤：そもそも、今どきのディスプレイの解像度なら、縮小されてない1000w を選択して使ってるんじゃないですかね。で、これをMacのScreenShotで切り出すとクリアですが、

基盤：ブラウザのサイトバナーは煤けてしまい、

基盤：印刷するとこんなふうになってしまい、

基盤：Acrobatにかかるとこんな有様です。

社長：わたしはこの、印刷の時の状態だけはなんとかして欲しい。すこし吐き気をもよおします。なんなら表示しないほうが良いくらい。

開発：Twenty Seventeenのオリジナルだとどうなりますかね。

基盤：バナー状態でこう、

基盤：印刷状態でこうです。

社長：うーむ、なんかアスペクトが変になりますが、色合いは完璧に保持されてますね。何が違うんでしょう？

基盤：ページのソースを見るとこうなってます。

開発：ありゃ、srcsetとか無いですね。高解像度のが一つだけ。うーん、てことは一つの画像をベースにブラウザで適宜加工しているということですね。ブラウザ側の問題か。

基盤：このバナーのすすけ具合、Mac でも Windows でも Ubuntu でもラズパイでも、ブラウザにもよらず、ほとんど同じですね。

開発：ということは、元の画像でなんとかするしか無いと。Twenty Seventeen のあの画像は何が良いのですかね？

基盤：ダウンロードして属性を見るとこういう感じです。

開発：おっと意外、画面サイズは幅が2000ででかいけど、100KBちょっとしか無いと。ぼかし入ってるから情報量的には少ないんですね。

社長：うちのあれが暗いのは、圧縮するからじゃなくて、横1000のを引き延ばそうとして補完しているからかもですね。

開発：かも。じゃああれをDimensionだけでかくしたらどうなるんでしょう？

基盤：これが現在の状態。

基盤：Previewでサイズだけ大きくしてみます。ていうか、プレビューって名前が紛らわしいですが、素人から見れば万能の画像加工ツールですね。

開発：あ、WordPress の推奨は幅2000なんですね。

基盤：おー、横2000にすると見た目画質変わらないのに3MBになっちゃう。補完した情報のぶんが埋め込まれたってことですかね。この辺が PNG ってことかな。

基盤：・・・　でも、そうやっても状況はまるで状況は変わらず。

開発：いったい何が違うんでしょうね。なぜ TwentySeventeen のはうまくいってるのでしょう？

基盤：あれとうちのとは、色的にまったく違いますけどね。

基盤：PreviewとかColorSyncで色調整したり、サイズ変えたり JPEG 圧縮したり Adobe の色モデルを選んだり、パワポで圧縮してみたり、色々してみましたが、結局バナー状態になると煙っぽいもやがかかった見たいになりますね。

開発：サイズ4MBでも100KBでも、ディスプレイ上の画質はほとんど変化しないので、Ubuntuのデスクトップ画像の時のように、圧縮の仕方で色がおかしくなるという話とは何か違う感じがします。どうやらうちの壁紙って、100KBで十分て感じもしますし。伸長の問題でも無いような。

基盤：てか、ColorSync が Save で固まるんですが。teminateできず。暴走してるとかでも無く意味不明。

開発：うーん、こういう色の調整って難しそう。我々には、ちょっと手に負えないですね。

社長：まずは単色画像でやってみるとか、ただのbackground-colorでやってみると何がどうなってるかわかるかなと思いますが。でも、今日はとりあえず撤退しましょう。

基盤：MacOS Catalina 10.15.5 が来てますんで、アップデートしておきます。

-- 2020-0619 SatoxITS

社長：さて、じゃあマクロという線で行ってみますかね。

開発：ちょっと待ってください。本当にマクロでいいのか、という点で引っかかるものがあり。

社長：おや。

開発：欲しいのは、CSSだけでなくHTMLやJavaScriptも生成できるものです。で、オリジナルの言語で書いてあるテキストは、マクロ定義的な部分を外しても、構文的には正しく、それなりに最小限に動作するもの。

基盤：CSSのはそういうものですね。

開発：そして、オリジナルの言語の中の構文要素にマッチして置換できるもの。マクロのスコープがあり、ターゲット言語の中でもマクロ操作ができるもの。

基盤：なんかいきなりハードルが高いですね。

社長：マクロというより、構文解析器というか、パーサみたいな。というかほぼコンパイラのような。

基盤：スモールスタートにしませんか？

社長：パターンマッチなら正規表現、sed でいいんじゃないかな。

基盤：perl でも python でも。

開発：そうですね・・・　ではとりあえず例題を考えましょう。

開発：どうも納得できないのは、本当にCSSでは定数名的なものとかマクロ的なものが使えないのか？ということです。

開発：そもそも統一感のあるテーマであれば、使用する色の数なんてたかが知れていて、まあ数種類ということろです。フォント名にしてもしかり。

開発：もうひとつは条件による選択。どういうコンテクストであったらこういう表現にする、って出来て当然だと思うわけです。

社長：それはひょっとすると、マクロ処理をして返すっていう処理系がどこかのURLて提供されてれば済むような気もしますね。それならCSSだけでなく、何にでも適用できる。私達的にはCのプリプロセッサが馴染みがあるけど、歴史をたどれば m4 というマクロにはすごく感動した記憶があります。40年も前ですけどね。

開発：外部のマクロ処理系を通すっていることになると、サーバ側の設定が必要になりますよね。オフラインでは使えないというのが引っかかります。まずは CSS の中だけでなんとか出来ないかと。

基盤：検索しましょう。conditional css ・・・ 一撃ヒットです。ワン・イシューごとにドメイン取るのって、社長と同じのりですね。

Conditional-CSS [conditional-css.com]

開発：うーん、やっぱりブラウザによってCSSを変えるってだけの話ですね。しかも、CSS自体の機能ではないから、別途処理系が必要。

基盤：では、css constant definition とか・・・一撃ヒットです。

Using CSS custom properties (variables)　[mozilla.com]

Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);).

開発：なーんと、やっぱりあるんですね。

基盤：でこのページの最後を見ると、IEだけはサポートしてないですが（笑）。さらにそこに、env() というのが引用されていたりします。

env() [developer.mozilla.com]

The env() CSS function can be used to insert the value of a user agent-defined environment variable into your CSS, in a similar fashion to the var() function and custom properties. The difference is that, as well as being user-agent defined rather than user-defined, environment variables are globally scoped to a document, whereas custom properties are scoped to the element(s) on which they are declared.

開発：なーんと、やっぱりあるんですね。

基盤：さらに続けて。

To tell the browser to use the whole available space on the screen, and so enabling us to use the env() variables, we need to add a new viewport meta value:

<meta name="viewport" content="viewport-fit=cover" />

開発：なーんと、これでしたか。viewport って、以前のブログでモバイル対応について書いた時のあれですね。あの時のはこうでした。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

社長：スマホを横にしたり縦にしたりした時に自動的にフィットしてくれるやつって、これの仲間ですかね？

開発：いやしかし、やはりお天道様は正しい方を照らしているてわけですか。古典的なCSSの苦し紛れ技法の勉強とか自作のごにょごにょとかしないで済みました。WordPressにも依存しない。あ、でもマクロプロセッサっていうサービスはあるといいかな。

基盤：原典は WSC の CSS ホームらしいですが、MDNのはいい感じでサマライズしているって感じですね。MDNって廃屋かと思ってましたが、それは mozilla の実装管理とかの一部分なのかも知れません。

開発：いずれにしてもネット検索って古めの解説とかがバリバリ上位に出てきてしまうから、やはり原典に近いところにあたるのが近道ですね。というか、作成・更新日付で検索を絞ることができないのが、いかに不便かということです。

基盤：あと、CSSのユーザ寄りの情報よりも、ブラウザ（CSS/HTML処理系）を作ってる側に近いところの情報が旬のようです。

社長：とても明るい気分になったので、お昼に行きましょう。

＊ ＊ ＊

社長：さて、じゃあどこから手を付けますかね。

開発：お昼から帰ってしばらく調べたのですが。これ、CSSの拡張機能、やるのやめようかと思います。

社長：おや、そうですか・・・　なぜ？

開発：かったるいからです。非常に簡単なことをやるのに大変な労力とリソースを食う。頑張っても果実が適用できるのはCSSだけ。そもそもそのCSSの拡張方法が見た目に美しくない。その拡張機能はまだ2020年現在ドラフト段階で今後どう転ぶかはわからない。ブラウザによってはデフォルトでオフにされてることもある。やめましょう。われわれの活動指針は more with less です。

社長：そうですか・・・　それで代替案は？

開発：社長の言ったマクロ案を採用します。言語的には伝統と実績のC言語プリプロセッサ。コメントはCSSと同じ/* */。処理系はPython。Python なら Linux、Mac に標準装備、Win でも簡単にインストールできました。幸いCプリプロセッサをPythonで書いてくれている人もいます。http://server/cpp?URL とするとそのURLの内容をCプロセッサで処理した結果を返す。この場合マクロ処理済のCSSです。これを<link type=stylesheet http://server/cpp?URL> で参照する。これでいけるのではないかと思います。そもそもわたしはもともと、簡単な HTMLの生成も、CGIとかSSIとかJavaScriptでなく、マクロでやれば良いのでは無いかと思って来ました。

基盤：HTTPヘッダの値とかが、環境変数じゃなくて predefined として見えるって感じですね。

社長：そうですか。うーん、それも面白そうです。ただひとつ気になる点。昨日 WordPressのソースを見ましたが、style.css の取り込みはこうなってました。

<link rel='stylesheet' id='twentyseventeen-style-css'
  href='https://its-more.jp/ja_jp/wp-content/themes/twentyseventeen/style.css?ver=20190507' media='all' />

社長：これを見た時、ver=20190507 の部分は sytle.css の中でスイッチとして使われてるんだろうと思ったわけですが。これを div["ver=20190507"]みたいに使えるのかなとか、今日の話だと$(env)とかに使えるのかなって。

基盤：わたしもそう思ったんですが、少なくとも styles.css の中には ver とか 20190507 は出てきません。

開発：なんにしろ、たとえばコメントというものが lexical level で事前処理しないと大変なように、syntax level で全てやろうとすると、構文的に非常に面倒なことになります。別の次元から断面を見ると簡単に見える。プリプロセッサはそういうものだと思います。プリプロセッサという別フェイズで展開されたステートメントと最終的な実行を対応付けるのが大変ということは発生します。ですがこの場合、インタプリタたるCSS処理系とかインスペクタは、大元の記述の構造とか紐付けが見えにくくて、まさにマクロ的に redefine を重ねてるだけのように見えるんです。だから、事態は現状より悪化はしない。

社長：そうですか。じゃま、マクロの線でやってみますか。

開発：あ、それはそうと、わたしはさっきはじめて、CSSの基本中の基本というページを見たのですが、この selector に関するテーブルはまさに、ああこういうものを見たかった、というサマリーでした。

開発：スタイルの上書きルールについても確認できました。

開発：最後に、ずっと気になっていた、<body> の中に <style> を記述することの可否についてですが、Stackoverflow で見つけたのは、やはりそれは良くないことだが実際には使えるという話。そして、HTML 5 では「scoped 属性」を使えば、正々堂々と使える、ということでした。

社長：scoped ていわゆる普通のプログラミング言語のスコープのことですか？

開発：そうですね。たとえばある div の中にだけ適用される style タグを、その div の中に定義できる、そう宣言するためにその style に scoped という属性をつける、ということです。ただこの属性、賛否があるようで、HTMLの仕様から外されたり復活したりをしているようです。たぶん、今は外されています。

<div>
  <style scoped> div { color:blue; } </style>
  これは青のはず
  <div>
    <style scoped> div { color:green; } </style>
　　これは緑のはず
  </div>
</dvi>

開発：そういうことに巻き込まれたくないので、もう class とか type とかのセレクタでいいかなって思います。これも内側に定義できるということに気づきました。ようするに、どこに書いてもグローバル、スコープが無いのが好きなんですねCSSの人たちは。

<div class=div1>
  <style> .div1 { color:blue; } </style>
  これは青のはず
  <div class=div2>
    <style> .div2 { color:green; } </style>
　　これは緑のはず
  </div>
</div>

社長：完全にレンダリング用の環境を作ってから、HTMLに適用したい、って気分なんですかね。まあ、そういう意味では、プリプロセッサ的発想なのかも。CSSの処理とHTMLの処理を分離したいというか。HTMLの構造から独立したいとか。

基盤：ですが、そしたらタグの中の属性の style って何なのよって気もしますが。

開発：なんしてもあれですよね、これだけ世の中を振り回す規格なのに、どういう理由でそう決めたのか、rationale というか、ほとんど説明されてないですよね。なんか、varとenvなんかW3Cのエディタのページにいってもすごくサブイ感じだし。

-- 2020-0619 SatoxITS

社長：寝ようと思ってたところ、Stackoverflow.comに DeleGate に関する質問が出てたので、回答を書き込もうとした際、なんだかGoogleアカウントでメンバー登録されました。アカウント名は SatoxITS にしました（笑）

開発：Stackoverflow には何度もお世話になっているし、今後、何かお返しできると良いのではないかと思います。

社長：それでわかったのですが、Stackoverflow にサインアップする時に「仕事を求めていますか」みたいな選択肢の選択が必須だったんです（ここはハローワークですか？）まあわたし的には年金受給も控えてるし（笑）いえ結構ですなんですが、ひょっとしてこのあたりで、専門ごとに腕の立つ人を世界中からリーズナブルなコストでスポット買いできないだろうか？と思ってしまいました。

基盤：どういう質問内容でしたか？

社長：いや、たぶん学生さんだと思いますが、ラズパイでDeleGate9.9.13をコンパイルするとエラーになっちゃいますというだけの話。回避法と修正法はUbuntuの場合と共通で簡単だと思ったのですが、自分でもコンパイルしてみたら、Ubuntu18のGCCでは出なかったWarningが一つありました。とりあえず修正パッチを作って投稿して置きました。それで思ったのが、Wiki的ですが、「この部分はコードだからしかるべき表示してね」というのが簡単に普通の文字列で指定できるんです。WordPressのブロックエディタと両立するかは疑問ですが、こういうのがいいですよね。ビジュアル編集とか、HTML編集とかではない、第３の道。

社長：あと、DeleGateをコンパイルして思ったんですが、ラズパイ４のRAM 2GB版ではコンパイルが全然進まなかったのに、4GB版でもはまともな時間（６分９秒）で終わりました。これは３GHzのx86_64環境での３〜４倍程度の時間であり、使い物になります。つまり開発環境として使うなら、2GBでは無理だということだと思います。これはコンパイル時のRAMの使用を推移を見ていればわかることとは思いますが。その上ディスクがSDカードですから、プロセスのメモリが実メモリに収まらないと、SDカードを潰すのも早いでしょうね。

開発：例えばMozilla系のバグトラックシステムのチケットは切れ切れのツイートで未整理で、英語のセンテンスですら無く、なにがなにやら部外者にはわからないのですが、その点Stackoverflowのコミュニケーションは、渦中にない人間が後から読むに耐える。まともなコミュニケーション媒体として機能していると思います。

基盤：お世話になっているという意味では、お世話になってるWikipediaにも何か、体でお返しする手立ても考えて良いかと思います。

社長：そうですね…　いや、お金でお返しできるならそのほうが安いかなー。。。でもわたしは、Wikipediaに電子署名の文化を注入したらどうだろうって、画策しているんですよ。クリア署名ならユーザの邪魔にもならないでしょうし。

-- 2020-0619 SatoxITS