HmCustomRenderBrowser の使い方 (色を伝達してみよう)

最終更新日 2025-04-01

「秀丸のテキストの色」と「背景の色」を、ブラウザ枠へと伝達してみましょう。

HmCustomRenderServer.mac のファイルだけを変更して、test.mac としてみましょう。

まず、「一式をすべてコピー」して、別のディレクトリにコピペしてみましょう。

「HmCustomRenderServer.mac」だけ名前を変更します。
他はそのままです。

test.macを編集

test.mac を以下のように編集してみましょう。
秀丸のgetconfigcolor は B,G,R という順番になっていますので、R,G,Bの順に直します。

test.mac

hidemaruversion "9.43.99";

jsmode "JScript\\" + currentmacrofilename;

execjs currentmacrodirectory + "\\HmCustomRenderServer.js";

js {

// BGRの順番をRGBにする
function convertBGRtoRGB(colorBGR) {
    var b = (colorBGR >> 16) & 0xFF;
    var g = (colorBGR >> 8) & 0xFF;
    var r = colorBGR & 0xFF;
    return  (r << 16) | (g << 8) | b;
}


function onRequestObject() {
    var textColorBGR = getconfigcolor(0, 0);             // BGRの順の値になってる。
    var textColorRGB = convertBGRtoRGB(textColorBGR);    // RGBの順の値に変更する。

    var backColorBGR = getconfigcolor(0, 1);             // BGRの順の値になってる。
    var backColorRGB = convertBGRtoRGB(backColorBGR);    // RGBの順の値に変更する。

    var obj = {
        "textColor": textColorRGB,
        "backColor": backColorRGB,
    };

    return obj;
}

} // js

HmCustomRenderBrowser.htmlを編集

テキストの色・背景の色の対比で、スタイルを決定してみましょう。

HmCustomRenderBrowser.html

<!DOCTYPE html>
<html lang="ja">
<head>
<title>HmCustomRenderBrowser</title>
<script src="./HmCustomRenderBrowser.js"></script>
</head>
<style>
[hm-theme-color="dark"] {
    color-scheme: dark;
}
[hm-theme-color="light"] {
    color-scheme: light;
}
</style>
<body>
<div>あいうえお</div>
<button>ダミー</button>
<script>
document.addEventListener('DOMContentLoaded', ()=>{
    HmCustomRenderBrowser.setInterval(onReceiveObject, 1000);
});
 
let lastObjJSON = -1;
 
function onReceiveObject(obj, error) {
  
    // エラー
    if (!obj) {
        return;
    }
 
    let json = JSON.stringify(obj);
    // 何も変わっていない
    if (lastObjJSON == json ) {
       return;
    }
 
    // 最後に採用する値として保存
    lastObjJSON = json;
 
    // テキストをグレースケールにした値
    const textGrayColor = getColorLuminance(obj.textColor);
    // 背景をグレースケールにした値
    const backGrayColor = getColorLuminance(obj.backColor);
 
    // テキストが色が明るく、背景の方がテキストよりも暗いなら、ダークモードとする
    let isDarkMode = textGrayColor > backGrayColor;
 
    var targetColor = isDarkMode ? 'dark' : 'light';
    // 対象のテーマカラーで表示
    document.documentElement.setAttribute('hm-theme-color', targetColor);
 
    // ただの数値なので「#RRGGBB」の16進数0埋め文字列とする。
    document.body.style.backgroundColor = "#" + obj.backColor.toString(16).padStart(6, '0');
    document.body.style.color           = "#" + obj.textColor.toString(16).padStart(6, '0');
}

// 色をグレースケールにしたら、どうなる？
function getColorLuminance(colorRGB) {
    let r = (colorRGB >> 16) & 0xFF
    let g = (colorRGB >> 8) & 0xFF
    let b = colorRGB & 0xFF
 
    return 0.299 * r + 0.587 * g + 0.114 * b;
}
</script>
</body>
</html>

test.macを実行

テキストの色や背景色を変更すると、
その変更に追従するかのように個別ブラウザ枠の色が変化します。

ライトテーマとダークテーマ、どちらの「ブラウザコンポーネントのテーマカラー」が適切なのかを判断し、
設定を切り替えています。