Canvasで実現する「プロ風」デザインの自動化とリソース最適化

1. モバイル安定化のためのプリ・リサイジング・ハック

高画質なカメラで撮影された写真は、1枚で数十MB、解像度が5000pxを超えることも珍しくありません。これらをそのままCanvasで処理しようとすると、特にiOSのブラウザではメモリ不足でクラッシュしてしまいます。本ツールでは、編集開始前に隠しCanvasを用いて「品質を維持できる限界の解像度」へダウンサンプリングを行っています。

メリット: 編集中のレスポンス（FPS）が劇的に向上し、低スペックなデバイスでも動作が安定します。また、最終的な書き出し速度も最適化されます。

// 読み込み時に解像度をチェックし、必要に応じてリサイズ
const LIMIT_RESOLUTION = // 独自のしきい値;

if (img.width > LIMIT_RESOLUTION || img.height > LIMIT_RESOLUTION) {
    const scale = LIMIT_RESOLUTION / Math.max(img.width, img.height);
    const w = Math.floor(img.width * scale);
    const h = Math.floor(img.height * scale);
    
    // ここで一時的なCanvasを作成し、drawImageで縮小
    // 縮小したデータをBase64化して再度Imageオブジェクトとして扱う
    // 独自のチューニング値を用いた高品質な再サンプリング
}

2. 動的タイポグラフィ：多行テキストの中央揃えアルゴリズム

ユーザーが入力したタイトルを単に中央に描画するだけでは、改行が含まれた際にバランスが崩れます。本ツールでは、テキストを配列化し、フォントサイズと行間、さらには任意で入力されるサブタイトルの領域をすべて合算した「仮想的なバウンディングボックス」を計算してから描画を開始します。

メリット: 何行になっても、サブタイトルがあってもなくても、常にアイキャッチの中央にプロ風のレイアウトで配置されます。

// テキスト配置のコアロジック（概要）
const lines = textMain.split('\n');
const totalHeight = // ここで(行数 * 行間) + サブタイトル領域を計算;

// 描画開始のY座標を算出
let currentY = (canvas.height / 2) - (totalHeight / 2) + (fontSize / 2);

lines.forEach(line => {
    // 1行ずつtextAlign='center'で描画
    ctx.fillText(line, canvas.width / 2, currentY);
    currentY += // 行間の計算処理;
});

// サブタイトルが存在する場合は、メインテキストの末尾に追従
if (hasSub) {
    // 背景の角丸ボックスを描画し、その上に文字を載せる
}

3. iPhoneユーザーに寄り添うHEIC変換とUX

ブラウザが標準でサポートしていないHEIC形式を、Web Workerや外部APIを使わずに、必要な時だけライブラリを動的インポート（Dynamic Import）して処理します。

メリット: 初期ロード時のJSサイズを最小限に抑えつつ、iPhoneで撮った写真をそのまま加工したいというユーザーのニーズを、プライバシーを損なうことなく（サーバーに送らずに）満たせます。

async function processImageFile(file: File) {
    if (file.name.toLowerCase().endsWith('.heic')) {
        // HEIC変換が必要な時だけモジュールをロード
        const { default: heic2any } = await import('heic2any');
        
        const blob = await heic2any({
            blob: file,
            toType: "image/jpeg",
            quality: // 独自のチューニング値
        });
        return blob;
    }
    return file;
}

Developer's Note

このツールの開発で一番こだわったのは、「迷わせないこと」です。高機能な画像編集アプリは世の中にたくさんありますが、ブロガーが必要としているのは「10秒でそれっぽくなる」体験です。

そのため、フォントはあえて「sans-serif（システムの極太フォント）」に固定し、視認性を担保するためのドロップシャドウや黒フィルターの透過度などは、何百パターンもの検証から導き出した「黄金比」をハードコーディングしています。

また、iPhoneでの画像保存がブラウザの仕様で制限されやすい点については、プログラム的な解決が難しいため、「長押し保存」を促す専用のモーダルを用意するなど、フロントエンドエンジニアとして泥臭いUX改善も積み重ねています。