Zenn
📖

pixivで漫画を横読みしやすくするためのUserScript。

2023/04/11に公開
JavaScript
tech

漫画は右開きである。

縦スクロールとか読みづらい。それは例えスマホであっても。

概要

昨今の漫画サイトでは 縦スクロール と言う糞UXのサイトが多い。スマホやPC向けにビューアーを最適化？しているつもりなんだろうが。漫画だから当然、元々のコンテンツ自体が横開きで作られていることが多く、まぁUXは最悪なもので。

pixivの様な漫画の投稿も扱っているサービスですら縦スクロールと言うひどい有様。最近横スクロール モードが追加されたが、たいていの投稿者はデフォルトの縦スクロールのままのため依然と読みづらい。毎回横モードにするのが面倒くさいので、手動で横読みにするボタンを押下するUserScriptを作り、心の安寧を得る。

image.png

環境

UserScript

userscrpit.js
// ==UserScript==
// @name         manga pixiv.
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.pixiv.net/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
    let observer = new MutationObserver(function () {
        console.log('manga observe event.');
        if(document.querySelector('div[dir="vert"]')) {
            document.querySelector('div.gtm-manga-viewer-change-direction')?.click();
            console.log('manga direction change!.');
        }
    });

    document.querySelectorAll('body').forEach(function(e) {
        observer.observe(e, {
            childList:true,
            subtree:true,
        });
        e.setAttribute('manga-observed', 'observed');
    });
})();

効果

  • 漫画ページ表示時、縦読みになっているページを開いたときに、切り替えボタンがclickされ、縦読みモードに切り替わる。
  • (副作用) 縦読みモードにできなくなる。ただし、漫画を縦読みで読まないので問題なし。
  • 切り替えボタンのトグル
    • script適用前
      [縦スクロール] ⇒ [右開き] ⇒ [左開き] ⇒ [縦スクロール] ⇒ [右開き]
    • script適用後
    • [縦スクロール] ⇒ [右開き] ⇒ [左開き] ⇒ [縦スクロール] ⇒ [右開き]

image.png
(開いた直後にすぐ 右読みモード になる。)

Script解説

(1) bodyで監視

pixivのページはSPAのため、onloadでの処理ではページ遷移に対応ができない。ポーリングでも良いのだが、今回は変更監視を行いう。子供の変更も監視するため悩みどころではあるが、常に存在し続けるbodyを監視対象にする。

javascript
let observer = new MutationObserver(略);
document.querySelectorAll('body').forEach(function(e) {
    //見つけたbodyタグを監視対象として登録
    observer.observe(e, {
        childList:true,
        subtree:true,
    });
    
    //一応関し対象になっている証跡として、属性を付けておく。
    e.setAttribute('manga-observed', 'observed');
});

(2) 監視処理

変更が検出されると、都度実行される処理。今回は div[dir="vert"] があったら 縦読み と判断し、切り替えボタン div.gtm-manga-viewer-change-direction を探して最初の1つ目のclickを実行する。

javascript
let observer = new MutationObserver(function () {
    console.log('manga observe event.');
    // div[dir="vert"] が1件でもあればオブジェクトが取得出来るためtruthy
    if(document.querySelector('div[dir="vert"]')) {
        // Optional chainで、オブジェクトがあればクリック実行
        document.querySelector('div.gtm-manga-viewer-change-direction')?.click();
        console.log('manga direction change!.');
    }
});

ポーリングと違い、イベント ドリブンは瞬間的に膨大な数のイベントが発生するため、極力シンプルな処理でかつ、無限ループにならない様に気をつける。

以上

漫画はページ単位の右開きでお願いします。ページ単位で進行しない縦スクロールは読みづらいです。っていうか、漫画の文化は少なくとも右開きでずっと来ていて (時折雑誌の左開き) で、縦スクロールには微塵も読みやすさを感じない。正直勘弁してほしいレベル。

勿論文化は変化するものではある、しかしながら保守的に保存することもまた必要であり、無意味な改悪はただ無秩序なだけである。作者が漫画スタイルを則っている作品は、少なくとも紙の書籍と同様に、右送りが望ましいと思う。そう思うくらいに、縦スクロールは代替にはならないUXです。

漫画は巻物じゃないんだ。1方向にのみ進行する小説と違って、1ページの中で視線移動は複雑なんだ。

(横開きのUIの無い ニコニコ静画 に比べれば、まだUIのある pixiv は良心的ではあるが。。。)

ほんとオナシャス。

Discussion