「data: ***」の例

最終更新日 2025-04-26

ブラウザ枠やレンダリング枠を利用した例には、

urlプロパティに、*.html やファイルなをのURLを表示した例
urlプロパティに、javascriptのブックマークレット記述したもの

などがありますが、もうひとつ、「data: ***」を渡すことが出来ます。通常のブラウザに対して利用されることは、ほぼありませんが、プログラムとブラウザのURLという関係においては使い勝手があるものになっています。

data: ****

ファイルとしての実態が存在しないものを、レンダリング枠に手軽に表示するのに利用できるのが data :*** です

HTMLの例

test.mac

jsmode "JScript\\" + currentmacrofilename;
 
js {
    renderpanecommand({
         target: "mytest_01",
         url: 'data:text/html;charset=utf-8;,<title>test</title><font color="red" size="5">あい</font>うえお',
         place: "right",
         size: 300,
         show: 1
    });
}

画像を表示する際は、下記のようにHTMLの中にbase64として埋め込むのが自然

画像自体の file:/// パスをそのまま url: プロパティに渡した場合は、レンダリング枠の中央に配置されるような形となります。
それだとやや見苦しいため、下記のように html の imgタグとして構築するのが良いでしょう。

test.mac

jsmode "JScript\\" + currentmacrofilename;
 
js {
     
    renderpanecommand({
         target: "mytest_02",
         url: 'data:text/html;charset=utf-8;,<title>test</title><img src="data:image/png;base64,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">',
         place: "right",
         size: 300,
         show: 1
    });
}

ただし、画像の解像度が非常に大きく、base64にするのに負担が大きい場合は、
下記のように画像の file:/// パスを、そのまま url: プロパティに渡すのが良いでしょう

ただし、この場合には、レンダリング枠の中央に表示されることになります。

test.mac

jsmode "JScript\\" + currentmacrofilename;
 
js {
    renderpanecommand({
         target: "mytest_02",
         url: "C:\\Users\\master\\Pictures\\64x80_dark.png",
         place: "right",
         size: 300,
         show: 1
    });
}

これらは URL の一般的な仕様

秀丸専用の機能ではなく、一般的なURLの機能ですので、
「data:」「URL」などとして検索するなり、会話AIなどで調べてください。

ローカルに存在するファイルをbase64のテキストにする例

ローカルのファイルをマクロ内でbase64にするには、下記のような方法となるでしょう。

test.mac

jsmode "JScript\\" + currentmacrofilename;

js {

debuginfo(2);

function imageToBase64(imagePath) {
    if (!existfile(imagePath)) {
        return null;
    }

    try {
        // JScript
        var stream = createobject("ADODB.Stream");

        // ストリーム設定
        stream.Type = 1; // バイナリ
        stream.Open();
        stream.LoadFromFile(imagePath);
        stream.Position = 0;

        // バイナリをBase64に変換
        var domDocument = new createobject("MSXML2.DOMDocument");
        var base64 = domDocument.createElement("b64");
        base64.dataType = "bin.base64";
        base64.nodeTypedValue = stream.Read();

        // Base64文字列取得
        var base64String = base64.text;

        // ストリームを閉じる
        stream.Close();

        return base64String;

    } catch (e) {
        console.log("エラーが発生しました: " + e);
        return null; // エラーの場合はnullを返すなど適切な処理を行う
    }
}

var base64 = imageToBase64("C:\\Users\\master\\Pictures\\64x80_dark.png");
console.log(base64);

} // js

編集中のテキストを上から１行ずつレンダリングペインに

応用例をみてみましょう

test.mac

jsmode "WebView2\\" + currentmacrofilename;

js {

const fontName = fontname();

renderpanecommand({
    target: "MyMessagePanel",
    place: "top",
    size: 100,
    show: 1
});

// javascriptでdocumentに div タグの作成
const textDiv = document.createElement('div');

// レンダリングペインへの送信。
function sendRenderPane(ix, lineFormat) {
    // HTMLとして扱えるように、タグ内部テキストとして...
    textDiv.innerText = lineFormat;
    
    // HTMLタグごとレンダリング枠へと送信。フォントも編集エリアのものを採用しておこう。
    renderpanecommand({
        target: "MyMessagePanel",
        url: `data: text/html;charset=utf-8,<title>${ix} 行目</title><font face="${fontName}" size="4">${textDiv.outerHTML}</font>`
    });
}

// レンダリングペインは見えてるの？
function isRenderPaneShow() {
    const isShow = renderpanecommand({
        target: "MyMessagePanel",
        get: "show"
    });
    
    return +isShow == 1;
}


// 該当の行を「行番｜文面」に加工。
function getFormattedLineText(ix, lineText) {
    const lineCount = linecount();
    const lineDigits = String(lineCount).length;
    let lineFormatNumber = ix.toString().padStart(lineDigits, "0");
    let lineFormat = `${lineFormatNumber}｜${lineText}`;
    return lineFormat;
}

// マクロを再実行した時には、前のをキャンセルする。
var timeoutHandler;
hidemaru.clearTimeout(timeoutHandler); // 再実行した時に前のを停止


function processLine(ix) {
    // 最後まで行ったら終わり
    if (ix > linecount()) {
        hidemaru.clearTimeout(timeoutHandler);
        outputAlert("全行終了しました。");
        return;
    }

    // レンダリング枠閉じたら終わり
    if (ix > 1 && !isRenderPaneShow()) {
        hidemaru.clearTimeout(timeoutHandler);
        outputAlert("ウィンドウ枠が閉じられました。");
        return;
    }

    // 該当行のテキストを加工し、レンダリング枠へと転送
    let lineText = getlinetext(ix);
    let lineFormat = getFormattedLineText(ix, lineText);
    sendRenderPane(ix, lineFormat);

    // 次の行を２秒後に
    timeoutHandler = hidemaru.setTimeout(processLine, 2000, ix+1);
}

function main() {
    timeoutHandler = hidemaru.setTimeout(processLine, 0, 1); // 最後の「1」は1行目からのスタート
}

// 警告等、アウトプット枠
function outputAlert(msg) {
    var dll = loaddll("HmOutputPane.dll");
    dll.dllFuncW.OutputW(hidemaru.getCurrentWindowHandle(), msg + "\r\n");
}

main();

}