症状

note公式の推奨サイズに合わせるつもりで、multipartの値は最初からこうしていました。

form.set('width', '1280');
form.set('height', '670');
form.set(
  'file',
  new Blob([image.buffer], { type: image.mimeType }),
  image.fileName
);

これで1280×670として扱われると思っていたのですが、実際のPNGは1733×907のまま。

表紙内の文字を左へ寄せたり、右側を余白にしたりしても改善しませんでした。

原因

width=1280 と height=670 をフォームに入れても、画像バイナリそのものが1280×670になるわけではありません。

note公式ヘルプでは、記事の見出し画像は1280×670pxが推奨されており、推奨サイズと異なる画像はトリミングされて表示されると案内されています。

切り分けとして、元の1733×907画像から左上1280×670を切り出して比較したところ、note上で見えていた見切れ方とかなり近い状態を再現できました。

修正

アップロード直前に、画像バイナリそのものを1280×670へ正規化するように変更しました。

async function uploadEyecatch(noteId, image) {
  const normalized = await normalizeNoteEyecatch(image);

  const form = new FormData();
  form.set('note_id', String(noteId));
  form.set('width', String(normalized.width));
  form.set('height', String(normalized.height));
  form.set(
    'file',
    new Blob([normalized.buffer], { type: normalized.mimeType }),
    normalized.fileName
  );

  // POST /v1/image_upload/note_eyecatch
}

自分の環境では追加依存を増やさず、PowerShellのSystem.Drawingでcontain相当のリサイズを行い、1280×670のPNGを生成しています。

ポイントは、フォーム上の寸法だけでなく、アップロードする実ファイルの寸法を確認することでした。

正規化後はPNGのIHDRを読み、1280×670でなければアップロード前に失敗させています。

const width = buffer.readUInt32BE(16);
const height = buffer.readUInt32BE(20);

if (width !== 1280 || height !== 670) {
  throw new Error(`unexpected eyecatch size: ${width}x${height}`);
}

検証

修正後は公開結果にも次の状態を記録するようにしました。

uploadedWidth: 1280
uploadedHeight: 670
normalizedForNote: true

さらにnoteが実際に配信している画像を取得して寸法を確認し、1280×670になっていることを確認しました。

それまで何度も構図を変えていたのですが、主因はレイアウトではなく、1733×907の画像を1280×670だと申告したまま送っていたことでした。

参考

note公式: 登録画像の推奨サイズ一覧
- https://www.help-note.com/hc/ja/articles/360000231642-%E7%99%BB%E9%8C%B2%E7%94%BB%E5%83%8F%E3%81%AE%E6%8E%A8%E5%A5%A8%E3%82%B5%E3%82%A4%E3%82%BA%E4%B8%80%E8%A6%A7
note-mcp-community
- https://github.com/new-village/note-mcp-community
drillan/note-mcp
- https://github.com/drillan/note-mcp

どちらのMCPもnote.comの非公式APIを利用する実装なので、内部APIの変更には注意が必要です。