builder Top
HTML/CSS
- Photoshop
- Safari
- WebKit
- Internet Explorer
- Safari
- ...

Firefox 3のUser Agentを変更して非互換アドオンをインストールする

杉山貴章（オングス）

2008/07/14 16:02

ウェブ開発者必携のアドオン「User Agent Switcher」は、ブラウザごとに表示するウェブページの確認に便利だが、非互換アドオンのインストールにも使えたりするのだ。

　2回続けてアドオン管理のための機能を持ったアドオンを紹介したので、それに関連してFirefox 3でアドオンをインストールするのに便利なものをもうひとつ紹介しておこう。

User Agent Switcher

　Firefox 3のリリースと並行して、Firefox Add-onsがリニューアルされた。

　使用しているFirefoxのバージョンにアドオンが対応していない場合には［Firefoxへインストール］ボタンをクリックできないようになった。これは誤って非互換のアドオンをインストールできないようにするための措置だが、非互換と知りつつあえてインストールしているユーザにとってはかえって不便になってしまった。

　そこで便利なのがUser Agent Switcherだ。

　このアドオンはブラウザのUser-Agentの値を手軽に変更できるようにするためのものである。本来は特定のウェブブラウザでしか表示できないページを、User-Agentを偽装することで見られるようにするためのものだが、Firefoxのバージョンを偽装すればFirefox Add-onsの互換性チェックも回避することができる。

　まず、アドオンの設定ダイアログにおいて図1のように［User Agents］のページを表示させる。デフォルトではWindows版のIE、Netscape、OperaのUser-Agentが用意されている。FirefoxのUser-Agentの形式は［View Default］ボタンで現在のバージョンのものが見られるので参考にするといいだろう。

図1 User Agent Switcherの設ダイアログ

　ここで［Add］ボタンをクリックして、図2のように名乗りたいバージョンのUser-Agent情報を入力する。この例はWindows版のFirefox 2.0.0.14のもの。

図2 User-Agent情報を追加

　User Agent SwitcherをインストールするとツールバーにUser-Agentを切り替えるためのアイコンを付けることができるようになる。これをクリックすれば、図3のように利用可能なUser-Agentの一覧が表示され、簡単に切り替えられるようになる。

図3 ツールバーのアイコンからUser-Agentを切り替え

　User Agent Switcherは自分でウェブページやウェブアプリケーションを作成する際の表示テストにも活用できる。

　例えばブラウザ毎に表示する内容が変わるようなページを作りたい場合、通常はJavaScriptなどを利用してUser-Agent別の処理を行うようにする。そのため、User Agent Switcherを使えばその判別が正しく行えているかどうかを、Firefoxだけで手軽に調べることができる。

　リスト4はUser-Agentを調べる非常に簡単なJavaScriptの例だ。これをFirefox 3で表示すると図5のようになるが、User-Agentを変更すると表示が変わる。機能そのものはシンプルだが、意外と使いどころの多いアドオンである。

リスト 4 User-Agentを調べるJavaScriptの例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>User-Agentのテスト</title>
</head>
<script language="JavaScript">

  document.write( "ブラウザ　　　　　" , navigator.appName    ,"</br>");
  document.write( "エージェント　　　" , navigator.userAgent  ,"</br>");
  document.write( "バージョン　　　　" , navigator.appVersion ,"</br>");
  document.write( "コードネーム　　　" , navigator.appCodeName,"</br>");
  document.write( "プラットフォーム　" , navigator.platform   ,"</br>");

  function uatest() {
    var ua = navigator.userAgent;
    var message;

    if(ua.indexOf('Firefox/3') != -1) {
      message = "このブラウザはFirefox 3です";
    }
    else if(ua.indexOf('Firefox/') != -1) {
      message = "このブラウザはFirefoxです"
    }
    else {
      message = "このブラウザはFirefox以外です";
    }

    var base = document.getElementById('base');
    base.innerHTML = "<h1>" + message + "</h1>";
  }
</script>

<body onload="uatest()">

  <div id="base"/>

</body>
</html>