[ 新規に投稿する ]
ヘッダ行とフッタ行を無視させたいNo.41645
(-L-) さん　25/02/04 20:09　[ コメントを投稿する ]
最近、HmMarkdownSimpleServerが秀丸エディタのマクロライブラリに登録されたという案内が届くので、それに触発（※後述）されて、ぼんやり考えているのですが、秀丸エディタで編集するファイルのヘッダ行とフッタ行を無視できるようないい何か良い知恵は無いでしょうか。

例えば、marmaid記法です。
----------------------------------------------------------------------------------------------------------
<html>
<head>
    <script type="module">
        import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
        mermaid.initialize({ startOnLoad: true, theme: 'default', securityLevel: 'loose'});
    </script>
<title>Mindmap</title>
</head>
<body>
<div class="mermaid">
mindmap
%%-------------------------
((まいんど))
%%-------------------------
  どうしよう
    ))なにしよう((
  こうしよう
   ((そうしよう))
  やめよう
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------
これを、保存をトリガーに、個別ブラウザに表示させるマクロを書けば、秀丸の個別ブラウザに
marmaid記法したものがレンダリングされて個別ブラウザに表示されます。（私の使い方の例です）

<div class="mermaid">より上の行はヘッダ部
</div>より下の行はフッタ部で基本、編集する必要はないのです。
なので、<div class="mermaid"></div>の中だけに集中して編集したいなぁということなんです。


（※）
　なぜ、HmMarkdownSimpleServerに触発されたかというと、mermaid同様markdownも同じ様な
　アプローチでできるだろうと。
[ △ ]
RE:41645 ヘッダ行とフッタ行を無視させたいNo.41646
(-L-) さん　25/02/04 20:11　[ コメントを投稿する ]
>　なぜ、HmMarkdownSimpleServerに触発されたかというと、mermaid同様markdownも同じ様な
>　アプローチでできるだろうと。

ChatGPTに出力してもらったので、おかしい部分があるかもですが、markdownなら以下のように<div>内にmarkdown記法すればレンダリングされますので、マクロでファイル保存をトリガーに個別ブラウザに表示させれば期待動作するのです。

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>markdown</title>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown.min.css">
</head>
<body>
<article class="markdown-body">
<div id="content" style="white-space: pre-wrap; display: none;">
<!-- 以下に行頭からmarkdown記法で書きます。-->
# ここにmarkdownを書く

- そこそこうまく
  - 動いていると
    - 思います。

大丈夫そう。
<!-- markdown記法（終）-->
</div>
<div id="rendered-content"></div>
</article>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      let markdownSource = document.getElementById('content').textContent.trim();
      // すべての行の先頭の不要なスペースを削除
      markdownSource = markdownSource
        .split("\n")
        .join("\n");

      marked.setOptions({
        breaks: true, // 改行を <br> に変換
        gfm: true, // GitHub Flavored Markdown を有効化
        smartypants: true, // スマートな記号解析を有効化
        tables: true // テーブル解析を有効化
      });
      document.getElementById('rendered-content').innerHTML = marked.parse(markdownSource);
    });
  </script>
</body>
</html>
[ △ ]
RE:41645 ヘッダ行とフッタ行を無視させたいNo.41647
こみやんま さん　25/02/05 06:37　[ コメントを投稿する ]
　 mindmap
%%-------------------------
((まいんど))
%%-------------------------
  どうしよう
    ))なにしよう((
  こうしよう
   ((そうしよう))
  やめよう


という内容を「秀丸で開いて」、

https://github.com/komiyamma/hm_mindmap_simple_render/blob/main/HmMindMapSimpleRender.mac

みたいなマクロを実行すれば良い、といったことではなく？


一方で、「あくまでもヘッダとフッタ付きでファイルを編集」する方針になっていて、
「編集する時に上下が微妙に邪魔に感じる」といった問題なら、
マクロで自動的に「mindmap」div内を「部分編集」にするとかを組むことで、
灰色になるし編集もできないから、いいんじゃないですかね？
[ △ ]
RE:41647 ヘッダ行とフッタ行を無視させたいNo.41648
(-L-) さん　25/02/05 07:02　[ コメントを投稿する ]
>https://github.com/komiyamma/hm_mindmap_simple_render/blob/main/HmMindMapSimpleRender.mac
>
>みたいなマクロを実行すれば良い、といったことではなく？

せっかく提供いただいたのですが、私は秀丸エディタのマクロ（＋特にjavascript形式）に精通していない、かつ、習得も面倒くさがり＋可能なら秀丸エディタだけで色々やりたい派なので、私のできる範囲でシンプルな方法で実現できないかを模索する方針です。

その拙い秀丸マクロ読解力程度なのですが、mermaidはmindmap以外にもganttとかも使うので汎用的に色々なものに使えるというのが私には必要なので、途中で読み込むのをやめてしまいました。すみません。
（私のレベルだとほぼすべてレベルでコメントついてないと理解に時間がかかりすぎる。）


ということで、今回の件で、私の方針でたどり着いた解が、

>一方で、「あくまでもヘッダとフッタ付きでファイルを編集」する方針になっていて、

です。

>「編集する時に上下が微妙に邪魔に感じる」といった問題なら、
>マクロで自動的に「mindmap」div内を「部分編集」にするとかを組むことで、
>灰色になるし編集もできないから、いいんじゃないですかね？

部分編集というのがあるのですね！

mermaidとmarkdownについては、このヘッダ/フッタ付のhtmlが常に成果物となる（何も持っていない他人に渡してもレンダリングされて表示される）ので、部分編集というのがしっくりくると思いました。

自分がやりたいことができるよう、この周辺を調べてマクロを組んでみようと思います。
お知恵ありがとうございました。
[ △ ]
RE:41648 ヘッダ行とフッタ行を無視させたいNo.41649
こみやんま さん　25/02/05 08:10　[ コメントを投稿する ]
　 >> mermaidはmindmap以外にもganttとかも使うので汎用的に色々なものに使えるというのが私には必要なので、途中で読み込むのをやめてしまいました。すみません。

これは判定を
```
if (!isMindMapText(curTotalText)) {
    return;
}

```

を消せば、mermaidで使えるものは「全部汎用」で使えるんじゃないですかね？
（HTML部分が変化しないのであれば）

また、 (-L-) さんが編集している形と同じような
「HTMLとして常に保存されている(tempHtmlFullPath)」ため、
渡す時もそれを渡せばいい気もします。

ただ、指針と合わないのであれば、部分編集がよいと思います。
[ △ ]
RE:41645 ヘッダ行とフッタ行を無視させたいNo.41650
(-L-) さん　25/02/05 09:03　[ コメントを投稿する ]
部分編集を勉強中です。

アウトライン解析系だと思っていました。
アウトライン解析は、（最初から用意されているものから外れた記述が対象のため）工夫した正規表現を書いて指示したら、自分の期待通り動くかなぁ。と試したことがあったのですが、どうもうまく動かない＆情報がみつからないで挫折した経験があり、アウトライン解析系は使わずにいたので、よくわかっておりません。

ですが、編集対象を範囲選択して、部分編集開始をすれば良いということが分かりました。
まずは、マクロを使わずに部分編集に慣れていこうと思っています。

で、その部分編集を始めた際、編集対象外の範囲が、灰色表示になりますが、この背景色、文字色はどこで変更すれば良いのでしょうか。
ファイルタイプ別‐デザインにそれっぽいものを見つけられませんでした。
[ △ ]
RE:41650 ヘッダ行とフッタ行を無視させたいNo.41654
秀丸担当 さん　25/02/05 16:30　[ コメントを投稿する ]
　 [その他]→[ファイルタイプ別の設定]→[アウトライン]→[部分編集]のところに、[ローカル編集モード]で部分以外を消す設定や、[半透明]で半透明にする設定があります。
任意の色に指定する設定は無いです。
[ △ ]
RE:41654 ヘッダ行とフッタ行を無視させたいNo.41656
(-L-) さん　25/02/05 18:36　[ コメントを投稿する ]
>任意の色に指定する設定は無いです。

ありがとうございます。
ローカル編集か半透明で慣れようと思います。

マクロで実現するなら、
正規表現を使って検索して、部分編集開始場所～終了場所を選択状態にしてから、部分編集するコマンド叩いて、部分編集開始場所にカーソルを持っていけばいい感じでしょうかね。
このやり方なら、テンポラリファイルを使うこともないので、一番シンプルなのかなぁと。
などと、ぼんやり考えています。
[ △ ]
RE:41656 ヘッダ行とフッタ行を無視させたいNo.41657
(-L-) さん　25/02/05 23:42　[ コメントを投稿する ]
>などと、ぼんやり考えています。

マクロを考えているところで、あるといいなということが。

ローカル編集モードか、制限モード、制限モード＋半透明に一時的に切り替えられるマクロのコマンドか何かしらの方法がありますでしょうか。

また、個別ブラウザのwebview2ですが、
今の仕様は、OSのダーク/ライトモード設定に連動かと思います。
これを、Edgeのダーク/ライトモード設定に連動にならないか。
本当は、秀丸の個別ブラウザの設定画面などでダーク/ライトモードを切替られたり、マクロのコマンドで切替られたりが一番いいのですが。

今回のケース以外でも、ダーク/ライト設定を検知して自動でCSSで色を変えるというものの編集するシーンはあると思います。
そのときに、ダークやライトでの動作確認が秀丸の個別ブラウザでサクサクできると便利なのですが。
[ △ ]
RE:41657 ヘッダ行とフッタ行を無視させたいNo.41658
こみやんま さん　25/02/06 06:38　[ コメントを投稿する ]
　 >また、個別ブラウザのwebview2ですが、
>今の仕様は、OSのダーク/ライトモード設定に連動かと思います。
>これを、Edgeのダーク/ライトモード設定に連動にならないか。
>本当は、秀丸の個別ブラウザの設定画面などでダーク/ライトモードを切替られたり、マクロのコマンドで切替られたりが一番いいのですが。
>
>今回のケース以外でも、ダーク/ライト設定を検知して自動でCSSで色を変えるというものの編集するシーンはあると思います。
>そのときに、ダークやライトでの動作確認が秀丸の個別ブラウザでサクサクできると便利なのですが。



このWebView2コンポーネントの背景の問題は

https://www.maruo.co.jp/turukame/3/x11713_.html#11722

と絡むので結構難しいと思いますね。

①[WebView2コンポーネントのPreferredColorScheme]
　[HTML/CSSのmedia (prefers-color-scheme)] = ①のこと
②[HTMLのrootカラースキーム]
③[HTMLのbodyの背景色]

(番号が大きいほど上のレイヤー)

①上記リンクのやりとりにあるように、
　正式な手段のハズのPreferredColorSchemeへの代入手段が奪われてる(数時間に一度といったレベルで非同期の処理がバグってしまう)状態なので、
　「秀丸からWebView2の背景色を変え」かつ「ブラウザ枠を更新してもその状態を維持する」
　というのが(秀丸側からでは)代替手段がなく困難になっている状態かと思います。

　ユーザー側で静的なCSS部分を触ったり、JSを書けばもちろん可能ですが...

例えば、②の層のカラーを外からつつくようなもの、
以下のようなマクロ

jsmode "JScript\\" + currentmacrofilename;
js {
    function getPaneThemaColor(thema) {
        return "javascript:(function() { var _pane_style_temp = document.createElement('style');_pane_style_temp.textContent = ':root { color-scheme: " + thema + "; }';document.head.appendChild(_pane_style_temp);})();"
    }
 
    browserpanecommand(
    {
        target: "_each",
        url: getPaneThemaColor("dark") // あるいは "light"。　秀丸と合わせるなら、「darkmode() ? "dark" : "light"」
    }
    );
}

を発行すれば、「個別ブラウザ枠」の色は、マクロ実行で
「スポーンとdarkセット一式の色(あるいはlightセット一式の色)」になるでしょうが、ブラウザ枠が更新されるとともに消えます。

では、秀丸本体がこのマクロ相当のものを裏で発行すればよいのでは？ と思うかもしれませんが、
PreferredColorScheme を変えることなく、rootのcolor-scheme だけを変えると、
HTML/CSSで「prefers-color-scheme」を使って定義をしていると、チグハグなことになります。
(prefers-color-schemeはlightだから、rootだけdarkに指定しても、他のprefers-color-schemeにぶら下げてるユーザー定義のカラーは当然切り替わらない)

HTMLに

<style>
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
    body {
        background-color:#222277;
    }
}
@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
    }
    body {
        background-color:#ffffee;
    }
}
</style>

みたいなスイッチ的なカラーテーマが定義してあった場合、root だけ入れ替えても、prefers-color-scheme が変わってないので
チグハグになってしまうということですね。


やはり、現状は色を(更新しても)維持するためには、CSSかJSか、少なくともどちらかはイジらざるを得ないでしょうか。

■関連：ブラウザ枠・レンダリング枠と背景色
https://xn--pckzexbx21r8q9b.net/?page=nobu_tool_hm_webview2_pane_dark
[ △ ]
RE:41658 ヘッダ行とフッタ行を無視させたいNo.41659
(-L-) さん　25/02/06 08:23　[ コメントを投稿する ]
>このWebView2コンポーネントの背景の問題は
>https://www.maruo.co.jp/turukame/3/x11713_.html#11722
>と絡むので結構難しいと思いますね。

https://qiita.com/Try0/items/487ed35c9a93d221a5bd
というような記事があったりしたので、可能なのかなと思っていましたが、難しいのですね。
[ △ ]
RE:41659 ヘッダ行とフッタ行を無視させたいNo.41660
秀丸担当 さん　25/02/06 11:27　[ コメントを投稿する ]
　 ダークモードについては、こみやんまさんも書かれている通り、諸事情あってできない状態です。

部分編集モードの設定の変更は、config文を使うとできます。
例：
config "xRangeEdit:0x00000";//制限モード（通常）
config "xRangeEdit:0x10000";//制限モード（半透明）
config "xRangeEdit:0x60000";//ローカル編集モード

ちなみにconfig文を使うと一時的な設定になりますが、一時的な設定でない状態にするとしたら、
setconfigstate 0;
とするとできます。
[ △ ]
RE:41660 ヘッダ行とフッタ行を無視させたいNo.41661
(-L-) さん　25/02/06 22:46　[ コメントを投稿する ]
>ダークモードについては、こみやんまさんも書かれている通り、諸事情あってできない状態です。

他アプリでは単独でライト/ダーク切替え対応しているものを見た記憶もあったので、秀丸エディタ固有の問題ということですね。

個別ブラウザから、そのURLを本物ブラウザで起動、その本物ブラウウザは個別ブラウザと逆のモード（個別がダーク表示なら本物はライト表示）で起動させることで、サクサクと両モードで確認ができるというのを落とし所にしました。

お陰様で、部分編集を用いて、mermaidとmarkdownを個別ブラウザでレンダリングしながら編集できるシンプルな個人用マクロが完成しました。
ありがとうございました。
[ △ ]
[ 新規に投稿する ]