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の設ダイアログ 図1 User Agent Switcherの設ダイアログ

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

図2 User-Agent情報を追加 図2 User-Agent情報を追加

 User Agent SwitcherをインストールするとツールバーにUser-Agentを切り替えるためのアイコンを付けることができるようになる。これをクリックすれば、図3のように利用可能な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>
ブラウザで実際に確認してみる
図5 User-Agentによって表示が変わる 図5 User-Agentによって表示が変わる
記事に関係する情報をコメントでお寄せください

ニックネーム : CNET_IDにログインしてコメントする

コメント本文(必須) :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ