吹き出しエディタをリリースしました

2026-01-31

画像にマンガ風の吹き出しを追加できるWebアプリ「吹き出しエディタ」をリリースしました。

どんなアプリ？

写真やイラストに、マンガのような吹き出しやセリフを追加できるツールです。

使える吹き出しは4種類。

縦書き対応なので、日本のマンガらしい雰囲気が出せます。フォントも11種類から選べます。

スマートフォンでもPCでも、ブラウザさえあれば使えます。

画像はサーバに送信されません

「画像をアップロードするの？」と心配される方もいるかもしれません。

画像は一切サーバに送信されません。

プライバシーを気にせず使っていただけます。

というのはタテマエで、サーバに保存するアクションがあると外部からのデータ流入になると、セキュリティ考慮が格段にハネあがるのです。画像になにか仕込まれてないかとか、入力フォームの値によってサーバ侵入のセキュリティホールとか、いろいろめんどくさいことがいっぱいでてくるので、保存しないようにしております。

最近のブラウザ事情ってすごいね。画像もブラウザ側で作れるから、サーバにデータ入力、imagemagickとかpillowとかで編集、クライアントへ返却なんていうのもする必要がないのがががが。

開発で苦労した点

せっかくなので、開発の裏話を少し。

プレビューと保存画像が違う問題

編集中の見た目と、保存した画像で吹き出しの形が微妙に違う...という現象に悩まされました。

原因は、画面表示（SVG）と画像保存（Canvas）で描画方法が違うこと。特に吹き出しの「しっぽ」の太さが変わってしまう問題は、計算式を何度も修正してようやく解決しました。

ああ、Web画像エディタって結構安直に考えつくんだけど、これが意外にワナ。domの概念とcanvasの概念がそれぞれ違うためにそれを合わせるための処理がとてつもなく時間がかかっていたりする。これ、最初からネイティブアプリで作ったほうがラクじゃね？なんていうのも作ってて後半からそう思い始めたりして。

PC・スマホ対応が想像以上に大変

PCで動いたからスマホでも動くだろう...と思っていたら甘かった。

• リサイズ用のハンドル（小さい四角）が指でタップできない
• 画面サイズが違うと吹き出しの大きさがおかしくなる

これもdomの概念とcanvasの概念が異なるため、吹き出しの形がサイズによってまるで変ってしまう。画像サイズとディスプレイサイズ、レティナ倍率と全部座標が異なるため、それを計算で合わせようとするとどーーーしても微妙に合わない。結局最後は画像サイズは100%。最終的にはズーム機能を捨てました。キョムリ。

縦書きの「！」が横になる

地味に厄介だったのがこれ。

縦書きで「！」や「？」を入力すると、保存した画像では横向きになってしまう。原因を調べたら、文字の回転処理で「！」を回転対象に含めてしまっていました。

回転が必要な文字（ー、〜など）と、そのまま描画すべき文字（！、？など）を細かく分類して解決。このご時世でも「文字」によって逐次処理しなきゃならんとか(@_@)

使ってみてください

というわけで、「こんなん簡単につくれるやろ。さささって作ったろ」と思った割には結構ラクはできなかったですね。この歳になって、2日徹夜するのはさすがにやばい。いや、差し迫ったわけではないんだけど、コーディングが『のる』と寝食忘れるというか...(笑)

>> 吹き出しエディタを使ってみる