デジタルな画像を「紙」にする：
ノイズ生成と日本語レイアウトの実装術

1. アナログな質感を再現する「プロシージャル・ノイズ」生成

デジタルのキャンバスに単色を塗るだけでは、清潔すぎて「新聞紙」には見えません。本ツールでは、背景を描画した直後に Math.random() を用いた数千回の微細なピクセル描画を重ねることで、紙の繊維感やインクのムラを再現しています。

暗いノイズと明るいノイズの2層構造にすることで、単なるグレーではなく、奥行きのある質感を生み出しています。画像アセットを使わないことで、読み込み時間をゼロにしつつ、どのような解像度でも劣化しないテクスチャを実現しました。

// 新聞紙の質感をシミュレートするノイズ生成ロジック
// 背景色を塗った後に実行
ctx.fillStyle = 'rgba(0,0,0, // 独自の透過度)';
for (let i = 0; i < // 独自の粒子数; i++) {
    // 座標とサイズをランダムに分散させて描画
    ctx.fillRect(Math.random() * CW, Math.random() * CH, // 粒子サイズ, // 粒子サイズ);
}

ctx.fillStyle = 'rgba(255,255,255, // 独自の透過度)';
for (let i = 0; i < // 独自の粒子数; i++) {
    ctx.fillRect(Math.random() * CW, Math.random() * CH, // 粒子サイズ, // 粒子サイズ);
}

2. 日本語特有の「1文字判定」による動的改行アルゴリズム

Canvasの fillText にはCSSのような自動改行機能がありません。特に新聞のような多段組みレイアウトでは、指定された幅（カラム幅）で正確に改行する必要があります。

本ツールでは、マルチバイト文字を1文字ずつ measureText でスキャンし、累積幅がカラム幅を超えた瞬間に Y座標 を更新して改行するロジックを実装しています。これにより、ユーザーが入力したどんなテキストでも、新聞の段組みの中に美しく収めることが可能です。

// 日本語の文字幅を考慮した自動改行ロジックの概要
function wrapText(context, text, x, y, maxWidth, lineHeight) {
    let characters = text.split('');
    let line = '';
    let currentY = y;

    for (let i = 0; i < characters.length; i++) {
        let testLine = line + characters[i];
        // 1文字追加した状態での幅を計測
        let metrics = context.measureText(testLine);
        
        if (metrics.width > maxWidth && i > 0) {
            // 幅を超えたら現在の行を描画して改行
            context.fillText(line, x, currentY);
            line = characters[i];
            currentY += lineHeight;
        } else {
            line = testLine;
        }
    }
    // 最後の行を描画
    context.fillText(line, x, currentY);
}

3. ルミナンス計算による「新聞写真」のエミュレーション

「新聞風」に見せるためには、写真のモノクロ化も重要です。単に彩度を下げるのではなく、人間の視覚特性（ルミナンス）に基づいた加重平均を用いてRGB値を計算することで、新聞のモノクロ印刷に近いコントラストを実現しています。

この処理は getImageData を通じてピクセル単位で直接実行されるため、ブラウザのフィルター機能に依存せず、すべての環境で均一な「号外」のクオリティを保証しています。

// ピクセル操作によるモノクロ変換
const imgData = ctx.getImageData(PHOTO_RECT.x, PHOTO_RECT.y, PHOTO_RECT.w, PHOTO_RECT.h);
const data = imgData.data;

for (let i = 0; i < data.length; i += 4) {
    // ここにルミナンス(輝度)の計算処理が入ります
    const luma = // ここにRGBA各色の加重平均アルゴリズムが入ります
    
    // RGBすべてに同じ値を割り当ててグレーに変換
    data[i] = data[i+1] = data[i+2] = luma;
}
ctx.putImageData(imgData, PHOTO_RECT.x, PHOTO_RECT.y);

Developer's Note

実装上の最大のこだわりは、Canvas描画の「レイヤー順序」です。

まず背景とノイズを描き、その上にユーザーの写真を載せ、最後に「新聞名のロゴ」や「罫線」を描画しています。実は写真の上にも薄い二重の罫線を重ねて描画することで、単に写真を貼り付けただけではない、「紙面に印刷されている」質感を表現しています。

また、Webフォントのロード待ちで描画が崩れないよう、document.fonts.ready を監視してフォントが完全に利用可能になってから最終的なレンダリングを行うように設計しました。フロントエンドの細かな気配りが、ツールを開いた瞬間の「おっ、新聞だ！」という驚きを生むと信じています。