Tips on Mozilla

Created: 2012/08/22 | Last modified: 2014/12/16
Back

Contents

ここではMozilla系ブラウザ(Firefox/SeaMonkey/Camino)に関するちょっとしたコツを扱います。

検索プラグイン

Firefox 34.0 からすべてのユーザ向けの検索プラグインを置いておく場所が変わってしまいました。今は「Firefox.app/Contents/Resources/browser/searchplugins」に置いておけば良いようです(Firefix 21.0 からすべてのユーザ向けの検索プラグインを置いておく場所が変わってしまいました。以前は「Firefox.app/Contents/MacOS/searchplugins」でしたが、今は「Firefox.app/Contents/MacOS/browser/searchplugins/」に置いておけば良いようです)。ちなみに、私は以下の追加の検索プラグインを使っています。

prefbar

prefbarとabout:config

私が重宝しているのはprefbarアドオンで、それに関連したabout:configの設定などをまとめておきたいと思います。

文書の配色

稀に色を多用していて非常に読みづらいページがあります。私には、やり過ぎな配色が邪魔して努力無しでは内容が頭に入ってきません。

この場合、アドレスバーに「about:config」と入力して、設定項目で「browser.display.use_document_colors」を探してオフにすれば読み易くなります。しかし、そんなページは稀ですので、いちいちabout:configで設定するのは面倒です。

以上のような用途にprefbarアドオンをインストールすると、ツールバーに「カラー」ボタンが追加できるので、必要な時に必要な設定が出来るようになります。

prefbar標準搭載の主なボタンとabout:config

まず、prefbarに予め搭載されているボタンの内で、極めて重要で便利なものを、対応するabout:configの項目があればそれを添えて紹介します。

ここで画像、Cookie、Java以外は特に問題なく使え大変便利です。さらに、私が作成したボタンを紹介します。まずは、設定を安全側に倒していない時と安全側に倒した時のスクリーンショットをご覧下さい。

ここで私が作成したボタンのうち、上記のスクリーンショットに見えている範囲のものを紹介します。特に、Cookie、Javaについては上記の問題を解決してあります。

ここで配布している*.btnは、prefbarの右クリックのカスタマイズの右クリックのインポートで導入することが出来ます。しかし、それも面倒なのでこれらをすべて取り込んだ、

を置いておきます。インストールの際は、念の為、prefbarのオプション「ボタンの初期化」を行なって下さい。

さらに、その他の私が作成したボタンを紹介します。ちなみに、上述の成果物にはこれら全てが同梱されています。

prefbarのサブメニュー

以上の多くのボタンを並べると、ブラウザのウィンドウの幅に入り切らず使いにくいかと思われます。そういった場合は、prefbarで右クリックのカスタマイズの右クリックで、作成、サブメニューを選ぶと、いくつかのボタンをそのなかにまとめることができます。

スクリーショットの「メディア」がそのサブメニューです。

但し、サブメニューでチェックマークが付かないという不都合があるようなので直してみました。(2014/11/11追記) 6.5.0からはこの不具合は解消されています。

を置いておきます。

prefbarと文書の書体

稀に書体の種類を前提としつつも文書に書体指定がなく、意図が伝わり難い場合があります。典型例が、日本語環境IEを前提とした日本特有のアスキーアートです。日本では、プロポーショナルフォントでアスキーアートなどという思いもよらない特異な独自の文化が形成されており、フォントは日本語環境IEの規定値「ＭＳ　Ｐゴシック 11pt」を想定しているようです。よって、環境が変わるとこのアスキーアートは作者の意図通りに表示されません。しかし、「IPAモナー」フォントをインストールするとそれに近い閲覧環境が得られるようです。それをトグルボタンかメニューで一発で切り替えるprefbarのボタンを用意してみました。

これらは所有するフォントや環境に依存すると思われますので、成果物には同梱されていません。

prefbarのサードパーティのボタン

prefbarのカスタマイズで「ボタンの追加」でサードパーティのボタンが追加できます。精査はしていませんが、ここで紹介したものと重なるものもあるようです。その他、いくつか有用なボタンを紹介します。

これらは現時点では、成果物には同梱されていません。

prefbarによるDOM操作

prefbarを用いるとJavascriptで簡単にDOM(Document Object Model)操作を行なうことができます。ここでは以下の問題提起とその解決策をprefbarボタンで実現する「ドキュメントURLツール・ボタンセット [2012/09/29]」を紹介します。

  1. link URLs … 文書にURLを書いておきながらリンクを貼っていないサイトを多く見かけます。おそらく、リファラからリンク元サイトを知られたくない等の事情があるのでしょうが、閲覧者にとってはリンクを辿るのが面倒です。このボタンを押すとリンクを貼られていないURLにリンクを貼ります。
  2. normalize URLs … リンクを貼っておきながらリダイレクトサイトに誘導されて、見たくもない広告を見せられてから、目的のサイトへリダイレクトするといったサイトがあります(具体的にはhttp://ime.nu/)。このボタンを押すと正しいURLにリンクを貼り直します。
  3. embed URLs … 画像のリンクのみで画像は埋め込まれていないサイトがありますが、いちいち一つずつ閲覧するのは面倒です。このボタンを押すとすべての画像のリンクを文書に埋め込みます。
  4. cachefy URLs … 稀にリンク切れになってしまっている文書があります。このボタンを押すとすべてのリンクがgoogleキャッシュに貼り直されます。
  5. archive URLs … 稀にリンク切れになってしまっている文書があります。このボタンを押すとすべてのリンクがarchive.orgに貼り直されます。
では具体的にどのように実現されているかいくつかを例に見てみましょう。

embed URLs の Get-Function

function check_img_hrefs(node) {
  var tag_a = node.getElementsByTagName('a');		// 「a」タグの配列を取得
  for (var i=0; i<tag_a.length; ++i) {			// すべての「a」タグについて、
    if (tag_a[i].href.match(/\.(jpg|gif|png)$/)) {	// 「href」属性が画像のときのみ、
      if (/^img$/i.test(tag_a[i].lastChild.tagName) &&	// 「a」タグの最後の子要素が「img」タグ、かつ、
          tag_a[i].lastChild.src == tag_a[i].href)	// 「img」タグの「src」属性と「href」属性が等しければ、
        continue;					// 既に埋め込まれている、さもなくば、
      return true;					// 埋め込まれていない(チェックはtrue)で終了
    }
  }
  return false;						// さもなくば、既にすべて埋め込まれている(チェックはfalse)
}
value = check_img_hrefs(gBrowser.contentDocument.body);	// 以上の操作を document.body 要素から調査し、結果をprefbarのvalueへ代入

embed URLs の Set-Function

function embed_hrefs(node) {
  var tag_a = node.getElementsByTagName('a');		// 「a」タグの配列を取得
  for (var i=0; i<tag_a.length; ++i) {			// すべての「a」タグについて、
    if (tag_a[i].href.match(/\.(jpg|gif|png)$/)) {	// 「href」属性が画像のときのみ、
      tag_a[i].innerHTML += '<img src="' + tag_a[i].href + '" border=0/>';	// 「a」タグの内部HTMLの最後に「img」タグを「href」属性を指定して追加
    }
  }
}
if (!value) {						// Get-Function がオンからオフになったら、
  embed_hrefs(gBrowser.contentDocument.body);		// 以上の操作を document.body 要素から実行
}

基本はgetElementsByTagNameで目的のタグを辿ることにあります。他のボタンも以下の例外を除き、同様に実現しています。

一方で、タグ名を手掛かりに辿れないテキストについては、以下のようにすべての要素を辿る必要があります。

link URLs の Get-Function

function check_text_link(node) {			// すべての要素をこの関数を用いて再帰的に調査
  if (node.nodeType === 3) {				// テキストノードなら
    if (node.nodeValue.match(/\b(h?ttp:\/\/(\S+))/)) {	// テキストの値がURL(もしくはh抜き)にマッチなら、
      return true;					// 真を返して終了(チェックはtrue)
    }
  }
  else if (node.nodeType === 1 &&			// 要素ノード、かつ
           !/^(style|script|iframe|pre|a)$/i.test(node.tagName)) {	// タグ名が調査対象外ではないなら、
    for (var i=0; i<node.childNodes.length; ++i) {	// すべての子要素について
      if (check_text_link(node.childNodes[i]))		// この関数を再帰的に呼んで、どれかがテキストがURLなら
        return true;					// 真を返して終了(チェックはtrue)
    }
  }
  return false;						// さもなくば偽を返して終了(チェックはfalse)
};
value = check_text_link(gBrowser.contentDocument.body);	// 以上の操作を document.body 要素から調査し、結果をprefbarのvalueへ代入

link URLs の Set-Function

function text_link(node) {				// すべての要素をこの関数を用いて再帰的に操作
  var parentNode = node.parentNode;
  if (node.nodeType === 3) {				// テキストノードなら
    if (node.nodeValue.match(/\b(h?ttp:\/\/(\S+))/)) {	// テキストの値がURL(もしくはh抜き)にマッチなら、
      var url = 'http://' + RegExp.$2;
      var a = gBrowser.contentDocument.createElement('a');	// 「a」タグを生成
      a.href = url;
      a.appendChild(document.createTextNode(RegExp.$1));	// 「a」タグにテキスト要素(マッチした元のURL)を追加
      parentNode.insertBefore(document.createTextNode(RegExp.leftContext), node);	// テキストノードの前にテキスト要素(マッチの左側のテキスト)を追加
      parentNode.insertBefore(a, node);			// テキストノードの前に「a」タグを追加
      parentNode.insertBefore(document.createTextNode(RegExp.rightContext), node);	// テキストノードの前にテキスト要素(マッチの右側のテキスト)を追加
      parentNode.removeChild(node);			// このテキストノードそのものは削除
    }
  } else if (node.nodeType === 1 &&			// 要素ノード、かつ
             !/^(style|script|iframe|pre|a)$/i.test(node.tagName)) {	// タグ名が調査対象外ではないなら、
    for (var i=0; i<node.childNodes.length; ++i) {	// すべての子要素について
      text_link(node.childNodes[i]);			// この関数を再帰的に呼んで、操作
    }
  }
}
if (!value) {						// Get-Function がオンからオフになったら、
  text_link(gBrowser.contentDocument.body);		// 以上の操作を document.body 要素から実行
}

基本はchildNodes配列ですべての要素を辿ることにあります。また、innerHTMLを書き換えるか、createElementの追加・削除で書き換えるかは、以上の二つの例のように少々コツが必要です。nodeTypeがいつ決定されるべきなのかを考えればどちらがよいかわかると思います。また、埋め込み画像の追加などは、innerHTMLを書き換える方式じゃないと画像の読み込みと描画がなされないようです。

prefbarの初期化

prefbarのカスタマイズで「初期化」というのがあります。これはボタンIDに従って既定の内容に戻すためのもので、ボタンの配置や別途作成した別のIDのボタンには影響がありません。新しいprefbarをインストールした際に最新の状態に追従したい時に便利です。また、追従したくないボタンについては、複製してIDを別のものにしたものにしておけば、独自のボタン設定が消されないで済みます。

ブラウザの機能や設定の確認

昨今はブラウザも機能過多になり、枯れていない技術だと特にその脆弱性が狙われやすく、使っていない機能は是非とも無効にしておきたいものです。以下のサイトは、ブラウザの機能や設定を確認するために作成したものですのでどうぞ活用して下さい。

Written by Taiji Yamada