【Vivaldi】マウスオーバーでタブをアクティブ化する方法。Javascript！
本記事で紹介する「カスタムJavaScript」を利用することで、マウスオーバー（マウスを上に乗せること）でタブをアクティブ化できます。
マウスを乗せるだけで、タブが切り替わります。タブを大量に開いて、頻繁に切り替える方におすすめです。垂直タブでも、水平タブでも機能します。マウスを乗せた後のアクティブ化するタイミング（時間）は、自分で好きなように調整できます。
「いちいちマウスでクリックして、タブを切り替えるのがめんどくさい！マウスを乗せるだけの簡単操作で、タブを切り替えたい！」という方におすすめです。実際に適用してみた動画を貼っておきます。
本記事は、既にオリジナルカスタムUI機能が有効になっている前提です。まだ有効にしていないという方は、以下の記事を参考にしてみてください。ただし、今回の場合はCSSではなく、Javascriptなので、以下の作業内容+αが必要になります。
https://www.naporitansushi.com/vivaldi-css/「Javascript」を使えるようにする
既に「Javascript」が使える状態になっている場合は、こちらへ飛んでください。大きな流れは、以下の4ステップです。一度ファイルを作成しておけば、以降は4番目の作業だけです。
- 【初回のみ】「
Javascript」のファイルを作成 - 【初回のみ】「
window.html」のバックアップを作成 - 【初回のみ】「
window.html」に読み取るためのコードを記述 - 「Javascript」のコードを書き込む
Javascriptファイルを作成
「Javascript」を書き込むためのファイルを作成していきます。
Vivaldiブラウザがインストールされている場所を開きます。デフォルトのインストール場所を変更していない場合は、以下の場所になっています。
<!--Vivaldiのデフォルトインストール場所-->
%LOCALAPPDATA%\Vivaldi\Application\バージョン名\resources\vivaldi
<!--例：ナポリタン寿司の場合-->
C:\Users\Naporitansushi\AppData\Local\Vivaldi\Application\5.5.2805.50\resources\vivaldiブラウザを起動して、以下のURLをアドレスバーに貼り付けます。
vivaldi://about/表示されたページの中の「実行ファイルのパス」という部分が、インストールされている場所です。この部分の「Application」フォルダーまでをコピーして、エクスプローラーに貼り付けます。
「AppData」フォルダーは、隠しフォルダーになっています。Windows11の場合は、エクスプローラー上部の表示→表示→「隠しファイル」で表示できます。
「Application」フォルダー内にあるバージョン名は、利用しているバージョン番号によって異なります。
「resources」フォルダーの中にある「vivaldi」フォルダーを開いたら、空いているところを右クリック→新規作成→「テキストドキュメント」をクリックします。
メモ帳が作成されるので、名前を「custom.js」にします。テキストドキュメントの末尾にある「.txt」も全部選択した状態で名前変更します。拡張子を変更するので、確認画面が表示されます。「はい」をクリックします。
Windows11の場合は、エクスプローラーの画面上部にある「表示」→「ファイル名拡張子」にチェックを入れます。
拡張子「txt」が残っていたらダメです。削除して「js」拡張子にします。
「Javascript」ファイルが作成されます。
「window.html」のバックアップを作成
「window.html」と呼ばれるファイルをバックアップします。バックアップしなくてもいいんですが、初心者さんは作成しておくといいかなと思います。「custom.js」を作成した同じ場所に、「window.html」があります。
<!--「window.html」を別の場所にバックアップする-->
%LOCALAPPDATA%\Vivaldi\Application\バージョン名\resources\vivaldi\window.html
<!--例：ナポリタン寿司の場合-->
"C:\Users\ナポリタン寿司\AppData\Local\Vivaldi\Application\6.2.3105.58\resources\vivaldi\window.html"Vivaldiのバージョン6.2以前は、「browser.html」に書き込んでいました。バージョン6.2以降、「browser.html」がなくなって、代わりに「window.html」になりました。
以前から使っていた方は、「window.html」に新しくJavaScriptを読み込ませるコードを書く必要があります。
見つけたらコピーして、Vivaldiフォルダー以外の場所に配置します。切り取りじゃなくてコピーなので、間違えないにしましょう。ドキュメントとかデスクトップでいいと思います。
「window.html」に読み取るためのコードを記述
先ほどバックアップした「window.html」の本体を編集していきます。バックアップした方ではなく、元の「window.html」を編集します。元のほうに変更を加えるため、バックアップが必要だったというわけです。
テキストエディターで開きます。Windows11なら、標準搭載されているメモ帳、または外部ソフトの「Visual Studio Code」がおすすめです。
「window.html」ファイルを右クリック→「プログラムから開く」で、テキストエディター（Visual Studio Codeやメモ帳）を選択します。
コードが表示されます。コード内に「<body></body>」という部分があります。「<body>」と「</body>」の間に、改行を入れて、以下のコードを書き込みます。
<script src="custom.js"></script>
もし、「<body></body>」の記述がない場合は、「</head>」の後ろに書き込みます。書き込めたら、上書き保存します。
マウスオーバーでタブ切り替えの「Javascript」を記述する
マウスを乗せて、タブを切り替えるJavaScriptコードを「custom.js」に記述していきます。
作成した「custom.js」を右クリック→プログラムから開く→「プログラムを選択」をクリックします。好きなテキストエディターを選択します。
開けたら、以下のコードをコピペします。
// Activate Tab On Hover
// version 2022.10.0
// https://forum.vivaldi.net/post/395460
// Activates tab on hover.
(function activateTab() {
function hover(e, tab) {
if (
!tab.parentNode.classList.contains("active") &&
!e.shiftKey &&
!e.ctrlKey
) {
tab.addEventListener("mouseleave", function () {
clearTimeout(wait);
tab.removeEventListener("mouseleave", tab);
});
wait = setTimeout(function () {
const id = Number(tab.parentNode.id.replace(/^\D+/g, ""));
chrome.tabs.update(id, { active: true, highlighted: true });
}, delay);
}
}
let wait;
const delay = 300; //pick a time in milliseconds
let appendChild = Element.prototype.appendChild;
Element.prototype.appendChild = function () {
if (
arguments[0].tagName === "DIV" &&
arguments[0].classList.contains("tab-header")
) {
setTimeout(
function () {
const trigger = (event) => hover(event, arguments[0]);
arguments[0].addEventListener("mouseenter", trigger);
}.bind(this, arguments[0])
);
}
return appendChild.apply(this, arguments);
};
})();上記コードは、以下の「Vivaldiフォーラム」を参考にさせていただきました。感謝です。
https://forum.vivaldi.net/topic/50354/new-fantastic-mod-by-l...バージョン「6.2.3105.58 (Stable channel) (64-bit)」以降、使えなくなりました。
しかし、これはマウスホバーでアクティブタブのコード仕様が変わったわけではなく、「browser.html」が廃止された影響です。バージョン6.2以降は、「window.html」に書き込みます。詳しくは、本記事を最初から見てみてください。
書き込めたら、上書き保存します。
コードの25行目にある数字で、アクティブになるまでの時間を調整できます。「const delay = 300; //pick a time in milliseconds」の部分です。単位はミリ秒になっています。初期では、300ミリ秒になっています。素早く切り替えたい場合は、100ミリ秒にします。
const delay = 100; //pick a time in millisecondsデフォルトの300ミリ秒、カスタマイズして100ミリ秒にした時の比較動画を貼っておきます。
「100」だと、ほぼ遅延がない状態で、アクティブ化されます。
ファイルを保存できたら、ブラウザを再起動します。これで、マウスオーバーでタブがアクティブ化します。タブスタックは、アクティブ化されずに、クリックで開ける仕様になっています。
垂直タブでも利用可能です。
【注意点】Vivaldiのアップデートの度に「window.html」がリセットされる
ブラウザをアップデートする度に、「window.html」ファイルが更新されるようになっています。つまり、アップデートの度にコードを書きなおす必要があります。
<script src="custom.js"></script>「custom.js」の中身は、更新されないので修正する必要はありません。「window.html」のみです。ただし、Vivaldiのアップデートによっては、「custom.js」に書き込んだコードが使えなくなる場合もあります。その場合は、コードを更新する必要があります。
「JavaScript」を無効にする方法
カスタムJSを無効化したい場合、「window.html」に追記した「custom.js」のコードを削除します。上書き保存してブラウザを再起動すると、カスタムJSが無効になります。
完全に削除したい場合は、合わせて作成した「custom.js」も削除します。
感想
以上、「Vivaldi（ヴィヴァルディ）」ブラウザのカスタムJS機能を使って、マウスオーバーでタブをアクティブ化する方法でした。
マウスオーバーで表示する系のCSSは、いくつか紹介しているので、気になったら参考にしてみてください。