開発に必要な情報収集速度を10倍に ～ 君にシンクロするウェブブラウザ、Vivaldi

あ……10倍というのはあくまでも個人の感想です。僕は10倍くらいになった気がします。

世の中にはChromiumから派生したウェブブラウザがごまんとあります。**そのなかでも僕が特におすすめするのが「Vivaldi」というウェブブラウザです**。

https://vivaldi.com/ja/ - 未来の自分に届けたいブラウザー | Vivaldi

**う～ん、キャッチコピーから洒落てますね**。この記事ではこのウェブブラウザの良さと、実際に設定方法なども含めて解説します。

# 上手く活用しよう、クイックコマンド

![00.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498509/a3b34b9d-44fd-b1c8-8bf2-aeff15dce0d2.gif)

Vivaldiには、「**クイックコマンド**」という機能が備わっています。これはVSCodeでいう**コマンドパレット的なもの**で、いろんな利用法があります。

まずはF2で(デフォルトのショートカット)クイックコマンドを開きます。すると画面中央上部にテキストボックスが現れるので、検索してみたい語句を入力してみましょう。すると、Vivladiの既定の検索エンジン(設定で任意のものに変更可能です)で**Web検索を行います**。

また、Vivaldiの検索エンジンには**ニックネーム**という概念があり、``<ニックネーム> hogehoge``とすると、**その検索エンジンで検索できます**。下の画像はTwitter検索を利用した場合です。

![01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498509/61a4bc39-6159-e446-6c9e-05fe51a220b6.gif)

この検索エンジンの追加方法なのですが、もちろん設定から自分でURLを打ち込む……でも良いですが実際に検索ページを開いて、検索ワードを入力するinput要素を右クリックして「検索エンジンを追加」が手っ取り早く正確です。検索エンジンとして、Googleはもちろん、ここ(Qiita)やMSDN、teratailなども登録しておくと便利かも。

蛇足かもしれませんが、F2のショートカットはF1のヘルプを誤爆してしまいあんまし良いショートカットキーではありません。設定から変更できるので、F1のヘルプをクイックコマンドに置き換えると良いと思います！！

そして、このニックネーム機能、**実はブックマークにも存在して**、ブックマークに任意のニックネームを付ければ、**クイックコマンドでタイピングするだけでそのページを開けます**。

![02.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498509/b8adcf30-631a-a36b-6aaf-e6dcbf0a6eb6.gif)

画像のようにタイピングして(Enterを押さず)そのままページに移動させる場合は設定で「**ニックネームにマッチしたものをすぐ開く**」をONにしておく必要があります。ちなみに、ブックマークのニックネームと検索エンジンのニックネームは重複しても問題なさそうです。

クイックコマンドで実行できるのはブックマークや検索だけではないです。履歴や最近閉じたタブ、今開いているタブなども開くことができます。

「**あのライブラリの解説サイト、閉じちゃったけどなんとなくタイトル覚えてるから……ｶﾀｶﾀ……おっ、見つかった**」

のような感じで、履歴を漁らずとも呼び戻すことができます。

#上手く活用しよう、ウェブパネル

Vivaldiにはパネルという概念があり、画面の左右どちらかにあるアイコン群のことです。え？見当たらない？　F4キーでパネルの開閉ができるので、もし閉じてしまっているのなら開けておきましょう。ウェブページを閲覧しつつ、ここから**履歴**、**ブックマーク**、**ダウンロード**や**タブ一覧**を観ることができます。

このパネルで、ウェブページを閲覧できるのでウェブパネルです(説明下手か)。基本的に何でも追加することができます。僕はGoogle KeepやGoogle 翻訳を多用するので、ウェブパネルに追加しています。他にも、こんなウェブパネルを追加してます。

* Google トレンド
* Gmail
* 確認くん(グローバルIPとかUAが調べられるサイト)
* 自分のサイト(スマフォ表示確認)
* グラブル
* Twitter
* Black Menu for Google。ウェブパネルに拡張機能を追加することができます。  
URLは``chrome-extension://<拡張機能のID>/<拡張機能が用意したHTMLファイル名>``です。  
この拡張機能の場合、``chrome-extension://eignhdfgaldabilaaegmdfbajngjmoke/app.html``ですね。

**このウェブパネルに追加されたものに関しては、Android標準ブラウザとして振る舞います**。つまり、閲覧するページでスマートフォン用に最適化されていれば、スマフォと同じページを閲覧できます。パソコンの隣に1台スマフォが置いてある雰囲気です。**自分の制作したサイトのチェックにも活用できるかもしれません**。

ここにTwitterやYouTubeを設置してしまうと……アレ、逆に情報収集捗らないのでは🤔

# 上手く活用しよう、タブスタッキング

公式が最も推している[要出典]機能があります。**タブスタッキング**です。これは**タブにタブをドラッグアンドドロップさせることで、タブを積み重ねる**(スタッキング)ことができます。「**タブを50つも100つも開いて整理できねぇ！**」という方におすすめの機能ですね。調べているジャンルごとにタブスタッキングしていくと良い感じです。

設定を変更すればタブスタッキングされたタブの名前を任意の名前に変更することができるので、フォルダ名を付ける感覚で情報整理できるのも強味です。

# 上手く活用しよう、タブタイリング

前節のタブスタッキングと名前は似ていますが、全く別のモノです。タブタイリングという名前の通り、**タブとタブを並べて表示**(タイリング)します。タイリングするタブはいくつでもよいです。

タブタイリングを行うには2つの方法があります。**既存のタブスタッキングされたタブをタイリングする**。もしくは**複数のタブを選択してタイリングする**のどちらかです。

![tab.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498509/ba80c442-8ff4-e99d-5bad-9e9e9f3814a3.gif)

このように並べて表示できます。例えば、**Web上に公開されているサイトとローカルで編集したサイトを比較表示する**ときに便利ですね。一目瞭然、ってヤツです。他にも、YouTubeの配信を2窓(死語)したり、Twitterをたくさん並べてTweetDeckもどきしたり……アレ、逆に情報収集捗らないのでは🤔

# 上手く活用しよう、タブサイクリング

前節と前々節の名前と似ていますが、全く別のモノです。あ、天丼ネタはここでおしまいです。

![saikuru.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498509/32c0297b-a43e-9c6e-6c93-0310aab97da0.gif)

これはタブが並んでいる領域をマウスホイールでくるくるすると、タブが切り替わるという機能です。タブの切り替える順番は、そのタブの並び順通りと、巡回した順番通りの2通り選択できます。設定で「タブサイクラーをリスト表示」にチェックを入れれば、右クリックマウスホイールでリストが現れて、サムネイルとタイトルを確認しつつ選択できます。

これ、有名所のブラウザーが実装してた気がしますが、ChromeでもFirefoxでもありませんでした……まぼろしかな。

# さいごに

どうですか！！Vivladiの凄味、よく分かったと思います。

このブラウザーはどちらかというと玄人向けなモノで、結構クセも強いので、万人受けするようなものではありません。ですが、上手に使えば情報収集速度が10倍になること間違いナシです。Chrome拡張も使えるのでポテンシャルは無限大。

**さいごのさいごに注意点**があります。**このブラウザ、stable版でも不安定なバージョンがあります**。「モグラ叩きか！」と言わんばかりにあっちの不具合が修正されては新たに不具合が出て……の連続です。なので、アップデートする際は公式フォーラム(日本語あります)や、Twitterでの検索、5ちゃんねるのスレッドを観ることを推奨します。ちなみにこの前は**[stable版でピン留めされたタブが消失するバグ](https://forum.vivaldi.net/topic/40676/vivaldiを起動し直すと一部のタブが消える)が起きてました**。ヒエッ。

あーこれ、最後の段落で5割くらいインストールやめた人いそうだな。未来の自分にBugldi(バグルディ)もしくはGavaldi(ガバルディ)を届けなくて済むよう、開発チームには頑張ってもらいたい……です。