Zenn
⛓️

Vivaldiのコマンドチェインやブックマークレットのススメ

2021/09/08に公開
JavaScript
Vivaldi
便利
tech

対象読者

「コマンドチェインって何ができるかわからない」「イマイチ使いこなせないんだよね～」というVivaldiユーザ向けの記事です．

何をコマンドチェインにすればいいのか

まず，「思いつかないよ～」って人へ．
「普段自分がよくやる動作」を登録すればいいわけですが，いきなり考えられないと思います．そんな時は以下のようにしてアイデアを得ましょう．

遅延って何に使うの？

登録されたコマンドは，順番にサクサク実行されます．
しかし，読込中のページに対して貼り付けやクリックをしても当然正しく実行されません．
「遅延」を挟めば，読み込みや表示が終わってからコマンドを実行できます．

ブックマークレットの注意

アドレスバーでのコピペ

アドレスバーでブックマークレットを試すときに
「アドレスバー > セキュリティ機能 > 貼り付けられたテキストから JavaScript を除去」
をオンにしている場合，ブックマークレットの冒頭のjavascript:の部分は手動で入力する必要があります．
オンの場合アドレスバーにコピペしてすぐに実行しないよう注意しましょう．ブックマークのアドレス編集時も注意しましょう．

ブックマークレット実行時のアドレスバー汚染をUndo

実行したいコードhogeに;if(history.replaceState){history.replaceState({},null,location.href);};をくっつけるだけで，アドレスバーにブックマークレットのコードが残らなくなります．

javascript:hoge;if(history.replaceState){history.replaceState({},null,location.href);};

↓アドレスバーに注目
ブックマークレット実行時のアドレスバー汚染をUndo
アドレスバーに注目

参考: Bookmarklets replaces the URL in the address bar | Vivaldi Forum

ウェブパネルを扱うチェインが上手く動かない時

パネルバーを右クリックすると，パネルごとに表示/非表示を切り替えたり，削除されたパネルを見ることができます．しかし，非表示にしているパネルの順番に注意しないと，チェインで非表示のウェブパネルを指定してしまうことになるかもしれません．
パネルのアイコンをシフトキーを押しながらドラッグ&ドロップしてパネルの順番を入れ替えることができるので，非表示のパネルを前や後ろに固めておくのがおすすめです．
パネルを右クリック
パネルバーを右クリックした時のメニュー．DeepLが非表示になっている．

どこからチェインを実行するか

僕は「高頻度で実行するチェイン」のみキーボードショートカットに登録し，ほかはクイックコマンドから実行しています．「特定のページ向けのチェイン」は高頻度だったとしても誤爆が怖いため，大人しくクイックコマンドから実行しています．
マウスジェスチャー・コンテキストメニューからでも実行できます．

参考

チェインの名前

チェインの名前は，アルファベット以外だと変換する手間があるため，アルファベットのみにしています．
また，空白区切りhoge fooではなく基本的にはパスカルケース(単語の先頭を大文字)HogeFooにしています．

これは，ブックマークでも同じです．
そもそも入力するのが面倒だな，と感じるぐらい使うチェインはキーボードショートカットを割り当てます．

「そこそこ使うけどキーボードショートカットには登録したくない」というチェインの名前には，qのように(少なくとも僕にとっては)あまり使わない文字を先頭に付けます．こうすることで絞りやすくしてます．
これは，ブックマークのニックネームでも同じです．

コマンドチェインの例

いつもアクセスするサイト

まずは単純な例です．
毎朝Zennの新着記事とQiitaのタイムライン，noteを見るため，追加しました．
使うのは朝だけであるため，キーボードショートカットには登録しません．

  1. 新しいタブでリンクを開く: https://zenn.dev/articles
  2. 新しいタブでリンクを開く: https://qiita.com/timeline
  3. 新しいタブでリンクを開く: https://note.com

いつもアクセスするサイト

リネーム

ウェブパネルをたくさん登録しているとどれが何番目か分かりづらいなぁと思ってました．でも，マウス操作はしたくない．
チェインでただ別名をつけるだけでこれを解決します．

  1. ウェブパネル n (任意のウェブパネル)

このチェインにキーボードショートカットを割り当てても，どのウェブパネルがどのショートカットなのか覚えづらいため，「# チェインの名前」で紹介したように，q + ウェブパネルのサイト名にしています．

例えば，https://tweetdeck.twitter.com/のパネルを開閉するチェインの名前はqTweetdeckにしています．

リネーム

ウェブパネルの順番を入れ替えたときは要注意です．

ウェブパネル以外のコマンドも「自分にとってわかりやすい名前」・「入力しやすい名前」にすれば効率アップです．

現在のタブのリンクをマークダウン記法でコピー

よくあるブックマークレットです．「## ブックマークレット実行時のアドレスバー汚染をUndo」も組み合わせています．

  1. 現在のタブでリンクを開く: javascript:prompt('Title%20+%20URL','['+document.title+']('+location.href+')');if(history.replaceState){history.replaceState({},null,location.href);};

めちゃくちゃ使うため，キーボードショートカットに登録しています．
ちょっとだけタイトルを編集することもあるため，プロンプトを出しています．

現在のタブのリンクをマークダウン記法でコピー

他のリンク形式にも対応できそうですね．

リッチなメモ，あるいは一時的な編集

「HTMLをそのままメモしたい」「一時的にメモしたい」「このページのAとBとCの部分だけみたい．ほかは不要」なんてときに，該当箇所をこのメモに貼り付けて見ると便利です．

RichMemo

  1. 新しいタブ
  2. 遅延: 1000
  3. 現在のタブでリンクを開く: data:text/html, <html contenteditable>
  4. 遅延: 1000
  5. ページにフォーカス
  6. すべて選択

そのまま「新しいタブでリンクを開く」やブックマークレットとして開こうとすると文字化けページが開かれるため，少しコマンドが多めです．「すべて選択」を実行することで，すぐに入力可能です．

Vivaldiのメモ機能や別のメモツールは「端末間で同期したい」「ずっと残しておきたい」とき，このリッチなメモは「あくまでも一時的」という使い分けをしています．

「左右に並べて表示」や「コピー」「貼り付け」と組み合わせても便利だと思います．

任意のポート番号を指定してlocalhostを開く

ZennのCLIでのプレビューやJupyterLab，MLFlowみたいに本当によく使うものはブックマーク，それ以外はこのチェインを使うと便利です．
プロンプトを開いて入力することで，任意のポート番号を指定できます．

localhostチェイン

  1. 現在のタブでリンクを開く: javascript:let p=prompt("port");window.open("http://localhost:"+p);if(history.replaceState){history.replaceState({},null,location.href);};

localhostを開くときだけではなく，選択肢から選んで開きたいときにも似たようなコードにif文を追加すればできそうですね．

Modのためのコンソールを開く

これはCommand Chain Recipes | Vivaldi Forumとかぶってしまったのですが，Mod紹介のために載せておきます．

Vivaldiでは，Modを使ってブラウザを更にカスタマイズすることが可能です．JavaScriptでオリジナルのパネルを追加したり，CSSで見た目をいじったりできるのですが，そんなときに役立つのがこのコンソールなのです．

  1. 新しいタブでリンクを開く: vivaldi://settings
  2. 遅延: 1000
  3. 開発者ツール
  4. タブを閉じる

Modのリンク集

現在のTwitter検索をウェブパネルのTweetDeckのカラムとして追加

これを使うのは自分だけかもしれませんが，載せておきます．
ここでは，TweetDeckをウェブパネル1に設定しています．

タブからウェブパネルのカラムへ

やっていることの流れは，

  1. Twitter検索のURLから検索ワードを取得
  2. TweetDeckをタブで開き，取得した検索ワードで検索するカラムを追加
  3. ウェブパネルの方のTweetDeckをリロードして開く

です．コマンドのレシピは以下です．

  1. ページにフォーカス
  2. 現在のタブでリンクを開く: javascript:navigator.clipboard.writeText(new URLSearchParams(document.location.search.substring(1)).get("q"));
  3. 遅延: 1000
  4. 現在のタブでリンクを開く: https://tweetdeck.twitter.com
  5. 遅延: 5000
  6. 現在のタブでリンクを開く: javascript:navigator.clipboard.readText().then(t=>{document.getElementsByClassName('app-search-fake')[0].click();let a=document.getElementsByClassName('is-focused')[0];a.focus();a.value=t;a.nextElementSibling.click();});
  7. 遅延: 3000
  8. タブを閉じる
  9. メモパネル
  10. ウェブパネル1
  11. 現在のパネルを切り替え
  12. パネルを表示/非表示
  13. ウェブパネル1

1～3で現在のTwitter検索の検索ワードをクリップボードにコピーしています．navigator.clipboard.writeTextはページにフォーカスしているときでないと使えません．現在のフォーカスがどこにあっても実行できるように，最初に「ページにフォーカス」を入れています．

4では，TweetDeckを自動操作するためにウェブパネルではなく一旦新しいタブで開いています．

6では，検索ボタンをクリックしてクリップボードの内容を検索ワードとして設定し，カラムを追加しています．

9では，開きたいパネルの現在の開閉状態を気にせずに開くためのものです．
これは，ポポガミ･ポさんの投稿を参考にしました．

https://twitter.com/tkhashi_pogamy/status/1434004078141394944?s=20

10～12では，新しいタブで開いたTweetDeckをウェブパネルのTweetDeckに反映させるためのリロードを行っています．
これは，GENKI 🐸さんの投稿を参考にしました．

https://twitter.com/nibushibu/status/1426166252381216776?s=20

ここでは「タブのTwitter」→「ウェブパネルTweetDeck」という流れでしたが，同じように「タブ」→「ウェブパネル」で反映させたい人は参考にしてみてください．

2軍落ちブックマークレット

作っておいてそんなに使わなかったため，チェインからブックマークへ2軍落ちしたものを掲載します．

今開いているタブをウィンドウとして切り出す

  1. 現在のタブでリンクを開く: javascript:window.open(location.href,'','width=1200,height=800');if(history.replaceState){history.replaceState({},null,location.href);};

Twitter検索を日本語に限定(検索語句の追加)

Twitter検索をしているときに，検索ワードにlang:jaを追加することで，日本語に絞り込むことができます．

  1. 現在のタブでリンクを開く: javascript:let url=new URL(location);let p=new URLSearchParams(url.search.substring(1));url.searchParams.set("q", p.get("q") + " lang:ja");location.href=url.toString(); 
let url=new URL(location);
let p=new URLSearchParams(url.search.substring(1));
url.searchParams.set("q", p.get("q") + " lang:ja")
location.href=url.toString();

Twitter検索でキーワードをユーザー名に含む場合除外

よくある検索コマンドです．

  1. 現在のタブでリンクを開く: javascript:let url = new URL(location);let p=new URLSearchParams(url.search.substring(1));url.searchParams.set("q", p.get("q") + " -filter:replies OR @usernamejogai");location.href=url.toString(); 
let url = new URL(location);
let p=new URLSearchParams(url.search.substring(1));
url.searchParams.set("q", p.get("q") + " -filter:replies OR @usernamejogai")
location.href=url.toString();

今開いてるTwitterユーザーを検索

見出しのとおりです．
https://twitter.com/vivaldi_jpだったらhttps://twitter.com/search?q=from:vivaldi_jpに遷移する，という動作です．

  1. 現在のタブでリンクを開く: javascript:javascript:let u=location.href.replace("https://twitter.com/", "");let url="https://twitter.com/search?q=from%3A"+u;location.href=url; 
let u=location.href.replace("https://twitter.com/", "");
let url="https://twitter.com/search?q=from%3A"+u;
location.href=url;

最後に

力尽きそうなので今回はこのくらいにします．
もっと良い方法や更に発展させた使い方があったらぜひ教えて下さい．

Discussion