ブラウザの背景画像をCSSで変えるかスクリプトで変えるか

「デスクトップの壁紙って普段全然見えないよなー」
「んじゃ,ブラウザの壁紙にすりゃいいんじゃね?」
とずいぶん前に思ったんだけど,ユーザサイドスタイルシートとかあまり身近な気がしなかったので結局やらずじまいだった.
この前Firefox3を入れたのに合わせて,新しい拡張を探している最中にStylishというサイトごとのスタイルシートを指定できるアドオンを見つけたのでちょっと試してみた.

とりあえずGoogle検索したときの背景画像を指定してみた.

「とりあえず」と書いたけど,一応今日の最終成果がこれ.
まず,スタイルシートをいじる時点で問題が二つあった.

  • CSSのbackgroundに指定できるのはhttp://〜のみでローカルファイルを直接指定できない.
  • backgroundで指定した画像は不透明度を指定できない.opacityは手前の要素(文字など)の不透明度を変更する.

画像を編集して自分の借りてるサーバに上げれば良いのだが,いくつかの画像を試すためにいちいちアップロードするのは面倒なので,まずはローカルにWebサーバを立てることにした.でもって,毎回画像を編集するのも面倒なので渡されたパラメータに従って不透明度やサイズ調整を行うCGIプログラムも自前で動かすことにする.スタイルシートでurlにCGIプログラムを指定し,クエリに画像ファイル名と不透明度,画像の最大幅を指定して,調節を行った画像を背景として設定する.最大幅を指定することでどでかい画像も脇の方に収まってくれる.

@-moz-document domain("www.google.co.jp") {
  body{
    background: url(http://localhost/cgi-bin/bg.py?&file=vita.jpg&alpha=80&width=700) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: right bottom !important;
  }
}

これでほぼ問題無かったんだけど,せっかくだからアクセスするたびに違う背景にしようと思った.CGI側でランダムに画像をはき出すのは簡単だが,どうやらスタイルシートに変更が行われない限り新たなアクセスが発生しないらしい.つまり,スタイルシートで背景画像にurlを指定しても,一度画像を取ってくると二回目以降はページを更新してもキャッシュされた画像をそのまま使い回すということ.おかげで非常に素早く表示されるんだけど,これではランダム表示ができない.


なので今度はGreasemonkey(ユーザスクリプト)の方で背景画像を変更してみることにする.内容はほとんど同じで,初めはURLを変更しないと新たなアクセスが発生しないと思っていたのでURLの後ろにUnixタイムを追加していたんだけど,JavaScriptで背景画像を変更する場合は毎回必ずアクセスが発生するので必要なかった.

(function(){
	var alpha = "80";
	var image = "vita.jpg";
	var maxwidth = "700";
	var url = "http://localhost/cgi-bin/bg.py?";
	if(image)   url += "&file=" + image;
	if(alpha)   url += "&alpha=" + alpha;
	if(maxwidth)url += "&width=" + maxwidth;
	
	var style = document.body.style
	style.backgroundImage = "url(" + url + ")";
	style.backgroundPosition = "bottom right";
	style.backgroundRepeat = "no-repeat";
	style.backgroundAttachment = "fixed";
})();

スタイルシートで指定する場合はFirefox側で画像をキャッシュしてるみたいなので速度面では心配ないんだけど,JavaScriptでやる場合は毎回画像のリサイズや透明度の変更などの画像処理が入るので一応CGI側でキャッシュするようにした.まぁ,マシンスペック的にはどちらにしろほぼノータイムで背景画像が表示されてるのでいらなかったかも.


なんにせよ素晴らしきマシンリソースの無駄遣いだわねw

使ったもの