最終更新日 2025-03-13

「ブラウザ枠の幅」と「日本語文章の改行の自動化」 (BudouX)

秀丸のブラウザ枠で考えられる特徴としては、

こういった状況から、文章中のどこで改行を入れればよいのかわからない。

これを解決するのが「BudouX」です。

BudouX あり

BudouX なし

HttpServerオブジェクトでレスポンスとしてJSONにして返しましょう。

HmTextBudouX.mac 
jsmode "JScript\\" + currentmacrofilename;

js {
debuginfo(2);

if (typeof(server) != "undefined") {
    server.close();
}
  
var server = hidemaru.createHttpServer(function (req, res) {
  
    if (req.url == "/text") {
        res.writeHead(200); // OK
        // 現在の「秀丸エディタのテキスト」と「カーソル位置」を返すようにする
        var obj = {
            text: gettotaltext(),
        };
        res.write(JSON.stringify(obj));
        res.end("");
    } else {
        res.writeHead(404); // Not found
        res.end("");
    }
});
  
server.listen(0); //ランダムなポート
var port = server.port;


function makeUrl(htmlFullPath, port) {
    var htmlFullPath = htmlFullPath.replace(/\\/g, "/");
    var absoluteUrl = sprintf("file://%s?port=%d", encodeURI(htmlFullPath), port);
    return absoluteUrl;
}


// メインの処理
function main() {

    var absoluteUrl = makeUrl(currentmacrodirectory() + "\\HmTextBudouX.html", port);

    // 指定のパラメータでレンダーペインを開く。browserpanecommand にして、targetを "_each" にしてもほぼ同じこと
    browserpanecommand ( 
    {
        target: "_each",
        url : absoluteUrl,
        watchsave: 1,
        initialize: "async",
        show: 1,
        size : 450
    }
    );
}

if (port > 0 ) {
    main();
} else {
    console.log("サーバー構築失敗");
}

} // js

HTML 側

BudouXを使ってみましょう。

HmTextBudouX.html 
<html>
<head>
<title>HmTextBudouX</title>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
<div id='output'></div>
<script>
// ファイルURLからポート番号を取得
let urlParams = new URLSearchParams(window.location.search);
let port = Number(urlParams.get('port'));
 
let lastText = "";
async function updateText() {
    fetch(`http://localhost:${port}/text`)
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json(); // テキストとして来るが、JSONもテキストなので、JSONオブジェクト解釈。
        })
        .then(obj => {
 
            // テキスト
            const text = obj.text;
            if (lastText != text) {
                lastText = text;
 
                const html = marked.parse(text);
                // BudouXを使って、日本語として良き感じのところで自動改行する
                output.innerHTML = "<budoux-ja>" + html + "</budoux-ja>";
            }
        })
        .catch(error => {
            output.innerText = "エラーが発生しました: " + error.message + error.stack;
        }
    );
}
 
document.addEventListener('DOMContentLoaded', ()=>{
    if (port > 0) {
        updateText();
        setInterval(updateText, 1000);
    } else {
        output.innerText = "ポート番号が指定されていません。";
    }
})
</script>
</body>
</html>

2024年以降はこのようなことをする必要性すらない

実は、このBudouXと同じような機能は2024年以降の主なブラウザには組み入れられました。

HTML 側

HTMLの言語設定「lang="ja"」と「CSS」だけで実現出来る

HmTextBudouX.html 
<html lang="ja">
<head>
<title>HmTextBudouX</title>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://unpkg.com/budoux/bundle/budoux-ja.min.js"></script>
<style>
div {
    word-break: auto-phrase;
    text-wrap: balance; /* 無い方がよいかも */
}
</style>
</head>
<body>
<div id='output'></div>
<script>
// ファイルURLからポート番号を取得
let urlParams = new URLSearchParams(window.location.search);
let port = Number(urlParams.get('port'));
 
let lastText = "";
async function updateText() {
    fetch(`http://localhost:${port}/text`)
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json(); // テキストとして来るが、JSONもテキストなので、JSONオブジェクト解釈。
        })
        .then(obj => {
 
            // テキスト
            const text = obj.text;
            if (lastText != text) {
                lastText = text;
 
                const html = marked.parse(text);
                output.innerHTML = html;
            }
        })
        .catch(error => {
            output.innerText = "エラーが発生しました: " + error.message + error.stack;
        }
    );
}
 
document.addEventListener('DOMContentLoaded', ()=>{
    if (port > 0) {
        updateText();
        setInterval(updateText, 1000);
    } else {
        output.innerText = "ポート番号が指定されていません。";
    }
})
</script>
</body>
</html>