複数のページを1ページにまとめて表示するFirefoxアドオン「AutoPager」
複数のページを1ページにまとめて表示するFirefoxアドオン「AutoPager」を紹介します。
１．機能
このアドオンを適用すれば、複数ページにまたがるページを1ページにつなげてくれます。スクリーンショットはGoogleの検索結果です。
適用前
適用後
ある程度スクロールをするとページが読み込まれます。読み込むページ数は設定メニューで決めておくことができます。
２．インストール
「AutoPager」のページにアクセスして、「Add to Firefox」のリンクをクリックすればダウンロード画面が表示されます。
３．設定
アドオンを有効にしたあとサイトを閲覧すると、ページの上部に「このサイトでこの設定を使いますか？」というバーが表示されます。「はい」をクリックすればスクロールによってページがどんどん表示されるようになります。
オプションをクリックすれば次のようなメニューが表示されます。
右クリックのコンテキストメニューには次のように表示されます。
ツールバーにも次のように表示されます。
メニューの表示・非表示はアドオンマネージャの「設定」をクリック。
ここで制御できます。
４．その他
Google検索で正常に動作しないケースもあるようです。
Firefox10の新機能について
2011年12月20日、Firefox9が予定通りリリースされました。が、PCには早くもFirefox10（Aurora）のベータ版をインストールしてみました。
Firefox10では以下の改善が行われます。
- アドオンのバージョン互換性を柔軟に判断
- 「進む」ボタンを無効時に非表示
- HTML5ビデオでスナップショットの保存、統計データ表示が可能
- Firefox Syncのセットアップが簡単に
- 開発者ツールにインスペクタが追加
- CSS 3D Transformに対応
- WebGLでアンチエイリアスをサポート
- フルスクリーンAPIに対応
- mouseenter/mouseleaveイベントに対応
- dataURL でも Workerを生成
- Page Visibility APIに対応
以下、「Firefox 10 の主な新機能を紹介します」の記事を元に、Firefox10の新機能を紹介します。
１．アドオンのバージョン互換性を柔軟に判断
基本的にアドオンは後方互換性あり（＝Firefoxのバージョンがあがっても動作可能）として扱い、実際に問題が生じる可能性のあるケースについてのみ非互換と判断するようになります。
言い換えると、Mozillaのアドオンサイトで配布されていないアドオンなども、互換性情報を無視する「Compatibility Reporter」アドオンなどを使わずにインストールできるようになります。
２．「進む」ボタンを無効時に非表示
「進む」ボタンは無効な時には表示せず、有効になった時にスライド表示されるようにします。
「進む」ボタンが有効なとき
「進む」ボタンが無効なとき
なお、ボタンのレイアウトを変更して、進むボタンとアドレスバーの間に他のボタンが入ると、これまで同様、進むボタンは表示されたままとなるようです。
進むボタンとアドレスバーの間に他のボタンが入っているとき
３．HTML5ビデオでスナップショットの保存、統計データ表示が可能
HTML5 ビデオの右クリックメニューに、現在のフレームを静止画として保存する「スナップショットを保存」メニューと、動画のサイズ、音声チャンネル数やサンプルレート、フレーム数などを表示する「統計情報を表示」メニューが追加されます。
４．Firefox Syncのセットアップが簡単に
ブックマークなどのユーザデータを同期するFirefox Syncサービスのセットアップが、これまでより分かりやすく、以下のように改善されるようです。
これまでの新規アカウント作成画面（このあとウィザード画面がいくつか続く）
Firefox 10の新規アカウント作成画面（次へをクリックすれば設定完了）
- 新規アカウント作成：メールアドレス・パスワード・画像認証を入力のみ
- デバイス間のデータ同期：既存端末で表示される12桁のワンタイムパスコードを入力するのみ
- その他：セットアップ時にリカバリキーの確認が不要
５．開発者ツールにインスペクタが追加
Firebugのような「インスペクタ」が追加されます。
対象要素を右クリックして「要素を調査」をクリックするか、「Web開発」→「調査」をチェックしてから、任意の要素を選択（要素のボックスが強調表示されます）してクリックします。
対象要素を右クリック
「Web開発」→「調査」をチェック
インスペクタの使い方は別途エントリーしたいと思います。なお、書き換え可能な対象は要素の属性とスタイルのみのようです。Firebugとの併用も可能なので、要素の内容を書き換えたいといった場合はFirebugを使いましょう。
６．CSS 3D Transformに対応
CSSの3D Transformに対応します。3D Transformを利用すれば、複雑な JavaScriptのコードやWebGLなどを使うことなく、単純なCSSスタイル指定だけでWebページ中で3次元のコンテンツを利用できます。
７．WebGLでアンチエイリアスをサポート
WebGLコンテキストの生成時に次のようにantialiasオプションを有効にすると、図形の輪郭でジャギーが発生しないよう滑らかに描画されるようになるようです。
ctx = canvas.getContext('webgl', { antialias: true });８．フルスクリーンAPIに対応
W3Cで仕様策定中のフルスクリーン APIの対応がデフォルトで有効になります（Firefox 9ではデフォルトオフ）。任意の要素に対して mozRequestFullScreen()メソッドを呼び出すことで、その要素が画面全体に拡大表示して描画されます。
９．mouseenter/mouseleaveイベントに対応
IE が独自に実装した、マウスポインタが要素から出入りする時に発生するイベントmouseenter／mouseleaveについて、DOM Level 3 Eventで標準化されることになったため、Firefoxでもこれらのイベントをサポートすることになるようです。
１０．dataURLでもWorkerを生成
これまでは別スレッドで実行させたいスクリプトのURLをWorker()に渡してワーカースレッドを生成していました。しかしこれでは単一ファイルの HTMLではワーカースレッドが使えないし、ワーカースレッド用のスクリプトを文字列から生成できないなどの制約がありましたが、Worker()にdataURLを渡すことも可能になるようです。
１１．Page Visibility APIに対応
ブラウザが最小化されたりタブを切り替えてページが表示されなくなった時に、アニメーションやビデオ再生などの処理停止を（簡単に）可能とするため、document.hiddenおよびdocument.visibilityStatusプロパティでページが表示中であるかどうか判断できるPage Visibitity APIをサポートします。
１２．Android向けのFirefoxについて
Android向けのFirefoxでは、メモリ使用量が大幅に削減されるようです。また、バッテリーステータスAPIにも対応し、端末がバッテリー駆動かどうかによって処理内容を変えることも行うようです。
Firefox7でCSSの不具合発生
Firefox7以上でCSSの不具合が発生しています。当ブログだけの問題かもしれませんがとりあえず情報展開します。
１．問題点１
当ブログでは3カラム表示で、サイドバーの区切りに背景画像を使っていますが、次のように途中で途切れる事象が発生しています。
参考：正常な表示
月別アーカイブやコメントの多いブログ記事ページなど、スクロール量が多いページで100%発生するようです。例えば次のページで発生しています。
背景画像は長さが足りない訳ではなく、backgroundプロパティに「repeat-y」を与えてY軸方向に繰り返すようにしています。
２．確認状況
事象が発生するページはHTML5でマークアップしています。Validator.nu (X)HTML5 ValidatorではvalidなHTMLになっています。
ブラウザのバージョン別確認状況は次のとおりです。
- 3.6.23：OK
- 5.0：OK
- 7.0.1：NG
- 8.0a2（Aurora）：NG（これ以上のバージョンはすべてNG）
Google ChromeやIE9など、他のブラウザでは正常に表示されます。PC再起動・ブラウザ再起動・キャッシュのクリアを行っても事象は変わりません。PCはWindows Vista Service Pack 2です。
３．対策
ネットで検索したり、CSSのプロパティをいろいろ組み替えたりしてみましたが、今のところ対策は見つかってません。
Firefoxへのフィードバックはすでに行っています。
Firefox8をインストールしてみた
巷ではFirefox7の話題で盛り上がってますが、PCには早くもFirefox8（Aurora）のベータ版をインストールしました。Firefox7の新機能については「Firefox7をインストールしてみた」をご覧ください。
Firefox8は、Firefox7のリリースと同時にベータ版が公開され、Firefox8の機能が確定しています。Firefox8のリリースは2011年11月8日のようです。
2011.11.08 予定通りFirefox8がリリースされました。
Firefox8では主に以下の改善が行われます。
- アドオンの管理機能が強化
- タブを選択するまで読み込まない設定を追加
- タブの並べ替えや分離の操作性を改善
- デフォルトのサイトアイコンを変更
- 使用メモリの削減
- menu要素でコンテキストメニューを定義
- innerHTML()よりも速いinsertAdjacentHTML()をサポート
以下、「Firefox 8 の主な新機能を紹介します」の記事を元に、改善内容を紹介します。
１．アドオンの管理機能が強化
Firefox8からは、外部プラグラムがアドオンをインストールする時にはユーザに確認するようになります。デフォルトでは無効化する設定になっています。
下のスクリーンショットはFirefox8立ち上げ直後のアドオン画面です。ベータ版のための「Feedback」以外は無効になっています。
２．タブを選択するまで読み込まない設定を追加
起動時のオプションから「前回終了時のウィンドウタブを表示する」を選択したときに、「タブを選択されるまでページを読み込まない」を設定できます。
再起動時には、選択しているタブはページ読み込みまで行われ、それ以外のタブはタブ部分のみ表示されます。
再起動直後（選択されたタブのみページ読み込みされている）
他のタブのページの読み込みは、タブ選択時に行われます。
タブ選択（この時点でページ読み込み開始）
３．タブの並べ替えや分離の操作性を改善
Firefox8ではタブの移動で空いたスペースに残りのタブが詰まる様子がアニメーション表示されるようになります。
タブを横に移動した状態
また、タブバーから外れた位置にドラッグすれば、タブバーからも削除され、サムネイルがに別ウィンドウとして分離します（Firefox7まではタブバーから削除されず、半透明のサムネイルで表示）。
タブをタブバーから外れた位置にドラッグ
４．デフォルトのサイトアイコンを変更
新しいタブを開いたとき、アイコンがないことを表す四角い点線が表示されます。
Firefox7
Firefox8
５．使用メモリの削減
Firefox7に引き続き、Firefox8でもメモリ削減が行われます。
Firefox 7 では大幅な使用メモリ削減を実現しましたが、HTML5 の <video>, <audio> 利用時に使用するスレッド数を削減したり、メモリの確保方法を改善したりすることで、Firefox 8 でも引き続きメモリ使用量の削減が行われています。
６．menu要素でコンテキストメニューを定義
Firefox8では他のブラウザに先駆けてmenu要素をサポートし、Webアプリ独自の右クリックメニューを定義できます。
７．innerHTML()よりも速いinsertAdjacentHTML()をサポート
insertAdjacentHTML()はInternet Explorer 4で最初に実装され、HTML5標準に含められたメソッドです。innerHTMLプロパティと同様、HTMLでマークアップされた文字列を渡して新しい要素を挿入できます。
サンプル
<div id="foo">foo</div>
<script>
ele = document.getElementById('foo');
ele.insertAdjacentHTML('AfterEnd', 'bar');
</script>第1パラメータに挿入位置、第2パラメータに挿入テキストを設定します。第1パラメータの意味は次の通りです。
- BeforeBegin：エレメントの直前にテキストを挿入
- AfterBegin：エレメントの開始位置の直後にテキストを挿入（エレメント中の全てのコンテントよりも前に挿入）
- BeforeEnd：エレメントの終了位置の直前にテキストを挿入（エレメント中の全てのコンテントよりも後に挿入）
- AfterEnd：エレメントの終了位置の直後にテキストを挿入
８．ダウンロード
Firefox8は以下のリンクからダウンロードできます。
2011.11.09
Firefox8のリリースに伴い、記述を一部修正しました。
Firefoxでリンクの色を元に戻す方法
Firefoxで閲覧したページの元リンクの色を元に戻す方法です。スクリーンショットを撮るときなどに便利です。
リンク先のページを閲覧した状態（Yahoo!トピックス）
リンクの色を戻した状態
スクリーンショットはFirefox7を使っています。Firefox4/5/6でも同じです。
１．履歴をまとめて削除する
メニューより「履歴」→「最近の履歴を消去」を選択。
旧タイプのメニューの場合は「ツール」→「最近の履歴を消去」を選択。
消去したい期間を選択。
「消去する項目」から「表示したページとダウンロードの履歴」のみをチェックして「今すぐ消去」をクリック。
少し待てば処理が完了するので、リンクの色を戻したいページをリロードします。
元に戻したいリンクをいつクリックしたのか分からない場合、この手順でまとまった期間の履歴を消去してしまうと、リンク本来の目的である、自分が訪問したページの履歴が分からなくなってしまいます。
他の履歴に影響せずにピンポイントで消去したい場合は、２項の作業を行うとよいでしょう。
２．ピンポイントで履歴を削除する
元に戻したいリンクのURLをコピー。ここでは「Firefox7～」のテキストリンクのURLをコピーするのでとりあえずリンクをクリック。
Yahooのトピックスの場合はリダイレクトするみたいなので、遷移先のページの炉ケーションバーのURLをコピーします。ダイレクトリンクであればテキストリンクを右クリックして「リンクのURLをコピー」を選択すれば大丈夫だと思います。
メニューより「履歴」→「すべての履歴を表示」を選択。旧タイプのメニューも同じです。
ウィンドウが開くので、右上の検索ボックスにコピーしたURLをペーストすると、該当するリンクが中央の部分に表示されます。
表示された履歴を右クリックして「このサイトの履歴を消去」を選択。
ページをリロードすればリンクの色が元に戻ります。
以上です。「Web Developer」を使えば簡単に戻せるとか、より良い方法がありましたらご連絡お待ちしています。
メモリ使用量が少ないFirefox7をインストールしてみた
昨日Firefox6の記事を書いたばかりですが、PCには早くもFirefox7（ベータ）をインストールしました。
Firefox7では以下のパフォーマンス改善が行われています。
- 使用メモリの削減
- 起動時間短縮
- Sync機能の同期高速化
- Canvasグラフィックスの高速化
また、アドレスバーの「http://」もChromeのように省略されました。
以下、「Firefox 7 の主な新機能を紹介します」の記事を元に、パフォーマンス改善内容を紹介します。
１．使用メモリの削減
Firefox7ではメモリ使用量がFirefox6以前に比べ20%～30%、最大で50%削減されるようです。また、ガーベージコレクションが確実に行われるよう修正されています。
ということで、同じ数のタブ（6枚。アクセスサイトも同じ）を開いたときのメモリ使用量を比較してみました。Firefox7では明らかに使用メモリ量が減っています。
Firefox6（約170MB）
Firefox7（約138MB）
ガーベージコレクションはFirefox5までは行われていないようでしたが、Firefox7ではタブの削除に連動してメモリ使用量が減ります。Firefox5/6でもガーベージコレクションはそれなりに行われているようですが、元記事のグラフより、7ではより確実に行われていることが分かります（上が6/下が7）。
２．起動時間短縮
WindowsとLinuxでは、Firefoxの動作に必要なライブラリを起動時に先読みすることで、起動時間を短縮するようです。XPなどの低パフォーマンス PCなどの方が効果があるとのことで、起動時間が最大50%短縮されるようです。
おおざっぱな体感速度ですが、さきほどの実験と同様、タブを6枚開いた状態ブラウザを終了し、起動時に同数のタブを開いて読み込みが終わる速度を計ってみました。
- Firefox6：8秒
- Firefox7：6秒
３．Canvasグラフィックスの高速化
Windows版のHTML5 Canvas処理限定ですが、Azure APIを導入し、数倍以上の高速化が行われているようです（Webアプリケーションの処理内容によって異なるとのこと）。
４．ダウンロード
Firefox7は以下のリンクからダウンロードできます。
FirefoxをアップグレードしたらThinkPadのトラックポイントでスクロールできなくなった場合の対処まとめ
Firefox6にアップグレードしたところ、ThinkPadのトラックポイント（キーボードの中心にある赤い突起）で画面のスクロールができなくなりました。
ネットで調べたところ対処方法が色々ありましたので、まとめて紹介します。なお、この問題はFirefox3.6へのアップグレードから発生しているようです。
１．ui.trackpoint_hack.enabledの値を変更する
アドレスバーに「about:config」と入力。
注意事項が表示されるので、確認して「細心の注意を払って使用する」をクリック。
フィルタ欄に「ui.trackpoint_hack.enabled」を入力。入力するとすぐ下に設定名が表示されます。
設定名を右クリックして「値を変更」を選択。変更前の設定値は「-1」になっていると思います。
値に「1」を設定して「OK」をクリック。
２．トラックポイントのドライバをアップグレードする
１項で改善されない場合、トラックポイントのドライバをアップグレードします。私の環境（ThinkPad+Windows Vista+Firefox6）の場合、１項では解決せず、ドライバをアップグレードすることで解決しました（１項の設定は元に戻しました）。ドライバは32bitと64bitがあるので注意してください。
トラックポイント・ドライバー(Windows 7 32-bit/ XP/Vista 32-bit)
トラックポイント・ドライバー(Windows 7 64-bit/Vista 64-bit)
ダウンロードファイルを実行すると、セットアップウィザードが開始します。
「同意する」を選択して「次へ」をクリック。
インストール先を指定して「次へ」をクリック。インストール先が分からない場合はデフォルトで表示されているフォルダのままでかまいません。なお、指定したインストール先にはドライバのインストールに必要なファイルが配置されるだけで、実際のインストールはセットアップウィザード完了後に開始します（手順は後述）。
「インストール」をクリック
インストールに必要なファイルがインストール先に配置されました。「ThinkPad TrackPoint Driverをインストールする」をチェックした状態で「完了」をクリックすれば、ドライバのインストールが開始します。チェックをはずして終わってしまった場合は、インストール先にあるsetup.exeをクリックしてください。
インストールが完了すると再起動を促すダイアログが表示されるので、再起動します。
３．ユニバーサルスクロールをやめる
マウスを接続した状態かもしれませんが、「コントロールパネルのユニバーサルスクロールをやめるとスクロールできるようになった」という記事がありました。
４．Ctrl-K（Web検索）のキーアサインを削除する
キーコンフィグ用のアドオンをインストールしてCtrl-K（Web検索）のキーアサインを削除したら直ったという記事もありました。設定方法については参考サイトを参照してください。
５．参考サイト
参考サイトは下記です。ありがとうございました。
Firefox4のメニューをFirefox3っぽくする
Firefox4のメニューをFirefox3っぽくするカスタマイズです。具体的にはメニューバーの表示・ツールバーの配置・ステータスバーの表示などです。
変更前
変更後
参考：Firefox3（画面はFirefox4のものを埋め込んでます）
１．更新ボタン・中止ボタン・ホームボタンを移動する
Firefox3では更新ボタン・中止ボタン・ホームボタンが左側に配置されていましたが、Firefox4では、更新ボタン・中止ボタンはアドレスバーの右側、ホームボタンは右側に配置されています。
変更前
変更後
まず、「Firefox」→「オプション」→「ツールバーのカスタマイズ」をクリック。
ツールバーをカスタマイズするダイアログが開きますが、それはおいといて、次のように更新ボタンと中止ボタンが表示されます。
2つのボタンをドラッグして次のように配置します。
右側に配置されているホームボタンも左に移動します。
このようにします。
ダイアログの「完了」をクリック。
これでFirefox3のようになりました。中止ボタンはGoogle Chromeのように更新を実行したときに切り替わります。
順番を入れ替えれば、更新ボタンと中止ボタンを同時に表示することも可能です。
２．ステータスバーを追加する
ステータスバーが非表示になりました（URLはリンクをポイントすれば表示されます）。アドオンバーは「Firefox」→「オプション」→「アドオンバー」で表示されますが、Firefox3のようなステータスバーを表示するには「Status-4-Evar」アドオンを追加します。
変更前
変更後
「Status-4-Evar」は以下からダウンロードできます。
インストール後の表示・非表示は「Firefox」→「オプション」→「アドオンバー」で切り替えられます。
４．タブをアドレスバーの下に表示
タブは、デフォルトではGoogle Chromeのようにアドレスバーの上に表示されています。
変更前
変更後
アドレスバーの下に表示するには、「Firefox」→「オプション」→「タブを上部に表示」のチェックを外します。
４．メニューバーを表示する
メニューバーはインストール直後はデフォルトで表示されていると思いますが、とりあえず切り替え方法を記しておきます。
変更前
変更後
変更するには「Firefox」→「オプション」→「メニューバー」をクリック。
Firefox4のレイアウトに戻すには、「表示」→「ツールバー」→「メニューバー」をクリックします。
以上です。エントリーしたあとで気がつきましたが似たような記事がすでに出てましたね。
Firefox 4の新機能について
PCにFirefox 4 ベータ版をインストールしてみました。
インストール直後のFirefox 4は次のような感じです。なおFirefox 3とFirefox 4を共存させるには「Firefox3 と Firefox3.5 の共存」の記事が参考になると思います。
以下、簡単に新機能の紹介です。
タブをアドレスバーの上に表示できるようになりました。
メニューバーが左上部の「Firefox」ボタンに移動し、クリックすれば次の内容が表示されます。
インストール直後はメニューバーが非表示になっていますが、「Firefox」→「オプション」→「メニューバー」をチェックすれば3.xと同じ表示になります。
履歴は「戻る」ボタン、または「進む」ボタンの長押し方式に変わっています。
ブックマークのツールバーがボタンに変更されています。「Firefox」→「オプション」→「ブックマークツールバー」をチェックすれば3.xと同じ表示になります。
再読み込みボタンはIEっぽい位置に変更されています。このボタンは停止も兼ねています。
Web開発者向けの「Webコンソール」が搭載されました。
Syncという機能が追加されました。使っているすべてのパソコンに Firefox Sync アドオンをインストールし、アカウント設定を行っておけば、いつでも同じブックマークや履歴にアクセスできるようです。また、無料の iPhone アプリケーション Firefox Home を使えば、iPhone や iPad からも Firefox Sync で同期した履歴、ブックマーク、開いているタブを参照できます。
Syncを有効にするには、メニューの「Syncをセットアップ」を選択すれば以下の画面が表示されるので指示にしたがって進めてください。
Syncの詳細設定は「Firefox」→「オプション」→「オプション」→「Sync」タブで行えます。
ベータ版のフィードバックはこちらから行えます。
firebugの補完・変更機能が便利な件
ご存知の方も多いと思いますが、Firefoxのアドオン、firebugのスタイルに関する補完・変更機能をまとめて紹介します。Windowsでの操作方法です。
スタイルタブに表示されているCSSで新しいプロパティを追加する際、例えば「f」を入力すれば、即座に候補となるプロパティが表示されます。
さらに、上下矢印キー（「↑」「↓」）を操作すれば候補が切り替わります。文字を入力せずに上下矢印キーを操作した場合は、プロパティの候補をアルファベット順に表示します。
ハイフンつきのプロパティは、ハイフン以降を選択状態にして上下矢印キーで操作すれば、候補を絞って表示します。
タブキーで値の入力に切り替わります。Shift+タブキーで前方のプロパティに戻ることもできます。
値を入力せずに上下矢印キーを操作すれば、プロパティに適合する候補が表示されます。値の表示と同時に、ページ表示にも即座に反映されます。
カンマで区切った値の場合、上下矢印キーを使えばカンマ単位で変更することができます。最後尾だけでなく、途中の値も変更可能です。例は変更したい文字列全体を選択していますが、変更したい文字列の1文字が選択、あるいはカーソルがあたっていれば値の変更が可能です。
数値の場合、任意の数字を入れたあとは上下矢印キーで値を変更できます。
数値に「px」などの単位がついていても、数字部分だけを増減できます。
値を複数設定している場合でも、マウスで部分選択すれば特定の値を変更できます。例は変更したい文字列全体を選択していますが、変更したい文字列の1文字が選択、あるいはカーソルがあたっていれば値の変更が可能です。
その他、Windowsのショートカットを使えば、Ctrl+zで操作をアンドゥしたり、Ctrl+yでリドゥできます。
余談ですが、Google Chromeの「要素の検証」でもfirebugと同様のことが可能です。firebugでできなかった小数点以下の値の増減はaltキー+上下矢印キーでできました。
