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