グッズの実寸サイズを選択してプレビュー

preview_goods_size.js

// 事前準備
// - displaySettingsの値を自分のディスプレイの解像度(幅、高さ)とインチ数に変える
// 使い方
// - サイズ表記テキストを選択してブックマークレットを実行する
//   - サイズ表記テキストの例: 約100mm×148mm
javascript:(()=>{
const displaySettings = [
    { width: 1920, height: 1080, diagonalInch: 23.8 },
    { width: 2560, height: 1441, diagonalInch: 27.9 }, /* 150% */
    { width: 3840, height: 2160, diagonalInch: 27.9 },
];

const screenW = window.screen.width;
const screenH = window.screen.height;
const matchedSettings = displaySettings.filter(s => s.width === screenW && s.height === screenH);

if (matchedSettings.length === 0) {
    alert(`ディスプレイ設定が見つかりません (width: ${window.screen.width}, height: ${window.screen.height})`);
    return;
}

const diagonalPixels = Math.sqrt(Math.pow(screenW, 2) + Math.pow(screenH, 2));
const realDpi = diagonalPixels / matchedSettings[0].diagonalInch;
const cssDpi = 96;
const ratio = cssDpi / realDpi;

const sizePatterns = [
    /H(?<H>\d+)(?:mm)?[^\d]+W(?<W>\d+)(?:mm)?[^\d]+D(?<D>\d+)mm/,
    /W(?<W>\d+)(?:mm)?[^\d]+H(?<H>\d+)(?:mm)?[^\d]+D(?<D>\d+)mm/,
    /(?<H>\d+)(?:mm)?[^\d]+(?<W>\d+)(?:mm)?[^\d]+(?<D>\d+)mm/,
    /H(?<H>\d+)(?:mm)?[^\d]+W(?<W>\d+)(?:mm)?/,
    /W(?<W>\d+)(?:mm)?[^\d]+H(?<H>\d+)(?:mm)?/,
    /(?<H>\d+)(?:mm)?[^\d]+(?<W>\d+)(?:mm)?/,
];

const text = window.getSelection().toString().trim();
let sizes;

for (const p of sizePatterns) {
    const m = p.exec(text);
    if (m) {
        sizes = {width: m.groups.W, height: m.groups.H, depth: m.groups.D};
        break;
    }
}
if (!sizes) {
    alert('非対応の寸法サイズ形式です');
    return;
}
const w = sizes.width / ratio;
const h = sizes.height / ratio;

const root = document.createElement('div');
root.style.cssText = `
position: fixed;
inset: 0% 100% 100% 0%;
width: 100%;
height: 100%;
align-items: center;
z-index: 65535;
`;

const box = document.createElement('div');
box.style.cssText = `
--w: ${w}mm;
--h: ${h}mm;
position: absolute;
left: calc((100% - var(--w)) / 2);
top: calc((100% - var(--h)) / 2);
display: inline-block;
width: var(--w);
height: var(--h);
border: 1px solid black;
background-color: #ffffc6;
`;

root.onclick = (e) => { e.currentTarget.remove(); };

root.appendChild(box);
document.body.appendChild(root);
})();