2017年11月14日、Mozilla Firefoxのバージョン57がリリースされます。
個人的にはいつもはウキウキ気分で迎えるアップデートなわけですが、今回に限ってはどちらかというとFirefox史上最も重いアップデートになりそうです。
なぜなら、Firefox57(Firefox Quantum)からは今まで使えていたアドオンがほとんど使えなくなってしまう、とのこと。うん、ちょっと何言ってるか分からない。
使えなくなりますよ、という目立った警告はなかったと思うので、おそらく11月14日、世界中のツイッターで「Firefoxは終わった」とか「ご冥福をお祈りします」とかいうツイートがじゃんじゃか流されたり、なんとかグラムでChromeインストール完了画面と自撮りしてキメ顔を晒すのが流行ったりするものと思われます。もうWikipediaは保護しといた方がいいかもわからんね。
そんなわけで、マウスジェスチャーアドオン「FireGestures」が動かなくなってしまったので、その代替として私が選んだ「Foxy Gestures」のご紹介です。コピペできるユーザースクリプトつき。
ダウンロード
Foxy Gestures – Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/foxy-gestures/
なぜ Foxy Gestures なのか？
シンプル
FireGestures はジェスチャーの軌道と実行される機能名が端っこに小さく出るだけのシンプルさでしたが、その点 Foxy Gestures も似ています。
設定画面はむしろ FireGestures よりわかりやすいかもしれない。
自由にジェスチャーを作れる
長いジェスチャーでも自由に作れます。（ジェスチャー系アドオンの中には複雑なジェスチャーが作れないものも結構ある。）
ユーザースクリプトでWebExtensionのAPI（の一部）が使える
おそらくこれが一番の特徴で、WebExtensionのAPIを使うことでフツーのJavaScriptではできないようなことができます。この記事で紹介。
FireGesturesとの主な差異
- タブバー上でホイール回転でタブ切り替えができない
- 404などのエラーページ、新しいタブや設定画面などのビルトインページでジェスチャーできない（ホイールジェスチャー、ロッカージェスチャー等も含む）
など。
これらはおおよそ現時点での WebExtension API の制限です。ただし、Mozillaの偉い人の話によるとAPIは今後拡充されていくとかいう話らしいので、もしかしたら今後、できるようになるかもしれません。
そんなん待てるか、という方は、往年のWindows用ソフトウェアを使うという方法も一応あります。
詳しくは当記事の最後で。
Foxy Gesture用ユーザースクリプト サンプル集
ユーザースクリプト集はこちらの固定ページに独立しました。
スクリプトを書こうと思っている人向けの解説
解説コーナー。
別に専門家ではないので、もしかしたら言ってることに多少間違いが含まれていたり大雑把すぎる点があるかもしれませんが、まあ動けばいいじゃんということで。
普通のJavaScriptは普通に書けば動く
普通のJavaScriptは、普通に書けば動きます。
alert('ほえー');と書けばダイアログで「ほえー」と出てきます。
ブラウザーの機能を直接扱う場合は「Background」でやる
ブラウザーの機能を追加するような感じのジェスチャーを書くには、WebExtension APIの関数を使います。
その関数を書く際に使うのが、executeInBackground()関数です。
公式のUser Scripts のページの解説によると、
To access privileged APIs, the user script must execute in the background script environment. Foxy Gestures provides a executeInBackground() function to allow user scripts to execute code in the background.
（意訳）特権が必要な関数を使うため、ユーザースクリプトはバックグラウンドなスクリプト動作環境で実行される必要があります。Foxy Gestures はそのために executeInBackground() 関数を用意しています
とのこと。
その他の関数やオブジェクトについては、公式Wikiに全部載ってます。
英語ですが、レッツエンジョイ。
参考1：promise について
getCurrentWindow()は promise を返すので、続きの処理をthen()で書いています。
promise というのは比較的新しい（？）技術ですが、要するに非同期処理です。
仮に以下のようなスクリプトを考えてみます。
var cwin = 今のウィンドウを返す関数();
browser.windows.update(cwin.id,{state: "maximized"}); cwinに今のウィンドウの情報を代入し、browser.windows.updateでその情報を使おうとしています。
しかしこれでは、cwinにデータが入る前に、browser.windows.updateが実行されてしまうかもしれません。cwinにデータが入るまで、次の文の実行を待ってほしいと思うわけです。
そこで、JavaScriptに promise が導入されました。
promise.then()の中の関数は、promiseにデータが入るまでは絶対に実行されません。
var promise = getCurrentWindow();
promise.then(cwin => {
browser.windows.update(cwin.id,{state: "maximized"});
}); これで、promise にデータが入ってから、次の関数が実行されます。
ちなみにpromiseがない時代はどうしていたかというと、例えばこう。
var t, cwin;
t = setInterval(function(){
cwin = 今のウィンドウを返す関数();
if(cwin){
clearInterval(t);
browser.windows.update(cwin.id,{state: "maximized"});
}
},100);参考2:アロー関数について
スクリプト内に出てきた謎の=>についてですが、これはアロー関数というものらしいです。
アロー関数 – JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions
//無名関数で書いたもの
function(src){ alert(src); }
//アロー関数で書いたもの
(src) => { alert(src); }
//1つの場合は()省略可能
src => { alert(src); } 単純に短く書けると言うだけでなく、いろいろと動作上のメリットがあるらしいですが、ここでは「ユーザースクリプトはアロー関数で書くもんなんだよ」と割り切ればいいと思います。
なおサンプルのうち、=>の右側が{}で囲まれてないものがありますが、これは以下の通りなので大丈夫らしい。
//等価
(param1, param2, …, paramN) => expression
(param1, param2, …, paramN) => { return expression; }参考3:Foxy Gestures のユーザースクリプトで使えるWebExtensionのAPI
browser.tabs.createとかbrowser.downloads.downloadとかがWebExtension APIの関数なわけですが、あらゆる関数が使えるわけではなく、Foxy Gesturesが内蔵している設定ファイルに記載されている分だけが使えるようになっています。
Foxy Gesturesの設定ファイルにはどう記載されているのかというと、
"permissions": [
"clipboardWrite",
"cookies",
"downloads",
"sessions",
"storage",
"tabs"
], ..ということなので、使えるのは以下に紹介されているAPIということになります。
cookies
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/cookies
参考：https://developer.chrome.com/extensions/cookies
downloads
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/downloads
参考：https://developer.chrome.com/extensions/downloads
sessions
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/sessions
参考：https://developer.chrome.com/extensions/sessions
storage
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/storage
参考：https://developer.chrome.com/extensions/storage
tabs
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/windows
参考：https://developer.chrome.com/extensions/windows
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs
参考：https://developer.chrome.com/extensions/tabs
「clipboardWrite」は、document.execCommand(“copy”)とdocument.execCommand(“cut”)を使うためのパーミッションです。
※どのパーミッションを追加すればどのAPIが使えるようになるかの解説
https://developer.chrome.com/extensions/declare_permissions
Foxy Gestures のその他ハマった点
ハマったというほどでもないかもしれませんが、ああーと思った点をいくつか。
設定したジェスチャーを削除する方法
削除ボタンがありませんが、ジェスチャーの設定領域で右クリックだけすれば消えます。
このやり方で正しいんだろうか？
ユーザースクリプトが表示されない・追加ボタンを押しても反応がない
時々管理画面上で、ユーザースクリプトが表示されなかったり、追加ボタンを押しても何も起こらないことがあります。この場合、内部的には消えていないし、きちんと追加もされているっぽいです。ただ再起動したりしても直らない……。
私の場合は、「Backup & Restore」タブの「Backup Settings」でバックアップファイルをダウンロードして、それを「Restore Setting」で復元すれば戻りました。
もしかしたら定期的にバックアップしといた方がいいのかもしれない。
タブバー上のマウスホイール回転でタブ切り替えは「かざぐるマウス」で可能っちゃ可能
余談。
どうしてもタブバー上でマウスホイールを回転させてタブ切り替えがしたい場合やビルトインページ上でもジェスチャーをしたい場合は、往年のWindows用フリーソフト「かざぐるマウス」を使うという手もあります。
すでに更新が止まっていますが、私の環境(Windows 10)では普通に動きました。
かざぐるマウス 最新版1.66を手に入れる : わすれなぐさ
http://forgetmenots.doorblog.jp/archives/34094626.html
基本的なマウスジェスチャーもできるようになるので（というかそれがメイン機能のソフトですが）、あまりマニアックなマウスジェスチャーを欲していない、という場合はむしろFoxy Gesturesよりこちらを使ったらいいかもしれません。
WebExtensionと全く関係ないので、ビルトインページ上でも動きます。
なお、かざぐるマウスのマウスジェスチャーが有効になっていると Foxy Gestures のジェスチャーは無効になるので、普段はかざぐるマウスを有効にしておき、ここぞという時にはかざぐるマウスを無効化して Foxy Gestures を使う、という方法もありかもしれません。
あとタブバーのホイールを有効にすると、ウィンドウの右上に人の形をした不気味なマークが出てきますが、これは以下の方法で消せます。
タブバー上の人型アイコンを消す（追記あり） – Mozilla Flux
http://rockridge.hatenablog.com/entry/2017/10/29/234337
要注意事項：かざぐるマウスのreadmeやバージョン情報に書いてある公式サイトは既に閉鎖されていますが、うっかりアクセスすると迷惑サイトにつながってしまうので、アクセスしないようにご注意ください。
追記（2019/10/14）
関連記事を書きました。
Windows用マウスジェスチャーツール「Crevice 4」とFoxy Gesturesを共存・併用する方法です。
Windows用マウスジェスチャーツール「Crevice 4」とFirefoxのマウスジェスチャーアドオンを共存させる
https://texst.net/crevice4-mouse-gesture-with-firefox-addon/