JSONによるボタンデザインについて(所感)No.11783
こみやんま さん 24/09/30 08:35
 
秀丸担当さんの投稿
https://www.maruo.co.jp/hidesoft/2/x41194_.html#41391

をみかけて使ってみたのでちょっと問題点というか感想というか。

一応記事にしてみました。

・「独自アイコン」を作成するためのセット
https://xn--pckzexbx21r8q9b.net/?page=nobu_tool_hm_toolbar_json

・必要な設定
https://xn--pckzexbx21r8q9b.net/?page=nobu_tool_hm_toolbar_json_settings

・オリジナルボタンの作成
https://xn--pckzexbx21r8q9b.net/?page=nobu_tool_hm_toolbar_json_customfont

■このような「JSONによるボタンのリデザインにユーザーがわざわざ手を付ける」動
機とは何か?

@既存の秀丸の機能というよりは、ユーザー独自に秀丸に導入している機能を実行す
るためのボタンである可能性が高い
 (しかも「ショートカットには割り当てていない」ものになるので、滅茶苦茶に使
用頻度が高いというほどでもないもの)

 秀丸の元々ある機能でボタン配置しようかと思うものは、「マクロ記録/停止」
「マクロ再生」「マクロ保存」くらい?

Aダークモードを導入していて、既存のツールバーアイコンが綺麗に表示されずリデ
ザインしたい、という
 見た目こだわり派


■fontawesome なり Nerd Font を借りてきて指定する、という誘導では、ツール
バーボタンの作成はすぐに頓挫する

 アイコンモジュールライブラリにアップされているものなども鑑みて、
 Nerd Fontなど、「アイコン集」的なものを拝借して、指定する、
 といった方向で誘導している節がありますが、

 この考え方では限界というかユーザーがするであろう行為とのミスマッチが大きい
かと思います。

 そもそも、「新規作成」「ファイル保存」「やり直し」などのWindowsの基本動作
とも言えるものを
 「ボタンで操作」するハズもなく、そのようなものをボタンで操作する人が、
 この「JSON+フォント」のボタンリデザインの仕組みを理解して扱える可能性はほ
ぼ無いかと思います。

 「いかにもどんなアプリにもあるであろうボタン」が「Nerd Font」や「Font Awes
ome」に用意されているわけですが、
 そういったことをわざわざボタンを押して操作する確率というのはとても低いわけ
です。
 (よって「新規作成」「ファイル保存」「やり直し」などといったありきたりなも
のをリデザインするという
  動機そのものが生まれにくいといえます < ダークモードで綺麗なインテリアと
してボタンを配置しておきたい人はのぞく)

 よって、基本的に外部フォントを間借りする、というよりも、
 https://xn--pckzexbx21r8q9b.net/?page=nobu_tool_hm_toolbar_json_customfont
 のページにあるように、
 「HmTooBar」でも「HmToolBarButton」でもなんでも良いですが、
 そういった「フォント名」で決め打ったものを作り出し、
 そこに外部から「画像から」でも「別フォントグリフ」からでもなんでもいいけど
 「自分が必要とするボタン」をかき集める、

 という方針への誘導の方が良いかと思います。

 これであれば、「本人だけが使う絵柄」を多数組み入れやすいですし、
 ありきたりなものはもちろん、本人だけのオリジナルフォントにネット画像のロゴ
的やアイコン的なものから
 コピペするのも問題ありません。

 なにより、当人が必要とするものだけのフォント(アイコン)が集まっているので
わかりやすいです。


■フォントを作成したは良いが、.jsonへの入力が問題になりやすい

 これは原則的に「外字」に相当する位置にフォントを作成していくからこそ発生し
やすい問題です。

 フォントを作成した際に、そのグリフの文字を実際にエディタに入力することが出
来るフォント作成アプリもありますが
 (私が普段つかってるのはTTEditというフォント編集ツールなので、これは文字を
簡単にエディタにアウトプットできます)

 FontForgeのように、今目の前にあるフォントの文字を、エディタに文字として出
す方法がわからん、
 みたいなツールも普通にあるので、
 (要するにフォントのグリフは編集できるが、該当の「フォント文字自体」を文字
としてコピーする機能がどこにあるかわからんツールw)

 https://xn--pckzexbx21r8q9b.net/?page=nobu_tool_hm_toolbar_json_customfont
 の「一番下」のように、最初から決め打ちでjson内にコメントの形で入力済みにし
ておけばよいのではないかと思いました。

 フォントを決め打っておくことで、あらかじめ「ここから〜ここの番号に記号文字
用意して」といった形で60個ほど枠を用意しておけば、
 その文字を.jsonにコメント的に入力しておくといった対応をとることが出来ます。
 そこからコピペできるのでアプリの機能に依存することもなく簡単です。
 (ボタンが100個も200個も要るはずはないんですし)


■まとめ

 多くは「オリジナル」で作成(もしくはロゴなどを借りた)絵柄記号的なものを割
り当てたいはず。
 そういったことを実現しようとすると、
 現段階での誘導方法やモジュールライブラリに上がっている方法論では、おそらく
敷居が高い。

 一見簡単に設定できるように見える。
 「あたりさわりのないアイコン」は確かに簡単に設定できるものの、
 肝心の「自分が設定したいオリジナルフォント」になると途端に頓挫し、
 思ったアイコンを思ったように設定できている人はかなり少数なのではないか?

 という印象です。

 私はたまたま「完全自作のある程度モダンな構成の個人サイト」の運営を細々を続
けていたので、単なる「外字」とかではなく
 FontAwesome などに近い「アイコン的なフォントの作成方法」自体に、それなりに
習熟していたため、
 難なく制作できましたが、ほとんどの人は、やり方すら知らないじゃないかと思い
ます。

[ ]
RE:11783 JSONによるボタンデザインについNo.11784
秀丸担当 さん 24/09/30 12:13
 
ご意見ありがとうございます。
記事もすばらしいです。
json記述は、人によってはとっつきにくい面や、やりやすい面もあると思います。
完全にオリジナルデザインとなると、フォントをデザインとなり、良かったり大変だ
ったりすると思います。
ある別の考え方としては、Windows10,11のSegoe Fluent Iconsなどは重ねて描画する
ことを前提にした設計になっているようです。
カラー絵文字でなくても、2つ以上の色を使った表現ができます。

定義ファイルのサンプルはSegoe Fluent Iconsを使っていますが、重ねた描画の設計
を充分に活かしきれていないので、今後そういう拡張があってもいいかもしれません。

[ ]
RE:11784 JSONによるボタンデザインについNo.11785
こみやんま さん 24/09/30 12:43
 
これって、
{
    "design":{"size":32px,"showname":"fallback"},
    "tbcmd": {
        "274":{icon:"***.png", icon-hover:"***.png", alt:"M71"},
    },
}

みたいな感じにして、
その「*.jsonと同じフォルダにあるpng画像を対象」とする、とかではだめだったん
ですか?
「どういう形でも良いのでpng画像を用意」とかの方がネットから適当に落としても
よいし、
適当に自作してもよいしすごい敷居が低いと思うんですが...

要するに「font」形式だから編集や指定の敷居が高いし
カラーリングも単色になってるわけで...

[ ]
RE:11785 JSONによるボタンデザインについNo.11786
秀丸担当 さん 24/09/30 16:41
 
pngでも無くは無いですが、内部的にはhtmlのようにタグを書くだけではないので、
非常に面倒なのと、既存のビットマップリソースもあるのでハイブリッドな仕組みが
輪をかけて大変です。
やるとしたらレンダリング枠を使った追加のマクロや何かで自作したりすると簡単か
もしれません。

[ ]
RE:11783 ツールバーのカスタマイズについNo.11787
western さん 24/10/01 08:44
 
話題に便乗です
私は何度かツールバーを使いたい、と試行錯誤しては
毎度挫折してツールバー無しで運用しているタイプです

JSONで設定できるようになってから2度チャレンジして
結局は挫折しました。 (個人的に Nerd Font と相性が悪いだけです)

現状で再チャレンジしてないので急ぎの修正や対応は不要なのですが
1点確認です。

DLLで指定できるアイコンモジュール作成方法のヘルプを読んでみたところ
ボタン番号は現状で 156種 までとなっていましたが、
例えば、マクロ80に割り当てが可能なのか分かりませんでした。

指定する番号がコマンド値とも違っていて、
こだわりの実現や再チャレンジはまだまだ遠そうです。


※アイコン指定のアイデアとして、JSON内でDLLファイルのパスを指定して、
 コマンド値と同じリソースIDの画像があればアイコンとして使われる、
 みたいな仕組みがあれば柔軟にJSONによる設定楽できるかな?
 とふと思いました。
 ブラウザ枠を使ったアプリでリソースを好き勝手にカスタマイズしたDLLを
 ダウンロードできるようにするくらいは今なら比較的容易に作れちゃうので

[ ]
RE:11787 ツールバーのカスタマイズについNo.11788
秀丸担当 さん 24/10/01 11:29
 
従来のビットマップリソースを使う方法については、マクロ登録のアイコンは変更で
きません。またコマンドを全て網羅しているわけでもないです。
従来は、マクロ登録された名前の文字列のボタンにするのがわかりやすくする方法で
した。
JSONでDLLのリソースを指定という考え方もありがとうございます。
ご意見参考にさせていただきます。

[ ]
RE:11784 ツールバーのアイコンの右下に文No.11789
こみやんま さん 24/10/02 01:11
 
>定義ファイルのサンプルはSegoe Fluent Iconsを使っていますが、重ねた描画の設
>計を充分に活かしきれていないので、今後そういう拡張があってもいいかもしれま
>せん。



重ねたで気づいた追加案です。

■ツールバーのアイコンの右下に文字(subscript)

https://github.com/komiyamma/suggestion-for-hmtoolbar
みたいに、ツールバーアイコンの右下にサブスクリプト(画像でいう「青い●に小さ
な文字」)みたいなのは
難しいでしょうか。

マクロ(というか非同期でのJS)でツールバーのアイコンの右下に被せるように●を配
置し、そこに数値か文字を書ける(MAX4文字とか?)

画像だと「エキスプローラー」の上に@、「gitマークの上にB」

これをマクロ(特にJSの非同期として)操作できるといいんではないかという気がして
います。

let sub:string = gettoolbar_subscript(273);   // ツールバーの273番命令に対応
するアイコンの右下のsubscript文字の取得

let success: bool = settoolbar_subscript(273, "55"); // ツールバーの273番命
令に対応するアイコンの右下に55という文字の設定

現状のままですと、ツールバーは単なる「起動ボタン」に過ぎないわけですが、
こそこに非同期で数値や文字をかぶせるだけで、
それぞれのツールバーのボタン(というかエリア)が「そのボタンに関係した簡易な
状況感知パネルとしても機能」します。
(極端な話、全く押さなくても「そこに表示してあるだけで価値があるボタンエリ
ア」になります)

画像の例だと、gitのアイコンのところに「3」と出ているので「あれ? コミット忘
れてる」と一瞬で感づきます。

このフォルダ以下のものはクラウドに上がってるものと「5つ違うよ」とかも出せま
すし。

なにか「フォーマットに沿っていない」あるいは「タグ抜け」などしている時に、ア
ウトプット枠に「エラーがある!」「エラーがある!」などと主著したら煩いだけで
すが、「フォーマッターボタン」みたいなのを用意しておいての右下に「E」などと
さりげなくでていたら、「あら?」と自然と気づくようにできますし。

[ ]
RE:11789 ツールバーのアイコンの右下に文No.11790
秀丸担当 さん 24/10/02 09:36
 
動的に変化させるのは先の段階になると思いますが、重ねた描画で、サイズや位置も
指定できたら、すごくいいと思います。
定義ファイルでツールバーデザインに相当する情報だけでなく、ツールバー詳細に相
当する配置の情報も一緒に書けたらいいです。
ご意見参考にさせていただきます。

[ ]
RE:11790 一時的ツールバーNo.11791
こみやんま さん 24/10/03 07:24
 
もうひとつ、おそらくいろんな人が共通でぼんやりと思ってると
思いますが、一時的ツールバーがJSから作れるとよいのではないかと。

イメージとしては、

https://github.com/komiyamma/suggestion-for-hmtoolbar/blob/main/additional_toolbar.png

「特定のファイルの拡張子」を開くと上画みたいになる感じです。

「小さな実行タスクの1つ1」つをマクロにしてしまっては、
マクロの登録枠がぐちゃぐちゃになってしまうので、
あくまでも FunctionID と 一時的ツールバーのボタンを繋げます。

jsmode @"WebView2\HmMarkdownAdditionalToolBar";

js {

// ファイルに対する「一時的な追加のツールバー」を定義
let additionalToolBarDifinition = {
    "label":"HmMarkdownAdditionalToolBar",  // 該当のツールバーには、一応識
別子を付けておく。
    "design":{"font":"HmMarkdownAdditionalToolBar","fontsize":16},
    "tbcmd": {

        // 実際にはfuncid=nullなどと書かなくてもよいが解説する上で存在をわか
りやすくするため
        "insert_table":{funcid=null "name":" ", "color":"#990000","a
lt":"テーブル挿入"},
        "format_table":{funcid=null, "name":" ", "color":"#333333","
alt":"テーブルフォーマット"},
        "insert_link":{funcid=null, "name":" ", "color":"#000099","a
lt":"リンク挿入"},
        "insert_image":{funcid=null, "name":" ", "color":"#000099","
alt":"イメージ挿入"},

    },
    "colors":{
        /*
        設計同じ
        */
    },
}

// funcid に JS関数を結びつける
additionalToolBarDifinition.tbcmd.insert_table.funcid = hidemaru.getFunction
Id(insert_table);
additionalToolBarDifinition.tbcmd.insert_table.funcid = hidemaru.getFunction
Id(insert_table);
additionalToolBarDifinition.tbcmd.insert_link.funcid = hidemaru.getFunctionI
d(insert_link);
additionalToolBarDifinition.tbcmd.insert_image.funcid = hidemaru.getFunction
Id(insert_image);


// hidemaru.makeAdditionalToolBar
let addToolBar = hidemaru.makeAdditionalToolBar(additionalToolBarDifinition);
addToolBar.show(); // 一時的なツールバーとして表示する。ファイルを閉じるとこ
の一時的なツールバーは自動で無くなる。

function insert_table() {
    insert("うにょにょ |aaa|bbb|\n ... とかとか");
}

function format_table() {
    let selectedText = hidemaru.getSelectedText();
    にょらうにょら
    insert(formattedText);
}

function insert_link() {
    let selectedText = hidemaru.getSelectedText();
    if (selectedText) {
        // クリックボードの中身に://が含まれていれば
        insert (`[{selectedText}](クリップボードテキスト)`;
    } else {
        insert (`[テキスト](https://リンク)`
    }
}

function insert_image() {
    // クリップボードが画素なら
    // ファイルを作成して、リンクを挿入
    // クリップボードが画像ファイルなら
    // このファイルのサブディレクトリにあるなら
    // そのまま相対リンクを挿入
    // それ以外なら
    // 画像ファイルをコピーしてファイルを作成し、リンクを挿入
}

}

ファイルが閉じられると、この追加の一時的パネルは自動的に消える感じです。
(よって基本的には、追加パネルを表示したい場合は、対象の拡張子に対する自動起
動マクロに含める、などパターン化するかと)

[ ]
RE:11791 一時的ツールバーNo.11792
秀丸担当 さん 24/10/03 15:45
 
常に動作しつづける系のマクロもあるので、そういうこともできたら便利かもしれま
せん。
現状ではレンダリング枠でやるのでもいいのではないかと思います。
ご意見参考にさせていただきます。

[ ]