HmCustomRenderBrowser の使い方 (マークダウン用にしてみよう)

最終更新日 2025-04-01

何らかのカスタム解釈をする、という意味で、マークダウンを例にしてみましょう。

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

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

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

test.macを編集

test.mac を以下のように編集してみましょう。
ほとんどソースが無い状態です。

test.mac

hidemaruversion "9.43.99";

jsmode "JScript\\" + currentmacrofilename;

execjs currentmacrodirectory + "\\HmCustomRenderServer.js";

HmCustomRenderBrowser.htmlを編集

マークダウン用にするのに特別なことは必要ありません。
まさに、一般のWeb制作で行われていることと同じことです。
しかもデータは onReceiveObject の引数に、自動的に降ってくるため、とても簡単だと言えるでしょう。

HmCustomRenderBrowser.html

<!DOCTYPE html>
<html lang="ja">
<head>
<title>マークダウン</title>
<script src="./HmCustomRenderBrowser.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
<div id="output"></div>
<script>
document.addEventListener('DOMContentLoaded', ()=>{
    HmCustomRenderBrowser.setInterval(onReceiveObject, 1000);
});

let lastText = "";
function onReceiveObject(obj, error) {
 
    // エラー
    if (!obj) {
        return;
    }
 
    // テキストが変化してなかったら、なにもしない
    if (lastText == obj.text) {
        return;
    }

    lastText = obj.text;
 
    // 受信したテキストをマークダウンと解釈してHTMLに
    const html = marked.parse(obj.text);
    output.innerHTML = html;
}
</script>
</body>
</html>

適当にマークダウンを編集エリア上に記述

適当に「かきくけこ」などと書かれたテキストを用意

test.macを実行

このように非常に簡単に「カスタムなレンダリング」が実現できました。
マークダウンだけではなく、他でも要領は同じです。

秀丸上のテキストを何かのフォーマットとして解釈し、個別ブラウザ枠にてレンダリングする、
そういったことが非常に簡単に行えることが理解出来るかと思います。

セーブ機能を付けてみよう

HTML側に「セーブ」ボタンを用意し、セーブを押したら、
マークダウンをHTML化した部分だけを保存する、といった例をみてみましょう。

ボタンを押したら、innerHTMLを、オブジェクトに乗せて秀丸側のマクロに送信すればいいだけですので簡単です。

HmCustomRenderBrowser.html

<!DOCTYPE html>
<html lang="ja">
<head>
<title>HmCustomRenderBrowser</title>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="./HmCustomRenderBrowser.js"></script>
</head>
<body>
<button id="saveHtmlButton">セーブ</button>
<div id="output"></div>
<script>
document.addEventListener('DOMContentLoaded', ()=>{
    // １秒に一度データを受け取る
    HmCustomRenderBrowser.setInterval(onReceiveObject, 1000);
})

let lastText = "";
function onReceiveObject(obj, error) {
 
    // エラー
    if (!obj) {
        return;
    }
 
    // テキストが変化してなかったら、なにもしない
    if (lastText == obj.text) {
        return;
    }

    lastText = obj.text;
 
    // 受信したテキストをマークダウンと解釈してHTMLに
    const html = marked.parse(obj.text);
    output.innerHTML = html;
}

function saveHTML() {
    let obj = {
        html : output.innerHTML,
    };
    HmCustomRenderBrowser.sendObject(obj);
}

saveHtmlButton.addEventListener("click", saveHTML);


</script>
</body>
</html>

objの中で、受け取ったhtml内容をテキストとして保存するだけ。

test.mac

hidemaruversion "9.43.99";

jsmode "JScript\\" + currentmacrofilename;

execjs currentmacrodirectory + "\\HmCustomRenderServer.js";

js {

debuginfo(2);
function onReceiveObject(obj) {
    // ファイル名がある時だけ
    if (filename2()) {
        var htmlFileName = filename2() + ".html";
        var html = obj.html;
        console.log(htmlFileName);
        hidemaru.saveTextFile(htmlFileName, html, "utf8");
    }
}

} // js

このように、本来ならばブラウザ上のボタンを押すと、ファイルとしてセーブといったことは、
色々と細々とした準備が必要ですが、(しかもブラウザ枠とレンダリング枠で異なる手法となりやすい)
そのようなことを全てすっ飛ばして、統一された記述にて、いとも簡単にファイルに保存できました。