来週、国民の父ことプミポン前国王の火葬があるため、タイ国内のWebサイトはこぞって服喪仕様にデザイン変更されています。派手な色使いをやめて、ほぼ白黒のWebサイトに。
これ、もちろんサイトのパーツを全て書き換えたわけではなく、css3にある「filter」プロパティで設定できる「grayscale」をいじって実現しています。一部これで白黒にならないところとかブラウザもあるらしいので、派手すぎるヘッダなんかは直接いじっているときもあるらしいのですが、まあcss3ができるまで国王お元気でよかったですねとしか言えない便利なcss hackです。
とはいうものの、これで白黒化されたサイトはやっぱり微妙に見にくいのです。国民の父とか書きましたが私は現在タイ国外におりますので情報は元の色で見たい。昨年プミポン国王(当時)が逝去されたときも同じようなことがありましたが、今回は完全な白黒ではなくうすーく色がついております。これに対応するためのjavascript bookmarkletを以下に公開します。
javascript:
var el = document.querySelectorAll('*');
Object.keys(el).forEach(function(i) {
var s = window.getComputedStyle(el[i], null).getPropertyValue("filter");
if (s.indexOf('grayscale')>=0) {el[i].style.filter = 'grayscale(0)'; }
});
これを適当なブックマークを編集してコピペしていただくか1、
カラー化
このリンクを適当にブックマークバーとかにD&Dすれば使えるはずです2。
いちおう、PC上のchromeとiPhone上のsafariで動作確認しています。
蛇足ながら何をしているのか補足しますと、まずquerySelectorAllで文書内全ての要素を手に入れまして、その全ての要素1つずつについて、getComputedStyleでレンダリング後のcssの状態を調べております。実際にはfilter要素の指定はベンダープレフィックス込みで行われることが多いので、css3だけで検索してもうまくいかないことがあるようです。3
で、filter要素の中身はStringで返ってきます。本当はgrayscaleの数字だけいじりたかったのですがこの数字だけをStringのParse以外で手に入れる方法を見つけられませんでした。今回は「自分の環境でだけ」という割り切りがありますので、indexOfでfilter要素の中身を調べて、grayscaleって文字が入っていたら強制的に白黒表示解除しています。強制的つうのがミソで、もし他のフィルターがかかってたらそれも解除されるかもしれませんが正直filter要素がどこまで使われているのかわからないのであんまり気にしていません。あとfilter要素そのものを空文字列にしてもgrayscale変化しなかった4ので他のfilter要素には影響ないような気がします。
懸念点がなくはなくて、cssのプロパティはcase insensitive(大文字小文字を区別しない)なので、もしかしたらブラウザによってはプロパティが全て大文字で返ってくるかもしれません。5 その場合はここを大文字小文字関係なく調べるように変えたらいいと思います。
なお、このbookmarkletの作成にあたっては、タイ国王死去で黒白表示になっているサイトをカラーに戻す方法を参考にしました。感謝します。