MdImgr
MdImgr
md用の画像管理ソフトが欲しい。 小回りの効くGUIユーティリティで実現した。
機能
あらかじめ以下の2つを設定すると
- 対象とするフォルダ
- テンプレート
以下のようなことをする。
- ドラッグアンドドロップされた画像ファイルを、指定したフォルダにタイムスタンプのファイル名でコピーして、url（後述）をクリップボードにコピー
- クリップボードにある画像をペーストすると、指定したフォルダにタイムスタンプのファイル名でコピーしてurlをクリップボードにコピー
テンプレートとURL
urlというのは、テンプレートの$1をファイル名で置換したもの。
例えば現在のフォルダの下にimgというフォルダを掘ってイメージを置くなら、テンプレートは以下になる。
また、jekyllでassets/imagesというディレクトリの下にポストの名前としてHogehogePostというディレクトリを掘って置きたいようなケース、つまり、以下のようなリンクを作りたければ
![images/HogehogePost/2025_0725_131953.png]({{"/assets/images/HogehogePost/2025_0725_131953.png" | absolute_url}})
これを生成するテンプレートはファイル名の所だけ $1 にした以下になる。
![images/HogehogePost/$1]({{"/assets/images/HogehogePost/$1" | absolute_url}})
何に使うアプリか
マークダウンに画像を貼るのに使う。MdImgrに画像を貼り付けて、そうして生成されたurlのリンクをマークダウンの方に貼り付ける。
こうした仕様の背景
マークダウンに画像を貼る場合、画像をどこに置くかがシチュエーションによって異なる。 マークダウン一つに付き一つのフォルダを掘る場合もあれば、画像用のassetフォルダが一つあっていろいろなマークダウンファイルからそこへのリンクを貼りたい、という場合、また、jekyllなどのブログの場合はliquidでフルパスを生成しないといけないケースもある。
そこで、どこのフォルダに生成するかとどういうリンクを作りたいかはユーザーが設定することにした。 また、マークダウンのビュワーはそれらに依存することになるのでこのアプリは関与しないことにして、 マークダウンのエディタやビュワーはユーザーのシチュエーションごとに選んでもらうことにし、 このアプリは画像をコピペしてリンクを返すだけのアプリ、という形にした。
目指した使い心地と使った感想
GitHubのissueやSlackなどに画像を貼っていくのは楽なのだが、mdに画像を入れた文書を作るのはどうもかったるい。 GitHubのissueに画像を貼るような手軽さでローカルのmdに画像を貼れる感じにしたい、というのが目指したもの。
しばらく使ってみた印象としては、かなりGitHub issueに画像を貼るのに近い感覚にはなっている気がする。 一旦MdImgrにAlt+Tabで移らなくてはいけないのはひと手間あるが、 使ってみるとそこまで気にはならない。 プレビューにはjekyll servしておいてVSCodeのSimple Browserを使って別のタブでやるようにした所、 かなり満足の行く環境になった。 エディタを作るのでは無くリンクを作るアプリにした、というのはなかなか良い選択だったと思う。
クリップボードの貼り付けと画像のdrag and dropの両方が同じ感覚で出来るのはかなり良い。 特にFireAlpacaの選択範囲のコピーを使ってクリップボード越しに画像を貼っていけるのは、 マスターのファイルをFireAlpacaで持っておいて貼りたい所だけを選択して貼って行けて、WYSWYGのmdエディタにペーストするよりもだいぶ小回りが効いて快適にできていると思う。
GitHubにドキュメントのmdファイルを置きたい時とjekyllのブログで画像を貼りたい時でフォルダ構成はかなり変わるが、全く同じ使い心地で書けるのも良い。 フォルダ構成を決め打ちしないでユーザーに任せる、というのはすごく良いアイデアだったと思っている。
開発時に考えたこと
要求
スクリーンショットや画像をたくさんいれたブログ記事を作りたい。 画像のリンクはjekyllなのでliquidにする必要がある。 だがgithubに直接mdファイルを置く場合もあり、その場合はリンクは相対リンクになる。
今回はマークダウンは普段通りVSCodeで書きたい。
解決策
ちょっとしたGUIアプリで、画像を管理するものを作りたい。 VSCodeにはクリップボード経由でリンクを手動で入れる感じで。
設定したフォルダに対してのギャラリー管理アプリのように振る舞いたい。
画像はドラッグアンドドロップすると追加される感じにしたい。 クリップボードからも追加出来るようにしつつ、画像ファイルをDnDで追加するケースもある（FireAlpacaとかで図を描く場合など）。
ファイル名とかは自分で決めたくない。タイムスタンプから適当に生成する感じで。
アプリは画像のリストを表示しておいて、それをタップするとリンクがクリップボードに入る感じにしたい。
開発日記
とりあえずWailsで作ってみようかな。Folangも使うか。 ファイル関連の処理はFolangで書き、それをapp.goから呼ぶ感じにしてみるか。
まずは指定フォルダに含まれる画像をリストで表示する所から始めよう。
設定の保存いろいろ
アプリの設定などを覚えるのってどうやるんだろう？ 用途を考えれば覚えなくてもいいか？
varlyとかいうwailsアプリを見ていると、以下みたいなコードがあって、
libdir, _ = os.UserConfigDir()
basedir = filepath.Join(libdir, "varlyapp")
docsdir = filepath.Join(basedir, "Documents")
このdocsdirに保存してそう。これは ~/Library/Application Support/varlyapp/ 下っぽいな。これで良さそう。
varlyapp-wails/app.go at master · ag-go/varlyapp-wails
settingsはこちらか。
varlyapp-wails/backend/services/settings.go at master · ag-go/varlyapp-wails
自分で作るのは面倒だな。iniファイルかなんかでいいから無いかな？あった。
localStorageを使っているアプリもあるな。
spirit/frontend/src/App.jsx at main · o8x/spirit
まぁこれでいいっちゃいい。
ローカルの画像表示
とりあえず指定されたディレクトリから画像ファイルのパスの一覧を作り、それをとりあえずはulとliで表示する所から始めるか。
何も考えずにimgにfileスキームで絶対パスを指定してみたら、AssetHandlerがそんなの知らん、と言ってきた。 ふむ、それはそうだな。
ではどうするのが良いんだろうか？以下から
wailsapp/awesome-wails: ⭐ A carefully selected list of Wails applications
似たようなアプリ無いかなぁ、といろいろ見ていたら、triangula-guiでbase64にして送っている。
triangula-gui/runner.go at main · rh12503/triangula-gui
まぁこれが良いか。
ドキュメントを読んでいたら以下を発見。こっちの方がいいか？
とりあえずimgタグでファイル名で目的のディレクトリの画像の表示は出来た。
指定したディレクトリの画像一覧の表示
とりあえずAppに目的のファイル名をlistするメソッドを作ってjsから呼んで表示してみよう。 出来た。 だいぶ慣れてきた。あとは必要なコードを作っていけるかな。
最初のドッグフードを目指す
とりあえずWailsでの開発がどういう感じかは理解出来たので、使い始める最低限を考えたい。
最初の目標
一番最初に使いたいのはMFGで、例えばメディアンフィルタの記事を書きたい、という感じなので、これで必要なものを考える。
とりあえずスクリーンショットがデスクトップにできて、それを追加していければまずは使える。 最低限は以下か。
- 画像のドラッグアンドドロップによる追加
- ドラッグアンドドロップのイベント処理
- 適当な名前でファイルをコピー
- リストを更新
- リンクのコピー
- クリップボードへのコピー
このくらいならそんな大変でも無いか。
実装完了
という事で半日くらい掛けて実装してみた。ほとんどWailsになれるための時間、という感じだが。 とりあえずこれで実際にブログを書いてみよう。
クリップボード対応
使ってみるとやはりスクリーンショットをコピペしたい、という事で、対応する。 wailsのAPIではテキストしか対応してないが、ブラウザ側のevent listenerではとれるようなので、 geminiに書いてもらって少し手直し。JS周りはgeminiは賢くていいね。
ボタンをアイコンに、delete実装
Google Fontsからsvgをダウンロードしてassets下に置く。
Material Symbols & Icons - Google Fonts
ライセンスはApache 2.0。リリース前にライセンス表記を足さなくては。
ちょっとミスった時に手でファイルを削除するのにも疲れてきたので削除を実装。 削除といいつつTrashディレクトリを掘ってそこに移動するだけ。 タイムスタンプでファイル名が出来るのでぶつかる心配はいらないのだった。
少し使っての感想
jekyllの原稿を直接書くと、ローカルで確認するためにはjekyllのサーバーを立ち上げなくてはいけないのがいまいちに思える。 画像のリンクだけliquidになるんだよなぁ。 なんかローカルでは適当なフォルダに書いて、それをコンバートする方がいいか？
諦めてjekyllを立ち上げる事に。かったるさはあるけれど、立ち上げてしまえばいい感じだな。
FireAlpacaは選択範囲をクリップボードにコピー、という機能がある事を知り、これと組み合わせてすごくいい感じに書ける。 おぉ、こういう機能が欲しかったんだ。自分でアプリを書く必要は無くなった。よしよし。
MdImgr、かなりいいな。パスが決め打ちなのを直して公開しよう。
PCに板タブをつなぐ事を受け入れれば、かなり理想に近いものになった。スクリーンショットと手書きの図を自由に混ぜられるのがいいね。
レポジトリ作成
とりあえずハードコードの所をgemini cliになおしてもらって公開。
karino2/MdImgr: Image manager for markdown
gemini cliは出来上がったものがいまいちだが、とりあえず目的は達成しているのでやっつけには良いね。 jekyllで使いたい場合は、テンプレートの所にたとえば以下みたいな感じにする。
![images/MFG_BasicShape/$1]({{"/assets/images/MFG_BasicShape/$1" | absolute_url}})
MFG_BasicShapeはお好みに合わせて。 $1 の所がファイル名に置換される。ドル記号のエスケープとかやってないのでそういうのが入るパターンは今の所書けない。
TeFWikiもインライン画像表示に対応
MdImgrがかなりいい感じなので、ここ（RandomThoughts）でも使いたいという事でTeFWikiのインライン画像を対応する（これはMdImgrの話ではないが）。
【書籍】魔法の人物ドローイングに描いた絵を貼れるようになった。画像のディレクトリも自分が考えた名前に出来て管理しやすく、いい感じだ。
複数のフォルダを切り替える機能がほしい
複数のページを行ったり来たりする時に、いちいちテンプレートとディレクトリの設定をやり直すのがかったるい。 この２つはセットだし、だいたいは過去のヒストリーに入っている量で十分だ。
という事で最近5回くらいを適当にlocal storageに保存してhistoryとして表示したい。
ヒストリー機能の実装 2025-08-24 (日)
複数ディレクトリの切り替えを実装する事にする。
Wailsはメニューのrecent周りの機能が結構しょぼいので、HTML側でダイアログを実装する事に。
とりあえず動いた。ダイアログなのはいまいち感もあるが、とりあえず動いたからこれでいいか。