背景を透明にしたいのにPhotoshopはないし、オンラインツールは画像をアップロードするのがなんとなく不安…。しかも白背景の白い被写体はどうやってもきれいに抜けない。そんな地味な困りごとを、ブラウザだけで完結する背景透過ツール「とうかねっこ」にまとめました。色でも領域でもきれいに透け、iPhoneのHEIC写真もそのまま読み込めます。どんなツールでどう使うのかを紹介します。

iPhoneで撮った写真をWebツールに読み込ませたら「この画像は開けません」——HEICあるあるですよね。サーバーに画像を送らず、ブラウザの中だけでHEICをPNGに変換したくて、heic-toというライブラリをWebAssemblyで動かしました。ライブラリ選定の理由、約3MBを必要なときだけ読む遅延読込、LGPLとの向き合い方、そして変換中トーストが消えるバグまで、自作ツールに組み込んだ実装の勘所をまとめます。

vite-plugin-pwaのautoUpdateは入れたのに、デプロイしても一部のユーザーに古い版が表示され続ける——その犯人はService WorkerではなくCDN/ブラウザのHTTPキャッシュでした。_headersで入口ファイルをno-cacheにする対策を、ケースA（Vite）/ケースB（素のHTML）の使い分けと検証手順まで解説します。

Webアプリに Ctrl+Z / Ctrl+Y の Undo・Redo を入れる方法を、自作の画像マスクサイトの実装をもとに解説します。Reactのkeydownイベントで操作を拾い、ops / redoStack という2本の履歴スタックで状態を巻き戻す設計、入力欄でのショートカット無効化やMac/Windows両対応のコツまで、実コード抜粋付きでまとめました。

OCR の精度改善を直感に頼らないために、F1 / CER / 4-gram recall でスコアを可視化する Vitest ベースのベンチマークを作る方法を紹介します。期待値 JSON・キャッシュ運用・バリアント A/B まで実践的にまとめました。

Tesseract.js の日本語 OCR で頻発するカタカナ混同やレイアウト誤認を、正規表現パターンと混同ペア配列で補正する実装を紹介します。1 変更 1 計測で回帰させない運用のコツもまとめています。

Fuse.js の threshold を単一の値で運用すると短いトークンで誤爆・長いトークンで取りこぼしが起きます。本記事ではトークン長に応じた段階的なしきい値、曖昧判定、長さ比キャップで精度を引き上げる実装を紹介します。

Tesseract.js の日本語 OCR 精度を底上げするための前処理を、ブラウザの Canvas API だけで実装する方法を紹介します。グレースケール・コントラスト伸長・Sauvola 適応二値化・明暗自動反転までの実装を丁寧に解説します。

Tesseract.jsで日本語OCRをブラウザ完結で動かす実装を、worker再利用とPSM.AUTO+PSM.SINGLE_BLOCKの二段階推論、進捗率の0〜100%正規化まで具体的なコード付きで紹介します。