記事作成用のメモ - @えり麻雀研究部

tampermonkeyに取り込んで使う。

Ｐキー押下で画像ファイル保存、Ｃキーで画像をクリップボードに保存。

// ==UserScript==
// @name         nagaスクリーンショット取得
// @namespace    nga
// @version      2024-03-02
// @description  Ｐキーを押下するとNAGAのスクショが保存できます。
// @author       @えり
// @icon         https://naga.dmv.nico/favicon.ico
// @include      https://naga.dmv.nico/htmls/*
// ==/UserScript==

(function() {
    'use strict';

    import("https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js").then(function(module){
        document.addEventListener("keydown", function(e){
            const C_KEY = 67;
            const P_KEY = 80;
            e = e || window.event;
            if *1{
                html2canvas(document.body).then(function (canvas) {
                    let width = document.getElementsByClassName("container")[0].clientWidth;
                    let height = document.getElementsByClassName("section")[0].clientHeight;
                    let $canvas = document.createElement("canvas");
                    let imgWidth = canvas.width;
                    let imgHeight = canvas.height;
                    let posX = (document.body.clientWidth - document.getElementsByClassName("columns")[0].clientWidth) /2;

                    $canvas.setAttribute('width', width);
                    $canvas.setAttribute('height', height);
                    var ctx = $canvas.getContext('2d');
                    ctx.drawImage(canvas, posX, 0, width, height, 0, 0, width, height);
                    var dataURL = $canvas.toDataURL();
                    if(e.keyCode == P_KEY || e.key == P_KEY){
                        //--- 画像を保存
                        var a = document.createElement("a");
                        a.href = dataURL;
                        a.download = "NAGA解析スクリーンショット.png";
                        a.click();
                    }
                    else if(e.keyCode == C_KEY || e.key == C_KEY){
                        //--- クリップボードに保存
                        var $img = new Image();
                        $img.src = dataURL;
                        navigator.clipboard.write([
                            new ClipboardItem({
                                "image/png": base64ToBlob($img.src.replace("data:image/png;base64,", "")),
                            }),
                        ]);
                    }
                });
            }
        });
    });

function base64ToBlob (base64Data){
    const contentType = "image/png"
    const sliceSize = 512
    const byteCharacters = atob(base64Data)
    const byteArrays = 
    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      const slice = byteCharacters.slice(offset, offset + sliceSize)
      const byteNumbers = new Array(slice.length)
      for (let i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i)
      }
      const byteArray = new Uint8Array(byteNumbers)
      byteArrays.push(byteArray)
    }
    return new Blob(byteArrays, { type: contentType })
  }
})();

バージョン２！

次へ進めたり前に戻したりもショートカットキー化した。

// ==UserScript==
// @name         NAGA解析画面入力支援ツール
// @namespace    nga
// @version      2024-03-02
// @description  NAGA解析画面入力支援
// @author       @えり
// @icon         https://naga.dmv.nico/favicon.ico
// @include      https://naga.dmv.nico/htmls/*
// ==/UserScript==


(function() {
    /**
     * 【ショートカットキー一覧】
     * [P]          ：スクリーンショットをpng形式で保存
     * [C]          ：スクリーンショットをクリップボードにコピー
     * [←]         ：前
     * [→]         ：次
     * [Shift]＋[←]：前自
     * [Shift]＋[→]：次自
     * [Ctrl]＋[←] ：前局
     * [Ctrl]＋[→] ：次局
     */

    'use strict';

    import("https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js").then(function(module){
        document.addEventListener("keydown", function(e){
            const C_KEY = 67;
            const P_KEY = 80;
            const LEFT_KEY = 37;
            const RIGHT_KEY = 39;
            const CTRL_KEY = 17;

            e = e || window.event;
            if ((e.keyCode == P_KEY || e.key == P_KEY || e.keyCode == C_KEY || e.key == C_KEY)){
                html2canvas(document.body).then(function (canvas) {
                    let width = document.getElementsByClassName("container")[0].clientWidth;
                    let height = document.getElementsByClassName("section")[0].clientHeight;
                    let $canvas = document.createElement("canvas");
                    let imgWidth = canvas.width;
                    let imgHeight = canvas.height;
                    let posX = (document.body.clientWidth - document.getElementsByClassName("columns")[0].clientWidth) /2;


                    $canvas.setAttribute('width', width);
                    $canvas.setAttribute('height', height);
                    var ctx = $canvas.getContext('2d');
                    ctx.drawImage(canvas, posX, 0, width, height, 0, 0, width, height);
                    var dataURL = $canvas.toDataURL();
                    if(e.keyCode == P_KEY || e.key == P_KEY){
                        //--- 画像を保存
                        var a = document.createElement("a");
                        a.href = dataURL;
                        a.download = "NAGA解析スクリーンショット.png";
                        a.click();
                    }
                    else if(e.keyCode == C_KEY || e.key == C_KEY){
                        //--- クリップボードに保存
                        var $img = new Image();
                        $img.src = dataURL;
                        navigator.clipboard.write([
                            new ClipboardItem({
                                "image/png": base64ToBlob($img.src.replace("data:image/png;base64,", "")),
                            }),
                        ]);
                    }
                });
            }
            else if ((e.keyCode == LEFT_KEY || e.key == LEFT_KEY)){
                if(event.shiftKey){
                    document.getElementsByClassName("btn")[2].click();
                }
                else if ((e.ctrlKey)){
                    document.getElementsByClassName("btn")[0].click();
                }
                else{
                    document.getElementsByClassName("btn")[6].click();
                }
            }
            else if ((e.keyCode == RIGHT_KEY || e.key == RIGHT_KEY)){
                if(event.shiftKey){
                    document.getElementsByClassName("btn")[3].click();
                }
                else if ((e.ctrlKey)){
                    document.getElementsByClassName("btn")[1].click();
                }
                else{
                    document.getElementsByClassName("btn")[7].click();
                }
            }
        });
    });


    function base64ToBlob (base64Data){
        const contentType = "image/png"
        const sliceSize = 512
        const byteCharacters = atob(base64Data)
        const byteArrays = 
        for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
            const slice = byteCharacters.slice(offset, offset + sliceSize)
            const byteNumbers = new Array(slice.length)
            for (let i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i)
            }
            const byteArray = new Uint8Array(byteNumbers)
            byteArrays.push(byteArray)
        }
        return new Blob(byteArrays, { type: contentType })
    }
})();

天鳳スクリーンショット取得用スクリプト

// ==UserScript==
// @name         天鳳スクリーンショット取得
// @namespace    otenhoi
// @version      2024-03-02
// @description  Ｐキーを押下すると天鳳のスクショが保存できます。
// @author       @えり
// @icon         https://tenhou.net/favicon.ico
// @include      https://tenhou.net/3/*
// ==/UserScript==


(function() {
        'use strict';
    
        import("https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js").then(function(module){
            document.addEventListener("keydown", function(e){
                const C_KEY = 67;
                const P_KEY = 80;
                e = e || window.event;
                if *2{
                    html2canvas(document.getElementsByClassName("nosel")[2], {
                       allowTaint: true,
                       useCORS: true
                    }).then(function (canvas) {
                        var dataURL = canvas.toDataURL();
                        if(e.keyCode == P_KEY || e.key == P_KEY){
                            //--- 画像を保存
                            var a = document.createElement("a");
                            a.href = dataURL;
                            a.download = "天鳳スクリーンショット.png";
                            a.click();
                        }
                        else if(e.keyCode == C_KEY || e.key == C_KEY){
                            //--- クリップボードに保存
                            var $img = new Image();
                            $img.src = dataURL;
                            navigator.clipboard.write([
                                new ClipboardItem({
                                    "image/png": base64ToBlob($img.src.replace("data:image/png;base64,", "")),
                                }),
                            ]);
                        }
                    });
                }
            });
        });
    
        function base64ToBlob (base64Data){
            const contentType = "image/png"
            const sliceSize = 512
            const byteCharacters = atob(base64Data)
            const byteArrays = []
            for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
                const slice = byteCharacters.slice(offset, offset + sliceSize)
                const byteNumbers = new Array(slice.length)
                for (let i = 0; i < slice.length; i++) {
                    byteNumbers[i] = slice.charCodeAt(i)
                }
                const byteArray = new Uint8Array(byteNumbers)
                byteArrays.push(byteArray)
            }
            return new Blob(byteArrays, { type: contentType })
        }
    })();

牌画一覧

１：縦置き

白發中
<img src="https://mj-king.net/sozai/paiga/images/p_ji_e_1.gif" style="vertical-align: middle;">
<img src="https://mj-king.net/sozai/paiga/images/p_ji_s_1.gif" style="vertical-align: middle;">
<img src="https://mj-king.net/sozai/paiga/images/p_ji_w_1.gif" style="vertical-align: middle;">
<img src="https://mj-king.net/sozai/paiga/images/p_ji_n_1.gif" style="vertical-align: middle;">
<img src="https://mj-king.net/sozai/paiga/images/p_no_1.gif" style="vertical-align: middle;">
<img src="https://mj-king.net/sozai/paiga/images/p_ji_h_1.gif" style="vertical-align: middle;">
<img src="https://mj-king.net/sozai/paiga/images/p_ji_c_1.gif" style="vertical-align: middle;">

白發中
<img src="https://mj-king.net/sozai/paiga/images/p_ji_e_3.gif" style="vertical-align: middle;">
<img src="https://mj-king.net/sozai/paiga/images/p_ji_s_3.gif" style="vertical-align: middle;">
<img src="https://mj-king.net/sozai/paiga/images/p_ji_w_3.gif" style="vertical-align: middle;">
<img src="https://mj-king.net/sozai/paiga/images/p_ji_n_3.gif" style="vertical-align: middle;">
<img src="https://mj-king.net/sozai/paiga/images/p_no_3.gif" style="vertical-align: middle;">
<img src="https://mj-king.net/sozai/paiga/images/p_ji_h_3.gif" style="vertical-align: middle;">
<img src="https://mj-king.net/sozai/paiga/images/p_ji_c_3.gif" style="vertical-align: middle;">

*1:e.keyCode == P_KEY || e.key == P_KEY || e.keyCode == C_KEY || e.key == C_KEY

*2:e.keyCode == P_KEY || e.key == P_KEY || e.keyCode == C_KEY || e.key == C_KEY