WIKIWIKI／wikiru UI改善UserScript

Last-modified: 2024-12-03 (火) 19:27:35

スマホ向け／貰いもんのお裾分け

必須環境: UserScriptを導入できるスマホ向けブラウザがそもそも限られる
自前で探してくれ

Q.～～～～～？: A.貰っただけなので技術的な疑問には何も答えられない
　とりあえず悪さをされる余地は無いと思う
　それでも何か聞きたきゃ転送しとく　コメント欄にでも書いといて

Wiki生活のQoL向上
Wiki無関係
- 青空文庫の文字サイズ調整

Wiki生活のQoL向上

🆕[WIKIWIKI][wikiru][Wiki3]左利きユーザー向けスクロールボタンほか

2024/12/03 WIKIWIKIの唐突なレイアウト変更に対応してもらえた
[04:00]今回から表示名が変わっています
[19:27]一部ボタン位置の合理化
lefthand_accessibility.js
~~スクリプト本体~~*1

導入するとどうなるか

左利きユーザーが片手操作しても困らないフロートボタン配置
[WIKIWIKI]消えた下部メニューの復活
[WIKIWIKI]基本メニューへのアクセス性を高める補助ボタン追加

既知の不具合: 横画面でバグる

Q.～～～～～！: 2024年にもなってアクセシビリティに配慮してないのが悪い

[WIKIWIKI][wikiru]リンクのアンダーライン強調

2024/10/11　単なるアンダーラインとの区別で実線→点線に変えてもらった
link_accessibility.js

スクリプト本体

// ==UserScript==
// @name WIKIWIKIリンクの下線部強調
// @version 0.1.1
// @description 公式でオプション付けてくれよ
// @include https://wikiwiki.jp/*
// @include https://*.wikiru.jp/*
// @run-at document-body
// ==/UserScript==
    //リンクのアンダーライン
    let style = document.createElement('style');
    //rgba(赤、緑、青、不透明度)を0～255(rgb)と0～1.0(a)で指定
    style.textContent = 'a { text-decoration: underline 2px !important; text-decoration-color: rgba(0.3, 0.3, 0.3, 0.95) !important; text-decoration-style:dotted !important; }';
    document.head.append(style);

導入するとどうなるか: 内部リンク(なにここ?←これ)や外部リンク( https://bluearchive.wikiru.jp/ )のアンダーラインがWIKIWIKIデフォルトよりも強調される　純粋アクセシビリティ
色は好きに調整してくれ(↑は黒＆半透明)

[wikiru]コメント欄動物園の封鎖

2024/06/22 00:31　ボタンが無限増殖していたらしい
hide_monkey.js

スクリプト本体

// ==UserScript==
// @name         wikiruのコメント動物園を畳む
// @version      0.1
// @description  ページ名に「雑談」or「掲示板」が含まれている場合は除外
// @match        https://*.wikiru.jp/*
// @run-at document-end
// ==/UserScript==

(function() {
    'use strict';

    //「雑談」または「掲示板」が含まれていたらスキップ
    var pageTitle = document.title
    if (pageTitle.includes("雑談") || pageTitle.includes("掲示板")) {
        return
    }


    //処理済みならスルー
    if(document.getElementById("US_nomorecommentzoo")){
        return
    };
    //pcommentクラスのdiv要素を探す
    var pcommentDivs = document.querySelectorAll('div.pcomment');

    pcommentDivs.forEach(function(div) {
        // 子要素を非表示に
        var childElements = Array.from(div.children);
        childElements.forEach(function(element) {
            element.style.display = 'none';
        });

        //表示用のボタンを生やす
        var toggleButton = document.createElement('button');
        toggleButton.id="US_nomorecommentzoo"
        toggleButton.style.padding = '10px 15px';
        toggleButton.style.backgroundColor = '#3498db';
        toggleButton.style.color = '#fff';
        toggleButton.style.border = 'none';
        toggleButton.style.borderRadius = '5px';
        toggleButton.style.cursor = 'pointer';
        toggleButton.style.transition = 'background-color 0.3s ease';
        toggleButton.style.marginTop = '10px';
        toggleButton.style.outline = 'none';
        toggleButton.textContent = '&#10024;動物園はUserScriptの検疫により閉園されました&#10024;';
        toggleButton.style.marginTop = '10px';
        toggleButton.addEventListener('click', function() {
            childElements.forEach(function(element) {
                element.style.display = (element.style.display === 'none') ? '' : 'none';
            });
        });
        //div要素の直後にボタンを挿入
        div.appendChild(toggleButton);
    });
})();

導入するとどうなるか: pcomment(コメント欄動物園)がボタンの内部に封印される
ページタイトルに「雑談」「掲示板」いずれか含む場合は何もしない

Wiki無関係

青空文庫の文字サイズ調整

もはやWiki一般すら関係無い
aozora_textsize.js

スクリプト本体

// ==UserScript==
// @name         青空文庫表示制御
// @include 	https://www.aozora.gr.jp/cards/*/files/*
// ==/UserScript==
//ディスプレイにおけるbodyの幅(左右余白)
let b=document.body.style
b.minWidth="90%"
b.margin="2.5vw"
b.padding="0"
b.left="0"
//bodyにおける文章の表示幅
 const text = document.querySelector(".main_text");
let t=text.style
t.fontSize="3em";
t.minWidth="95vw"
t.margin="0"
t.padding="0"
t.left="0"