HmCustomRenderBrowser の使い方 (Mermaid用にしてみよう)

最終更新日 2025-03-30

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

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

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

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

test.macを編集

test.mac を以下のように編集してみましょう。
セーブした時に、ブラウザがリフレッシュするようにしてみましょう。

test.mac

hidemaruversion "9.43.99";
 
jsmode "JScript\\" + currentmacrofilename;
 
execjs currentmacrodirectory + "\\HmCustomRenderServer.js";
 
js {

// オーバーライド。非同期関数なので非同期中に使える関数で構築する必要あり
function showCustomRenderPane(url) {

    browserpanecommand({
        target: "_each",
        url: url,
        show: 1,
        watchsave: 1,
        size: 500,
    });
}

} // js

HmCustomRenderBrowser.htmlを編集

マーメイドを使ってみましょう。特別なことは必要ありません。
マーメイドのヘルプに基づいて利用するだけです。しかもデータは自動的に降ってくるため、とても簡単だと言えるでしょう。

HmCustomRenderBrowser.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Mermaid Demo</title>
  <script src="./HmCustomRenderBrowser.js"></script>
  <script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
<div id="output">
</div>

<script>
document.addEventListener('DOMContentLoaded', ()=>{
    // DOMContentLoaded 直後だけ。
    HmCustomRenderBrowser.setTimeout(onReceiveObject, 0);
})

async function onReceiveObject(obj, error) {
    if (obj) {
        let element = document.getElementById('output');
        element.innerHTML = obj.text;

		mermaid.initialize({ startOnLoad: false, securityLevel: 'loose' });
		await mermaid.run({
		    nodes: [element],
		});
    }
}
</script>
</body>
</html>

適当にテキストを編集エリア上に記述

無題テキスト

mindmap
%%-------------------------
((まいんど))
%%-------------------------
  どうしよう
    ))なにしよう((
  こうしよう
   ((そうしよう))
  やめようfds

test.macを実行

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

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