Firefox で JavaScriptオフ でもユーザスタイルシートを手軽に切り替える方法

先日の ユーザスタイルシートの常用を尻込みしている幾つかの理由 というエントリで、常用ブラウザが Firefox で JavaScript がオフだから というのを理由に挙げましたが、Firefox愛用者としては納得がいかず、言い訳に過ぎないと思ったので、Firefox で JavaScriptオフ でも（任意・複数の）ユーザスタイルシートを簡便に切り替える方法を考えて見ました。

先ず思いついたのは JavaScript Actions という拡張でした。これを用いればJavaScriptがオフの状態でもブックマークレットのような感覚でJavaScriptを動かす事が可能になります。これにユーザスタイルシート切り替えスクリプトを読み込ませれば出来る筈です。そこで早速拡張を導入して 春木屋さんのブックマークレット を取り込もうと思ったのですが、書き換え方がわからない。すっかりお手上げだったので、ユーザー定義のスタイルシートを追加 を入れてみたところ見事に成功。しかしこれだと任意のCSSを加えるだけなので、製作者側のCSSが無効になりません。そこで JavaScript Actions の標準スクリプトに入っているスタイルシート無効化スクリプトと混ぜてみました。

// スタイルシートを無効化します。
jsa_DisableStyleSheets();

function jsa_DisableStyleSheets(){
	for(var i=0; i<document.styleSheets.length; i++){
		document.styleSheets[i].disabled = true;
	}
}

// ユーザー定義のスタイルシートを追加
    jsa_SetCSS();

    function jsa_SetCSS() {
    // スタイルシートの書式を記述（このサンプルは背景画像を消去）
    var newCSS, styles = '* { background-image: none !important; }';

    if (document.contentType == 'application/xhtml+xml') {
    newCSS = document.createProcessingInstruction(
    'xml-stylesheet',
    'href="data:text/css,' + escape(styles) + '" type="text/css"'
    );
    document.insertBefore(newCSS, document.documentElement);
    } else {
    newCSS = document.createElement('link');
    newCSS.rel = 'stylesheet';
    newCSS.href = 'data:text/css,' + escape(styles);
    newCSS.type = 'text/css';
    document.documentElement.childNodes[0].appendChild(newCSS);
    }
    }

これで製作者側のCSSを無効にして任意のユーザスタイルシートを適用することが可能になった訳ですが、上のサンプルのようにスタイルをいちいち書き込んで行くのはどう考えても面倒です。そこで考えたのが@import規則。これで任意のCSSファイルを読み込んでみます。適当なユーザスタイルシートが無かったので、大変失礼とは思いながらも ウェビンブログさん の 「view elements」WebbingStudioバージョン を拝借させて頂こうと思います。迷惑でしたら仰って頂ければ早急に訂正致しますので宜しくお願いします。それでは書き換えてみます。

// スタイルシートを無効化します。
jsa_DisableStyleSheets();

function jsa_DisableStyleSheets(){
	for(var i=0; i<document.styleSheets.length; i++){
		document.styleSheets[i].disabled = true;
	}
}

// ユーザー定義のスタイルシートを追加
    jsa_SetCSS();

    function jsa_SetCSS() {
    // スタイルシートの書式を記述（@importでCSSを読み込む）
    var newCSS, styles = '@import \"http://blog10.fc2.com/w/webbingstudio/file/userstyle.css\";';

    if (document.contentType == 'application/xhtml+xml') {
    newCSS = document.createProcessingInstruction(
    'xml-stylesheet',
    'href="data:text/css,' + escape(styles) + '" type="text/css"'
    );
    document.insertBefore(newCSS, document.documentElement);
    } else {
    newCSS = document.createElement('link');
    newCSS.rel = 'stylesheet';
    newCSS.href = 'data:text/css,' + escape(styles);
    newCSS.type = 'text/css';
    document.documentElement.childNodes[0].appendChild(newCSS);
    }
    }

変更したのは15行目だけです（"の前に\が必要なのかわかりませんが、よく見掛けるので）。ここを他のCSSファイルに置き換えれば幾つものスタイルを設定する事が可能です。もちろんその度にファイル名を変更して保存しなければなりませんので、それぞれにわかり易くはてな用.jsなどと付けるのが宜しいかと思います。ただ、あまりスタイルが増えすぎると煩雑になってコンテキストメニューが使い難くなるので、その際には名前の先頭に数字を割り振ると任意の順番に並べる事が可能です。また JavaScript Actions Menu を導入する事によって更に整理する事も可能です。（根本的に整理したい方は menueditor がオススメです。日本語版は 電網探題 からどうぞ）

追記（2005年12月31日14時00分）

右クリックは面倒だし、メインメニューも普段は使わないから消しちゃってるという方は JSActions Button がオススメです。これならば良く使う Action をボタンにしてツールバーの任意の場所に配置できます。項目がツリー化できれば更に便利なのですが。

個人的な技量により、ローカルのCSSファイルを読み込む方法はわかりませんでした（どなたかご教授下さい）。従って必要なCSSファイルはサーバにputしなければなりませんが、上記のように誰かが書いたCSSファイルを読み込む事も可能です。

これでとりあえずこれにて切り替えるのが面倒だからという理由は消えた訳ですが、妥当なHTMLではないサイトが多過ぎるという最大と言っても過言ではない理由が残っています。そこで見つけたのが スタイル無効化 なる CSSファイル です。これを取り込むことで

製作者がページへ施したスタイル指定を無効化します。 CSS のスタイルを無効化するのはもちろん、 <font> だの <b> だのが乱舞してるレガシーな HTML 記法によるスタイル効果をも無効化します。適用後は、あたかも文書構造のみを記した HTML であるかのような表示になります。それと、テーブルセルには点線枠が付加されます。 Camino べんりセット

とする事が可能です。これを読み込んだ上で更に任意のユーザスタイルシートを被せる事が出来れば完璧だと思ったのですが、如何せんその方法がわかりません。きっとJavaScriptを書ける人ならば簡単な事だと思うのですが、どうか教えて下さると本当に助かります。現状でも スタイル無効化CSS の最後尾に任意のCSSを追加すれば可能ですが、やはり美しくないですし、重くなりそうなので。

さて、これに サイト別CSS のような書き方を加えることにより更に強力なユーザスタイルシートを書く事も可能で、その上切り替えることが可能という柔軟性も出て来ました。これにて常用ブラウザが Firefox で JavaScript がオフだから という理由は殆ど消えた訳ですが、幾つか課題も残っていますので列挙しておきます。

• ローカルのCSSファイルを読み込む方法
• 複数のCSSファイルを読み込む方法
• ページ遷移後もそのスタイルを保つ方法（せめて同一ドメイン内くらいは可能になると良いなぁ）

三つ目はともかくも、一つ目と二つ目（特に二つ目）は簡単にできそうな気がします。重ね重ねしつこいようですが、書き方を教えて頂けると本当に助かります。

導入方法だけを簡単に解説

拡張の導入と、JavaScript の書き方を同時に進行したので説明が不十分でわかり難くかったかもしれません。このままでは不親切なのでもう一度流れをおさらいして置きます。

JavaScript Actions を導入

サイトへ行って拡張をインストールして下さい。説明は JSActions インストール方法 や Firefox まとめサイト にあります。この時に重要なのが firefox_jsa という標準スクリプトが入ったフォルダの場所と設定です。特に今回はその中の global というフォルダが核になります。

拡張の初期設定をする

最初に firefox_jsaフォルダ の場所を設定します。任意の場所にフォルダを移したら設定メニューからその場所を設定してください。
正常に設定が完了すると右クリックから出現するコンテキストメニューにActionという項目が加わっている筈です（もしかしたらFirefoxの再起動が必要かもしれません）。そしてその項目の中に globalフォルダ の中に入っている jsファイル の名前が表示されていれば正常です。

ユーザスタイルシートを読み込む為のJavaScriptファイルを創る

任意のエディタを開き以下のソースをコピペして、15行目を任意のCSSファイルに置き換えたら、適当な名前（MyCSS.js）を付けて（これは jsファイル です）、先程の global というフォルダの中に保存します。

// スタイルシートを無効化します。
jsa_DisableStyleSheets();

function jsa_DisableStyleSheets(){
	for(var i=0; i<document.styleSheets.length; i++){
		document.styleSheets[i].disabled = true;
	}
}

// ユーザー定義のスタイルシートを追加
    jsa_SetCSS();

    function jsa_SetCSS() {
    // スタイルシートの書式を記述（@importでCSSを読み込む）
    var newCSS, styles = '@import \"http://blog10.fc2.com/w/webbingstudio/file/userstyle.css\";';

    if (document.contentType == 'application/xhtml+xml') {
    newCSS = document.createProcessingInstruction(
    'xml-stylesheet',
    'href="data:text/css,' + escape(styles) + '" type="text/css"'
    );
    document.insertBefore(newCSS, document.documentElement);
    } else {
    newCSS = document.createElement('link');
    newCSS.rel = 'stylesheet';
    newCSS.href = 'data:text/css,' + escape(styles);
    newCSS.type = 'text/css';
    document.documentElement.childNodes[0].appendChild(newCSS);
    }
    }

任意のページを開き、右クリックから Action ⇒ MyCSS.js と進んでクリックすると、そのページの製作者のCSSが無効化され、上の15行目で指定したユーザスタイルシートが適用されます。

最後に、元に戻す（製作者のCSSで閲覧する）方法ですが、ページを遷移するか、再読み込みするなどすると戻ります。

使用して良いのか不明な方法

［ワツニュ］人ん家のスタイルシートで表示 のようなゲートウェイに値を渡すことでも実現可能なようです。

jsa_Send();
function jsa_Send(){
var sendURL = "http://www.officek.jp/skyg/wn/doc/csschange.cgi?url=";
var docURL = window.location;
var send2URL = "&css=http://blog10.fc2.com/w/webbingstudio/file/userstyle.css&font=1&bgcolor=1&body=1&headstyle=1&inlinestyle=1";

if(_jsaCScript.context.onLink) docURL = _jsaCScript.context.link.href;
_jsaCScript.loadURI(sendURL + escape(docURL) + send2URL);
}

五行目のCSSファイルを任意の物に書き換えて、同じように名前を付けて保存すれば良いです。CSSファイルのアドレスの後に続く値は ゲートウェイ の設定の強制削除の項目です。上記は全てチェックを入れた状態です。必要の無い項目は & から =1 までを削除すれば良いです。

紹介しておいて難ですが、ちょっと負荷がかかりそうな方法なのでできれば前者のような基本的な方法を用いた方が良いと思います。この方法はページを書き換えるのではなく、CGIを通してページを呼び出しています。ですのでページを戻れば元に戻ります。