当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象(通称:ステマ規制)にならないよう、配慮して記事を作成しています(記事はこちら、消す方法はこちら

参考:令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

【Vivaldi】マウスオーバーでタブをアクティブ化する方法。Javascript!

2021年11月7日カスタムCSS

Vivaldiのアイコン

この記事では、「Vivaldi(ヴィヴァルディ)」ブラウザのオリジナルカスタムUI機能を使って、マウスオーバーで、タブを切り替える「カスタムJS」について書きます。

本記事は、オリジナルカスタムUIが有効になっている前提です。詳しくはこちらを参考にしてみてください。

【Vivaldi】マウスオーバーでタブをアクティブ化する方法。Javascript!

本記事で紹介する「カスタムJavaScript」を利用することで、マウスオーバー(マウスを上に乗せること)でタブをアクティブ化できます。

マウスを乗せるだけで、タブが切り替わります。タブを大量に開いて、頻繁に切り替える方におすすめです。垂直タブでも、水平タブでも機能します。マウスを乗せた後のアクティブ化するタイミング(時間)は、自分で好きなように調整できます。

「いちいちマウスでクリックして、タブを切り替えるのがめんどくさい!マウスを乗せるだけの簡単操作で、タブを切り替えたい!」という方におすすめです。実際に適用してみた動画を貼っておきます。

本記事は、既にオリジナルカスタムUI機能が有効になっている前提です。まだ有効にしていないという方は、以下の記事を参考にしてみてください。ただし、今回の場合はCSSではなく、Javascriptなので、以下の作業内容+αが必要になります。

「Javascript」を使えるようにする

既に「Javascript」が使える状態になっている場合は、こちらへ飛んでください。大きな流れは、以下の4ステップです。一度ファイルを作成しておけば、以降は4番目の作業だけです。

  1. 【初回のみ】「Javascript」のファイルを作成
  2. 【初回のみ】「window.html」のバックアップを作成
  3. 【初回のみ】「window.html」に読み取るためのコードを記述
  4. 「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」フォルダーまでをコピーして、エクスプローラーに貼り付けます。

「vivaldi://about/」のスクリーンショット
「AppData」フォルダーが見つからない場合

AppData」フォルダーは、隠しフォルダーになっています。Windows11の場合は、エクスプローラー上部の表示→表示→「隠しファイル」で表示できます。

エクスプローラーの隠しファイルを表示する手順画像

Application」フォルダー内にあるバージョン名は、利用しているバージョン番号によって異なります。

「custom.js」を作成するまでの手順画像1

resources」フォルダーの中にある「vivaldi」フォルダーを開いたら、空いているところを右クリック→新規作成→「テキストドキュメント」をクリックします。

「custom.js」を作成するまでの手順画像2

メモ帳が作成されるので、名前を「custom.js」にします。テキストドキュメントの末尾にある「.txt」も全部選択した状態で名前変更します。拡張子を変更するので、確認画面が表示されます。「はい」をクリックします。

「custom.js」を作成するまでの手順画像3

Windows11の場合は、エクスプローラーの画面上部にある「表示」→「ファイル名拡張子」にチェックを入れます。

エクスプローラーのファイル拡張子を表示する手順画像
ポイント

拡張子「txt」が残っていたらダメです。削除して「js」拡張子にします。

間違ったパターンと正しいパターンの「custom.js」比較画像

Javascript」ファイルが作成されます。

「custom.js」を作成するまでの手順画像4

「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"
2023年10月追記

Vivaldiのバージョン6.2以前は、「browser.html」に書き込んでいました。バージョン6.2以降、「browser.html」がなくなって、代わりに「window.html」になりました。

Vivaldiのバージョン6.2以前の「browser.html」と6.2以降の「window.html」ファイル画像

以前から使っていた方は、「window.html」に新しくJavaScriptを読み込ませるコードを書く必要があります。

見つけたらコピーして、Vivaldiフォルダー以外の場所に配置します。切り取りじゃなくてコピーなので、間違えないにしましょう。ドキュメントとかデスクトップでいいと思います。

Vivaldiのインストール場所にある「window.html」ファイルをバックアップする手順画像

「window.html」に読み取るためのコードを記述

先ほどバックアップした「window.html」の本体を編集していきます。バックアップした方ではなく、元の「window.html」を編集します。元のほうに変更を加えるため、バックアップが必要だったというわけです。

テキストエディターで開きます。Windows11なら、標準搭載されているメモ帳、または外部ソフトの「Visual Studio Code」がおすすめです。

window.html」ファイルを右クリック→「プログラムから開く」で、テキストエディター(Visual Studio Codeやメモ帳)を選択します。

Vivaldiブラウザの「window.html」に読み込ませるJavaScriptファイルを指定する手順画像1

コードが表示されます。コード内に「<body></body>」という部分があります。「<body>」と「</body>」の間に、改行を入れて、以下のコードを書き込みます。

<script src="custom.js"></script>
Vivaldiブラウザの「window.html」に読み込ませるJavaScriptファイルを指定する手順画像2

もし、「<body></body>」の記述がない場合は、「</head>」の後ろに書き込みます。書き込めたら、上書き保存します。

Vivaldiブラウザの「window.html」に読み込ませるJavaScriptファイルを指定する手順画像3

マウスオーバーでタブ切り替えの「Javascript」を記述する

マウスを乗せて、タブを切り替えるJavaScriptコードを「custom.js」に記述していきます。

作成した「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フォーラム」を参考にさせていただきました。感謝です。

2023年10月追記

バージョン「6.2.3105.58 (Stable channel) (64-bit)」以降、使えなくなりました。

しかし、これはマウスホバーでアクティブタブのコード仕様が変わったわけではなく、「browser.html」が廃止された影響です。バージョン6.2以降は、「window.html」に書き込みます。詳しくは、本記事を最初から見てみてください。

書き込めたら、上書き保存します。

Vivaldiの「custom.js」ファイルに、マウスホバーでタブアクティブ化のJavaScriptを書き込んだ画像

コードの25行目にある数字で、アクティブになるまでの時間を調整できます。「const delay = 300; //pick a time in milliseconds」の部分です。単位はミリ秒になっています。初期では、300ミリ秒になっています。素早く切り替えたい場合は、100ミリ秒にします。

const delay = 100; //pick a time in milliseconds

デフォルトの300ミリ秒、カスタマイズして100ミリ秒にした時の比較動画を貼っておきます。

「100」だと、ほぼ遅延がない状態で、アクティブ化されます。

ファイルを保存できたら、ブラウザを再起動します。これで、マウスオーバーでタブがアクティブ化します。タブスタックは、アクティブ化されずに、クリックで開ける仕様になっています。

タブをマウスオーバーで切り替えているGIF画像1(水平タブ)

垂直タブでも利用可能です。

タブをマウスオーバーで切り替えているGIF画像2(垂直タブ)

【注意点】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は、いくつか紹介しているので、気になったら参考にしてみてください。

2021年11月7日カスタムCSS