月: 2020年6月

開発：なんかこうスカっとする事をしたいですね。

基盤：たとえば。

開発：なんだこれ？てボタンを押したら地球の自爆スイッチだった、みたいな。ありがちですが。

基盤：穏便にリセットスイッチでお願いします。

社長：グローバル徳政令ですね。

開発：来る2020年7月7の日に地球を一度まるごと洗濯致し申し候！

営業：地球爆破予告とか掲示板に書き込んだら地球防衛軍が飛んで来るんですかね。

基盤：保健所では。

社長：Thunderbird 2号が飛んできて劇的和解というストーリーがいいですね。いやー実は子供の頃からあなたのファンでしてみたいな。

基盤：あれは「国際救助隊」と言うらしいです。

開発：Firefox はこんがりきつね色に焼けちゃうんですかね。

社長：ああ、人類消滅前に住民税というのを直接払ってみたかった。

経理：06月03の日が納入期限なのでまだ間に合います。ですが、口座振替は地元銀行、クレジットカードはyahooが窓口って、かなり抵抗感がありますね。

基盤：でも所詮地球上の話。宇宙史的にはつまらない出来事だとは思いますが。

開発：それはそうと全英女子オープンはどうなったですかね？

基盤：というか、小学生の置き石で電車が脱線て、そもそもフィジカルな世界がセキュリティ的に脆弱過ぎると思うんですが。

社長：ちょっと待って。えーと、20000ch までは .com が取られますが、.net は 2000ch から 空いています。

開発：月面の分譲とかしている会社もありましたね。

基盤：こういうのって、√2とか取ってるひと絶対いますよね。

社長：141421356 ...

全員：（爆笑）

基盤：whoisで見ると2004年から所有されてますから筋金入り。日本の方のようです。

社長：それで、20000ch.net の匿名掲示板に地球爆破予告ガーって報道されるわけですよ。

開発：匿名掲示板というのは20世紀の響きですね。パソコン通信的な。

基盤：やはり今の時代は実名でないと。トランプのツイッターでなりすますとか。

開発：本人が書き込んでも違和感の無い内容ですね。

基盤：それより 2020-0401.com なんていいんじゃないですかね。設立記念日。

社長：それ採用。ポチっと。

開発：子供の誕生祝にドメイン名を取って贈る風習ができるかも知れないですね。ほら、これがあなたの世界で一つだけのドメイン名ですよ。おじいちゃんからのプレゼント。てな感じで。

-- 2020-0621 SatoxITS

経理：アマゾンの費用について見直ししたいと思います。

社長：ああ、こないだプライム年会費取られちゃいましたね。解約するにしてもだいぶ先の話です。

基盤：年会費4,900円。実際もとがとれるくらいには小物を買い物するんじゃないですかね。玉石混交。変なショップにでもかからなければ問題も無いかと。

経理：では、プライム会員契約は放置継続という方向で。

開発：だいたいプライム会員てなんなんですかね？昔、送料が無料で納期が早いということで入会したんだと思いますが。

基盤：サルワカさんが解説してますね。解約方法とかも書かれています。あと、月額プランていうのもあるようです。20%割高だけど。うち的なメリットとしては、やはり送料と納期。あと、写真用のストレージが使い放題。それにKindle本が月一冊無料というのがある模様です。ああでも、ラインナップは期待するなと。まあそんなとこでしょね。

基盤：あと、Prime Music なるものが。iTunes がクソになってしまたので、これが良いものなら乗り換えたいです。ちょっとMac版アプリをダウンロード…　なんだこれ、amazon.com と amazon.co.jp のアカウントは違うのか。めんどくさいから後回し。

社長：ストレージには興味ありですね。アマゾンドライブという。ただのクラウドドライブとして使えたりして。容量無制限てどういう太っ腹でしょう？速度は？

経理：この「You have unlimited, full-resolution photo storage with your Prime membership.」って無制限て言ってる一方で、「Need more storage?」で1TBが13,800円/年て書いてたり、意味がわかりません。形容詞がどこにかかっているのやら。

開発：写真だけ無制限てことですかね？無制限なのは全体の容量じゃなくて、1ファイルの解像度、つまりサイズってことですかね？1テラバイトの画像とかOKなんでしょうか？12時間もののアニメーションPNGとか有っても不思議じゃ無いですよね。

基盤：まあ、ちょっとお手並み拝見。1GBアップロードしてみます…

基盤：ありゃ。1MB/秒出ないですね。通信で絞ってるってことでしょうか？てことは頑張っても1日で86GB、1ヶ月で2.6TB、1年で31TB。これ、引っ越すのも容易じゃないですね。

開発：そもそも「Photo」の定義がわからないよね。例えば入れ物だけPNG形式にして、画像のchunkに好きなデータ詰め込んだって、それが写真じゃないとは誰も言えないし。前衛的でねー、みたいな。

基盤：これ、見た目はごく普通のドライブに見えるんですよね。

基盤：まだ地道にアップロードしてますが。今500MBくらい。

開発：これはまあ確かに、写真くらいにしか使い物にならないですね。

基盤：どうせAWSで実装されてるんでしょうね。

開発：そういえばAWSの仮想マシンてどうなってましたっけ。

基盤：そういえば作ったまま放置してました。・・・　ありゃ、今月500円くらい請求されそうな勢いです。おっとアマゾンドライブ、1GBアップロード完了。

基盤：ではダウンロードは？

基盤：6MB/秒くら出そうですね。そうですか、わかりました。削除しておきましょう。おっと、ごみ箱から完全削除したらダウンロードも破棄。優秀優秀。

開発：いずれにしても、ファイルの型かコンテンツで何か制限しているようでいて、何でもアップロードはできるらしいとか、よくわからないドライブです。

基盤：私達にとって GoogleDrive と OneDrive の実用的使いみちは明らかです。iCloud も。Dropboxも何だか面白い。Adobe CC と Amazon Drive はなんだかわからない、というところですね。でも Acrobat やプライム会員のおまけに付いてくるんですから、有効利用はしたいです。AWSからAmazon Drive を高速にマウントできたりするとうれしいですが。でも1MB/sでは（笑）

経理：それでAWSのほうのアカウントなのですが。あれってアマゾンの会員IDと統合できないんでしょうかね？

開発：縦割りっぽいですけどね。上下なのかも知れませんが。というか赤の他人か、仲の悪い親戚とか。

経理：その点、マイクロソフト方面はMSアカウントでまとめて管理できるようになったのはありがたいです。

基盤：あ、ずっと前にAmazon Driveにアップロードしておいた動画が、ようやくブラウザで再生可能になりました。たかだか20MBの.movなんですが…　20分位かかった？

開発：でも、ブラウザ用にちゃんと再生してくれるのはありがたいですね。Youtubeとかだと画質が悲惨になるし。

基盤：いえ、これも悲惨な解像度になってます。

開発：だめじゃん。

経理：それでAWSのほうですが。こういう請求予報になってます。

社長：1日30円ですか。なかなかよい感じですね。

経理：でも、実質全く使ってないんですよね？

基盤：あ、日本語表示ができるんだ。あたりまえか。

開発：これの予測とさっきの Forecast はどういう関係なんですかね？

基盤：さあ。

基盤：思うに、Azure と比べて、AWSって自分がどんなリソースを持っていていて、それぞれいくらかかっているかが、紐付けが弱いというか見にくいんですよね。要するに、単にハイパーリンクが無い。それ、どっかに出てたなって思うんですが、サイドバーなりから探し直さないといけないとか。基本、リソースに自分で名前を付けられないというところが問題のように思います。まあ、できるのかも知れませんが。Azureの場合ははじめに名前ありきなんで、とてもわかり易いんです。

社長：リソースに名前がついてれば、管理サイト内で名前で全文検索すると、それに関連する情報や管理メニューが全部出てくる、というのが良いですね。で、それをクリックすると実際にその機能の利用画面に飛ぶ。これはこういった管理サイトに限らず、全てのウェブサイトで感じることです。

開発：自分自身が提供する機能や設定メニューを全文検索できるというのは必須だと思います。その点、OperaやVivaldiでは、ようやくちゃんとそういうものに出会えたと感じました。作り手が考える階層とか、利用者にとっては、とりあえずどうでも良い。ビューポイントが違うのですよね。

社長：でも、設計者のビューを理解することはユーザの効率的な理解も助けますからね。構造は維持して情報をフィルタすればいいんじゃないですかね。昨日のCSSの @at-rule みたいな方法で。

基盤：私は「Windowsの設定」は、設定機能を検索すればよいのだということを最近ようやく理解しました。非構造的全文検索の勝利ですね。

社長：利用した機能の履歴とかもほしいですよね。利用日付や利用頻度でソートするとか。機能をブックマークするとか。これも機能にURLがついてればすっきりとまとまると思うんですが。

開発：メニューの自動最適化なんてすごく昔に研究レベルでは見ましたが、いまだにモノになってないんですかね。

経理：うちがどんなリソースを持っていて、それぞれのリソースの単価がいくらで、現在アクティブで課金されてるのか否か、個々のリソースの今後の課金予想。それだけが知りたいです。

基盤：まあディスクは回転してなくても金を取られますからね。それはAzureで懲りました (^-^;

社長：まあ、アマゾンがとんでもなくひどい会社では無いことは確かだと思います。当社の調達先として妥当です。あ、これって主要取引先とかいう奴ですかね？

開発：どうせお付き合いするなら、アマゾンエグゼクティブプレミアムマーベラス会員とかになりたいですね。

-- 2020-0621 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