Frost

作った理由

画像の一部を隠したいとき、その画像を外部サービスへアップロードすることに抵抗がありました。黒く塗りつぶす方法は、見た目が好みではありませんでした。そこで、指でなぞった部分を窓の霜のようにぼかして隠すツールを、端末内だけで処理する形で作りました。

技術的な判断

画像の処理はすべて端末内で行い、画像をネットワークに送信しません。Service Worker がキャッシュするのもアプリ本体だけで、画像はキャッシュしません。保存時に PNG へ再エンコードするため、元画像の EXIF や GPS 情報は保存後の画像に残りません。サーバーを持たないので、インフラの費用と管理も発生しません。

ランタイム依存はゼロで、加工処理は Canvas 2D API だけで実装しています。隠し方はモザイクと氷霜ガラスの2種類から選べます。粗さ・ぼかし・氷霜の強さ・ブラシサイズを調整できます。

画像の保存方法は環境ごとに分けました。iOS でホーム画面から起動した場合は <a download> によるダウンロードが安定しないため、Web Share API で保存します。Android とデスクトップでは直接ダウンロードします。

PWA としてインストールでき、オフラインでも動きます。自分の画像を使わずに動作を試せるよう、サンプル画像を1枚同梱しています。

技術スタック

言語

TypeScript

UI

Canvas 2D APICSS

外部API

Web Share API

ビルド・配布

Vitevite-plugin-pwaWorkbox

テスト・品質

Vitesthappy-domPrettierGitHub Actions

インフラ

Cloudflare Pages