ニコニコ(Re:仮)の10連ガチャを選択しやすいようにしてみた[要ブラウザ拡張機能]

※この機能はブラウザ拡張機能「Tampermonkey」用 スクリプトコードです。

動画の再選択機能が「SSRガチャ」と呼ばれているらしい

「ニコニコのページにいたずらして使いやすいようにする」スクリプト第二弾

元はキーボードショートカットを使えるようにするスクリプト。
動画リロードボタンのショートカットを入れたのでリリースします。
SSRを目指せ！

使い方

• CTRLキー : 対応する数字番号などを表示する。（表示されていなくてもスクリプト自体は機能します。）
• 数字キー : 対応する番号にジャンプします
• Rキー : 動画をリロードします。（連打できないように "3秒待機ルール" があります）

ガチャをキーボードショートカットで回すスクリプト

javascript ニコニコ動画キーボードショートカット SSRを引け！.js

// ==UserScript==
// @name         ニコニコ動画キーボードショートカット SSRを引け！
// @namespace    http://tampermonkey.net/
// @version      2024-06-16
// @description  CTRLキーを使用すると対応するキーを表示します
// @author       Y9
// @match        https://www.nicovideo.jp/*
// @match        https://www.nicovideo.jp/?*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=nicovideo.jp
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
// @grant        none
// ==/UserScript==

var $ = window.jQuery;

(function() {
    var ss = document.createElement("style")

    var togglequery = "main ul:has(li a)"
    var targetlink = "main ul li > a"
    var targetbutton = "main button"
    var button_text_target ="再読み込み"
    var toggleclass = "check"
    var styleclass = "user-class"

    function togglecheck(){
        console.log("buttontoggle")
        var position = 0
        var sec = 400
        var t_element = document.querySelector(togglequery)
        if ( t_element == null){
            console.log("empty target. scroll to page end")
            position = $('body').height()
            sec = 0
        }
        else {
            position = $(togglequery).offset().top - 20
        }
        console.log(["go to position",position])
        if ( t_element ){
            console.log("toggle button display")
            document.querySelector(togglequery).classList.toggle(toggleclass)
            var t_b = document.querySelectorAll(targetbutton)
            for(var i in t_b){
                var t_innerText = t_b[i].innerText
                if( t_innerText == undefined )continue
                if( t_innerText.indexOf(button_text_target) != -1){t_b[i].classList.toggle(toggleclass)}
            }
            var t_c_e = t_element.classList.value.indexOf(toggleclass)
            console.log("button number is hidden")
            console.log(t_c_e == -1)
            if ( t_c_e == -1){return true}
        }
        console.log("scrolling")
        $('body,html').animate({scrollTop:position}, sec, 'swing');
        if ( t_element == null){return false}
        return true
    }

    ss.classList.add(styleclass)

    var style = [
        'ul.d_flex.flex-wrap_wrap.justify_center.gap_16px.check {',
        '/* counter-set: number; */',
        'counter-reset: number -1;',
        '}',
        '',
        'ul.d_flex.flex-wrap_wrap.justify_center.gap_16px.check li {',
        'counter-increment: number 1;',
        'position: relative;',
        '}',
        '',
        'ul.d_flex.flex-wrap_wrap.justify_center.gap_16px.check li:before {',
        'content: counter(number);',
        'position: absolute;',
        'top: -12px;',
        'right: -10px;',
        'background: linear-gradient(147deg, #494949, #939393);',
        'z-index: 100;',
        'display: inline-block;',
        'color: white;',
        'width: 30px;',
        'height: 30px;',
        'text-align: center;',
        'font-size: 14px;',
        'line-height: calc(30/14);',
        'border-radius: 3px;',
        'border: #898888 solid 0.5px;',
        '}',
        "button.check:before {",
        "content: 'R';",
        "position: relative;",
        "top: 0;",
        "left: 0;",
        "background: linear-gradient(147deg, #494949, #939393);",
        "z-index: 100;",
        "display: inline-block;",
        "color: white;",
        "width: 30px;",
        "height: 30px;",
        "text-align: center;",
        "font-size: 14px;",
        "line-height: calc(30/14);",
        "border-radius: 3px;",
        "border: #898888 solid 0.5px;",
        "}"
    ]

    var pre_button = Number(Date.now())

    ss.innerHTML = style.join("\n")
    console.log("script")
    window.addEventListener("load",function(){
        console.log("g")
        document.addEventListener("keydown",function(e){
            if(! document.querySelector("."+styleclass))document.querySelector("body").appendChild(ss)
            console.log("KeyPress")
            var num = e.code.match(/[0-9]+/g)
            var NumberKey = ( num != null ) && (e.code.match(/F\d+/g) == null)
            var checkInput = (document.activeElement.tagName != "INPUT") && (e.code == "KeyR")
            console.log("NumberKey check")
            console.log(NumberKey)
            if( checkInput || e.ctrlKey || NumberKey ){
                e.preventDefault()
            }
            console.log("check focus input")
            console.log(!checkInput)
            if(checkInput){
                console.log("Press KeyR be Reload")
                console.log(pre_button + 3000 <= (Number(Date.now())))
                if(pre_button + 3000 > (Number(Date.now()))){return false}
                var b_target = document.querySelectorAll(targetbutton)
                for(var i in b_target){
                    if(b_target[i] == undefined){continue}
                    if(b_target[i].innerText.indexOf(button_text_target) != -1){b_target[i].click()}
                }
                pre_button = Number(Date.now())
                return false
            }
            if(e.ctrlKey){
                if(!togglecheck()){
                    console.log("BUtton Toggle retry")
                    window.setTimeout(togglecheck,400)
                }
            }
            if( !NumberKey )return false
            console.log("Press " + e.code)
            num = parseInt(num.pop())
            if(num < 10 && num > -1){
                console.log("Call link of number : " + num)
                var a_target = document.querySelectorAll(targetlink)
                console.log(a_target[num])
                a_target[num].click()
            }
        })
    })

    // Your code here...
})();