Skip to content

Instantly share code, notes, and snippets.

@toriwasa
Last active December 22, 2023 07:11
Show Gist options
  • Star 55 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save toriwasa/7e1464d8050a596705793770fe158234 to your computer and use it in GitHub Desktop.
Save toriwasa/7e1464d8050a596705793770fe158234 to your computer and use it in GitHub Desktop.
Vivaldiの設定晒し

Vivaldiの設定晒し

対応バージョン: 3.7.2218.55

1. 基本方針

  • ディスプレイの横幅を活かして情報は左右に表示させる
  • 画面上にGUIのボタンは配置せず、マウスジェスチャー+キーボードショートカットで操作する
  • 慣れてきたらキーボードショートカットの比率を増やしていく
  • 以下で「設定項目」と記述している部分は、括弧内の単語を設定ウィンドウの左上にある検索欄に入力することで呼び出せる

2. はじめに:タスクバーの配置場所

いきなりブラウザ関係ないけど、タスクバーは左右のどちらか、それも左側への配置が捗るよという話。 このあとのVivaldiのUIレイアウトに関わってくるので先に書いておく。

2.1. 左右への配置をオススメする理由

  • 大体のモニタは横より縦の方が狭い
  • タスクバーを左右に配置すれば余裕のある横幅を有効活用できる

2.2. 左側への配置をオススメする理由

  • ウィンドウの閉じるボタンは右上にある
  • タスクバーが右側だと、右上にスタートボタンと閉じるボタンが集まってしまう
    • この状態だと、マウスを右上の行き止まりに動かすだけではカーソルが閉じるボタンに重ならない
    • ノールックでマウスを右上に移動させて閉じる、という動きができなくなる
    • 閉じるボタンをクリックするためのアクションが1手増えてしまうので効率が悪い
  • 一方、左上なら特に他のボタンと重なることはない

2.3. 右側への配置でも良いケース

  • メイン画面の左にサブモニタがあったりする場合は右側のタスクバーの方が良いかも
  • キーボードショートカット(Alt+F4)で閉じる癖が付いていれば右側でも問題ないかも
  • とはいえ、マウスと併用するのであれば左側にタスクバーを置いた方が効率が良いはず

3. Webパネル

Vivaldiで一番使ってるかもしれない機能。 作業とTwitterを行ったり来たりしながら進めるのに便利。 その他Youtubeなどながら鑑賞向きのサイトは大体便利。

Webパネルはたとえ表示していなくてもブラウザ起動中常にメモリを食うことになる。 PCのスペックが貧弱な人はパネルの追加しすぎに注意。

3.1. 設定方法

  • Webパネルにしたいページで右クリックして「Webパネルに追加」で作成できる

3.2. Webパネルのレイアウト

  • パネル位置は左と右の2種類が選べる。
  • オプション設定でパネル開閉バーを表示させておくとマウスでのパネルの表示・非表示の切り替えが楽
  • タスクバーが左側の場合、スタートメニューと被らないようにパネルは右側に置くと操作しやすい

3.3. 基本的なTIPS

  • パネル右上のホームボタン
    • パネル内でリンク踏んで移動した場合、ホームボタンを押すと設定したページに戻れる
  • パネル右クリック→ツールバー→「全てのコントロールを表示」
    • 「進む」「戻る」「更新」ボタンが追加で表示できる
  • パネル右クリック→ツールバー→「非表示」
    • 全てのボタンを非表示にできる。画面を少しでも広く使いたいときに設定するとよい
  • パネル右クリック→[デスクトップ|モバイル]版を表示
    • スマートフォン用(SP版)サイトが用意されている場合はUIを切り替えられる
    • Webパネルは縦長なので、デスクトップ版だと見切れることが多い
    • 最近はSP版が使いやすいサイトも増えてきているので、両方試してみよう

3.4. Twitterを利用する際のTIPS

  • 最近のTwitterはデスクトップ版もモバイル版も同じUIになる
  • ツールバーが横に並んでいて割と良い感じ
  • キーボードショートカットを使う場合はTweetDeckのサイトをWebパネル化すると便利(後述)

参考:Vivaldi WEBパネルの活用方法まとめ #VivaldiJP

4. タブバーの左側配置

Vivaldiはタブバーの配置をカスタマイズすることが可能。 通常タブバーは上に配置されているが、これを左右どちらか、それも左側に配置するとかなり捗るのでオススメ。 特に調べ物等でタブを沢山開くことが多い人ほど効率が良くなるはず。

4.1. 左右への配置をオススメする理由

  • 上に配置しているときに沢山タブを開くと横幅がどんどん狭くなってタブの視認性・クリックしやすさが低下する
  • 一方、左右へ配置しているときに沢山をタブを開いても、縦幅が狭くなることはない。したがって上記の問題が起こらない
  • 横幅が少し狭くなる関係上、タブのタイトルは多少後ろが切れてしまうが、先頭数文字が分かれば意外と識別可能
  • 縦幅が足りなくなるような、日常的に数十以上のタブを使うようなユーザーはタブバーを非表示にしてウィンドウパネルを使うか、タブのグループ化を活用すると選択しやすくなる

4.2. 左側への配置をオススメする理由

  • パネルを右側に配置している場合、タブも右側だとパネルの開閉でタブバーの位置がズレてうっとうしい
  • タブバーは基本的に細かいクリック操作が必要になるため、端に置いて大雑把なマウス移動でもポインティングできるメリットが薄い
  • つまり、タスクバーを左側に配置している状態でタブバーを左側に配置してもデメリットがそこまで発生しない

5. アドレスバーの下側配置

Vivaldiはアドレスバーの配置もカスタマイズ可能。 アドレスバーはそこまで頻繁に見ないので、下に配置しておくと邪魔にならない。 また、その分ディスプレイの上部を広く使えるメリットがある。 画面上部にタイトルバー以外が表示されていないブラウザはかなりすっきりして見やすいのでおすすめ。

5.1. Q. 下にアドレスバー置いたらアドレスバークリックするのが遠くなったんだけど?

新しいページを開くと自動的にアドレスバーにフォーカスするはず。 またはキーボードショートカットで「アドレス欄にフォーカス」を設定すると便利。

また、新しいページを開いた時の最初のフォーカス位置については、以下の3つの選択肢がある。

  1. 「スピードダイヤルに検索欄を表示する」にチェックするとスピードダイヤルの検索欄にフォーカスする
  2. 上記がオフで、「新しいタブを開いたとき、ページ内容をフォーカスする」にチェックするとページにフォーカスする
  3. 上記がオフで、アドレスバーが表示されていればアドレスバーにフォーカスする

この内、ページにフォーカスすると嬉しいのは以下のようなケース。

  • 新しいページを開いた後で、単一キーボードショートカットでそのタブを閉じたい
  • スピードダイヤルをTabキーとEnterキーで移動・選択したい

基本的にはアドレスバーにフォーカスさせるのが便利。

6. ブックマークバーの非表示

ブックマークバーを使っている場合、普段は非表示にしておくと画面を広く使える。 とはいえ使う人は頻繁に使うはずなので、マウスジェスチャーで簡単に出せるようにしておく(後述)

7. アドレスバーと検索欄の設定

Chromeはアドレスバーと検索欄が併合されており、アドレスバーから検索が可能。 一方、Vivaldiはアドレスバーと検索欄を分けて表示できる。

しばらく使ってみたが、設定によっては両者が分かれていることがメリットになるケースがある。 以下に両者を使い分ける際のポイントを記載する。

7.1. アドレスバーと検索欄を両方使う時の設定

  • アドレスバー関係の設定

    • 「アドレスの自動補完」→「有効にする」のチェックを外す
    • 「アドレス欄のドロップダウンメニュー」→「入力時にドロップダウンを表示する」「入力履歴を含む」にだけチェック
    • 「プロファイルボタンを表示する」のチェックを外す
    • 「拡張機能の表示形式」→「非表示にした拡張機能のみトグルする」「非表示にした拡張機能をドロップダウンで表示する」にチェック
  • 検索関係の設定

    • 「検索欄の表示」→「ボタンとして表示」にチェック
      • 「常に新しいタブを開いて検索する」「検索エンジンのアイコンを表示」にチェック
      • これで右下の虫眼鏡ボタンをクリックすると検索欄が開くようになる
    • 「アドレス欄から検索を行う」はチェックしない
    • 「検索候補を有効にする」の「アドレス欄」「検索エンジンのニックネームを使用する場合のみ」「検索欄」にチェック
    • Googleの検索候補を有効にするため、「検索エンジン」→「Google」→検索候補用URLの欄に以下を設定して保存ボタンをクリック
      • https://www.google.co.jp/complete/search?client=chrome&q=%s
      • なお、実はGoogle以外の検索エンジンに対して同じURLを設定できる
      • Twitterを検索エンジンとして登録した上で上記URLを設定すると補完の効くTwitter検索ができてちょっと便利かもしれない

上記の設定で、以下のような使い分けが可能になる。

  • アドレスバーの用途
    • IPアドレス直打ちでアクセスしたいときに使う
    • アドレスのリクエストパラメータ(e.g. q=XXX など)を手動で弄って飛びたいときに使う
      • 上記のケースではアドレスの自動補完がオンだと下手に補完されて面倒
    • アドレスバー左側の🔒っぽいマークをクリックしてHTTPSサイトの情報を表示する(Cookieのブロックとかできる)
    • Amazonなどのショッピングサイトの検索バーから検索エンジンを生成しておき、aなどのニックネームを付けておく
    • その上でアドレスバーにa 腕時計と打ち込めば、Amazonでの検索が可能
    • 過去に表示したURLをアドレスやタイトルの一部で検索して飛びたい時に使う
    • 履歴やブックマークを検索して飛ぶ場合は後述するクイックコマンドの方が便利
  • 検索欄の用途
    • デフォルトはGoogle検索にしておく
    • Googleで検索したいときはこちらを使う
    • 常に新しいページに検索結果が開くので、調べ物の最中に更に別の単語を調べたくなるケースだと効率的
      • 検索の前に「新しいページを開く」必要がなくなるので、検索時の動作が1手分減るのが大きい
    • アドレスっぽい文字列(www.google.co.jp など)を検索してもちゃんと検索結果ページに飛べるメリットがある
    • 同様に、過去に飛んだページのアドレスが補完されず、検索候補のみが表示されるのもメリット
    • 途中までキーワードを打ち込むと、以前検索したキーワード候補として出してくれるという機能もある

7.1.1. Q. 検索欄よりアドレスバーの方がクリックするのが早いんだけど?

わざわざ検索欄をクリックするのが面倒という人は、キーボードショートカットで「検索欄へフォーカスする」を設定しておこう。 クリックよりキーボードショートカットの方が早いことを実感できるはず。

7.2. アドレスバーを使わない設定

更にブラウザ画面のレイアウトをシンプルにしたい場合、アドレスバーを非表示にすることもできる。(「アドレスバーを表示」のチェックを外す) 画面に表示されるのがタイトルバーとタブバーだけになり、更に画面を広く使うことが可能になる。

アドレスバーを非表示にした場合でも、キーボードショートカットの「アドレス欄にフォーカス」を実行するとアドレスバーが画面上部/下部にポップアップして利用可能。 表示される場所はアドレスバーを配置した場所によって変わるので、好みで設定する。 また、「検索欄にフォーカス」を実行するとアドレスバーとは別の検索欄もポップアップする。

この設定によって、アドレスバーを非表示にしつつ上記のアドレスバーと検索欄の使い分けを行うことができる。

画面に殆どのUIバーを表示させない設定ができるのはVivaldiくらいで、これに慣れると他のブラウザの画面が狭く感じるようになる。 しばらく使っていると、必要な時に表示できれば各種UIバーが常時存在する必要はあまりないことを実感できるはず。

7.2.1. Q. アドレスバーを非表示にしたら拡張機能ボタンが見えないので不便なんですけど?

キーボードショートカットで「アドレスバー」を実行すると、アドレスバーの表示・非表示を切り替えることができる。 必要な時に表示させて使うようにしよう。 常時拡張機能ボタンを表示させる必要はあまりないはず。

8. マウスジェスチャー

上手く使うとブラウザ上のボタンがほとんど必要なくなる便利な機能。 マウス操作と実際の挙動ができるだけ直感的にイメージできるように設定しておくと覚えやすい。 マウスジェスチャー以外にもマウスで完結可能な機能がある。

8.1. マウスジェスチャー以外の設定

  • 「ロッカージェスチャーを有効にする」にチェック
    • 進む・戻るは基本的にロッカージェスチャーで操作する
  • 「タブサイクラーを表示する」「タブサイクラーをリスト表示」「スクロールでタブを切り替える」にチェック
    • 右クリック&ホイール上下でタブの切り替えが可能になる
    • また、タブバーの上にマウスカーソルを置いてホイール上下することでもタブ切り替えできるようになる
    • タブバーが左右に配置されていると、ホイール上下がそのままタブ切り替え上下になるので直感的。
  • 「タブ選択を有効にする」「選択時にアクティブタブを含む」にチェック
    • Ctrlキーを押しながらタブをクリックすると複数のタブを選択できるようになる
    • 同時に複数タブを消したり、タブスタックを作ったりできる

8.2. ジェスチャーへの割り当て設定

マウスの動き ジェスチャーの割り当て 備考
新しいタブ リンク上での操作なら新しいタブでリンクを開ける
↓→ タブを閉じる
←↑ 左側のタブを全て閉じる タブバーが左側の場合、開いているタブより上側のタブを閉じる動作
←↓ 右側のタブを全て閉じる 下側のタブを閉じる動作。選択したタブから左下にタブを押し流して消すイメージ。
→↓ タブスタックを作成 選択しているタブ、選択していなければ全てのタブをスタックする。
左側のタブを右側に抜き出して、地面に積み上げる(スタックする)イメージの動作。
タブをひとまとめにしておける機能。
→↑ タブスタックを解除 上記と逆の動作をイメージ。
タブスタックはタブのタイリング機能とセットで使うと便利。
↑→ 閉じたタブを開き直す 地味に便利。「タブを閉じる」の次くらいによく使う。連続実行可能
↑↓ ページを再読み込み
UI切り替え Windowsのタスクバーを残して全画面にできる。
ちょっと画面を広くしてページを読みたいときに便利
パネル 右側に配置したパネルを引き出すイメージの操作。
1アクションでTwitterパネルが開閉できるので最高に捗る
ブックマークバー 上に配置したブックマークバーを切り替えるイメージの操作。
必要なときだけブックマークバーを表示すれば良くなる
画面の縦スペースを有効活用できる
↑←↓ タブサムネイル タブを下に引っ張ってサムネイルを引き出すイメージ。
必要なときだけサムネイルを表示する
サムネでタブ内容が分かるので一覧性が上がる

デフォルトで割り当てられている操作は上書き。 また、上記に記載されていない操作はミスを防ぐために割り当てを解除する。 今後良さそうな割り当て設定が見つかったら追加する。

9. キーボードショートカット

上手く使えばマウスジェスチャー以上にブラウザ上のボタンが必要なくなる機能。 さらにタブ操作やブックマーク移動もマウスより効率良く行えるようになる。

9.7. 主な使い方

を見ると大体どんな感じで操作できるか分かるかも?

9.1. 簡易Vimiumとしてのキーボードショートカット

Vivaldiはキーボードショートカットに殆どの操作を割り当てることが可能。 ある程度は拡張機能のVimiumでも行えるが、モード切り替えの概念がしっくり来ない人はVivaldi単体でどうにかできると嬉しいはず。

参考:Chromeをvimライクに使えるようにするvimium

VivaldiのキーボードショートカットもそれなりにVimiumと似たようなことはできるので、 Vimっぽい設定を踏襲しつつ(Vim使いでなくても)使いやすい操作感を目指す。 Vivaldi単体の機能では物足りなくなってきたら、AutoHotKey等を使って自分だけのショートカットキーを作ってみよう

9.2. 初心者はクイックコマンドで慣れよう

初期状態では F2、Ctrl+Shift+Pでクイックコマンドウィンドウが出てくる。 このウィンドウではキーボードショートカットで割り当て可能な操作が検索可能になっている。

たとえば、「タブ」と打ち込めば

  • タブバー
  • 新しいタブ
  • 新しいバックグラウンドタブ
  • タブを複製
  • タブを切り離す
  • etc...

等々、タブに関連する機能を矢印キーで選択してEnterで実行できる。 地味に現在開いているタブの検索もできるので便利。

表示される機能には割り当てられているキーボードショートカットが表示されるので、 ショートカットが思い出せなくなったらクイックコマンドから実行しつつ覚えていけばいい。

9.3. クイックコマンドの設定

  • 「新しいタブでリンクを開く」
  • 「ニックネームにマッチしたページをすぐに開く」
  • 「英語の検索結果を含める」

にチェックをつけておく。

「英語の検索結果を含める」は、「タブを閉じる」コマンドを探すときに「tab」や「close」と検索してもヒットするようになる機能。 「タブ」「閉じる」と入力するよりもコマンドを探すときの打鍵数が減るので便利。

優先順位は

  • 「電卓」
  • 「コマンド」
  • 「閉じたタブ」
  • 「閲覧履歴」
  • 「開いているタブ」
  • 「ウェブ検索およびURLエントリー」
  • 「ブックマーク」

とする。

メモ、ページアクションはチェックを外す。

この設定ではクイックコマンドで検索したとき、どの要素に優先してフォーカスするかが決まる。

使い方によって「閉じたタブ」「開いているタブ」「閲覧履歴」等、どの要素が最初にヒットして欲しいかは異なる。 使いながら自分がよく使う要素の優先順位を上げていこう。

9.3.1. クイックコマンドとニックネーム

「ニックネームにマッチしたページをすぐに開く」は、クイックコマンドにブックマークに付けたニックネームを打ち込むと、Enterを押さずとも飛べるようになる設定である。

例えば、Twitterのページにtwというニックネームを付けておけば、クイックコマンドからtwと打ち込むだけで即座にTwitterのページに飛ぶことができる。

慣れるとブックマークへのジャンプはこれが一番早いのでオススメ。

ただしURLの一部を入力して飛びたいブックマークがある場合、ニックネームに先に合致して飛んでしまうケースがある。 ブックマーク内の "Twitch" を検索しようとして "tw" まで打ち込んだらTwitterに飛んでしまったりする。 これが不便に感じる場合は、Twitch側にも別のニックネーム(tc等)を付けるか「ニックネームにマッチしたページをすぐに開く」のチェックを外そう。

9.3.2 検索履歴についてのTIPS

タブを沢山開くとメモリを大量に消費してしまうし、目的のタブを探しにくくなる。 過去に見たページをもう1度見たい場合は、過去のタブを開いたまま残しておくのではなく、検索履歴から探して再度開くのがおすすめ。

検索履歴を 全てのページが保存された第2のブックマーク として使ってみよう。

開いたタブを放置していると再読み込みが必要になるので、検索履歴から探して再度開いてもさほど差はない。

履歴検索に慣れると 「ブックマークしてないけど過去に検索で見つけたあのページに行きたい」 というケースで再度Google検索する必要がなくなってくるので便利。

また、タブを開きっ放しにして「あのページを表示してるタブはどれだったっけ」と探すより、 見ないタブは閉じてしまい、必要になったら履歴から検索して開き直す方が早いし、タブの数も減って操作が簡単になる。メモリの使用量も減っていいことずくめ。

9.3.3. クイックコマンドからの履歴検索

クイックコマンドからはキーボードショートカットだけでなく「閉じたタブ」「閲覧履歴」「開いているタブ」「ブックマーク」を検索できる。 この機能が便利なのは以下のポイント。

  • あらゆるページを検索対象にできる
    • 大量にページを開いている場合は「開いているタブ」から検索
    • こまめにページを閉じる人や、1ページ内でジャンプしながら閲覧する人は「閉じたタブ」や「閲覧履歴」から検索
    • よく使うページは「ブックマーク」から検索
    • 基本的なページへのジャンプは全てクイックコマンドから検索して行えるのが便利
  • URLとページタイトル両方を検索できる
    • URLをドメインで絞り込んで検索候補から探せるのが地味に便利。
    • ページタイトルはニックネームを設定していないブックマークを探すときに役立つ。
    • 慣れるとブックマークバーやブックマーク画面を表示することなくクイックコマンドから探せるようになる。
    • ブックマークをフォルダに分けて管理している人は特に便利かも。
  • 履歴検索は全ての履歴を検索してくれる訳ではない
    • 恐らく今日表示したページだけが検索対象っぽい?
    • 昨日以前に表示したページを検索したい場合は、「履歴パネル」または「履歴」から検索しよう
    • 上記はどちらもキーボードショートカットで表示することができる
  • 履歴検索では過去表示した回数が表示される
    • ドメインで検索すると同じドメインのサイト履歴が多数表示されることが多い
    • このとき表示回数が多いものに着目することでよく使っているページを楽に探すことができる
    • WikiやRedmine、Youtubeなどの
    • 「ブックマークはトップ画面だけ」
    • 「色んなページにジャンプして操作する」
    • 「ページがどんどん増えていくため、個別にブックマークしていくと面倒」
    • といったWebサイトの履歴を探すときにとても重宝する。

9.3.4. ページアクションについて

ページアクションは、ステータスバーの<>マークから設定可能な項目。

  • 「等幅フォント」
  • 「カーソル下の要素をハイライト」
  • 「広告ブロッカー」
  • 「CSSデバッガー」

などの機能から、

  • 「色調反転フィルター」
  • 「ぼかしフィルター」
  • 「3Dに変換」

といった機能など、表示しているページをブラウザ側で変換するような機能が実装されている。 クイックコマンドからアクセスしたいことがあまりないため、チェックを外しておく。

9.3.5. 電卓機能について

「電卓」にチェックが付いていると、クイックコマンドで100/25などと打ち込むと計算結果をサジェストしてくれる。

数値系の調べ物をしている時に必要時間などを概算したくなることはしばしばあるため、意外と便利。

9.4. キーボードショートカット以外の設定

  • フルキーボードアクセス
    • 「すべてのコントロールをフォーカスする」を有効化
    • Tabキーでリンクを辿れるようになる
  • ツールバーのフォーカスの循環
    • 「コンポーネント内で循環」を有効化
    • Tabキーはフォーカスしているウィンドウ内で循環させる
    • こちらの方が目的の場所にTabキーでたどり着くのが早い

9.5. キーボードショートカットの設定について

「キーボードショートカットを有効にする」 「単一キーのショートカットを有効にする」 を有効化しておく。 後者はCtrlキーなどと組み合わせなくてもショートカットが使えるようになる。

9.5.1. キーボードショートカット設定の注意点

  • 単一キーのショートカットは、テキストボックスにフォーカスしているときは使えない
  • Shift+単一キーのショートカットも同様に使えない(普通に入力になってしまうので)
    • e.g. 新しいタブを開いてアドレスバーにフォーカスしているとき
    • e.g. GoogleなどのWebページを開いて検索ボックスにフォーカスしているとき
  • この制約は新しく開いたページをやっぱり閉じたい場合などに不都合だったりする。
  • こういうときは、単一キーのショートカットの他にCtrlとのコンビネーションキーも設定しておくとよい。
  • テキストボックスからフォーカスを外したい時はとりあえずEscという手もある

9.5.2. ショートカット表記のルール

  • 下記に記載されていない操作はミスを防ぐために割り当てを解除しながら設定していく
  • Ctrl+D<C-d>と表記する(vim設定風)
  • xは単一キーのコマンド、Xは Shift+x のコマンドを指す
  • Alt+PやCtrl+Shift+Pのようにコンビネーションキーとの組み合わせの場合はそのまま表示する

9.5.3 キーボードショートカットの基本方針

  • よく使うショートカットはCtrlとの組み合わせで設定する
  • Vivaldiのバーやパネルの表示/非表示を切り替えるショートカットはCtrl+Shiftの組み合わせで設定する
  • 普段使わないバーやパネルの表示/非表示を切り替えるショートカットはAltとの組み合わせで設定する

9.6. ショートカットキーの割り当て

コマンド 操作 備考
F2, <C-h> クイックコマンド 慣れると大体ここから移動するようになる。
コマンドを検索したり、ブックマークや履歴を検索したりできる。
多用しすぎてF2が遠く感じてきたので<C-h>で飛べるように設定
Shift+ESC タスクマネージャ ブラウザ単体でのプロセス単位でのメモリ使用量などが分かる
Alt+P, <C-,> 設定 使いながら設定をチューニングしていくのでよく使う。
VSCodeに合わせてCtrl+カンマで設定を開けるようにする
Ctrl+Shift+E 拡張機能 インストールした拡張機能の設定を弄りたいときに使う
Ctrl+Shift+H 履歴パネル クイックコマンドより詳しく履歴が検索できる。開いた直後に検索欄にフォーカスが飛ぶのも便利
F1 キーボードチートシート 設定したショートカットを一覧で見れる
使用されているキー、割り当てられた機能名の両方で検索可能
e.g. 「ctrl」や「クイックコマンド」で検索できる
ショートカットを見直したいときはこっちでもいい
<C-p> ページをキャプチャしてファイルに保存 PrintscreenのPと覚える。
スクロールが必要なページ全体をスクショして保存できる。
画面単体のスクショならWindows+Shift+Sで良い
画像ファイルはピクチャフォルダのVivaldi Capturesに保存される。
Ctrl+Shift+P ページをキャプチャしてクリップボードに保存 最近はクリップボードから画像を貼り付けできるWebサービスも増えてきているので追加
F12 開発者ツール Chromeと同様の設定
Ctrl+Shift+V, p 貼り付けて移動 Ctrl+Vの強化版、もしくはpasteのpのイメージ。わざわざアドレスバーにフォーカスしなくてもコピーしたURLに移動できる。
F11 全画面表示
Alt+B ブックマークバー ブックマークバーを使うのはマウス利用時が多いのであまり使わないが、たまに使う
Ctrl+Shift+S, Alt+S ステータスバー フォーカスしたリンク先URLが知りたい時だけ表示させたりする
Alt+T タブバー
Ctrl+Shift+A アドレスバー アドレスバー非表示設定を一時的に解除したい時に使う。筆者は主に拡張機能が使いたい時に使っている
<C-F11>, Alt+U UI切り替え ちょっと広くWebページを表示させたいとき、タスクバーとタイトルバーを表示させたまま全画面にできるので使う。
でもマウスジェスチャーの方が使用頻度高い
<C-0> ズームのリセット 拡大縮小はCtrl+ホイールスクロールで行う
F4, [ パネルを表示/非表示 かなり使うショートカット。
パネルを出したり引っ込めたりする。
表示と同時にフォーカスが移る
F7, ] パネルにフォーカスを移す パネルを表示させたまま作業して、ちょっとTwitterパネルをスクロールさせたいときとかに使う
<C-d>, Alt+W タブバーにフォーカス フォーカス後にカーソルキー↑↓で選択対象タブの変更、Shift+↑, Shift+↓で複数タブを選択できる。
タブスタックを作るときに便利
Ctrl+Shift+B ブックマークパネル
Ctrl+Shift+D ダウンロードパネル
Ctrl+Shift+M メモパネル
<C-l> 履歴 クイックコマンドより詳しく履歴を検索できる。
昨日表示したサイトに絞って検索とかできるのでたまに使う。クイックコマンドよりは利用頻度が低いのでCtrl+Hより入力しにくいCtrl+Lに移動
Ctrl+1Ctrl+9 Webパネル1~Webパネル9 任意のWebパネルを呼び出してフォーカスする
<C-t>, t 新しいタブ 単一キーでタブを増やせると地味に便利。クイックコマンドを使いこなすとあまり使わなくなる
<C-y>, y タブの複製 Vimのyankのイメージ。今のページをコピーする。今のページはそのまま、1つ前のページに戻って別のページを開きたいときに割とよく使う
Ctrl+Shift+\, \ タブを新しいウィンドウに移動 表示しているタブを別のモニタに持っていきたいときに使ったりする。
VSCodeのショートカットキーから着想
<C-w>, x タブを閉じる まずはxでタブを閉じることに慣れよう。便利。
ただしテキスト入力欄にフォーカスしていて使えないことも多い。
そのため段々<C-w>を使う回数が増えていく
Ctrl+Shift+Tab タブサイクラー・前のタブに戻る タブ移動はこちらでも良い。Webサイト側にキー操作を持っていかれてしまうときに使ったりする
<C-Tab> タブサイクラー・後のタブに進む
<C-j> 一つ前のタブに戻る(表示順) タブは縦配置なので、次のタブ=下に移動するイメージ。
Vimのh, j, k, lが←↓↑→にマッピングされているのに合わせている
<C-k> 一つ後のタブに進む(表示順) Ctrl+Tabでタブ切り替えする延長で、Ctrl+J, Ctrl+Kでタブを上下移動するイメージ。
慣れるとタブサイクラーを使わなくなる。偉い。
<C-PageUp> 一つ前のアクティブタブに戻る タブをスタックした状態で新規タブを開くと、スタックしたタブと新規タブの順番が連続しなくなることが多い。
そういう場合には表示順移動よりも直感的にタブ移動できる。
<C-PageDown> 一つ前のアクティブタブに戻る
Ctrl+Shift+j アクティブタブを後ろへ移動 タブ移動の拡張版のイメージ。現在のタブを下に移動させる。沢山開いたタブの順番を整理したいときに使う。
Ctrl+Shift+k アクティブタブを前へ移動 現在のタブを上に移動させる
Alt+1Alt+9 1つ目のタブ~9つ目のタブに切り替え VSCodeの似たような機能をイメージ。
Ctrl+Shift+Z 閉じたタブを表示 閉じたタブの一覧を表示する。履歴漁るよりこっちの方が良いケースもある
<C-z>, X 閉じたタブを開き直す よくあるUndoで<C-z>を追加。
xで閉じてXで戻す、というのが分かりやすい
<C-[> タブスタックを作成 選択したタブがあればそのタブで、タブを選択していない場合は開いているタブを同一ドメインでまとめてタブスタックを作成する。
同一ドメインのタブがない場合は全てのタブをまとめてタブスタックを作成する。
沢山開いたタブをまとめたり、複数タブを並べるタイリングをするときに便利。
「タブバーにフォーカスする」と組み合わせるとより細かくタブスタック対象を選択できる。
<C-]> タブスタックを解除 自分が開いているタブのタブスタックを解除する。やっぱりスタック解除したくなったときに使う。
<C-\> タブスタックから取り出す 特定のタブだけタブスタックから取り出すときに使う。
<C-F9> 左右に並べて表示 タブタイリング関係はF6-F9にまとまっている
<C-F8> 上下に並べて表示 複数のページを並べて見たい時はこのコマンド
<C-F7> タイル状に並べる
<C-F6> タブのタイリングを解除
<C-m> タブのミュート / ミュート解除 MuteのM
Alt+S 現在のタブをセッションとして保存 調べ物で開いたタブを丸ごと名前を付けて保存できる。後で作業を再開したい時などに便利。
Alt+O 保存されたセッションを開く 上記で保存したセッションを復元できる。
<C-b> ブックマークの作成 アドレスバーを非表示にしている場合よく使う
i, <C-i>, Alt+D アドレスバーにフォーカスを移す アドレスコピペで移動したりするときに使う。アドレスバー非表示の際に一時的にアドレスを表示したい時も使う。
Alt+DはWindowsエクスプローラーやIEのショートカットに合わせて設定。
よく使うのでホームポジションから近い位置に設定
<C-r>, F5 ページを再読み込み。ReloadのR
Ctrl+Shift+R, Ctrl+F5 ページを強制的に再読み込み
g ページ最上部にスクロール vim的なショートカット。意外と使う
G ページ最下部にスクロール
F9, <C-g> ページにフォーカスを移す パネルや検索欄にフォーカスしている状態からページにフォーカスを戻したいときによく使う
ページ移動するgの強化版のイメージ
<C-q> キーボードショートカットを無効に Webページにキーボードショートカットが設定されているときなど、一時的にショートカットを無効にしたいときに使う
o, <C-o> 検索欄へフォーカスする 最近一番よく使うショートカット。
一番使うのはo。使えないときは<C-o>を使う。
意外と検索欄にフォーカスする機会は多かったことに気付いた。
検索するまでのちょっとしたスピードアップは大きい。
よく使うのでホームポジションから近い位置に設定
<C-f>, F3, / ページ内検索 vim風。EnterとShift+Enterで検索結果を行ったり来たりできる。
ページ内検索欄を抜けるときはEscで抜けられる
Ctrl+, h 履歴を戻る vimっぽくh, lで進む・戻るが可能
Ctrl+, l 履歴を進む
Esc 読み込みを中止
<C-/> 選択した文字列で検索 検索の強化版をイメージ。ページの一部をコピーして検索するために使う
Ctrl+Shift+C 選択したテキストをノートにコピー 調べ物してると結構使ったりする
Shift+, Alt+ 空間ナビゲーション(左) ページ内のURLリンクをキーボードで選択できる機能。マウスを使わずにページ上のリンクに飛ぶことができる
Shift+, Alt+ 空間ナビゲーション(上)
Shift+, Alt+ 空間ナビゲーション(下)
Shift+, Alt+ 空間ナビゲーション(右)

9.7. 主な使い方

  • oまたは<C-o>で検索欄にフォーカスしてキーワード入力して検索
  • F2または<C-h>でクイックコマンド開いてニックネーム入力→ブックマークに飛ぶ
  • iまたは<C-i>またはAlt+Dでアドレスバーにフォーカスしてデフォルト以外の検索エンジンで検索
  • xまたは<C-w>でタブを閉じる
    • Xまたは<C-z>で閉じたタブを復活させる
  • l,hで進む、戻る
  • <C-j>, <C+k>でタブを切り替える
  • <C-d> でタブバーにフォーカス、Shift+↑↓でタブを選択してから <C-[> でタブスタック作成、<C-F7><C-F9> で同一画面にタブを並べる

※AutoHotKeyなどで矢印キーの役割を別のキーで実現したりすると更に便利になる(なった)

e.g. 無変換+HJKLを←↓↑→にするとかなり動かしやすくなる。

9.8. Webパネル&TweeetDeckでキーボードのみでツイート

  • [またはF4でパネルを開く
  • TweeetDeckパネルでなければAlt+1~Alt+9で切り替え
  • パネルにフォーカスがなければ]またはF7でフォーカスする
  • <C-q>でキーボードショートカットを無効にする
  • nでツイート入力欄を開く(TweetDeck側のショートカット)
  • 本文を入力してCtrl+Enterでツイート(TweetDeck側のショートカット)
  • <C-q>でキーボードショートカットを有効にする
  • [またはF4でパネルを閉じる

9.9. Hit a Hint機能の導入

キーボードでブラウジングするための機能。 ページ内のリンクがたくさんあるときは空間ナビゲーションより早い。 この機能を実装している拡張機能はいくつかあるが、 大抵Hit a Hint機能以外もセットで付いてくるためMoly HaHが単一機能でオススメ。

この機能は単一キーボードショートカットと衝突するため、 ヒットさせる文字はキーボートショートカットで設定していないキーにすること。 このページの設定の場合、

Hint characters: 1234567890QWERYUPASFJKZVBNM Enter HaH mode: D Enter HaH mode (new tabs): Shift+D Quit HaH mode: Esc, D

を設定しておけば問題ない。

ページ上でDを入力するとリンクにラベルが表示され、ラベルに表示された文字列を入力するとそのリンクにジャンプすることができる。

10. ブックマークのニックネーム

ブックマークのプロパティとしてニックネームが付けられる。 実質的にはWebページのエイリアス(別名)であり、 特定の文字列をアドレスバーに入力するだけでページに飛ぶことができる。

例)Twitter公式ページのニックネームをtwとすることで、アドレスバーにtwと打ち込んでEnterでTwitterに飛べる

マウスを使わずにブックマークへ飛ぶ時に便利。 なお、この機能はクイックコマンドでも有効であり、むしろクイックコマンドはEnterなしでブックマークに飛べるので更に効率化できる。

@toriwasa
Copy link
Author

ブックマークバーやアドレスバーを非表示にするとこんな感じの画面になる。
画面の縦を広々と使えるのでかなり快適。

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment