リカーシブQR

基盤:昨日 Remote Desktop 越しに Hyper/V やってる時に、つい自分の macOS のデスクトップ自身にVNCしてしまいまして。ゲストOSのデスクトップを見ようとして、間違って自分のIPアドレスを入れてしまったと言う。結局強制リブートするしか脱出手段が見つかりませんでした。

社長:それそれ。昔よくやりましたね。万華鏡みたいというか、2001年みたい(?)というか。マウスカーソルがコマ落としにブラックホールに落ちてく感が素晴らしいですね。まあでもOperaはじめ、macOSはリカバリ能力高いから強制的に落とすのも安心です。で、私はあれを見て思ったんですが、リカーシブなQRコードを作ったらどうだろうって。

基盤:作ってどうするんですか。

社長:だって面白いじゃん。

基盤:社長が遊んでる間、私は仕事ができなんですが。フォアグラウンドでは自分割多重なんで。

開発:まあその点、私はバックグラウンドで動いてるから大丈夫です。

社長:いや、面白い事を放っておくのは精神衛生に悪く、それは仕事の生産性を著しく毀損するので。ただ go で QR の png を生成して、その png を data URI にして、それをまた QR にする。それだけです。こんな感じ。

QRリーダが data URI に対処してくれなかったら、こっちで一段剥がすとか。

基盤:モノリス感ありますね。

開発:遠い将来、これを読み取ってくれるQRリーダが現れると良いですね。

社長:というか、Google の画像検索結果のサムネールが data URI でできてるのはびっくりしました。このサイトで使ってる背景画像とか。”its more ブログ" なんて画像をぐぐるとこんな魚拓が出てきます。

上の画像のdata URI(長さ7.5KB) data:image/jpeg;base64,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

社長:これだけの画像がBASE64、7KBで表せるってちょっと意外です。ウェブページの埋め込みのカウンターに使われてたりとか。

開発:実用性の匂いがぷんぷんしますね。

社長:やはり本質的に面白いものはやがては面白く使われるということかなって思います。

--
2020-0524 SatoxITS

クリエイティブコモディティ認証

社長:会社名を替えようと思うんですが。

全員:ええーっ!

社長:新社名は「クリエイティブコモディティ」、略称「CC」です。

経理:さっきドメイン名取ってましたね。

開発:コンパイラ屋ですか?

社長:独自の一貫した視点から、これは素晴らしい!という身の回り製品を勝手に認証して「CC認証」マークを授与し、顕彰する会社です。

基盤:抱きつき商法?

広報:なるほど、わかりやすいですね。イメージが湧いてきました。バナーを考えます … とりあえずこんなんでどうでしょう?

社長:ややごちゃっとしているけど、イメージは近いですね。

基盤:グッドデザインとかモンドコレクションのノリですかね。

営業:認証料を取るんでしょうか?2年間で1万円とか。

開発:QRのクリック数で課金するというのはどうでしょうね?

経理:アフィリエィトで食っている会社って感じですね。

営業:でもやっぱり、ほかにも予定している事業はあるわけですから… 

社長:うーん、じゃあCC認証事業部ということにしますか。

基盤:てか社長、createive ってこれミススペルですよね。

社長:ご…

広報:すみません、間違えました。

経理:幸いドメイン名のほうは正しい綴りで取れていますから大丈夫です。

2020-0524 SatoxITS

ipマスカレードで快適e環境

社長:それで、VPN のほうはどうなりましたかね。

基盤:VPN はやめようと思います。

社長:ご…

基盤:基本、素で IP をフォワードした場合よりも大幅に遅くなるのは目に見えていますし、意味なく複雑、リスクも増す、かつお金もかかる。

開発:素性も中身も知れたアプリケーション・プロトコルだけを、特定のターゲットに中継するのは安全ですからねぇ。

社長:つまり NAT というか、NAPT するルータだけ社外のクラウドに置こうということですか。なんか、出発点に戻りましたね。

開発:元々公海をやってきたパケットを公海を通って転送するだけですので、セキュリティ上のリスクは増しませんね。

社長:どうもそういうサービス、レンタルクラウドルータみたいなのが見当たらないので、何か技術的に困難な問題があるのかと思っていたのですが。

営業:需要が少ないからじゃ無いですかね。クラウド業者の儲けにもならなそう。

基盤:とりあえず、Azure で2つ IP を買ってあったので、やってみました。使った道具は Linux の ip route と iptables。結果的には、いたってカンタンでした。

社長:iptables、懐かしス。

基盤:ただともかく昔にちょこっと使ったきりなので、やり方を全く忘れていて、苦労しました。問題はまず、マルチホームでのルーティングの問題です。うちの Azure 上の仮想ネットはこうなってるわけです。VMをもう一つ買うのをためらったので、一つに2枚挿しにしました。

社長:マルチホーム、超懐かしス。行きと帰りが違う道になっちゃって迷子になる問題ですね。

基盤:それです。2つのネットワークインタフェースからやって来た TCP/IP の接続に、それぞれ元来た道で帰ってもらうというあれです。TCPソケットの場合、帰りのパケットのソースは自動的についてますから、IPのソースルティングだけでできるはずです。実際、答えはこうでした。

# ip route add from X.X.X.X oif ethX

社長:そうですか… 私がやってたころはまだ BSD が元気で、あちらはあちらで流儀が違ったよね。

開発:当時は BSD のがスッキリしてたような記憶もありますけどね。トランスペアレントプロキシとかやるのに。

基盤:あとは、IP のフォワーディングなのですが、これは iptables でやりました。インタフェース XX に来たのを IP アドレス YY に丸投げするのは、こうなります。

# iptables -t nat -A PREROUTING -i XX --to YY -j DNAT
# iptables -t nat -A POSTROUTING -j MASQUARADE

基盤:ポート番号を変えたり、フォワーディングを有効にしたりするのは、もう少しだけやらないといけないことはあります。Stackexchange で見つけた、そのものスバリの具体例と完璧な解答がこれです。2016年のコメントなので、結構鮮度が高いですね。

質問(やりたいこと、要件)
回答(やりかた、ソリューション)

Linux での IPマスカレードの設定方法
First allow forwarding with

  echo 1 > /proc/sys/net/ipv4/ip_forward

Then set iptable rules with

  IF=eth1
  PORT_FROM=8080
  PORT_TO=80
  DEST=10.32.25.2
  iptables -t nat -A PREROUTING -i $IF -p tcp --dport 
  $PORT_FROM -j DNAT --to $DEST:$PORT_TO
  iptables -t nat -A POSTROUTING -p tcp -d $DEST --dport 
  $PORT_TO -j MASQUERADE

You can put these lines into /etc/rc.local for example. 
Note: since Debian jessie make it executable and enabled the rc.local service via

  systemctl enable rc-local.serviceF=eth1
IPTables - Port to another ip & port (from the inside) https://unix.stackexchange.com/questions/76300/iptables-port-to-another-ip-port-from-the-inside

基盤:これの設定って一瞬で終了なのに、うちのおまけルータ、設定して反映させるのに90秒もかかるんですが、一体全体何やってるんでしょう?ルータがリブートしちゃうからその間仕事にならないんですが。しかも、DHCPのリース記憶を喪失したりして(クソ!)

開発:FPGA構成を生成してしてFlashに書いているとか?

社長:それにしてもこういう基盤系の人たちって、徹頭徹尾CLIだね。ウェブでカンタンインタフェースをつけてやれば楽々設定なのに。

開発:素人には教えたく無い秘伝の技みたいな。

基盤:作っておきます。CGIで十分ですよね(笑)

開発:設定用のHTTPサーバでは、公開鍵を使ったクライアント認証があったほうが良いですね。

営業:それ、売れませんかね?

社長:需要が少なくて、儲けにもならなそうですが。

社長:てか、iptables を双方向にしたら、分散プライベートネットできるよね。ルータなんだし。

開発:リアルプライベーットネットですね。RPNというか。

社長:隠さないといけないプライバシーも無けりゃ無問題かな。

開発:まあ、隠したいデータはトランスポート層でもアプリケーション層でも暗号化されてますしね。要はHTTPだけ通すネットワークみたいな。

社長:で、それならHTTPプロキシ、つまりアプリケーション層のルータだけでできたネットワークでいいんじゃね?ってのが当時の私の考えでしたね。SSHだって必要なの?SSLトンネルでいいんじゃね?とか。その考えは今も変わらないけど。まあ、あとはソーシャルエンジニアリング対策ってやつかなぁ…

開発:ただ、いずれ世の中アプリケーションプロトコル・トランスポートプロトコルはHTTPSだけになるって予感は当たりませんでしたね。

社長:いやいや、この先どうなるかわからんよ。HTTP の最大の問題は効率だと思うんだけど、HTTP2でのパイプラインとか、プロトコルの等価バイナリ化で、かなりイケるんじゃないかと思うんだけどね。

--
2020-0524 SatoxITS

Hyper/V + VPN Gateway

経理:Azureから請求書が届きました。コスト分析によるとこのような推移と内訳になっています。

4月中旬〜5月初旬のAzure利用料金

社長:劇的ビフォーアフター。

基盤:中央にそびえているのが4月末からの1週間の移行時期なんですが、私の考え違いで、新規VMに超高額なディスクをつけてしまいまして、Azureの課金情報システムがまさにその後2日間気を失っていて気づくのが遅れ、不慣れで外すのにも手間取り、総額4,000 円を超える損失を出してしまいました。死んでお詫びをしたい。シクシク ;-(

社長:さすがにその程度の損失で倒れるほどの会社ではない。

基盤:で、その手当てを行った後は、1日100円未満になりました。3月からの3ヶ月で見るとこんな感じです。グラフにある水色の部分が旧仮想マシン、紺色の部分が旧ディスクの代金です。また3日前に、残ってた紺色の部分(不要の古文書ディスク)を切ったところ、1日80円を切りました。

3月〜5月のAzure利用料金

社長:すばらしい。

基盤:移行後の、この1週間だけをみるとこうなります。水色が仮想マシン、紺色がディスク、その上の青緑が固定IPアドレス、その上の緑がスナップショットの料金です。オレンジ色はお試しでDNSサーバをつけてみたものです。IPアドレス代は意外と高くて1日に8円くらいします。しかもなぜか微変動…。ですがこの必須の3要素で、1日68円くらいですね。あと、ディスクはもう1ランク落とすことができて…

直近1週間のAzure利用料金

社長:いや、もうこれで十分です。

経理:相対して浮かんでくる他の巨悪への対策が重要ですね。

社長:遺産の動態保存展示用サーバはこれでいいとして、これからの我が社の新サービス用の仮想マシンをどうするかですね。この構成で性能的にも結構イケるようだし、これを2つ3つ立ててはどうかな。

基盤:それなんですが、費用的には問題ないと思いますが、やはりどこかのクラウドのもやもやの中にあると、いじるのがかったるいというのはありますね。Azureの構成部品がやたら細分化されているのもイラっとします。昔ながらの、ブロードバンドルータとPCでおうちサーバに見えるカンタンパッケージを提供するべきだと思うんですが…。それで、手元に遊んでいるWindow 10 Pro機がありますから、これの Hyper/V を動かしてUbuntuを載せてサーバにするのはどうかなと。Remote DesktopでMac から覗けるし。1ギガのインターネット回線もほぼ遊んでる状態ですし。

経理:それ活用したら、追加費用ゼロですね。遊休リソースの有効活用です。

社長:オンプレミスとか言うと立派な感じもするしね。でも、電気代が月1000円くらい増えるかも。

基盤:まずはそもそも性能や使い勝手に問題ないかです。実際に Hyper/V に Ubuntu 18.04 を載せて動かしてみました。Hyper/Vのお勧めOSリストにあるし、ダウンロードも 300Mbps くらい出てましたね。インストールも何度かクリッククリックするだけ。ネットワークの構成方法が VMware と違うので一瞬戸惑いましたが。涙も出ない程しょぼかった VirtualBox に比べれば、もう天国のよう。

基盤:それでこの画面は、その Hyper/V を実行している Windows のデスクトップに表示されているUbuntu のデスクトップの様子を、Mac から Remote Desktop で表示してキャプチャしたものです。

Hyper/V で実行している Ubuntu のデスクトップ

基盤:Hyper/Vで仮想マシンを動かすと、安静時にもホストに数%の負荷がかかって、さらにそれを Remote Desktop で覗くのにも数%かかります。でもまあ、ターミナルも特にストレスなく使えます。それで、ゲスト上で DeleGate のコンパイルをしてみたら、ホストのCPU負荷が50%くらいまで行きました。コンパイル所要時間は、Azure上の仮想マシン(b1s)とほぼ同じでした。つまり、ゲストの性能としても、ホストへの負荷もほぼ問題なく、かつリモートなデスクトップでそこそこ使える。美味しいソリューションだと思います。

社長:なるほど。となると残るは、どうやってインターネットからこの仮想マシンに引き込むかですね。

基盤:それなんです。単にインターネット玄関にあるルータに穴を空ければ良いのかと思ったのですが、うちが入っているv6プラスというやつって、なんとポート番号が自由に使えないんですね。こんな風です。

しばらく意味が理解できなかった設定画面

社長:およよ。

基盤:接続方法の選択で何かできるのかは知りませんが、そもそも自社の玄関まで得体の知れない人を呼び込むのはどうかなという気はするわけです。かといって外来者向けの通路をもう一本作るのは費用的にどうかなと。

社長:うーん、経費はそれほどかからないと思うけどな…

経理:それほどとは?

基盤:で、せっかくなので、正面玄関はクラウドに置いて、 そこからうちの中に繋ぐというのをやってみたいなと。社内のVPNを外向けのサーバの通用口に繋ぐ形です。で検索すると、Azure がこの1月に VPN ゲートウェイというサービスを始めてました。これ、使えるんじゃないかと。

経費:経費は?

基盤:このページによると「事前コストなし、解約手数料不要、従量課金制」です。最底辺のBasicの100Mbpsですと、1時間4円、一月あたりだと約3,000円になりますね。

社長:むむー、それは微妙な料金設定だねえ。自前でVPNサーバ立てるのより何がいいんだろ?

基盤:うちの最底辺 Azure 仮想マシンのネットワークって、30Mbpsくらいしか出ないんですよね。まあ、旧マシンより高速になった感じはしますが。でも、それで外と内を中継させたら悲しい事になるかなって。専用のVPNサービスなら、その辺は保証付きなのかもと。うちの新製品のデモでは、そこそこネットワークの幅は必要かなと思うし。

社長:これはほとんどコストとパフォーマンスの問題ですね。両方並行してやってみてはどうだろう。従量課金だから、ちょっとだけお試しでやってみるというのでも良いかも。

基盤:そうですね。

社長:あとは、Azure の感じはだいたいわかったので、比較のために AWS もやってみたほうが良いと思います。

基盤:そうします。ただあそこ、無償キャンペーンでお試しにEC2 の Windows VM作って放置してたら、キャンペーン枠を超えて勝手に課金モードに入って、こないだ100円くらい取られたんで、かなりムカついてますが。

社長:ああ、私もプライムを解約しないと。あれ、どうやったら抜けられるのだろう?

経理:・・・

--
2020-0522 SatoxITS

JavaScriptでQRコード生成

社長:いっそJavaScriptでQRコード生成してみたらどうだろう?

開発:たしかに。でも、誰かががやってそうな予感が…

基盤:調べてみましょう。javascript qr generator …
色んな人が作ってますね。

  1. https://github.com/kazuhikoarase/qrcode-generator (2011)
  2. https://davidshimjs.github.io/qrcodejs/ (2013)
  3. https://qiita.com/bellbind/items/b80698ceddebb6dfe4aa (2020)

開発:日本発の技術だからなのか、日本人関係者が多いようですね。すばらしい。

社長:この3番目の人のデモ、凄すぎる!JavaScriptで作ってることのメリットが見事に目に見えます。

基盤:まあうちの技術レベルでできることと言えば、これを iframe の額に入れて飾ることぐらいですかね(笑)こんな感じ。

デモページ(gist.githack.com)より

社長:うーむ、テキストを変えるごとに即座にコードが生成・表示されるって、ゴージャス 。当たり前の事なんだろうけど、訴求力高いなあ!

基盤:個人的には最近のGoogle同時翻訳に次ぐインパクトというか。

社長:これにテキストを自動的に食わせれば、QRコードアニメができそうです。

開発:時間軸を追加した3次元バーコードですね。

基盤:何を流すんですかね。

社長:画像をdata URIで流したら面白いかなとか。

社長:それか、可愛い絵に見えるQRコードを探すゲームとか。ROFLに見えるやつとか。適当な絵を書いて、それに近い正当なQRコードを生成するツールとか。世の中始まりも終わりもエンタメだよね。

開発:ロスレスにコンパクトなデータを非接触で伝えられる技術。やっぱりQRって面白いですね。

2020-0522 SatoxITS

社長:さっき飲みながらここを読んだら、iPhone の Chrome, Opera, Safari では上の JavaScript のデモページが表示されませんでした。何か新しめの機能を使っているんでしょうかね。まだまだ世の中は途上なのか。そんなわけで、動画にしてみました。ついでに YouTube にもあげといたんですが、検索してみたら、みなさん、QRコードで遊んでますね(笑)

Client-side CSSで快適生活

社長:最近はCSSでいろんな加工ができるようになりましたね。WordPressの、ブロックごととか、サイト全体のCSSが簡単に定義できる機能は、とてもシンプルかつ便利だと思います。

基盤:いつからを最近と呼ぶかですけどね。まあ社長は10年ばかり浦島太郎だから。

社長:それで、ユーザ側というか、ブラウザ側でも、サイトごとにCSSを定義できると、自分なりにカスタマイズして見れてよいかなと思います。ウルサイ広告をはずすとか。自分用の改変なら著作権も絡まない気がしますし。

基盤:ぐぐってみましょう。 browser side css … ああ、Client-side CSS てのが出てきますね。カナダ政府系のサイトです。

Client-side CSS for enhancing accessibility
The design of the Web pages on this website are flexible enough to allow you to configure the visual presentation to meet your accessibility needs by using a client-side Cascading Style Sheet (CSS) file.

https://www.tpsgc-pwgsc.gc.ca/comm/css-eng.html

自分のサイトのアクセシビリティ支援という観点でのお勧めですね。

Most browsers provide the ability to specify a client-side CSS file, which would be applied to every Web page on this website that you visit.

社長:おおっと、これは耳よりな話だね。なかなかやるじゃないかカナダ政府。で、ほとんどのブラウザってことは…

おい。I.E. が先頭に出てくるのは何なんだ?Netscape … いったいいつの文書やねん。

基盤:「Date modified: 2019-11-08」と文末に。

社長:お役所仕事かよ! しかもフランス語的だな。Operaの版のナンバリング飛んでないか?

基盤:Opera 8 というのは 2005年にリリースされていますね。

社長:私が昔使ってた頃のじゃないか。

基盤:それで、このページに紹介されているような設定メニューは今の版の Opera (Version 68)には無いですね。自分の設定機能を検索しても出てこない。ちょっと Safari を見てみると、Preferences > Advanced > Style sheet というのがあります。とりあえず、iframe 消しちゃいましょうか。えいっ

iframe { display:none; }

社長:お。おー!広告が全部消えた。カ・イ・カ・ン。

基盤:てか、こういう話、その昔盛り上がってたような気もしますね。

社長:あとはこれを、サイトごととかの条件付きで取り込むようにすれば良いわけか。クラス限定でも結構イケそう。楽ちんだねー。で、現行の Opera ではどうやるんだろう…

社長:というか「iframe を無効にする」的なスイッチがありそうな気がする。Developer のメニューとかに無いかな。

SatoxITS

Operaにお願い

ブラウザをOperaに代えてとても快適になったのですが、それでも色んな不満が残っています。

Operaの良さを数えればキリがありませんが、一つだけあげるとすれば、今はごく当たり前である、高精細でワイドな画面を想定して作られているということです。具体的には「サイドバー」であり、そこに半固定的に表示されるブックマークと閲覧履歴です。Operaでの表示方法は、大きな進歩だと感じています。ですが一方で、ブックマークと履歴、そしてタブ、さらにウィンドウ、全体制御の連携、統合のされ方には、現状最新の版にも、大きな不満を持っています。

横80カラム

画面が大きくなって横方向には、視界に入りきらない空き地ができました。一方、縦方向は今も、不足しています。これは、ヒトの視覚機能や認知機能にも起因しているのでしょう。コンテンツの作り方のせいでもあるでしょう。

リアル世界では、横書きの世界では、文書は通常縦長です。横書きを読むとき、ヒトが目線を左右して苦痛がなく、あるいはおそらく脳内のバッファとも関係して読みやすいのは、日本語で言えば40文字程度かと思います。(ウェブができてしばらくは、ブラウザの画面を横に伸ばすといくらでも文章が横長になるというHTMLのページが多数でした。そのままの形式で印刷されたりして。)。

英文で単純換算すれば言えば80文字という事になります。これは初期の、vt100のような物理的端末の表示文字数で、プログラムの標準的な横の長さ、RFCの文書の幅、MIMEの一行の長さ、など様々な横書きテキストの制約として遺されています。おそらく、レターサイズで、標準の文字サイズで打つとそういう事になるのかと思います。表示・印刷機器の制約というより、人間工学的なものかと思います。Wordの英語モードでのデフォルトのレイアウトは、一行76文字、1ページ44行でした。

ウェブページのダブルカラム化

(略)

ブラウザの画面構成

そういうわけで、縦方向の情報容量は不足します。縦方向の固定情報は節約・省略したい。ブラウザではそれは、タブとブックマークバーです。

タブとブックマークと履歴

ブックマークは空間軸、履歴は時間軸での情報のビューで、タブはこの両者にまたがっています。これまで使ってきたブラウザでは、それらの扱いが整理されておらず、とても不便で、不満と不快感を持っていました。

(中略)

そういう意味では、Operaもまだまだ全然です。たとえば

・このブックマークに関連する履歴だけを見たい

・この履歴と関連する履歴だけ見たい

・タブの中の履歴を通常の履歴と同じ形式で見たい

・履歴をブックマーク的に階層化して欲しい

・ブックマークに関連するタグだけ見たい

とか。

・パスワードマネジャを階層化、構造化したい

とか。

2020-05-21 SatoxITS

赤が苦手

社長:どうも赤が苦手ですね。

営業:思想的な話ですか?

経理:赤が出て喜ぶ人は居ないです。

基盤:再現性というか調整が難しい感じがしますね。

開発:周波数が低いせいですかね?人間側の分解能の問題とか?

社長:一方で青系には、好きな色が多いです。濃淡にもうっとりしますね。薄墨の水墨画が好きですが、あれも青みがかっています。検索すると、墨は原料に由来して、青系と茶系があるそうです。

水墨画における墨
墨
墨は煤・膠・香料の3種からできています。
水墨画は墨色が命ですから安価なものは避けた方がよいです。(いきなり営業:-)
墨には大きく分けて2種類あります。
松煙墨・・・青系黒の墨色でやわらかい表現に使います。
油煙墨・・・茶系黒の墨色で深みのある表現に適しています。
[https://suibokugaya.ocnk.net/page/1]
青墨と茶墨には、それぞれ特徴があります。
青墨は、青魚やアジサイ、生い茂った草など青系・緑系の題材のほか、清涼感を表現したいときにむいています。
寒色のため、作品が締まってみえます。
茶墨は、赤系や黄色系、茶系の題材のほか、暖かく上品な色味をいかし、人物や犬、猫など生き物を表現するのにむいています。
[https://suibokugaya.ocnk.net/page/10]

社長:子供の頃通学路にあった紫陽花とか、大好きでしたね。あの微妙なグラデーション、土壌の pH で色を変えるという繊細さ。大人になってからは、額アジサイ、それ系の隅田の花火とかもうハマりました。ネモフィラもです。浮世絵の空色とか。

社長:最近 Opera に変えて、スピードダイアルの背景はこれにしました。非常にほっとする画面です。

社長:というかこの構図、私の地元の上信越道から秩父方面の山並を見たイメージと非常に似ています。奥のほうのひょっこりハンにも見覚えが。

社長:そもそも最初に iMac に惚れたのは、当時のMacOSのこのスクリーンの色のせいだったかも知れません。

社長:今私のデスクトップのDockをぱっと見て、好きなアイコンを選べと言われたら RealVNC (vnc) 一択です。実はもう使ってないのですが、目の保養のために Dock に残っています。OfficeのRGBトリオの中でも、青いWordが好きです。だから Opera が赤いのは、本当は好きではないのです。アイコン変えようかな。Acrobat の最悪の地位は揺るぎないですね。

基盤:macOS の Dock の背景色って、どう変えるんですかね。

社長:もちろん、我が社のウェブサイトの背景も青です。

基盤:これ、青を赤に入れ替えたら、壮絶な夕焼けになりそうですね。

基盤:何色が好きかは人によるでしょうけど、確かに、青が苦手という人は少ない気はします。自然界は大抵青だし。でも、文化とか、性差も大きいかな?

開発:赤が苦手というより、青が好きという話ですね。でも、世の中単色でできているものは少ないから、気持ちの良さは配合・配色が支配的かなとは思います。

社長:ふと思ったのですが、安いディスプレイだと赤がちゃんと出ないとかじゃないでしょうか?いや、ちゃんとって意味は良くわからないですが、人間にとって気持ちのいい色が出ない。生成・合成しててそうだから、カメラのせいではないです。このフィリップス製が怪しい。なにせ高さ調節首振り機能が決め手で選んだ代物だし。昔使ってたApple製のモニタはもっと気持ちよかったような気がします。仕事環境の改善に新規モニタが必要ですね。

経理:消耗品の範囲でお願いしたいです。

社長:ところで、RGBの値って何を表しているのかな?エネルギー?リニアなの?他の色との強弱関係は?

開発:チコちゃんに叱られそうですね。調べておきます。

社長:今はもうITとかより、色の専門家のほうが重要な気がしますね。


海王星の青 -- https://photojournal.jpl.nasa.gov/catalog/PIA01142

パワポでQRコード生成

社長:私も図形を書くのはパワポ一辺倒になってしましました。いや、25年前には X Window に idraw というのがありましてねー、あれはとても良く出来ていて、私も日本語対応した okdraw というのを作ったり…

開発:パワポでQRコードを生成して編集できると便利という話ですね。アドインとか作れば良いのかな。

基盤:誰か作ってそうですね。調べてみます。

*** 数分後 ***

基盤:とりあえずQR4Officeというフリーのアドインがあったので、インストールして使ってみましたが、こんな感じです。

基盤:実用的には十分と思いますが、イマイチぱわぽの機能を使った遊びができない残念感はあります。

社長:背景無しに出来ないのがイタイですね。まあ本来の目的を考えれば当然なんでしょうけど。電子署名に添えるハンコっぽく使いたいので。署名情報自体をハンコにするって洒落てますよね。ところで朱肉の色って、RGBで表すとどうなるのかな?

開発:色はJIS規格で決められてるようです。

朱肉の規格 JIS S 6020-1992 (Cinnabar seal-ink pads) 日本工業規格 JIS S 6020-1992
朱肉
SHUNIKU (Cinnabar seal-ink pads)
1. 適用範囲 この規格は、通常押印に使用する朱肉(以下、朱肉という。)について規定する。

社長:あぁ、seal-ink て表現するか。チャイナバーってのは何?

開発:chinabar じゃなくて cinnabar です。朱色のことですね。朱色の原料「辰砂(しんしゃ=cinnabar)」に由来していて、「辰砂:別名に賢者の石」とあります[Wikipedia]。

社長:賢者の石!その単語大好き。

開発:マンセル値とやらで 7.5R 5/14、RGBにすると 217, 66, 54 だそうです。つまりHTML・CSS的には、color=#D94236 ですね。おや?でも cinnabar でググると色んな色が出てきます。

開発:カラーサイト.com によると、cinnabarは #E15A28 だとあります。これはかなり明るいですね。朱肉にも色んな明度や彩度のバリエーションがありますしね。

開発:そもそも色の見え方は相対的なので、色の表現には sRGB と AdobeRGB とか、色んな体系があるということのようです。当社イメージカラー候補の Royalblue ではこんな感じです。

Royalblue色見本 [color-sample.com]

社長:色には非常にヒッジョーに興味があります。これはいずれ、生成するPNGのパレットを決めるのに勉強しないといけないですね。でも、とりあえず欲しいのはハンコの朱肉です。

基盤:JIS規格の朱肉ですが、QR4Officeで指定するとこうなりますね。

社長:なるほど。うーん、でもリアルで見る朱肉の色って、もっとオレンジっぽくてケバいイメージなんだけどなー。うちの社印に付いてきたやつだって。安物だからだろうか?たしかにこの色のほうが、高級感がある。というか、電子的な書類に押してあるハンコってこういう色のがあるな。JIS準拠ってわけか。

開発:なんにしても、そもそもパワポは透明画像を吐くのが嫌いみたいだから、やはりQRハンコはGoで生成するのが良いみたいですね。やってみます。

社長:それにしても、いい色って本当に素晴らしいですね。これまでウェブサイトにしろパワポにしろ、テキトーに自作した色を使ってきましたが、そういうちゃんとした体系で作ると良いのだということを、初めて知りました。特にウェブサイト作成については、そういうサポート機能があるとスゴく良いですね。WordPressとかにもプラグインしたら良いと思います。

基盤:たぶん、既にあると思いますが。

社長:そもそも、パワポにしろウェブ作成ツールにしろ何にしろ、デフォでもっとちゃんとした色の作成、というか色見本を提供してくれてたら、世の中の色気違いは減ると思うんだよね。Terminalの前後色設定にしたって、これまで納得できる色に調整するのにずいぶん手間をかけたものです。もっとカンタンにもっとキモチ良く!これ、うちの社是だな。

2020-0520 SatoxITS

公式ツイッターはじめました

社長:我が社にも「公式」ツイッターってのがあるとかっこいいと思う。

営業:それは助かります。

基盤:調べてみます。

*** 数分の間 ***

基盤:試しに作ってみました。こんな感じです。

社長:おー、いい感じですね。これが本チャンでいいんじゃないかな。

広報:アイコンは昨日試作したロゴですね。

経理:この背景の山の写真、あのクソエディタの900円分を取り返してますね。

開発:我々もアカウント作りたいな。

社長:仮想人格がアカウントを作ってよいのだろうか?

法務:さあ… 各部署の公式ツイッターという事なら問題なさそうな。

基盤:これで気がついんたんですが、Opera ってサイドバー非表示にすると上に赤黄緑丸が出るんですね。考えてみればなるほどです。

社長:やっぱ Opera だよね。