お盆ですね。みなさんいかがお過ごしですか？（挨拶）

ブログや SNS に貼るとき、issue に添付するとき、家族に写真を送るとき、
「複数の画像を 1 枚にまとめたい」という場面が稀にあります。いわゆるコラージュです。

簡単なコラージュ作成なら Adobe Express コラージュメーカー でも出来るんですが、イマイチ希望通りにならなくて、つい作ってしまったのが bildgluo です。

その bildgluo の紹介を目的に据えつつ、その他の方法にも触れます。

ImageMagick でコラージュを作る

ImageMagick には magick montage（IM6 なら単体の montage）というコマンドがあって、これがまさにコラージュを作るためのものです。

magick montage *.jpg -tile 3x -geometry 400x400+8+8 -background white out.png

これだけで、それっぽいグリッドが出来上がります。ただ、縦横比がバラバラの画像だとセルの中で余白がまちまちになるので、
「正方形に切り抜いて敷き詰めたい」なら -resize に ^ を付けて -extent で切り抜き、-geometry は余白だけにします。

magick montage *.jpg -resize 400x400^ -gravity center -extent 400x400 -tile 3x -geometry +8+8 -background white out.png

400x400^ は「400x400 を覆うように縮小（はみ出す側は切らない）」で、その後 -extent で中央から 400x400 に切り抜く、という意味です。
（-geometry 400x400^+8+8 と書きたくなるんですが、montage では -extent が -geometry の縮小より先に適用されてしまい、元のサイズのまま中央 400x400 を切り抜くだけになります）

「上に大きく 1 枚、下に小さく 2 枚」みたいな変形レイアウトは montage だと無理なので、素の magick で +smush / -smush（隙間付きの append）を組み合わせて自力で組みます。

magick \( 1.jpg -resize 816x400^ -gravity center -extent 816x400 \) \
  \( 2.jpg 3.jpg -resize 400x400^ -gravity center -extent 400x400 -background white +smush 16 \) \
  -background white -smush 16 -bordercolor white -border 16 out.png

出来ることは出来るんですが、

なので、試行錯誤に向いてないんですよね。
あと前にも書きましたが、コマンドを覚えておくのが難しい。。

（余談：Homebrew の ImageMagick だと montage: unable to read font というエラーが出ることがありますが、ラベルを描かないなら無視して大丈夫でした。出力はちゃんとできてます）

Adobe Express コラージュメーカー

じゃあ GUI で、ということで Adobe Express コラージュメーカー を使うかーってなるんですが。無料だし。Adobe だし。

これは Adobe Express の「クイックアクション」というやつで、画像をアップロードすると勝手にコラージュにしてくれて、
「レイアウトをシャッフル」ボタンで別の並びに切り替えたり、余白の調整やトリミング、画像の入れ替えをして、ダウンロード。という流れです。
テンプレートを探さなくていいぶん、フルのエディタよりは断然手軽です。

ただ、私の用途だと不満が結構ありまして、

要するに、Adobe Express は「それっぽいものをサッと作る」には良いんですが、私が欲しかったのは「並べ方を自分で決めて 1 枚にするだけのツール」だった、というミスマッチです。

bildgluo

というわけで作りました。TypeScript + Vite で、実行時の依存ライブラリはなし。描画は Canvas API で、ダウンロードも Canvas.toBlob() で書き出したものをそのまま保存しているだけ。

https://content.yosiopp.net/app/bildgluo/index.html

名前はエスペラント語の bildo（画像）+ gluo（接着剤）です。

画像はサーバに送りません

すべてブラウザ内で処理して、ダウンロードまでブラウザで完結します。
ログインも不要なので、開いて画像をドロップするだけです。クリップボードからのペーストも効くので、スクショを撮って Cmd+V でも OK。

レイアウトはグリッド / メイソンリー / カスタム

グリッド（列数とセルの縦横比を指定）とメイソンリー（縦横比そのまま詰める）に加えて、
カスタムレイアウトを CSS の grid-template と同じ書き方で指定できるようにしました。

"a a" 2fr
"b c" 1fr
/ 7fr 3fr

これで「上に 1 枚、下に 2 枚、上下は 2:1、下段は左 7 : 右 3」になります。
さっき ImageMagick でサイズを手計算してたやつが、テキスト 3 行です。

配置 テンプレート
上 1 枚 + 下 2 枚 "a a" "b c"
左 1 枚 + 右 2 枚 "a b" "a c"
大 1 枚 + 小 5 枚 "a a b" "a a c" "d e f"

枠より画像が多ければテンプレートが下に繰り返されるので、「大 1 枚 + 小 5 枚」で 12 枚放り込めば 2 セット分になります。

並べ替え・余白・角丸・背景

サムネイルのドラッグか ↑↓ ボタンで並べ替え、シャッフルもあります。
余白・角丸・背景色はスライダーで、PNG / WebP なら透明背景も可。プレビューは即時反映なので、ImageMagick で辛かった試行錯誤がサクサクできます。

出力サイズと形式は自由

横幅（100〜8000px）を指定して PNG / JPEG / WebP でダウンロード。縦幅も指定でき、その場合は収まらない分を縮小して中央配置します。
Adobe Express で不満だった「サイズ変えたいのに変えられない」問題はここで解消です。

設定は URL に乗る

変更した設定はクエリストリングに反映されるので、

?layout=masonry&cols=4&gap=8&bg=000000

みたいな URL をブックマークしておけば、次回はそれを開くだけでいつもの設定になります。
「このレイアウトで作って」を URL で人に渡すこともできます。

なんだかんだ、私のが使いたい機能は実現できてるので、それなりにいい感じなんじゃないでしょうか。 ☺️

というわけで、bildgluo 使ってみてね〜〜〜〜〜〜！

参考