Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Vivaldiの設定晒し

1. 基本方針

  • ディスプレイの横幅を活かして情報は左右に表示させる
  • 画面上にGUIのボタンは配置せず、マウスジェスチャー+キーボードショートカットで操作する
  • 慣れてきたらキーボードショートカットの比率を増やしていく

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

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

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

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

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

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

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

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

3. Webパネル

Vivaldiで一番使ってるかもしれない機能。
主にブラウジングしながらTwitterを見るのに便利。
その他ながら鑑賞向きのサイトは大体便利。

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

3.1. 設定方法

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

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

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

3.3. 基本的なTIPS

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

3.4. Twitterを利用する際のTIPS

  • Twitter公式Webクライアントはモバイル版でWebパネルを作るのがおすすめ
  • デスクトップ版はウィンドウ幅が狭いとレイアウトが崩れるが、モバイル版は画面内に収まる
  • キーボードショートカットを使う場合はTweetDeckのサイトをWebパネル化すると便利(後述)

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

4. タブバーの左側配置

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

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

  • 上に配置しているときに沢山タブを開くと横幅がどんどん狭くなってタブの視認性・クリックしやすさが低下する
  • 一方、左右へ配置しているときに沢山をタブを開いても、縦幅が狭くなることはない。したがって上記の問題が起こらない
  • 横幅が少し狭くなる関係上、タブのタイトルは多少後ろが切れてしまうが、先頭数文字が分かれば意外と識別可能

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

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

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

Vivaldiはアドレスバーの配置もカスタマイズ可能。
アドレスバーはそこまで頻繁に見ないので、下に配置しておくと邪魔にならない。
また、その分ディスプレイの上部を広く使えるメリットがある。

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

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

ただし、新しいページではアドレスバーではなくページにフォーカスしてくれた方が嬉しいことがある。
具体的には新しいページを単一ショートカットキーで閉じたいとき。
これは設定で「新しいタブを開いたとき、ページ内容をフォーカスする」にチェックを付けることで実現できる。

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

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

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

Chromeはアドレスバーと検索欄が併合されており、アドレスバーから検索が可能。
一方、Vivaldiはアドレスバーと検索欄を分けて表示できる。
しばらく使ってみたが、設定によっては両者が分かれていることがメリットになるケースがありそう。

設定を見つけられない場合は、設定ウィンドウ左上の検索欄に以下の設定項目(e.g. アドレスバーでの検索)を入力すると検索できることを覚えておく。

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

    • 「アドレスバーのオートコンプリート」のチェックを外す
    • 「入力時にアドレスの候補を表示する」のチェックを外す
  • 検索関係の設定

    • 「アドレスバーに検索欄を表示する」「常に新しいタブで開く」にチェック
    • 「アドレスバーでの検索」はチェックしない
    • 検索候補を有効にする→
      • 「アドレス欄」「検索エンジンのニックネームを使用する場合のみ」「検索欄」にチェック
    • Googleの検索候補を有効にするため、「検索エンジン」→「Google」→編集ボタンをクリック→検索候補の欄にhttps://www.google.co.jp/complete/search?client=chrome&q=%sを設定しておく

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

  • アドレスバーの用途
    • IPアドレス直打ちでアクセスしたいときに使う
    • アドレスのリクエストパラメータ(e.g. q=XXX)を手動で弄って飛びたいときに使う
    • アドレスバー左側の地球儀っぽいマークをクリックしてサイト情報を表示する(Cookieのブロックとかできる)
    • Amazonなどのショッピングサイトの検索バーから検索エンジンを生成しておき、aなどのニックネームを付けておく
      • その上でアドレスバーにa 腕時計と打ち込めば、Amazonでの検索が可能
    • 過去に表示したアドレスから検索するのは後述するクイックコマンドに任せた方が便利。
  • 検索欄の用途
    • デフォルトはGoogle検索にしておく
    • Googleで検索したいときはこちらを使う
    • アドレスっぽい文字列を検索してもちゃんと結果ページに飛べるメリットがある

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

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

8. マウスジェスチャー

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

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

  • ロッカージェスチャーは有効にしておく
    • 進む・戻るは基本的にロッカージェスチャーで操作する
  • 「タブサイクラーを表示」「スクロールでタブを切り替える」を有効化する
    • 右クリック&ホイール上下でタブの切り替えが可能になる
    • また、タブバーの上にマウスカーソルを置いてホイール上下することでもタブ切り替えできるようになる
    • タブバーが左右に配置されていると、ホイール上下がそのままタブ切り替え上下になるので直感的。

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

マウスの動き ジェスチャーの割り当て 備考
新しいタブ リンク上での操作なら新しいタブでリンクを開ける
↓→ タブを閉じる
←↑ 左側のタブを全て閉じる タブバーが左側の場合、上側のタブを閉じる動作
←↓ 右側のタブを全て閉じる 下側のタブを閉じる動作。選択したタブから左下にタブを押し流して消すイメージ。
↑→ 閉じたタブを開き直す 地味に便利。「タブを閉じる」の次くらいによく使う
↑↓ ページを再読み込み
UI切り替え タスクバーを残して全画面にできる。
ちょっと画面を広くしてページを読みたいときに便利
パネル 右側に配置したパネルを引き出すイメージの操作。
1アクションでTwitter画面が開けるので最高に捗る
ブックマークバー 上に配置したブックマークバーを切り替えるイメージの操作。
必要なときだけブックマークバーを表示すれば良くなる
画面の縦スペースを有効活用できる
↑←↓ タブサムネイル タブを下に引っ張ってサムネイルを引き出すイメージ。
縦にタブが並んでいると割と自然なレイアウトになる。
サムネでタブ内容が分かるので一覧性が上がる
→↓ キーボードショートカットを無効に キーボードショートカット側でキーボードショートカットを無効→有効に切り替えできなくなったときに使う

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


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

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

9.6. 主な使い方

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

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

同僚がChrome+Vimiumを使ってキーボードオンリーでブラウジングしているのを見て、
「便利そうだなー」と思ったものの、Vimiumはモード切り替えの概念があるので操作が面倒・・・
(慣れれば問題ないという話でもあるが)
参考:Chromeをvimライクに使えるようにするvimium

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

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

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

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

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

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

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

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

  • 「新しいタブでページを開く」
  • 「ブックマーク」
  • 「ニックネームにマッチしたページをすぐに開く」
  • 「履歴」

にチェックをつけておく。
「ページアクション」はチェックを外しておく。

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

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

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

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

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

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

  • URLとページタイトル両方を検索できる
    • URLが行けるのでドメインで絞り込んで検索候補から探せるのが地味に便利。
    • ページタイトルはニックネームを設定していないブックマークを探すときに役立つ。
    • 慣れるとブックマークバーやブックマーク画面を表示することなくクイックコマンドから探せるようになる。
    • ブックマークが多い人は特に便利かも。
  • 履歴検索では過去表示した回数が表示される
    • 最近追加された気がするが、地味に便利な機能。
    • ドメインで検索すると同じドメインのサイト履歴が多数表示されることが多い
    • このとき表示回数が多いものに着目することでよく使っているページを楽に探すことができる
    • WikiやRedmineなどの
      • 「ブックマークはトップ画面だけ」
      • 「色んなページにジャンプして操作する」
      • 「ページがどんどん増えていくため、個別にブックマークしていくと面倒」
    • といったWebサイトの履歴を探すときにとても重宝する。

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

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

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

などの機能から、

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

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

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

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

9.5. キーボードへの割り当て設定(暫定版)

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

  • 注意点

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

    • 下記に記載されていない操作はミスを防ぐために割り当てを解除しながら設定していく
    • xは単一キーのコマンド、XはShift+Xの コマンドを指す
    • Alt+PやCtrl+Shift+Pのようにコンビネーションキーとの組み合わせの場合はそのまま表示する
コマンド 操作 備考
F2, Ctrl+Shift+P, q クイックコマンド ショートカットを忘れたときやタブ検索したいときに使う。Ctrl+Shift+Pは他で使うため解除
Shift+ESC タスクマネージャ ブラウザ単体でのプロセス単位でのメモリ使用量などが分かる
Alt+P 設定 使いながら設定をチューニングしていくのでよく使う
Ctrl+Shift+E 拡張機能 インストールした拡張機能の設定を弄りたいときに使う
Alt+H 履歴 Ctrl+Hは他で使うので変更。クイックコマンドより詳しく履歴が検索できる。
e.g. 表示した日付をカレンダーで選択して絞り込み
F1 キーボードチートシート 設定したショートカットを一覧で見れる
使用されているキー、割り当てられた機能名の両方で検索可能
e.g. 「ctrl」や「クイックコマンド」で検索できる
ショートカットを見直したいときはこっちでもいい
Ctrl+P キャプチャーエリアをファイルへ保存 地味に便利。エリアを指定してスクショが撮れる。
PrintscreenということでCtrl+P。
画像ファイルはピクチャフォルダのVivaldi Capturesに保存される
F12 開発者ツール Chromeと同様の設定
Ctrl+Shift+V 貼り付けて移動 Ctrl+Vの強化版のイメージ。わざわざアドレスバーにフォーカスしなくてもコピーしたURLに移動できる。
F11 フルスクリーンモード
Alt+B ブックマークバー ブックマークバーを使うのはマウスが多いのであまり使わないが、たまに使う
Ctrl+Shift+S, Alt+S ステータスバー フォーカスしたリンク先URLが知りたい時だけ表示させたりする
Alt+T タブバー
Ctrl+F11, Alt+U UI切り替え ちょっと広くWebページを表示させたいとき、タスクバーとタイトルバーを表示させたまま全画面にできるのでよく使う。
Shift+; 拡大
- 縮小
Ctrl+0 ズームのリセット
F4, [ パネルを表示/非表示 かなり使うショートカット。
パネルを出したり引っ込めたりする。
表示と同時にフォーカスが移る
F7, ] パネルにフォーカスを移す パネルを表示させたまま作業して、ちょっとTwitterパネルをスクロールさせたいときとかに使う
Ctrl+Shift+B ブックマークパネル
Ctrl+Shift+D ダウンロードパネル
Ctrl+Shift+M メモパネル
Ctrl+Shift+H 履歴パネル クイックコマンドより詳しく履歴を検索できる。今日表示したサイトに絞って検索とかできるのでたまに便利。
Alt+1~Alt+9 Webパネル1~Webパネル9 任意のWebパネルを呼び出せる
t 新しいタブ 単一キーになると途端に便利になるショートカット
c タブの複製 cloneする。割とよく使う
\ タブを切り離す 表示しているタブをマルチモニタの反対側に持っていきたいときに使ったりする
Ctrl+W, x タブを閉じる これも単一キーになると途端に便利になる。
テキスト入力欄にフォーカスしていたりするときはCtrl+Wを使う
Ctrl+J 次のタブ タブは縦配置なので、次のタブ=下に移動するイメージ。
Vimのh, j, k, lが←↓↑→にマッピングされているのに合わせている
Ctrl+K 前のタブ Ctrl+Tabでタブ切り替えなので、そのままCtrl+J, Ctrl+Kでタブを上下移動するイメージ。
慣れるとタブサイクラーをあまり使わなくなる。偉い。
Ctrl+1~Ctrl+9 1つ目のタブ~9つ目のタブに切り替え
Ctrl+Z, X 閉じたタブを開き直す xで閉じてXで戻す、というのが分かりやすい
Ctrl+F9 左右に並べて表示 タブタイリング関係はこの辺り
Ctrl+F8 上下に並べて表示
Ctrl+F7 タイル状に並べる
Ctrl+F6 タブのタイリングを解除
Ctrl+Shift+P ページをキャプチャーしてファイルへ保存 スクロールが必要なページ全体をスクショして保存してくれるので便利
Ctrl+S セッションとして開いているタブを保存 調べ物で開いたタブを丸ごと保存できる。便利。
元々はページを保存するショートカットだが、正直使うときはメニューから操作するため、ショートカットである必要がなく上書きした
Ctrl+O 保存されたセッションを開く 上記で保存したセッションを復元できる。
Ctrl+B ブックマークの作成
F8, i, Alt+D アドレスバーにフォーカスを移す アドレスコピペで移動したりするときに使う。
Alt+DはWindowsエクスプローラーやIEのショートカットに合わせて設定。
Ctrl+R, F5 ページを再読み込み
Ctrl+Shift+R, Ctrl+F5 ページを強制的に再読み込み
G ページ最上部にスクロール vim的なショートカット。意外と使う
g ページ最上部にスクロール
F10, Ctrl+H ページにフォーカスを移す パネルや検索欄にフォーカスしている状態からページにフォーカスを戻したいときによく使う
Ctrl+Q キーボードショートカットを無効に Webページにキーボードショートカットが設定されているときなど、一時的にショートカットを無効にしたいときに使う
2017年の6月~10月くらいまでトグル式でなく、無効にしたら再度有効化ができなかった。最近はまた有効化も同じくCtrl+Qで出来るようになった。
Ctrl+E,F9, o 検索欄へフォーカスする 最近一番よく使うショートカット。
sEarch, あるいはExproleでCtrl+E。一番使うのはo
意外と検索欄にフォーカスする機会は多かったことに気付いた。
検索するまでのちょっとしたスピードアップは大きい。
Ctrl+F, / ページ内検索 vim風。なお、EnterとShift+Enterで検索結果を行ったり来たりできる。
ページ内検索欄を抜けるときはEscで抜けられる
Ctrl+, Alt+, h 履歴を戻る vimっぽくh, lで進む・戻るが可能
Ctrl+, Alt+, l 履歴を進む
Esc 読み込みを中止
Ctrl+Shift+C 選択したテキストをノートにコピー 調べ物してると結構使ったりする
Shift+, ,,,
w, a, s, d
空間ナビゲーション上, 左, 下, 右 便利機能。
ページ内のリンクを上下左右に移動して選択可能。
動画の再生ボタンなども選択できる。

9.6. 主な使い方

  • oまたはF9で検索欄にフォーカスしてキーワード入力して検索
  • qまたはF2でクイックコマンド開いてニックネーム入力→ブックマークに飛ぶ
  • iまたはF8でアドレスバーにフォーカスしてデフォルト以外の検索エンジンで検索
  • xでタブを閉じる
    • Xで閉じたタブを復活させる
  • l,hで進む、戻る
  • Ctrl+J, Ctrl+Kでタブを切り替える
  • Space, Shift+Spaceで上下に移動する
  • Tab, w, a, s, dでページ内のリンクを選択する

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

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

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

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

9.8. Hit a Hint機能の導入

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

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

1234567890RYUPFJKZVBNM

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

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

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

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

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

Owner

toriwasa commented Apr 25, 2017

f1f7db86-3783-4c0f-9f33-e77f6a0abecb

なお、上記を適用すると大体こんな感じの画面になる

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