ShareXの編集機能を、自分専用に作り直す。重すぎた1.0.0から毎日使えるAF-ImageEditor 1.3.0へ

以前、ShareXのイメージエディタを右クリックからすぐ開けるようにするツールを作りました。ShareXは軽く、スクリーンショットへの注釈も手早くできます。今も気に入っています。

ただ、使い続けるうちに気付いてしまいました。

AIとやり取りしながら作れば、自分が使う機能だけを持った画像エディタも作れるのではないか。

今回作ったのは、Windows用の画像注釈ソフト「AF-ImageEditor」です。同じ日のうちに1.0.0を作り、実際に触って文句を言い、1.3.0を日常使用する版として締めるところまで進みました。

※Codexは、コードの実装やテストをAIに任せられるOpenAIの開発ツールです。制作環境は準備編にまとめています。

完成した1.3.0です。上段はアイコンとラベルのツールバー、右上にSNAP・基準・表示・UIの設定をまとめています。文字を選択中のため、2段目にフォントとサイズの設定が出ています。

よく使う機能はそのままに、自分好みに仕上げる

ShareXのイメージエディタには、枠、矢印、文字、ぼかし、モザイク、クロップなど、スクリーンショットの説明に必要な機能がそろっています。

ただ、目指したのはShareXの完全な代わりではありません。撮影は、完成度の高いShareXに任せます。撮った画像や保存済みの画像へ注釈を入れるところを、自分の使い方に合わせて仕上げたいと考えました。

ShareXで普段よく使っている機能は、そのまま使えるようにします。最初に伝えたのは、前回のShareX編で使った編集機能と、次の操作です。

四角と丸。正方形と長方形、真円と楕円を書き分けられること。
クロップとリサイズ。

どちらも、ShareXのイメージエディタにもある操作です。

そのうえで、ShareXで物足りなかった点を、好みの機能として追加し、使い方を自分好みに寄せます。

四角の面取り（角丸）。
影と縁を指定できること。
リサイズは、長辺のサイズだけを指定し、短辺は縦横比から自動で決まる使い方を常用したい。

ShareXのリサイズにも再サンプリングの指定や縦横比の固定があり、目的自体は達成できます。ただ、私が普段したいのは「長辺を何pxにするか」だけを決めることです。AF-ImageEditorの「画像を縮小」では、幅か高さのどちらか一方だけを入力し、もう一方は元画像の縦横比から自動で計算するようにしました。縮小専用で、元より大きくはできません。

回転は入れませんでした。そこまで必要になったら、GIMPの出番です。

万能な画像編集ソフトではなく、日常的な画像注釈に必要な機能へ絞る。この方針は最後まで変えていません。

1.0.0は、ひと通りそろっていた。そして重かった

Codexが作った1.0.0は、.NET 9とWPFのWindows用ソフトです。文字、直線、矢印、四角、楕円、吹き出し、拡大鏡、モザイク、ぼかしの9種類の注釈を持ち、Undo/Redo、クロップ、縮小、コピー・貼り付け、PNG/JPEG保存までそろっていました。AF-ImageEditorでは、画像の上に重ねて描くこれらの要素を「注釈」と呼びます。この記事でも、その呼び方にそろえます。制作時の報告では、ビルドの警告・エラーはなく、自動検証42項目に合格しています。

1.0.0で注釈を試した画面です。操作が重く、思うように編集できなかったため、一通りの注釈は試せませんでした。試せたのは矢印、文字、拡大鏡、角丸の四角です。画像内の青い文字は、そのとき私が拡大鏡に書き込んだ感想です。選択中の緑の四角にある黄色い点が、角丸R専用のハンドルです。

拡大鏡は、カーソル付近を拡大して見る機能のつもりで頼みました。でき上がったのは、画像の一部を円の中に拡大して貼り付ける注釈でした。画像の中に書いたとおり、「拡大鏡それじゃなーい。だがこれもおもろいな」です。この機能は、そのまま残しました。

角丸の操作も、想像していたとおりでした。四角を選ぶと角丸R専用のハンドルが出て、直接ドラッグで丸みを変えられます。ここは合格です。

一方で、全体の操作が驚くほど重い。ツールを選ぶ、注釈を選ぶ、ドラッグする。そのたびに待たされます。外部チャットには、こう書いています。

3年前50万PCとは思えないほどだ。VPSリモート接続でフォトショ使ってる気分。

ほかにも、使ってみて気になる点がありました。

既存の矢印を選んでサイズを変えると、囲み枠が縦横に伸び縮みするだけ。引いた向きは変わらない。私がしたいのは、始点と終点の置き直しです。
吹き出しの尻尾が、作ったときの向きに固定されている。

間引く前に、何が重いのか調べさせる

Codexへの修正依頼では、見た目の変更を後回しにし、性能を最優先にしました。ただし、「処理を減らして軽くして」とは頼んでいません。

単純に処理を間引くのではなく、まずコードを調査して何が高頻度で実行され、何が再描画・再構築されているのか原因を特定してください。

調べてほしい候補として、不要な全体再描画、背景画像の再生成、右側の設定欄の再構築、ヒットテスト（クリックした位置にある注釈などを探す処理）の重さなどを挙げました。目標は、背景画像と数十～100程度の注釈で、ツール変更・選択・ドラッグが体感で即時になることです。

報告された主な原因は、操作のたびに画面全体の画像を作り直していたことと、描画やヒットテストのたびに、注釈の外側に描く縁を高精度で計算し直していたことでした。1.0.1では、注釈ごとに描画や形状を保持し、設定欄を作り直さずに使い回し、効果がかかる範囲だけを更新する形へ変わりました。

同じ100個の注釈を置いた1920×1080の画像で、1.0.0と1.0.1を比べた記録が残っています。

操作（中央値）	1.0.0	1.0.1
100個の注釈のヒットテスト	14,208.21 ms	0.03 ms
ツール切り替えと画面レイアウト	15.43 ms	8.41 ms

ヒットテストは、単純に割ると約47万倍の差です。外部チャットのAIは、これを「47万倍事件」と呼んでいました。数値は制作時の計測環境での記録です。すべての操作が47万倍速くなったという意味ではありません。

直線・矢印と吹き出しも、この版で直しました。直線・矢印は始点と終点を主体に扱い、それぞれのハンドルで長さ・角度・向きを直接変えられます。吹き出しは尻尾の先端を専用のハンドルで動かし、どこを指すかを自由に変えられるようになりました。

1.0.1で試した画面です。吹き出しの尻尾は、左上方向へ伸ばしています。画像内の赤い文字は、拡大鏡についての私の感想です。

こちらの評価は「今回はかなり改善してきた」でした。注釈を選ぶ操作も軽くなり、ようやく5pxのスナップ（位置を5px単位にそろえる機能）まで評価できました。スナップも、直線の変形も、吹き出しの向きの変更も良好です。

矢印を1本描いたあと、どうするか

軽くなると、次の不満が見えてきます。

一つは、上部の設定欄の高さです。選んだツールや注釈によって設定項目の数が変わり、欄の高さが突然変わります。特に文字は設定が多いため、文字を選ぶと欄が広がり、画像が下へずれます。これが頻繁に起きるのは厄介でした。

もう一つは、描画ツールの扱いです。矢印ツールで1本引き、すぐに始点や終点を直そうとすると、矢印ツールのままなので2本目を描いてしまいます。直すには、いったん選択ツールへ切り替える必要があります。

外部チャットでは、いくつかの案を並べて考えました。

1本描いたら、自動で選択ツールへ戻す。
既存の注釈の上なら選択、何もない場所なら新規作成と、ソフトが判断する。
Adobe系のソフトのように、キーを押している間だけ一時的に選択にする。

どれにも一長一短があります。そのとき書いたのが、次の一言でした。

正解はない。ただ俺にフィットしたものならば正解はあるはず

私が選んだのは、3つ目です。描画ツールは1本描いたあとも維持し、Ctrlキーを押している間だけ選択ツールと同じ動作にします。Ctrlを離せば、元の描画ツールへ戻ります。Escキーでは描画ツールを終え、通常の選択ツールに戻します。

Codexへの依頼では、2つ目の案を明確に外しました。

アプリ側がクリック位置から「新規描画か既存オブジェクト選択か」を自動推測する仕様にはしないでください。描画と選択の意図はユーザー操作で明確に分離します。

上部の設定欄は、最も項目が多い状態に合わせて高さを固定し、項目が少ないときは余白として残す指示にしました。この2点を反映したのが1.1.0です。制作時の報告では、自動検証は148項目に増えています。

吹き出しの枠が、本体と合っていない

1.1.0を触っていて、吹き出しを選択したときの枠がおかしいことに気付きました。

1.1.0で吹き出しを選択した画面です。点線の選択枠が、吹き出し本体の下側まで広がっています。

私は、作成時のデフォルトの大きさで枠が決まってしまい、その後更新されていないのだろうと推測していました。サイズを変えても、選択を解除して選び直しても、枠が変わらなかったからです。

ただ、Codexへの依頼では、推測した原因をそのまま直させるのではなく、選択枠が何を元に計算・保持されているのかを調べるよう頼みました。選択枠の再描画漏れとして表面だけ直すことも避けています。同じ問題が四角、楕円、文字などにないかも、あわせて確認してもらいました。

分かった原因は、私の推測とは違いました。選択枠は、吹き出しが注釈として持っている範囲の全体を使っているのに、吹き出しの本体はその高さの78%で描かれていた、という不一致です。作成時の大きさを覚えていたわけではありませんでした。

1.1.1では、本体の描画、選択枠、サイズ変更の基準を、現在の本体の範囲に統一しました。尻尾とその先端は、本体の範囲の計算から外しています。

線の上に文字を置きたい。背景は透明のまま

次の注文は、自分でも無茶だと分かっていました。

矢印の途中に文字を置きたい。PowerPointで作ると、こうなります。

PowerPointで作った例です。矢印の上に白い背景の文字を重ねると、背景が白ならきれいに見えます。右のように下に図形や写真があると、白い四角が浮いてしまいます。

白い背景なら、文字に白い背景を付けて矢印の上に重ねれば終わりです。でも写真の上では、白い四角が目立ちます。欲しいのは、矢印だけが文字の部分で途切れて、背景は透けて見える状態です。

外部チャットには「超難問」「無茶言ってる自覚はある」と書いています。

1.2.0では、直線と矢印に文字（線ラベル）を付けられるようになりました。ラベルの背景は透明で、そのラベルを持つ線の本体・縁・影だけに隙間を作ります。ほかの注釈や背景画像は消しません。ラベルの位置は、始点を0、終点を1として指定し、端点を動かしても追従します。

同じ1.2.0で、四角・楕円・吹き出しの中にも文字を入れられるようになりました。

まとめて動かしたいだけのときと、グループにしたいとき

1.2.0では、複数の注釈を扱う操作も入りました。

Ctrlを押しながら注釈をクリックすると、複数を選択できます。その状態でドラッグすれば、まとめて移動できます。移動後に選択を解除すれば、個別の注釈に戻ります。私の感覚では、これは「仮のグループ」です。

この先もまとめて動かす可能性があるときだけ、「グループ化」を使います。グループは一体で選択・移動され、個別に編集するには「解除」が必要です。

1.2.0で四角と円を複数選択した画面です。右側の設定欄には、まとめて移動できることと、個別編集はグループ解除後に行うことだけが表示されています。

では、仮のグループとグループ化は何が違うのか。当時の1.2.0では、複数を選択した時点で右側の設定欄がこの表示になり、個別の設定ができませんでした。1.3.0では、グループに属していない注釈を複数選択した場合、共通する設定を右側で一括変更できるようにしています。値が異なる項目は「混在」と表示し、一括変更は1回のUndoで戻せます。

上の画面では、上部の設定欄が高さ固定になった結果、何もない余白が大きく残っています。指示どおりではあるものの、ちょっと間が抜けて見えます。

文字ツールを選んだときの1.2.0です。上部にフォント、サイズ、太字、揃え、行間の設定が表示されます。文字以外では、この2段分が空白になります。

外部チャットでは、非表示ではなく非活性（表示したまま操作できない状態）にするかを考えました。上部に置くべき個別の設定が、将来ほかのツールで出てくる可能性もあります。記事の時点では、ここに結論は出していません。

1.3.0で、見た目と入口も整える

1.3.0では、次の変更が入りました。

ツールバーを「アイコン＋ラベル」「アイコンのみ」「ラベルのみ」の3つの表示から選べるようにし、設定を保存する。
SNAP、基準、表示（全体／100%）、UIの設定を上段の右側にまとめる。
注釈の上、選択中の本体、サイズ変更ハンドル、端点などに応じてマウスカーソルの形を変える。
複数選択した注釈の共通設定を一括で変更する。
専用アイコンを用意し、Windows 11のモダンコンテキストメニューに「AF-ImageEditorで編集」を追加する。

右クリックメニューに追加したのは、ShareX編と同じくWindows 11の最初のメニューです。PNG、JPG、JPEGを右クリックすると、専用アイコン付きで表示されます。

そして、ここで思わぬ副産物がありました。名前がAFで始まるので、メニューの上のほうに並びます。辞書順の有利が働きました。

外部チャットのAIは、アイコンで瞬時に見分け、ラベルで答え合わせできる形になったと評価していました。私の印象も、最初の「業務用の社内ツール」のような見た目から、かなりモダンな感じになった、です。

中でも好感度が高いのは、ツールバーの表示を「アイコン＋ラベル」から選べるようになったところです。アイコンだけでは、慣れるまで何のボタンか迷います。ラベルが残っているので、アイコン当てゲームになりません。

最終版の1.3.0で、食玩のグフの写真に注釈を入れた画面です。上段右のUI設定は「アイコン＋ラベル」です。選択中の吹き出しは、塗りの不透明度を「中 50%」にしており、下の写真が透けて見えます。右上の円は、1.0.0で「それじゃなーい」と言った拡大鏡です。なにげに気に入っています。

塗りと縁の不透明度は、1.0.0から「薄 25%」「中 50%」「濃 75%」「実 100%」の4段階で指定できました。ただ、これまでの試用では、ほとんど使っていませんでした。最終版の画面を撮るにあたって、ようやく通して使ってみた機能です。

制作時の報告では、1.3.0のReleaseビルドは警告・エラー0、自動検証は294項目に合格しています。100個の注釈を置いた状態のドラッグ入力処理の中央値は0.136msでした。

機能追加をやめて、使って文句を貯める

しばらく触ったところで、次は日々の使用で不満点を洗い出す段階に入っていいと判断しました。

外部チャットのAIも、新しい機能を探しに行くのではなく、使っているうちにAF-ImageEditorではなく別のソフトを起動した瞬間を捕まえよう、と提案しました。GIMPが必要な作業なら仕方ない。AF-ImageEditorに足りない機能があってShareXを開いたなら、次の改修候補。できるのに癖でShareXを開いたなら、慣れの問題。この切り分けで、本当に必要な次の仕様が出てくるはずです。

そこで、1.3.0をリリースビルドにしてGitHubへ公開する指示を作ってもらいました。

最初にAIが出してきた指示は、ビルドの確認項目、バージョン、成果物の出力先、.gitignoreの整理、GitHubのリポジトリ作成、タグ、GitHub Releaseまで、細かく書き込んだものでした。

ここで、いったん止めました。

リリースビルドの作り方、GitHubの運用、配布用ZIPの配置などは、私の個人開発の共通ルールとしてCodex側に永続化してあります。指示の中でもう一度ルールを定義すると、共通ルールと二重管理になります。共通ルールを変えたときに、この指示だけ古い内容に引きずられるおそれもあります。

修正後の指示は、ルールの中身を書かずに、既存のルールを読んで従うよう求める形にしました。

この指示内で新しいルールを定義しないでください。既に永続化されている個人開発共通ルールを確認し、AF-ImageEditorにもそのルールをそのまま適用してください。

新機能の追加、UIの再設計、次バージョンの開発も禁止しています。現在良好に動いている1.3.0を、既存のルールどおりに締めることだけを頼みました。

結果として、1.3.0は共通ルールに従ってGitHubで公開し、配布用ZIPをDistributionに置いています。最初の案にあったタグとGitHub Releaseは、既存の運用にないため作っていません。最終確認では、JPG・JPEG・PNGを右クリックメニューから開けることも確認しています。

ソース一式と最新バイナリー

Windows 11 x64と、.NET 9 Windows Desktop Runtime（x64）が必要です。ZIPをすべて展開し、AF-ImageEditor.exeを起動してください。画像ファイルは「開く」のほか、ウィンドウへのドロップでも開けます。

右クリックメニューを使わなくても、通常の起動には登録は不要です。右クリックメニューは開発用の登録方式をZIPに同梱しており、開発用の登録が許可された環境で登録スクリプトを実行して使います。署名済みのインストーラーは含みません。詳しくは、ZIP内の「README-ja.txt」と、ソース一式の「ShellIntegration/README.md」をご覧ください。