Ubuntuなどにインストールして動画や画像を管理できる［Jellyfin］。先回自作した、マウスのホイール操作でページ送りが使えるChrome拡張機能を改良してWindowsジェスチャーに対応を行いました。
マウスホイールでページ操作をしたい
ローカルに保存された動画や画像などのメディアを、ネトフリなどの配信サービスのような形で様々なデバイスに表示してくれる［Jellyfin］。
ライブラリを追加すると、指定したフォルダー内のメディアファイルを閲覧しやすい表示方法で配信してくれます。
使ってみて気になったのが、Google Chromeなどウェブブラウザーで利用する場合にマウスのホイールでページ送りが出来ない部分。
先回、マウスホイールでページ送りを可能にするChromeブラウザーの拡張機能を作ってみました。
詳しい内容は別記事をご覧ください。
［戻る］ジェスチャー対応
マウスのホイールでページ送り（戻り）が可能になるので、かなり便利になりました。
実際に使っていて、Windowsジェスチャーの［戻る］を潰してしまっていたので、対応しました。
Windows11では、対応しているトラックパッドやタッチ対応デバイスなどで指２本で左から右（または右から左）にスワイプ操作をすると、［戻る］や［進む］操作に対応します。
自作の機能拡張が、マウスポインターのスライドを検知してしまうので結果的にジェスチャー操作が無反応になってしまいました。
このままではトラックパッドを使う際に不便なので、修正します。
修正方法は簡単。単純に横移動の操作を無視するだけです。（修正した部分は太字にしてあります）
[manifest.json]
{
"manifest_version": 3,
"name": "Jellyfin Wheel",
"version": "1.0.0",
"description": "Enable mouse wheel page navigation in Jellyfin Web slideshow.",
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["content.js"],
"run_at": "document_idle"
}
],
"permissions": []
}[content.js]
console.log("[Jellyfin Wheel] loaded");
let last = 0;
// --------------------
// Jellyfinページ判定
// --------------------
function isJellyfinPage() {
const swiperContainer = document.querySelector(".slideshowSwiperContainer");
const nextBtn = document.querySelector(".swiper-button-next");
const prevBtn = document.querySelector(".swiper-button-prev");
const zoomContainer = document.querySelector(".slider-zoom-container");
// いずれか存在しなければ非対象
if (!swiperContainer || !nextBtn || !prevBtn || !zoomContainer) {
return false;
}
return true;
}
// --------------------
// ページ端チェック
// --------------------
function canGoNext() {
const nextBtn = document.querySelector(".swiper-button-next");
return nextBtn && nextBtn.getAttribute("aria-disabled") !== "true";
}
function canGoPrev() {
const prevBtn = document.querySelector(".swiper-button-prev");
return prevBtn && prevBtn.getAttribute("aria-disabled") !== "true";
}
// --------------------
// ホイールイベント
// --------------------
window.addEventListener(
"wheel",
(e) => {
if (!isJellyfinPage()) return;
// 横スワイプ（ブラウザ戻る/進む）は無視
if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
return;
}
const now = Date.now();
if (now - last < 150) return; // 連打防止
last = now;
const nextBtn = document.querySelector(".swiper-button-next");
const prevBtn = document.querySelector(".swiper-button-prev");
if (!nextBtn || !prevBtn) return;
// ページ端で無効化
if (e.deltaY > 0 && !canGoNext()) return;
if (e.deltaY < 0 && !canGoPrev()) return;
e.preventDefault();
e.stopPropagation();
if (e.deltaY > 0) {
nextBtn.click();
console.log("[Jellyfin Wheel] next click");
} else {
prevBtn.click();
console.log("[Jellyfin Wheel] prev click");
}
},
{ passive: false }
);修正すると、拡張機能をインストールした状態でも、マウスポインターが真横に移動する場合を無視するようになるので［戻る］ジェスチャーなどが有効になります。
拡張機能をインストールするには、２つのファイルを保存して、Google Chromeの［拡張機能を管理］画面をドラッグアンドドロップします。
詳しい手順は別記事をご覧ください。
やっていることは単純で、読み込んでいるHTMLからJellyfinが配信しているページを判定して、マウスのホイール操作があった際に、コントロール（左右のボタン）をクリックさせています。
実際に試していませんが、Chromeの他にMicrosoft Edgeでも使えるはずです。
まとめ
動画や画像を管理できる［Jellyfin］をウェブブラウザーで閲覧する際に、マウスのホイールでページが操作できるChrome拡張機能を改良しました。
マウスのホイール操作を検出する際に、マウスポインターの横方向の動きを検知してしまい、Windowsジェスチャーの［戻る］や［進む］が検知されなくなる原因になっていました。
［Jellyfin］でブラウザーで画像を閲覧する際に、マウスホイールが使いたいなと思っている人の参考になれば幸いです。
スポンサーリンク
最後までご覧いただき、ありがとうございます。