Vivaldiが素晴らしい！

# はじめに
最近Macbook Proを購入して環境構築を楽しんでいて，現在Browserをどれにするかでとても悩んでいるところです．
メインブラウザをどれにするか悩んでいる方，MacでのブラウザショートカットのCtrlがCommandになっているのが不満な方は是非読んで欲しいです．

Safari，Chrome，Firefox
と選択肢が多くて悩んでいる頭に入り込んできたもう一つのBrowser・・・

- Vivaldi

まずは，Vivaldiの紹介と便利機能の紹介をし，その後に設定方法を紹介します．

# Vivaldi
Macbookでよく用いるジェスチャー機能と相性が良く感じた．インストールは[こちら](https://vivaldi.com/ja/)からできる．
Operaの後継ブラウザである．
開発目標は以下である．

* 高速
* 多機能
* 高い柔軟性
* ユーザ第一

これらはブラウザに必要な要素であるので，安心できそうだ．
まずは，実際に使ってみた感想を書き連ねていく．

## マウスジェスチャー
これが一番惹かれた機能である．
Macbookを使い始めてからは二本指を

* 上 : 下スクロール
* 下 : 上スクロール
* 左 : 戻る
* 右 : 進む

へ動かすジェスチャー機能をよく使うようになった．
そこに現れたのがVivaldiの`マウス`機能で，マウスジェスチャーをブラウザ上で行える機能である．
これらは右クリックを押しながらマウスを動かすことで設定した動作を呼び出すものである．Macbookではトラックパッドを二本指でクリック(Multi Touch)しながらマウスを動かすと良い．

|機能|ジェスチャー|
|---|---|
|新しいタブ|↑|
|タブを閉じる|↓|
|一つ前のタブに戻る（表示順）|→|
|一つ後のタブに進む（表示順）|←|
|閉じたタブを開き直す|↑→|
|新しいタブでリンクを開く（リンク上）|↑|
|ページ再読み込み|←↑→|
|巻き戻し|←↓|
|早送り|→↑|
|ショートカットヘルプ|↑→↓←↓(はてなマーク的な)|

もっと多くの機能を設定することはできるのだが，必要以上の機能を設定することは混乱の元になる上，ジェスチャーを間違えた時に，設定していないジェスチャーを入力してキャンセルすることがしづらくなるため，必要最小にした．

ほとんどの機能は言葉から動作がわかると思うが，二つだけわかりづらい名前の機能がある．説明は以下．

|機能|動作|
|---|---|
|巻き戻し|同じWebサイトの一番最初に移動<br>履歴を遡るため，`戻る`を何度かするイメージ<br>検索画面の10ページ目ですると1ページ目に戻る|
|早送り|次のページに移動<br>検索画面の1ページ目ですると2ページ目に移動|

ちなみに，同じような効果を持つアドオンは

* Chrome  : crxMouse Chrome Gestures
* Firefox : Gesturefy

というものがある．しかし，これらには

    アドオンが有効な画面でしか機能しない

という致命的な弱点がある．それに対して，Vivaldiではどの画面でもジェスチャーを使うことができる．

ジェスチャー機能の使用例は以下である．使用順は，`新規タブ→タブ閉じ→左タブへ移動→右タブへ移動→リンクを新規タブで開く→タブ閉じ→閉じたタブを開く→ページ再読み込み`とした．緑の円が表示されている時は右クリック(Multi Touch)しているものとする．

![VivaldiMouseGesture.gif](https://qiita-image-store.s3.amazonaws.com/0/282145/58e092a8-f2a6-5f24-e1bb-0739e3a2fd72.gif)

## Vivaldiの多機能性
個人的なイメージとしては，多機能なブラウザはChromeとFirefoxであり，それらはAdd-onsとしてブラウザ上で公式アドオンストアから`追加`を押すことで使用できるものである．
私が愛用しているのはVimライクにブラウジングできる[Vimium](https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb)とブラウザ背景を黒くできる[Dark Reader](https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh?hl=ja)である．
"Vivaldiにはないのかな〜"なんて思っていたらなんと，

    Googleウェブストアからアドオンを追加できる！！

ということに気づき，高い拡張性に納得した．

## Webパネル
Vivaldiでは，Webパネルと言うWebサイトを端に表示し続ける機能が搭載されている．
これでTwitter，Facebook，GMailを見続けることができる．Google翻訳を追加するのも便利であろう．

## タブスタック
Vivaldiでは，タブスタックという`タブをグループ化`する機能がある．これは，Operaと同様らしい．今の所は役に立っていないが，慣れてきたらページを開きまくっている際に便利そうである．
これはタイル表示というものができ，以下のようにタブを並べることができる．キーボードのみでタブスタックを作ったり新規タブをタイル表示で開いたりできたら嬉しいのだが，今の所その方法は見当たらない．
![VivaldiTileExample.png](https://qiita-image-store.s3.amazonaws.com/0/282145/c32d089a-b725-9df1-af8d-4745853a67d4.png)

## 設定のしやすさ
設定画面がとても見やすく，テーマや外観をアドオンではなく変更可能である．また，設定画面を一望しただけでどんな機能があるのかわかりやすい．
検索エンジンも`検索`タブからすぐに変更できた．
MacだとブラウザショートカットのCtrlがCommandとなっているウザさを，ショートカットを自分で追加することで楽々解消できた．（他のブラウザでもできるかもしれない）

## 公式の説明が便利
Vivaldiをインストールして最初に開いたときにチュートリアルとしてYoutubeの動画をいくつか見たため，すぐにいろいろ試すことができた．
また，各機能に関する概要は[Vivaldi Tips](https://vivalditips.com)でわかりやすく紹介されているため，とっつきやすい．

# マウスジェスチャーの設定方法
先ほど述べたマウスジェスチャーの設定方法を紹介する．
まず，左下のボタンをクリックすることでサイトドバーを表示する．
![スクリーンショット 2019-03-17 4.59.56.png](https://qiita-image-store.s3.amazonaws.com/0/282145/85b6cc36-acc8-805c-9e4f-64150d9724c7.png)

サイドバーが表示されたら設定ボタンをクリック
![スクリーンショット 2019-03-17 5.00.04.png](https://qiita-image-store.s3.amazonaws.com/0/282145/e9435c77-c54d-6d25-f16f-9f5ed539d4c3.png)

設定ウィンドウが表示されたらマウスをクリック
![スクリーンショット 2019-03-17 5.00.16.png](https://qiita-image-store.s3.amazonaws.com/0/282145/9a23d34a-73a0-a119-cee3-b2ecc1fffccb.png)

`+`,`-`,`🖌`によってジェスチャーの追加，削除，設定ができる．
![スクリーンショット 2019-03-17 5.00.27.png](https://qiita-image-store.s3.amazonaws.com/0/282145/26155fbb-1522-30c6-cd82-1a49d39703e9.png)

また，不必要なときにジェスチャーを使ってしまわないようにAltを押しながら，ジェスチャーを適用するマウスの距離，ジェスチャー無効化なども設定できる．

# 好きなアドオン
現在自分のVivaldiには

- Vivmium
- uBlock Origin
- Dark Reader

の三つのアドオンを使用している．

## Vimium
ブラウジングをVimライクに行えるアドオン．Vivaldi,Chromeは[こちら](https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb)から使用可，Firefoxは[こちら](https://addons.mozilla.org/ja/firefox/addon/vimium-ff/)から使用可．
`j,k`での上下移動や`S-h,S-l`での戻る進む，`f`でのアドレスのマッピング&ジャンプが非常に便利である．
しかし，Vivaldiを使うようになってからはトラックパッドとマウスジェスチャーの方がより使うようになった．
vimiumに興味がある方は私の書いた[こちら](https://qiita.com/ysuzuki19/items/c774796468a7ae25b28b)の記事へどうぞ．

## uBlock Origin
広告を削除してくれるアドオン．

## Dark Reader
背景をダークモードにしてくれるアドオン．Vivaldi，Chrome自体の設定と組み合わせることでほとんどの画面を暗くすることができ，非常に目に優しい．たまに白く光り輝くので注意．

サイトによってはおかしくなることもあるため，その際はアドオンのアイコンをクリックしてDarkReaderをオフにすることで対応している．

# キーボードショートカット設定
キーボードショートカットを結構手間かけて設定したので，ここで晒しておきます．（備忘録も兼ねて）
Macbookを使っているため，ブラウザ上ショートカットのCtrlがCommandになってて嫌だなーと思っていたのでCtrlのものも追加して別OSと少しだけ近いものにしました．~~Appleに支配されないぞ〜！~~
しかし，まだVivaldiを使い始めて１日しか経っていないため，後々変更していくつもりです．他のショートカットとバッティングしているキーやより良いショートカットがあれば教えてくれると嬉しいです．

<img width="701" alt="VivaldiShortcutWindow.png" src="https://qiita-image-store.s3.amazonaws.com/0/282145/651ddf30-625a-f46d-9cf8-54e0dacdb512.png">

<img width="698" alt="VivaldiShortcutDisplay.png" src="https://qiita-image-store.s3.amazonaws.com/0/282145/606bd733-1ceb-2acc-6272-9fa9210c1d2a.png">

<img width="699" alt="VivaldiShorucutTab.png" src="https://qiita-image-store.s3.amazonaws.com/0/282145/da7df7fc-0a0a-6b39-44a1-485631ca6426.png">

<img width="701" alt="VivaldiShortcutPage.png" src="https://qiita-image-store.s3.amazonaws.com/0/282145/2cefe628-fb8f-710b-4f71-0c51156294ed.png">

先ほども述べましたが，タブスタックを作るショートカットキーを作成できたり，より楽にタブスタックを作る方法があったりすると嬉しいですね．
また，タイルを移動する際にはタブの順番で移動するのですが，TmuxやVimの様に物理的な位置で移動できると嬉しいですね．