[ 新規に投稿する ]

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

 よって、基本的に外部フォントを間借りする、というよりも、
 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 ツールバーのアイコンの右下に文字(subscript)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 ツールバーのアイコンの右下に文字(subscript)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","alt":"テーブル挿入"},
        "format_table":{funcid=null, "name":" ", "color":"#333333","alt":"テーブルフォーマット"},
        "insert_link":{funcid=null, "name":" ", "color":"#000099","alt":"リンク挿入"},
        "insert_image":{funcid=null, "name":" ", "color":"#000099","alt":"イメージ挿入"},

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

// funcid に JS関数を結びつける
additionalToolBarDifinition.tbcmd.insert_table.funcid = hidemaru.getFunctionId(insert_table);
additionalToolBarDifinition.tbcmd.insert_table.funcid = hidemaru.getFunctionId(insert_table);
additionalToolBarDifinition.tbcmd.insert_link.funcid = hidemaru.getFunctionId(insert_link);
additionalToolBarDifinition.tbcmd.insert_image.funcid = hidemaru.getFunctionId(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 [ コメントを投稿する ]
  常に動作しつづける系のマクロもあるので、そういうこともできたら便利かもしれません。
現状ではレンダリング枠でやるのでもいいのではないかと思います。
ご意見参考にさせていただきます。
[ ]

[ 新規に投稿する ]