とっぴんぱらりのぷうの怪

Vivaldiのこととか書くと思われ

Vivaldiのクイックコマンドを使い倒す

クイックコマンド、使ってますか?
僕はクイックコマンドがないと干枯らびる身体になってしまいました。

 

クイックコマンドはVivaldiの多機能性を下支えする素晴らしい機能です。
Vivaldiユーザーの中でもお気に入り機能として挙げられる様子を目撃はするものの、その使い方やTipsに関する情報は少ない気がします。
フォーラムでもクイックコマンドの要望やカスタマイズってあんまり見かけない。

 

なので今回はクイックコマンドのオレオレ使いこなし術を書いていこうと思います。

   

   

使用目的

クイックコマンドを使う目的は大きくワークスペースの移動ページ検索2軍機能の実行の三つがある。

ワークスペースの移動

Vivaldi6.1.3035.111現在ではワークスペースを指定して移動するにはボタン操作かショートカットキーなどに登録する必要がある。
サクッと作ったワークスペースなどにわざわざ割り当てなどしないのでクイックコマンドから呼び出す。

一時的な調べものや実験用に作ったワークスペースはクイックコマンドで切り替え

ページ検索

普通目的のページ(タブ)を開く時はそのページの呼び出し元を確定させる必要がある。
(タブエリアにあるのか閉じられているのか、はたまたブックマークにあるのか)

 

しかしクイックコマンドではそれらを意識する必要がないので、ぼんやりしながらタイピングしとけばよい。

 

タブ数が少なく2,3タブを往復するような時は効果が感じづらいのですが、タブをたくさん閉じたり開いたりを繰り返した後では効果を発揮する。
目的のタブがどこにあるか記憶辿るストレス、タブエリア・閉じたタブを探す労力、共になくした方がいい。

一つのテーマについて調べものをしている最中などはとりあえずそのテーマのキーワードを放り込んでおけば一通り出てくる。

2軍機能の実行

ショートカットを割り当てるまでもないが2,3日に一度使う機能などがある。
例えばページのタイトルとURLをマークダウン形式でコピーするコマンドチェインなどは頻繁に記事を書かない自分はたまにしか使わない。

 

他には『バックグラウンドタブの休止』『他のワークスペースの休止』などもアクティブタブを増やしすぎて重くなり出した時だけ使いたい。

 

このようにわざわざショートカットを登録する程ではない(登録しても呼び出し方法を思い出せない)程度のコマンドを呼び出すには持ってこい。

「ページのキャプチャ」機能などもページ全体をキャプチャしたい時だけ呼び出す(極稀)。普段使わないのにボタンを置いても邪魔だしショートカットキーなんてどうせ忘れるのでクイックコマンドで呼び出す。

オススメ設定

高速に検索するための設定を紹介する。

最後に入力した値をキープをオフ

クイックコマンド上に文字列を入力した状態でEscなりでクイックコマンドを閉じた後、次にクイックコマンドを開いたときに前の文字列をキープするという設定がある。
これをオンにしていると起動速度が若干遅くなりストレスなので消すことをオススメ。
設定ページから クイックコマンド > クイックコマンドオプション > 最後に入力した値をキープ をオフ。

英語での検索をオン

日本語検索でもいいが速さを求めるなら英語検索。
日本語入力だとローマ字入力後にエンターを押して初めて予測検索が始まる。漢字変換の手間、変換ミスのリスクを考慮しても英語の方が良い。
ただ慣れないうちは該当英単語が分からず戸惑うと思う。
 

特に意訳されているキーワードは見つけるのに苦労するかも知れない。
例えば『メモ』機能のVivaldi上の英語はキーワードは『note』である。
分からなければブラウザの言語を一度英語に切り替えて設定ページで該当箇所がどうなってるか見るのが良い。  

クイックコマンド > クイックコマンドオプション > 英語の検索結果を含める をオフ。

 

コマンドチェインの命名

コマンドチェインの命名は英語でスペースを空けて命名するのが良い。
後述するが、こうすることで少ない文字数でヒットさせることができる。

英語でスペース区切りで命名

検索タイプの優先順位

下記が良い。

ワークスペース >コマンド>コマンドチェイン >タブ > 閉じたタブ > 履歴 > ブックマーク

ワークスペースは数が知れているので、クイックコマンド起動→矢印で即実行できるため先頭に持ってくる。
次にコマンド > コマンドチェインとするのはページの検索はタイトルとURLで検索されるため文字数が少ないと意図せずヒットしてしまうことをさけるため。
タブ > 閉じたタブ > 履歴 > ブックマークは上述のページ検索を想定し、近々で使っていたタブへ飛びたいという目的でこの並び。   他の検索タイプは気分でコロコロ変えているしとくに思想もない。
拡張機能増やしているときは「拡張機能」を上位にするし、メモを多用しているときは「メモ」を上位にしている。
ちなみに今は下記 にしている。

 ウェブ検索およびURLエントリー > 拡張機能 > メモ > 電卓 > ページアクション

タブ削除MOD

タブの検索ついでに整理するのに良い。
他のワークスペースにあるタブも削除できる。

Alt + Deleteでタブを削除できるようになる。

ソースコード

https://github.com/tkhashi/VivaldiMods/blob/541a9af2de2b454353767e8bd5aa22acd45b8e52/JS/qc-tab-close.js

導入方法

www.naporitansushi.com

便利な使い方

より高速に検索するためのtipsを紹介する。

ニックネーム

検索速度向上。
ブックマークにはニックネームを付けられる。これにより短い入力ですぐに目的のブックマークまで辿り着ける。
2、3文字にするのがおすすめ。

カテゴリーフィルター

あまり知られていないが、クイックコマンドにはフィルター機能がある。
決められた頭文字を付けることでタブ(タブ・閉じたタブ)、履歴、ブックマーク、メモ、ページアクション、コマンド(標準コマンド・コマンドチェイン)の中で検索がかかる。

 

t: タブ
b: ブックマーク
h: 履歴
c: コマンド
n: メモ
a: ページアクション

 

探したい対象が明確な場合は検索スピードを上げられる。
特にタブ、履歴、ブックマークは同じ名前のページが重複することも多いので、ブックマークから呼ぶと決まっているならフィルターかける方が速い。

プレフィックスをつけることでフィルターをかけられる

カテゴリージャンプ

これもフィルター同様検索を高速化できる。
Alt + 矢印で前/次のカテゴリーの先頭までジャンプ出来る。
 

フィルターと違い、検索対象がどのカテゴリーにあるか曖昧な時にざっと見て回れるという利点がある。

Alt + ↓ を押下している様子。カテゴリの先頭にジャンプする。

省略検索

クイックコマンドの検索はスペースで区切ることであいまい検索ができる。
 

例えば新しいプライベートウィンドウを開くコマンドは『New private window』なので「ne pr」と入力するとコマンドカテゴリの最上位にくる。
(もちろんそれに該当する優先順位の高い検索結果があればそちらが上位に来る。タブはタイトルとURLで検索されるので上位に来がち。)

含まれる単語の一部を入力すればいいので、コマンドを暗記する必要もない。

また単語の順序はデタラメでもヒットする。
『New private window』は「pr ne」などでもヒットする。

コマンドがスペース区切りされていれば順序を気にしなくてよい
順序の曖昧さを許容してくれるおかげで何となくで検索してればヒットしてくれるため、機能の名前を忘れてもタブ周りで何かやりたいくらいの解像度でも検索できるのが良い。

巨大化

標準のクイックコマンドは小さい。何故こんなに小さくする意味があるのか理解不能なほど小さい。
タブ検索する場合はタイトルやURLが短くて判断に悩む瞬間があり困ります。
 

カスタムCSSを使って大きくする。
これによりページのタイトル、URLをしっかり確認できる。
縦領域を広げるmodは表示が出たり消えたりするバグがあるため任意。僕は検索予測数が少ない方がストレスなので入れてる。

上がデフォルト、下が巨大化後タイトル・URLが多く見える
ソースコード

https://github.com/tkhashi/VivaldiMods/blob/541a9af2de2b454353767e8bd5aa22acd45b8e52/CSS/qc-tab-close.css

導入方法

www.naporitansushi.com

弱点

クイックコマンドも常に最善手ではない。以下のようなケースでは別の方法に頼った方がいい。

ダイアログが消えると文字列も消える

設定の『前回の文字列を記憶する』に依存するが、別のウィンドウを参照しながら検索文字列を入力する時などにウッカリ消しがち。

ワークスペースのタブも表示される

今のワークスペース内で切り替えたい時は邪魔。
   

まとめ

小さい記事になるかと思って書き出したらかなりボリューミーになってしまいました。
クイックコマンド、サイコー!

カッコイイVivaldiの外観設定

普通ブラウザでは外観設定なんて背景画像、テーマ色を変えるくらいしかできません。 (あとはブラウザ固有のバーみたいなものを表示するかしないかくらい)

Vivaldiは外観の設定好き放題いじれます。 今日はおれのかんがえたさいきょうのVivaldiの外観を紹介します。

もう、ただ誰かに見せびらかせたいだけです。

Vivaldiの外観

コンセプト

JetBrainsのSpaceというサービスのイメージを元に作成します。
JetBrains製品の有機・無機の中間にあるようなデザインとグラデーションカラーが最近のマイブームです。

JetBrains Space

テーマ

JetBrainsが公開しているデスクトップアートを利用したテーマです。
背景画像に合わせた色の設定をしています。

テーマとして公開しています。

UI

昨今のウェブページは縦に長く横に短いので、縦領域を確保しやすいレイアウトとします。

  • ネイティブなウィンドウを使用する: OFF
  • タイトルバー: ON
  • アドレスバー: ON
  • ブックマークバー: OFF
  • タブバー: ON
    • タブバーの位置: 左
  • パネルバー: ON
    • パネルバーの位置: 左
  • ブックマークバー: OFF
  • パネル開閉バー: OFF
  • ステータスバー: ON

かつて表示領域絶対主義を標榜しやたらとUIを絞っていた時期もありましたが、結局縦領域さえ確保できていれば後はそこまで邪魔にならないと気付いてからこのスタイルです。
縦タブはタブの量がある程度増えてもタブタイトルが見えるという利点があるので採用しています。

カスタムアイコン

また上記のテーマに加えて、カスタムアイコンはMood yellow theme by denkuzを使わせてもらっています。
他のテーマとも組み合わせて使うくらいお気に入り。

オリジナルのMood yellowもおしゃれなのでそのまま使っていた時期もありました。

オリジナルもかわいいからそのまま使ってもヨシ

コマンドチェインのアイコンは独自のものを採用しています。
ボタンとして常駐させているのはワークスペース切り替え用のコマンドチェインだけです。
アイコンはここで拾った記憶があります。

また、下記記事のコマンドチェインを利用して、ワークスペースを切り替えるタイミングでテーマも同時切り替えています。
自分はテーマをコロコロ変えるのですが、Vivaldiのメールタブを見る時はライトテーマにした方が可読性が上がるのでテーマを切り替えるようにしています。
vivaldi.com

カスタムCSS

ここが肝です。

バーのレイアウト

フォーラムでの拾い物ですが、理想のレイアウトにかなり近くお気に入りです。
CSS職人には頭が上がらないね。

オリジナルのカスタムCSS
https://raw.githubusercontent.com/HKayn/vivaldi-vh/main/documentation/images/demo-1.png forum.vivaldi.net

このCSSを少し改造して、タブエリアの周りも少し背景が見えるようにしています。
オブジェクト感が増していい感じ。

Vivaldiの外観2
github.com

このUIの良いところ

  • 縦領域が確保される
  • すべての機能が1ヶ所に集約されていてすっきりする
  • ボタンを増やしても画面の占有領域が圧迫されずらい
  • ウィンドウリサイズ時に閉じるボタン誤爆に怯えずに済む(Windows固有)

ボタンを増やしても画面の占有領域が圧迫されずらいのは自分にとってインパクトが大きいです。
今まで縦領域を増やすためにアドレスバーやステータスバーを非表示にしていた時期もありました。
ですがボタンがないと困るシチュエーションというのも稀にあり(ブラウザが重くなった際のコマンド・ショートカットキーが受け付けているかの棲み分けなど)、ボタンがあると安心感があります。

その辺の必要性とデザインのバランスが素晴らしいと思います。

まあ元はAcr BrowserのUIを真似したかっただけなんですが。

新興のブラウザArc Browser。独特なUIや機能が話題。

クイックコマンドの巨大化

クイックコマンドはデフォルトだと横幅が異様に狭く、行もなぜか10行分しか表示されない(しかしDOMの中には要素がある)という謎仕様なので少し巨大化させます。
github.com

横・縦に広がったクイックコマンド。タイトル・URLの情報量が増える。

ただこのCSSは不完全で、クイックコマンドの下の方にマウスカーソルを置くと勝手にスクロールしたり、フォーカスを下まで下げていくと表示が途切れたり現れたりとバグが多くて困っています。
Reactの仕様なのかわかりませんが誰か助けて。

横幅だけなら特にバグらないのでheightの部分をコメントアウトして使うのも良いと思います。

まとめ

外観設定はコロコロ変えているのでこの記事を投稿した翌日には変わってるかもしれません。
落ち着きがない自分にはそれが合っています。

Vivaldi高速・軽量化の設定

みんな"Fast"という言葉は大好き。 "Fast"と書かれているだけで飛びつくくらい、速さは正義。

Vivaldiを知ったのも軽量・高速という謳い文句がきっかけだった気がする。

しかし長いことカスタマイズした結果、起動が遅くなったり諸動作がもっさりしたりして少しストレスだったので高速化する方法をまとめた。

効果の程度検証はしていないので大して効果のない設定もある気がする。 特に改善が感じられた項目は◎をつけておくので、とっとと設定したい人はそれだけやったらよろし。

なお、ローエンド向けに軽量化を図る方法もいくつかあるがそれらは省いている。

改善項目

  • ブラウザ起動速度
  • ブラウザ動作速度
  • ページ表示速度の改善

起動速度改善

  • ◎起動時に開くページ > 復元したタブの読み込みを遅延させる(ON)
  • ◎パネル > ウェブパネル > 遅延読み込み(ON)
    前回開いていたタブ、ウェブパネルに登録してあるページを読み込まないようにしてくれる。 副作用: タブ、ウェブパネルを開いたタイミングで初めて読み込まれるので、そこで待機時間が発生する。

  • ◎テーマ > エディター > 背景 > 画像なし
    背景画像を読み込まなくする

ブラウザの動作改善

  • ◎ウィンドウの外観 > アニメーションを使う(OFF)
    パネルがニュっと出てきたりするリッチな動きをやめる。

  • ◎メール|カレンダー|フィード > メール、カレンダー、フィード機能を有効にする(OFF)

    • もしくは使っていないメール|カレンダー|フィードの削除
    • もしくは新着メール確認(手動)
      起動の度にメールにインデックスを張るので起動直後ももっさり感が出るはず。 定期的にサーバーを購読しに行くので不要であればOFF。
  • ◎タブ > タブ表示 > タブサムネイルを表示(OFF)
    タブエリアに表示されるサムネイルを表示しないようにする。 タブエリアを上段に配置しているとわかるが、サムネイルONにしていると見えないだけでサムネイルがレンダリングされている。

  • タブ > タブ表示 > ページタイトルから通知を検出する(OFF)

  • パネル > ウェブパネル > ページタイトルから通知を検出する(OFF)
  • パネル > ウィンドウパネル > 未読タブバッジを表示する(OFF)
  • パネル > リーディングリストパネル > 未読カウンターを表示(OFF)
    状態を購読し続けるのでOFF。

  • ◎タブ > 新しいタブで表示する > 空白のページ( or スタートページ)
    新しいタブで表示するページをGoogle.comなどをにしているとタブを開くたびにリクエストを送ることになり若干待たされるのでOFF。一時期Ecosiaを新規タブページにしていたがGoogleよりも若干待つせいでアドレスバーへの入力もできない時間が発生した。

  • プライバシー > 閲覧履歴の保存 > 1か月
    ゴミを溜めない。好みなので必要な分だけに設定する。

  • ◎クイックコマンド > 最後に入力した値をキープ(OFF)
    クイックコマンドを開いたときに最後の値を復元する間ができるのでOFF。

  • パネル > パネルオプション > パネルのオーバーレイ(OFF)

  • テーマ > エディター > 設定 > 透明なタブバー(OFF)
  • テーマ > エディター > 設定 > 透明なバックグラウンドタブ(OFF)
    オーバーレイ表示(半透明化)は画像処理が挟まるため若干表示がもたつくのでOFF。

  • chrome://settings/performance > パフォーマンス > メモリーセーバー(ON)
    アクティブでないタブをいい感じにメモリ解放してくれる。

ページの表示速度改善

  • ウェブページ > 可能な場合、ハードウェアアクセラレーションを使用する(ON)
    WebGL, OpenGLレンダリングGPUに任せる。正直なにをしているのかわからないが、デフォルトでON になっているし内蔵GPUができる範囲で良しなにやっているんじゃないかと想像。

その他chrome://flagsから設定できるGPU周りの設定、画像の読み込み速度が気になる方はどうぞ。 手軽なのに効果絶大『Chrome』を高速化する12の設定(flags)

  • ◎トラッカー・広告ブロック > トラッカーと広告をブロック
    広告をロードする必要がなくなるのでブロックにしておく。拡張機能で別の広告ブロッカーを使っている場合はそちらでもよい。 副作用: まれに意図しない動作をするサイトもある。これは広告ブロッカーの宿命。

  • ウェブページ > 画像の読み込み > キャッシュから
    副作用: キャッシュにない画像は読み込まれない。 あまりにも副作用が大きいので限られたページのみ何度も読み込むとか、通信状況が劣悪とかそんな時だけ設定したらいい。io

まとめ

Vivaldiは多機能だが、すべてを欲張ると当然重くなる。しかしそれもユーザーの一つの選択。 でも、速いってサイコーだよな。

参考

Vivaldiがメモリを使いすぎで重いときの対処法 見直す設定はこれ | GADGET LOG Vivaldiスピードアップ計画 – レミュウ 手軽なのに効果絶大『Chrome』を高速化する12の設定(flags) vivaldi 手軽に初回起動時間を短縮、起動数を制限する。 | 気ままの簡易レビュー