日: 2020年6月20日

社長：さっき飲みながらスマホで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