Webブラウザでの作業効率化のためにやってきたことすべてをまとめる

19988 ワード

bookmarklet 拡張機能 firefox JavaScript JavaScript テキストリンク

はじめに

少し私自身の考えをまとめるために、Web ブラウザでの作業効率化のために私がしてきたことすべてをまとめてみます。

なお、メインで使っている Firefox について書いていきます。
ところどころ反 Chrome っぷりが出ていますがご愛嬌。

標準機能

一旦、拡張機能のことは忘れます。
「効率化 = 拡張」では決してありません。
むしろその逆、標準機能でどれだけできるかにかかっています。
よくいう、「引き算」というやつです。

ブックマーク

まずブックマークです。
ブックマークは URL を開くことしかできないと思われがちです。

そのとおりです。
名前などによりアドレスバーにサジェストし、キー押下で登録された URI を様々な場所（disposition）へ開くことしかできません。

キーワードでのサジェスト

標準のアドレスバーのサジェストはとても賢いです。
使わない手はありません。

特に Firefox には「ブックマークキーワード」があります。

ブックマークに「キーワード」として一意の文字列を与える
アドレスバーにその文字列を入力する
該当するブックマークが強制的に一番上にサジェストされ、選択状態になる
エンターキー押下で選択状態のブックマークを開かれる

つまり、キーボード操作だけでブックマークを開くことができるということです。

個人的にこの機能は、shell でいうところのalias並に素晴らしいものだと思っています。

が、残念ながらこのすばらしい機能が、Google Chrome にはありません。
カスタム検索エンジン機能を特殊な使い方をすることで再現可能ではありますが、設定ページの UI が扱いづらく、とても大変な作業を要します。
標準搭載している Firefox が楽です。
（Vivaldi にも「ブックマークニックネーム」として搭載されていますが互換性はありません）。

また、

<a href="https://www.google.com/" shortcuturl="gg">Google</a>

このような<a>を列挙した HTML を自動生成し、それを Firefox にインポートすることで登録作業を効率化できます。
これは、後述するブックマークレットや Data URI を用いたブックマークを登録する際にとても有用です。

URI

URI は Uniform Resource Identifier の略で日本語では統一資源識別子といいます（Wikipediaより）。
リソースを指し示すもののことです。
URL は Locator としてリソースの「場所」を示します。

Chrome や Firefox などのブックマークは、URL を含む「URI」を開くことができます。

URI のうち、特筆すべきは JavaScript URI と Data URI でしょう。

JavaScript URI を用いたブックマークレット

JavaScript URI というのは、任意の JavaScript を実行する URI です。

javascript: void (() => {
  alert("Hello, World!");
})();

上記 URI をブックマークとして保存しそのブックマークを開くと、JavaScript が実行されます。
ちょうど、開発者ツールのコンソールで実行するようなイメージです。

これを使えば、必要なときにブックマークを開くことで簡単な自動化ができます。
手軽かつ自由度の高い、すばらしい効率化の手段です。

Data URI

Data URI というのは、URL がリソースの場所を指し示すかのごとく、データ本体を URI の中に埋め込んだものです。
インラインイメージで使われるものといったほうがわかりやすいでしょうか。
（これを用いることで Web ブラウザのブックマークを自動同期されるストレージとして使えたりもします）。

ローカルに HTML ファイルを置く必要がなくなるため、自作した HTML 製便利ツールをどんなデバイスからでも使えるようになるということです。

data:text/html,%3C!DOCTYPE%20html%3E%3Ctitle%3EGoogle%20Search%20Alias%3C%2Ftitle%3E%3Cform%20action%3D%22https%3A%2F%2Fwww.google.com%2Fsearch%22%20method%3D%22get%22%3E%3Cinput%20type%3D%22search%22%20name%3D%22q%22%3E%3C%2Fform%3E

上記は（デコードしてもらえばわかりますが）、以下のような HTML です。

<!DOCTYPE html><title>Google Search Alias</title>
<form action="https://www.google.com/search" method="get">
  <input type="search" name="q" />
</form>

特殊なキー押下

アドレスバーの項目は、Enterとともにcontrolやshiftやcommandやoptionを同時押しすることで普通に開く以外のことを行えます。

調べてみたところ、Firefox の場合は、

キー	動作
`control`	`www`と`com`を入力した文字列に足して開く
`shift`	新しいウィンドウで開く
`command`	新しいフォアグラウンドのタブで開く
`option`	新しいフォアグラウンドのタブで開く

Chrome の場合は、

キー	動作
`control`	`www`と`com`を入力した文字列に足して開く
`shift`	新しいウィンドウで開く
`command`	新しいバックグラウンドのタブで開く
`option`	新しいフォアグラウンドのタブで開く

これに関しては Chrome のほうが多機能なようです。

また、Vivaldi の場合はドメイン展開（comを足すやつ）に関してより高度な設定が可能です。

カスタム検索エンジン

Firefox においてカスタム検索エンジン機能はブックマークと大差ありません。
（というと誤解を招きそうですが、ユーザーが手軽にカスタマイズできる機能としては、実際のところブックマークと大差ありません）。

検索語句（{searchTerms}）を%sに置換した URI をブックマークとして登録すれば OK です。

<a href="https://www.google.com/search?q=%s" shortcuturl="gg:">Google</a>

使うには、キーワードとして登録した文字列(この場合はgg:)と検索語句をスペースで区切って入力するだけです。
詳しくは ↓

ブックマークと大差ないため、ブックマークのインポート同様にカスタマイズした検索エンジンをインポートすることも可能です。

（デフォルトの検索エンジンにしたい場合は、下の拡張機能が使えるかもしれません）。

ブックマーク x カスタム検索エンジン

さて、ブックマークとそれと大差ない検索エンジン。
掛け合わせることで、悪魔的なことができます。

入力された文字列をalertしたり、

javascript: (() => {
  alert("%s");
})();

入力されたスクリプトを実行したりできます。

javascript:(()=>{%s})()

Chrome では超非推奨

Chrome の検索エンジンとしては、%sを含まないただの URL や JavaScript URI や Data URI も登録できます。
（それを用いて Chrome でもブックマークキーワードができるようになります）。

ただ、URI 内で?を用いると少し変わった挙動をします。

簡単にいうと、Chrome では、?が%sの前に書かれていた場合、%s内に含まれる空白が+に置換されてしまうというものです。

きっとたぶん、
Chrome「おっ、クエリパラメータか? クエリパラメータだな! なら空白を置換しとくよ〜!」
ということなのでしょう。

おせっかい極まりないです。
これにより、例えば、

javascript: ((args) => {
  /* ? <= これのせいでバグる */
  console.log(args);
})("%s".split(/\s/));

というように引数をとろうとするブックマークレットが期待していた動きをしなくなります。
よって超非推奨です。

そして、これは Firefox では起きませんでした。
Firefox でしか使えない Hack です。
（素直にomnibox APIを使った拡張機能を開発すべきでしょう）。

リーダービュー

Firefox にはリーダービュー機能が内蔵されています。
読むことに特化したモードで、Web ページの本文のみを抽出してくれます。
Pocket のような感じです。
（ちなみに Pocket は Firefox を開発する Mozilla により買収され、Save to Pocket は Firefox に標準搭載されています）。

これにより、広告がチカチカとうるさいサイトや余白がやけに大きいサイトにイライラさせられずにすみます。
（まぁ Firefox の場合、コンテンツブロッキングで広告にはさほど困らせられないのですが）。

Google Chrome にもあったらよいのですが、残念なことにありません。
（開発されていた時期もあったのですが、搭載される前に削除されてしまったという経緯があります）。

コンテンツブロッキング

先程の話に出てきたコンテンツブロッキングは、Firefox に搭載されたプライバシー保護機能です。
Disconnectによるブラックリストで、プライバシーを侵害するコンテンツをブロックします。

うれしい副作用として、一部の広告の読み込みがブロックされたり、読み込みが速くなったりします。

スクリーンショット

とても使いやすいスクリーンショット機能が内蔵されています。
右クリックメニューなどから呼び出すことができます。
画面全体・選択部分を撮影できるほか、開発者ツールの DOM インスペクターのように選択した要素のみを撮影できます。
とても使いやすい、無くてはならない機能です。
わざわざ拡張機能をいれなくてもいいのは本当にありがたいです。

開発者ツール

VSCode のような美しいダークテーマが標準搭載されています。
F1キーを押して設定画面を開いて設定してみてください。
とてもきれいで Chrome のよくわからない配色には戻れなくなります。

また、キー割り当てを Vim や Emacs や Sublime Text に変更できます。
（これはあまり使い所がないかもしれませんが……）。

また、スクリーンショットを開発者ツールからも撮れます。
DOM インスペクターで要素を右クリックしたり、コンソールに:screenshotと入力したりすることで撮影が可能です。
詳しくは、Web コンソールヘルパー | MDNを御覧ください。

そして、Flexbox レイアウト・Grid レイアウトに特化したツールが存在します。
とてもわかりやすく助かります。

about:config

chrome://flagsの Firefox 版です。
普通は行えないような高度で危険な設定を行うことができます。

あまり多用するべきではありませんが、少しだけ紹介します。

browser.tabs.closeWindowWithLastTabをfalseに設定すると、最後のタブが閉じられたときにウィンドウまで閉じられることを防ぐことができます。
browser.altClickSaveをtrueに設定すると、Chrome 同様altキーを押しながらクリックした場合にリンク先を保存します。
browser.tabs.closeTabByDblclickをtrueに設定すると、タブのダブルクリックでそのタブを閉じます。
browser.tabs.extraDragSpaceをtrueに設定すると、タブバー上部にドラッグ用の空白が空きます。
browser.tabs.loadBookmarksInTabsをtrueに設定すると、ブックマークをクリックで開く際に、新しいタブで開きます。
browser.urlbar.openintabをtrueに設定すると、アドレスバーからタブを開く際に、新しいタブで開きます。

何を設定したのか忘れないようにしましょう。
でないと不安定になったときの原因がわからなくなってしまいます。

拡張機能

そこまでたくさんは入れません。

キーバインド系 - Vimium

Web ブラウザの操作を Vim や Emacs のようなキーバインドでしてしまおうという拡張機能です。

Vimperator というすばらしい拡張機能があったそうですが、Firefox の Quantum 化に際し API が削除され使えなくなりました。
ただ、VimiumやTridactylやSurfingkeysやVim Vixenなど、代替となる拡張機能が開発されています。

ここでは、私が使っている Vimium に関して説明していきます。
なお Vimium は Chrome でも使えます。

設定に関しては、Home · philc/vimium Wiki · GitHubを見てください。
設定画面で、「Show Advanced Options」を押すのをお忘れなく。

キーバインド設定

使えるキーとしては、

<c-*>, <a-*>, <m-*> for ctrl, alt, and meta (command on Mac) respectively with any key. Replace * with the key of choice.
<left>, <right>, <up>, <down> for the arrow keys.
<f1> through <f12> for the function keys.
<space> for the space key.
<tab>, <enter>, <delete>, <backspace>, <insert>, <home> and <end> for the corresponding non-printable keys (version 1.62 onwards).

とのことです。

まずは初期化します。

unmapAll

スクロール系です。
ggのような複数回に渡るキー押下にももちろん対応しています。

map j scrollDown
map k scrollUp
map gg scrollToTop
map G scrollToBottom
map h scrollLeft
map l scrollRight

Web ページ操作系です。

map r reload
map gu goUp
map gU goToRoot

goUpはcd ../で、goToRootはcd /のようなものです。

フォーカス・クリック系です。

map gi focusInput
map f LinkHints.activateMode
map F LinkHints.activateModeToOpenInNewTab

focusInputでは見えている範囲の<input>や<textarea>にフォーカスを移します。
複数ある場合も Tab 押下で選択できます。

LinkHintsはクリッカブルな要素をキーボードから選択可能にするものです。
ヒントモードではページ中のクリッカブルな要素が設定した文字でタグ付けされ、その文字をタイプすることで要素を選択できます。
Hit-a-Hint ですね。

fはリンクを開く、Fはリンクを新しいタブで開く、に設定してあります。

履歴系です。

map H goBack
map B goBack
map L goForward

同じ操作に複数のキーを設定することも可能です。
（Bは w3m の影響です）。

タブ系です。

map t createTab
map J previousTab
map K nextTab
map p togglePinTab
map xx removeTab
map X restoreTab
map xj closeTabsOnLeft
map xk closeTabsOnRight
map xo closeOtherTabs
map [ moveTabLeft
map ] moveTabRight

tで新しいタブを開き、Jで前のタブを選択、Kで次のタブを選択します。

pではタブのピンどめ（固定）をトグルできます。

xxが現在のタブを閉じる、xjが左のタブを閉じる、xkが右のタブを閉じる、xoが他のタブを閉じるです。
タブはこまめに閉じるべきです。

[でタブを左へ移動し、]で右へ移動します。

最終的な形

長い

unmapAll

map j scrollDown
map k scrollUp
map gg scrollToTop
map G scrollToBottom
map h scrollLeft
map l scrollRight
map r reload
map gu goUp
map gU goToRoot
map gi focusInput
map f LinkHints.activateMode
map F LinkHints.activateModeToOpenInNewTab
map <C-f> LinkHints.activateModeToOpenInNewForegroundTab
map H goBack
map B goBack
map L goForward
map t createTab
map J previousTab
map K nextTab
map p togglePinTab
map xx removeTab
map X restoreTab
map xj closeTabsOnLeft
map xk closeTabsOnRight
map xo closeOtherTabs
map [ moveTabLeft
map ] moveTabRight

その他の設定

Advanced Options > Miscellaneous options > Don't let pages steal the focus on load
- 書いてあるまんまです。必須
Backup and Restore
- お忘れなく

使わない機能

インサートモードとビジュアルモード
- テキスト選択用機能
- 非直感的なので
Vomnibar
- Vimium 独自のオムニバー（アドレスバー）機能
- Firefox 自体のアドレスバーを別の拡張機能で拡張したほうがよっぽど有用
- ビルトインページで動かないのでつらい
Find
- ページ内検索機能
- Firefox 標準で十分
- Firefox はcommand + fでの検索だけでなく、/での Quick Find もあるので

User Style 系 - Stylus

Web ページに任意の CSS を挿入するものです。

User Script 系 - Tampermonkey

ブックマークレットの自動起動ができるもの、という認識です。
Web ページを読み込んだ際に JavaScript を実行します。

Side View

Open a mobile view of a page in the sidebar

Firefox には、ブックマークや履歴などを見ることのできるサイドバーがあり、それを拡張機能で拡張することが可能です。
Side View では、サイドバーに Web ページのモバイルビューを常駐させるというものです。

外国語のページを見る際に、横のところに Google 翻訳を待機させられるのでとても便利です。

もともとは Test Pilot という新機能開発プロジェクトの一環として提供されていましたが、Test Pilot の閉鎖に伴い拡張機能として提供されるようになりました。

Firefox Multi-Account Containers

Firefox にはコンテナータブという機能があります。
これを用いると、コンテナーごとに Cookie やローカルストレージが保存されるため、複数アカウントの管理などが容易にできます。

Mozilla 製のこの拡張機能を用いると、任意の Web サイトを常に任意のコンテナーで開くように設定できます。
よって、Web サービスごとにコンテナを作り、普段のブラウジングに干渉してこないように隔離する、なんてこともできます。
仕事用アカウントとプライベート用アカウントの切り替え等もとても簡単です。

とてもおもしろい機能です。

用途バラバラな複数のタブを一括管理できる Firefox アドオン「Firefox Multi-Account Containers」レビュー - GIGAZINE

その他おすすめ

Cookie AutoDelete
- Cookie をブロックするのではなく、自動で削除するというもの
Tree Style Tab
- サイドバーで縦タブするもの
- ツリー構造なのでたくさんタブを開いても問題ないです

おわりに

最後までありがとうございました。
Chrome だけじゃなく Firefox も優れているんだよと伝えたかったのです。

Author And Source

この問題について(Webブラウザでの作業効率化のためにやってきたことすべてをまとめる), 我々は、より多くの情報をここで見つけました https://qiita.com/okayurisotto/items/402f1ad19ae867c98662

著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。

Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .

SpringMVC RestFulスタイルで簡単なファイルダウンロードを実現

静的内部クラスと非静的内部クラスの異同