投稿者: SatoxITS

社長：私たちはブラウザを6種類使っているわけですが、ブックマークが共有できなくて不便です。普段はMacですが、Windowsで使うこともあるし、Linux で使うこともある。スマホでもChromeとSafariとOperaを使う。何か良い方法は。

開発：全部ひとつのプロキシを通すことにして、そこで集中自動管理しては。閲覧履歴も共有したいのですよね。

社長：いやー、ソースのIPアドレス的に別でないといけないこともあるし…　プロキシ・オンオフがサクッとできるならいいんですが。

開発：とりあえず一つのプロキシに投げて、そのプロキシで適切な別のプロキシを教えるとか、直接アクセスしてねとか。そういう応答コードがあったような、使ってたような記憶もあります。

基盤：それもマシンローカルなプロキシで制御すれば良さそうな。

社長：いや、せっかくですから chrome extension でそういうお手軽スイッチをつけるとか。コンテクストメニューでも良いです。

基盤：とりあえず既存のウェブサーバの上のページとして置くのが簡単ですね。社長の本拠地のWordPressに。

社長：WordPressのブロックエディタっていまいちリンクの切り貼りが気持ち悪いんですよ。あと、details を使うなりして畳んだり開いたりしたい。表示の階層は多段にしたい。ブックマーク内でのリンクもしたいから、Wiki的なエディタが良いかな。

基盤：WordPressのプラグインをWikiで検索すると、意外と無いですね。現行 WordPress 5.4.2 に対応してるもので、有効インストール数が1,000を超えているものが4つしか出てきません。

社長：必ずしもWordPressを介さなくてもいいんですが、今のレンタルサーバでそういうインストールができるかですね。

開発：あのレンタルサーバにプロキシ立てて、SSHの口からつなぐという手もありかと。利用規定的にどうなのかはわかりませんが。

社長：うーん、まあそれはおいおい考えるとして、いずれにしてもブックマークを置いといて、ウェブでブラウズするためのサーバは必要なわけです。

開発：chrome extension で、ユーザ固有のページをサクサク作れるというふうにしとくのも良いかと。

社長：ヒトとヒトの間で共有できることも重要ですね。少なくともプライベートなのとパブリックなのはある。でも同じ形式にしたい。同じ基盤にしてアクセス制御だけで切り分ける。あと、以前 Office 365 のウィキアプリを使ったことがあって、あれは結構良かった。

基盤：365といえばこないだ寝ぼけ眼でWindowsのアップデートをした時に、なんか知らないうちにM365にサブスクライブさせられてました。あれも使わないともったいないです。

開発：chrome extension という意味では、コンテクストメニューに、これ共有ブックマークに追加、というのがワンクリックでできると良いですね。とりあえず追加しといて、後で編集する。

社長：JSONで投げてデータベースに放り込むって感じですかね。それで検索する。

開発：一度見たことのあるページだけ検索したい事って多いですよね。やはりプロキシでキャッシュしてそれを検索するのが良いかなと。

基盤：閲覧したページのテキストだけデータベースに突っ込むとか。

社長：Vivaldiではウィンドウごとに複数のアカウントでログインしてますね。それで登録先のデータベースを自動選択できると良いかな。とくに、プライベートなのとゲストなアカウント。

社長：さっき飲みながらスマホでWordPressに書こうとしたら、こんなことになってしまってまして。

基盤：ペイロードが1行って、すごいですね。しかも5-7-5も無理な幅。もとの画面も小さすぎませんか？

社長：iPhone といえばこのサイズなんです。小さめの胸ポケットにでもスルっと入る。手の小さめな私でも片手だけで操作できる。最小限のインタフェースでコミュニケーションを実現するというチャレンジングなUIのテストベッドとしても面白いと思います。新しいものはミニマルから生まれるのです。ただ、手のでかい米国人がこのサイズから始めたとうのがちょっと不思議です。太めのiPod Touchですか？みたいな。

開発：当時はオバマが使ってたブラックベリーとか、やっぱり小さかったんじゃないですかね。画面も小さかった。情報も基本テキスト。すごく小ささと軽さが重要視されてた時代。通信が安くなって情報量に見合う表示面積を求めて大きくなってきたんでしょうね。

社長：ですが、本気で情報を得たり入れたりしたいなら、ずっと効率的なデスクトップとキーボードがすぐそこにあるわけで、しかも通信は高速で定額だし、なんでスマホにそれを求めるのか。わたしには理解できません。動画とかも見ないし。

基盤：長時間、というかそもそも通勤してないからじゃないですかね。

社長：だからデスクトップ環境みたいな効率はぜんぜん求めませんが、今のスマホの入力はそれにしても効率が悪い。表示と入力のバランスがひどい。カーソルの移動とかテキスト編集も辛い。辞書もタコ。

基盤：編集っていう意味では、やはり理想はviじゃないですかね。眺めているモードと、入力しているモードは明確に別であるべきです。スマホみたいに入力のバンド幅が狭い場合には特に馴染むのではないかと。

社長：まあスマホでは編集を諦めるというのもいっそキヨキヨしいんですが。

開発：表示だけならそこそこでも、画面を入力用にも使うと上の画面みたいなことになってしまうという話ですね。

社長：まあスマホでの日本語入力はフリッカー一択です。それで思い出したのですが、昔ガラケーとかで物理的なボタンで入力してた時は、子音のボタンを何回か押して目的の文字にたどり着くという入力方式だったように思うんです。

開発：それも日本語の音が基本、子音ｘ母音の10ｘ5のマトリクスで表せるというおかげですね。穴もほとんど空いてなくて素晴らしい体系です。

社長：でも、わたしはあそこまで熟達する能力があるなら、モールス信号で入力したほうが情報量的に理にかなっていると思うんです。すごい速度で入力している若い人をみると、昔の無線通信士ってこんな感じだったのかなとか。

基盤：自然言語で入力するってとこから既に冗長だと思いますが。

社長：人間はそういうふうに出来てしまってますからねえ。

開発：わたしなんて子供のころは言語では思考してなかったですけど。それで昔考えたんですが、ワンタッチで入力したいアルファベットが32文字以内であれば、人間の指は5本あるので、2^5、つまり32文字のセットの１文字を一発で入れられるわけです。少なくとも英語のアルファベット26文字は入ります。ブラインドタッチで。

基盤：親指は携帯を支える必要があるので、1ビットとして使いにくくないですかね。ギターだって左手側は4本です。

開発：まあ、両手を使ってもいいです。そもそも、携帯の横とか裏側は空いているわけですから、あそこにN個のボタンを置けばNビットが一発で入る。

基盤：よくわからないけどアコーディオンのキーとかそんな感じですね。

開発：というか、スマホのタッチパネルは複数箇所のタッチをセンスできると思いますから、そこで例えば3本指で3ビットを入力する。マジでギターかピアノのキーボード状でも良いかもしれない。あれは入力手段として歴史に洗練されて来ました。

基盤：触る位置の情報を使うのとどっちが効率的かということになりますね。ホームポジションでブラインドタッチにこだわるかどうか。

社長：いやあ、入力の効率を求めるなら、スマホじゃなくてデスクトップでよくね？という話に戻るのかなと思いますよ。

開発：いえ、我々はキーボードに慣れてしまっているのでこれが効率的ですが、５〜６ビット同時入力のデバイスがあってそれに慣れたら、デスクトップ環境でももっと効率的に行けるかも知れないと思うんです。入力デバイスの形状は、たとえば握り心地の良いボール状で所々にボタンが出てるみたいな。遠目にみると、おにぎりを握ってるのかな？手もみだろうか？みたいな。

営業：職場の風景が和みますね。

基盤：マウスに記号入力ボタンが生えてても良いかもですね。両手マウスみたいな。

社長：まあそんだけばりばりベタな文字の列というか音声記号的なアルファベットを入力する必要が本当にあるのかということですよね。機能キーでほぼ良いのではないかとか。実際、マウスでのポインティングとメニュー選択だけで出来てしまう仕事も多いわけです。私なんて一番キーボードを打つのは、ブログにヨタ話を書く時だと思います。そういう、ある意味で、これはクリエイティブな作業なのですが。

社長：いや、それで。スマホで入力を苦労して思い出したのが、一昨年の春ころだったと思うんですが、福生の病院で起きた透析中断問題です。「かかか」は「け」に到達する直前で絶えたのではという話。

開発：それ、これをニュースにした新聞社が必死に頑張ってましたが、結局世論は彼らの扇動したい方向にも行かず、専門家や当局の見解も冷静なところに落ち着いたように記憶しています。

社長：それでね。スマホ用の入力手段とかテキスト編集とか、自分たちで作って見られたら面白いかな、思ったんです。

経理：そういえば健康診断の補助金の話、いくら出るんでしょうね？

-- 2020-0620 SatoxITS

社長：想像してごらん、世の中の全ての事物がフォルダとして扱え、ウィンドウとして見えたらと。

基盤：暇人は考えることが自由ですね。

開発：勤め人の時はずっとそういう考えを楽しむ余裕がなかったですからね。

経理：勤め人てどういう意味ですかね？私達はちがうんでしょうか？

基盤：サラリーをもらえていない人をサラリーマンと呼ぶのかとか。そもそも自然人で無いとか。

社長：ものを考える楽しさ、ものを作る楽しさ、それを自由にやれる幸せ。これはお金があれば買えるというものではありません。プライスレス。我が社はそう言う現物を支給しています。

経理：税務署とか年金機構と見解の相違が無いと良いですが。

基盤：労働基準なんとか監督とかの見解も。

経理：そう言えば住民税払えって来てましたが。

社長：想像してごらん。世の中の全てコンピュータがUnixだったらって。Windowsなんて無いんだと。

基盤：Windowsはサーバとしては生き残るんじゃないですかね？インフラとしては良いものなのかも。

社長：私の頃はIBMの天下でしたからまさか無くなるなんてね。

基盤：まだ無くなってないようです。

開発：CISC vs RISC の歴史も面白いですね。

社長：AWSがARMを入れたのも驚きました。いずれスパコンもARMになるんでしょうか？

開発：AzureがARMを入れるかどうか興味です。

基盤：Azure Resource Managerというのが入っているようです。

社長：なんにしても、最終的には消費エネルギーと人間の嗜好で決するんですかね。本質が決定権を握る。成熟した時代になったと思います。

-- 2020-0620 SatoxITS

社長：当社喫緊の課題は、このページを印刷する時のバナーを、明るく気持ちよい色にすることです。

開発：それで調べたのところ、印刷する時に適用するCSSを、@media print { CSS } みたいに書けるようです。

基盤：当社のページの中で変更したいのはこの id="masthead" の header の部分と思います。

開発：ということは、@media print { #masthead { CSS } } を追加すると。

基盤：昨日 Simple Custom CSS というプラグインを入れたので、これに書いてみます。とりあえず背景イメージを指定。

開発：このプラグイン、表示幅が自由に変えられるし、使いやすいですね。管理画面のあの帯状CSS窓、超不愉快。

基盤：なんか /* */ のコメントを書くと拒絶されるのが不思議ですが、それはさておき。でもって印刷プレビューを見る…

社長：おおーっと、なんだコリア？

開発：ははあ、なんかスクリーンをかぶせてるみたいな感じですね。その加工処理がよろしくないと元の画像を汚くしてしまう。

基盤：で、真っ白い画像を設定するとこうなります。

開発：なんだそういうことか。グラデーションを掛けたがってるわけですね。それで無理が生じる。

基盤：そもそもが、フロントページがこういう状態ですから。

開発：そいつをやめされば解決、ということか。

社長：なるほど。先が見えましたね。ちょっとコーヒーブレークしましょう。

＊　＊　＊

社長：それはそうと、この @media というのは CSSをセットで切り替えるのに使えるわけですね。ひょうたんから駒のような。あと、PDFの可視署名の領域をこれで指定できるとわたしはうれしい。

開発：あと､これでPDFを作ると、印刷用に調整されるようです。まあその名のとおりですが。でも、PDFをディスプレイで見ることは多いわけで、ディスプレイで見る用に色調整したPDFができると良いですね。

基盤：なんせもう、Acrobatにかかるとこんなですから。

基盤：ああそういえば、Catalina アップグレードしたら、Notes 内の静止画とか動画の属性表示がされるようになったかなと期待したのですが、相変わらずです。そういう方針なんですかね。他に、属性を表示するという何かのモードがあるのかも知れません。

＊　＊　＊

社長：さてそれで、そのスクリーンみたいのをのける方法ですが。

開発：マウスに反応しますから、onホニャララで CSS を切り替えてるんでしょうね。

基盤：まずはこのフロントページをまるっとダウンロードして grep しましょう。ああそうそう、画面を小さくするとこの曇がかかるんですよね。grep @media ... ああ、style.css かな。へー、CSS って複数のクラスに対して定義するのはこうするのか。

開発：ちょとこれ、-webkit-transform:rotate(90deg) とかあるんですが。これってスマホを横にした時に適用されるやつですよね。

基盤：この霞をかけるかどうかって、たぶん display:none; でやってそうな気がします。たぶん、半透明のをかぶせてるんでは。grep grad ... あ、これっぽいですね。linear-gradient。.custom-header-mediaにかかってます。

.custom-header-media:before {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+75 */
        background: -moz-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#4d000000", GradientType=0); /* IE6-9 */
        bottom: 0;
        content: "";
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        right: 0;
        z-index: 2;
}

開発：とりあえずそれ切ってみては。j

基盤：ではとりあえず改名して…

基盤：曇りがとれました。とってもクリンビュー。

開発：よっしゃー。では print は？

基盤：かくの如く。

社長：素晴らしい・・・　おそろしく気分が爽やかです。

基盤：それにしてもこのスモークみたいなの、なんで掛けたがってるんですかね？ずっと不愉快だったんですが。

社長：いやーメデタイ。祝杯を上げに行きますか。

開発：いや、まだ店が開いてないと思います。

基盤：それはそうと、WordPressサイトで直接スタイルを変更するのかったるいですが、ローカルでこうやって試すのが正解ですね。あと、Simple Custom CSS に書いた CSS がどこにあるのかと思ったら、ダウンロードしたページのファイルの saved_resource というファイルに入ってます。これってつまり、URL でアクセスできるものでは無いもののように思えます。

＊　＊　＊

社長：あとは、印刷した時の文字も白抜きにしたいかな。

基盤：.site-title と .site-description の color を white に、ですね。… あれ？description は白になりましたが、title が抵抗してますね。

開発：印刷結果に対しては DevToolでインスペクトできないよね…　セレクターはよくわからん…　この「>」 というのを使うとよいのかな？

基盤：.site-title > a …　できました。

@media print {
        p.site-title > a   { color:#f0f0ff !important; }
        p.site-description { color:#f0f0ff !important; }
}

社長：完璧です。飲みに行きますか。

開発：いや、少し整理してから…

基盤：まずこの、画像や文字をどう重ねているのかと思ったら、 この z-index というやつです。これの値が大きいものほど上に来る。

開発：なるほど。シンプルですね。

基盤：で、このスモークを掛けたり消したりですが、jquery.js の中に style.display=none なんていうのがありますから、おそらくイベントを拾ってそうやって制御しているものかと。いや、もうコードが人間が読むようにできてないんで追う気にはなりませんが。JavaScript のプリティプリンタにかければよいのかな。しかしこれ、テキストとして配布する意味あるのかな？

開発：chrome の extension にプリティプリンタとかありそうですね。それであのCSSの @ほにゃららというのは？

基盤：ああそれで、@media print の場合に DevTools が使えんという話が出ましたが、あれ、 DevTools の中に「Emulate CSS media type」というのがあって、そこで「print」がえらべます。つまり、ブラウザで印刷イメージを直にブラウズできるということです。

社長：えー、それならわたしのブログなんて、デフォルトで print エミュレーションで表示したいですね。

開発：print の他には？

基盤：とりあえず print と screen しかないですね。ここをユーザが自由に定義できれば、@mypref1 とか、@happy とか。

開発：メディアじゃないとは思いますけどね。そこに出ている、prefers-color-scheme というのがそれ相当じゃないですかね。

社長：うちが思うような使い方は想定されてないけど、使える、という話ですね。

開発：個別のユーザが、特定のサイトを見る時に適用するCSSを定義できるとハッピー。そういうことですね。

基盤：それではもう、今日の変更を本ちゃんの style.css にベタ書きしてしまいますね。えいっ。

社長：でこれを印刷して、デジタル署名して、アップロード…　そう、この作業を自動化したいとう事で、extension という話になったような気もしますが。あーっと、PDFにするとAdobeで色合いが変になる問題が。

開発：そろそろ飲みに行きましょう。

社長：今日はメシウマサケウマだなー。

-- 2020-0620 SatoxITS

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

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

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

開発：へー、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

社長：私はこの、WordPress 5.4 の about.php がとても好きです。

開発：さわやかでなごやかですね。

基盤：我が社のカラーにぴったりマッチ。

社長：加えてこの TwentySeventeen のテーマ。

開発：肩の力が抜けます。

基盤：何もコンテンツが無くてもいけますね（笑）

社長：これはたまたま、遊びで作ったサイトの設定をする時に見つけたんです。あれも無駄にはなりませんでした。

社長：思い出したくもありませんが、最初にこのレンタルサーバに来た時にインストールされてた 5.3。あのWのアイコンを間違って押してあのページが表示されてしまった時の気分。嫌なものを踏んじゃったみたいな。おかげでWのアイコンが嫌いになってしまいました。

社長：その上、デフォルトのテーマが TwentyTwenty という、これもまた。

開発：何をどうしたらこういう色使いになっちゃったんでしょうね？

基盤：未だかつてこういう感じのウェブページを見たことは無いです。2020年地獄の黙示録みたいなテーマですかね。

開発：ソフトの世界では新しいものが良いとは限らないと。まあこのテーマがハマるコンテンツもあるんでしょうけど。

社長：まあ細かく設定すれば思い通りにできるんだと思いますが、デフォルトがこれだという時点で。当時はこれから始めなければ行けないのかと思って、非常に暗い気分になりました。ページの背景から始めて、デフォルトの配色をいちいち入れ替えないと使えないって、いったいどういうテーマだろうと。

開発：TwentySeventeen にしても、style.css の中で color が定数決め打ちになってますから、変えようとすると面倒そうですね。そもそも全体を調和させるように複数パターンを作るのは、素人の手には追えない感じがします。

社長：いやそれで。そもそも WordPress の管理画面がこんな色使いなのが辛気臭いなーとずっと思っていたのです。

社長：一方で、時々プロフィールメニューを間違って押した時に出てくるこの配色設定部分も知っていました。

社長：それでふと思い立って、これを選んでみたわけです。するとこのように。

社長：とても気分のやわらぐ配色になりました。

社長：それで、テーマに対してもこれができると良いのでは無いかと思ったわけです。複数のcssを用意しておいて切り替えるだけですから、技術的には簡単ですよね？

基盤：そういえば Office 365 の SharePoint サイトでは、そのへんの配色の切り替えがなかなか良く出来てました。

開発：うーん、技術的にはたぶん。ただ、TwentySeventeen は構造とか色とかフォントとか総合的に非常に調和しているテーマだと思いますので、果たしていじるべきかどうかというところかとは思いますが。それはともかく。

開発：まずこのサイトのページのソースを見ると、通常ユーザ向けのページで TwenteenSeventeen がインクルードしている stylesheet はこのあたり。要するに twenteenseventeen/style.css だ、ということかなと思います。

開発：で、この style.css を直に書き換えるのはなんだから、後の方で上書きしてやるということになるかと思います。で、その上書きするスタイルシートをどこに置くかです。サーバに置くか、クライアント側に置くか。サーバに置くとしたらデータベース内ですかね。アップロードしたファイルでっていう線もありかも。クライアント側に置くとしたら、client-side cssか、file scheme、あるいは chrome extension のフォルダの下に置くとか。可能性としては、style とかいう Cookie を持たせてそれをstyleタグの中に展開するとか。あるいは、JavaScript とかで作り出した動的なコンテンツ・・・

基盤：動的に生成した一時的なコンテンツにURLでアクセスできたら、物事がすごく簡単になりそうです。

開発：うーむ。それはすごく便利そう・・・

社長：うーむ。・・・　でも、とりあえず client-side CSS で試してみては。

開発：では、以前やってみて client-side CSS が使えることがわかっている Safari で行きます。　・・・　あれえ？よくわからないですが反映されませんねー。・・・　あれえ？

基盤：ぶぶー。タイムアウトです。初心者向けのチュートリアルを読みまましょう。んー、wordpress adding custom css とか。。ダイレクトヒットしました。

How to Easily Add Custom CSS to Your WordPress Site (Dec. 2017)

1. Method 1: WordPressのテーマカスタマイザを使う
   ー　これが気に入らないという話から始まっています。
2. Method 2: プラグインを使う
   ー　とりえあず自作のCSSを差し込むにはこれ。
   ー　Simple Custom CSSがおすすめ。
3. 子テーマを作る
   ー　理想としておすすめ。
   ー　確かに、最終的にはこれなんじゃないですかね。
4. CSS Heroプラグイン
   ー　CSSを書かずに全部GUIで設定可能。
   ー　これはWordPressとは関係なく参考になりそう。

開発：さすがに、HTML body の中に style 直書きというのは推奨も言及もされてませんね（笑）。個別のページに固有のCSSという話も無いようです。きっと、全体としての統一感というのが大前提なんでしょうね。

開発：要するに、
A. ユーザの好みに応じて複数の配色を提供したい
B. ダイナミックにスタイルを変えたい
C. ローカルにスタイルを変えたい
といった考え方とか欲求は、一般的なWordPress編集者には無いように思われます。というか、あったとしても、それをCSSでやるべきだと思っていない感じ。それなもんで、CSSでやるのが自然なところまで JavaScript でやってみたりするという話になっちゃってる気もします。やはり、動的に生成したCSSを参照する。やるならそういうのをやりたいなあ。

基盤：まずA.を実現するには、CSSのプラグインでも行けそうな気はしますが。そこで複数のCSSのセットを定義したり編集したりする。ユーザからの指示、Cookie とか URL の一部とかでどのセットを使うかを選択できれば。あれ？そういえばクライアントが IE9 かどうか判別するお目汚しが随所に入ってますね。これは HTTP の User-Agent ヘッダ見てるんですよね？

開発：なるほど。これは PHP の SSI 的なものなのかな？

基盤：なんとなればクライアント側で User-Agent に情報をくっつけるとか。

開発：昔はそういうことも結構やりましたよね。

社長：そうですね。でも今日はこのへんで終業にしましょうか。

-- 2020-0618 SatoxITS

社長：そういえば私は大学に入った頃によもぎ色にハマったことがありましてね。そのテキストの色はよもぎ色系だと思うんですが、私は今、当社のイメージカラーはよもぎもいいかなと思い始めたところです。TwentySeventeen とも相性が良い。あたたかい感じがします。ほら、こんな感じ。

基盤：とりあえず寝ましょう。

社長：どういうことでしょう？

経理：先月末に発注した iMac の代金を今日請求されたらしいのですが、当社カードの利用限度額を超過したため、引き落とせなかった、ということです。

開発：・・・これ、3100万円て。そりゃあ無理ですね。社員全員を逆さ吊りにしても出てきませんよ。

経理：いえ、最後の部分は .00 です。実際、社長が設定した限度額を超過しています。

開発：こういう、単品で10万円を超える金額で、一円未満の表示ってうざいんですが、電子決済時代的なんですかね。せめて小数点以下はフォントを小さくしてくれよと。

基盤：楽しみにしていた iMac の納品が遅れる恐れありという事ですか。

経理：以前の案内で出荷予定は 6/25 あたりとありましたから、そう影響は無いかと。ああ、Appleストアにはこんなふうに。

経理：注文日に注文て確定してなかったんでしたっけ？

基盤：問題が見つかった（笑）

開発：いつ誰がどんな問題を見つけたんでしょう？

基盤：ご利用のカードって何ですかね。

開発：どうやら表と裏のある物体らしい。

社長：うーん…　一時的に、その金額が収まるように上限を変更しましょうか。

経理：いえ。この銀行のデビット君は前々から変なので、この機会に他行に切り替えたいと思います。特に海外への送金で、200円でも限度額ガーって言ってくるので辟易していました。海外が全部ダメというわけでもないらしく、意味不明です。

経理：加えて Pay-easy への対応範囲が狭いこと、利用者認証が面倒で怪しげなこと。ただ、ある回数まで振り込み手数料が無料。ウェブページのデザインが上品で、利用履歴が比較的見やすい点は評価できます。ですので、そういう向き用には使って行きたいと思います。ですが、この iMac はあっちの銀行の口座から支払うことにしたいと思います。

社長：了解。

経理：では、支払い方法の更新をぽち。…　AppleId とパスワードを聞かれました。

社長：AppleId 。。。　うーん。これは前々から鬼門で。あれ？いやあ。これか？むーん。とほほ。。

開発：発注当時のChromeが覚えているのでは。

社長：結局そういうことですか。しかしそもそもパスワードとか、人間にとっては入力が艱難辛苦なのに、10バイト程度の情報なんて簡単に流れてってしまいますよね。1テラバイトくらいあれば、流出が抑止できると思うんですが。

基盤：それだと照合がかなり重そうです。認証用のカードの認証番号表みたいにランダムサンプリングするですかね。

社長：あれって昔は本体カードの裏にあったんですよね（笑）。おにぎり銀行の前身ではそうでした。

開発：生体認証とか言っても大した情報量じゃ無いですよね。しかも最終的にパスワードと同じ証明になるんなら単に別口から入るだけであんまり意味が無い。

基盤：それでワンタイムパスワードとかトークンという話になるんでしょうね。

経理：で、こっちの会社のは、カード型のトークンなんです。ここを押すとこの窓にワンタイムパスワードが出てくるのが、とても楽しいです。ついでに電卓機能もついてればよいのに。

基盤：しかしそれも落としたら鉄人28号ですからねえ。Googleが「私は私です」的な reCAPTCHAでも作ってくれないですかね。

開発：AIを名乗るなら、私という思考回路は、こういう質問をされたらこんな風に答えるに違いないとかを見てほしいですね。思考回路認証。職務質問型。

基盤：それだと、ボケたらアウトですね。気分屋の認証も難しい。

社長：サンドウィッチマンの中ではあれが一番好きです。

開発：あなたの好きな色はどういう組み合わせですか、とか。嗜好認証。

基盤：似た嗜好の人は結構居そうですが。

開発：あなたの携帯を振り回してください、で判定する。

基盤：運動機能認証。

開発：得意な歌を歌ってみてください。

基盤：カラオケ式。

開発：何か刺激して心拍数とか心電図の変化パターンを見るとか。

基盤：チャレンジアンドレスポンス。

---

基盤：ところでこれ、電池内蔵？それともぷちっと押したので発電してるとか。ピエゾで発電とか？？

開発：昔は太陽電池パネルが付いてるカード型電卓とかありましたね。これなんか、マイクロアンペアで動く8ビットマイコンとか入ってそう。ディスプレイは電子インクでしょうね。

基盤：AmazonのKindleはこういう風に進化してほしかったですね。結局液晶とかツマンネ。カードサイズ、重さ5g、厚さ0.3mmの3つ折り、画素数800x600x3、1GB Flash、760時間電池+ソーラー発電、価格3,000円。そんな感じのものが欲しかった。

社長：そういうの、もし10円で作れたら名刺として配れますね。電子証明書入り名刺。

開発：1MBくらい記憶できたらいろんなものが配れます。

基盤：証明書だけ配れれば、あとはネットで送ればいいんじゃないですかね。少なくとも鍵だけならQRコードでいけると思いますが。

開発：カード型の格安スマホとかあるといいですね。マイクロAndroid搭載。通常の無線はBluetoothとか。

基盤：社長の業務用携帯に良いですね。

開発：SIMカード型携帯とか。

基盤：米粒に字を書くやつですね。

---

社長：はい、入れました。注文をぽちっと。

経理：速攻で引き落とし通知メールが来ました。Appleストアではこんな様子。以前の表示に戻りました。

社長：やれやれですね。私は思うんですが、クレジットって勝手に支払われてしまうから恐ろしい。だから（１）少額の支払いは承認不要にしたい。（２）承認不要上限を超える場合はメールなりSMSでクリック承認を求めてほしい。（３）支払い可能上限を超えたらウェブ上での上限変更なりワンタイムパスワードで対応します。これで良いと思うのですが。

基盤：今のカードでそういう設定はできないんですかね？

経理：調べてみます。

開発：オンラインでのリアルタイム承認ができることが想定されていない時代のシステムでしょうかね。

---

基盤：しかしこの iMacって今請求が来たということは、これから生産に入るって事ですかね？5月の末に発注したのに。これまで3週間近く、単に待たされてたとか。

経理：少なくとも在庫は無いという事でしょうね。MacMini の場合には 4/20日注文、4/22日到着でしたから明らかに在庫と思いますが。

開発：今度のアンケートにはお客様不満足度90％で返しましょう。もし即納のMacMiniがなかったら、わたしたちはMacOSに戻ってこなかったかも知れませんね。

社長：いやしかし、あのモニターが楽しみですね。あと、あのろくろ首的スタンドに興味ありなのですが。iMacを抱えたあれを支えるにはどっしりとした机か、櫓を組まないといけないかも知れません。

基盤：この際に模様替えですかね。

-- 2020-0618 SatoxITS