もしもアフィリエイトを商品マスタ化した話｜MoshimoCatalog とおすすめグッズ一覧

もしもアフィリエイトを商品マスタ化した話｜MoshimoCatalog とおすすめグッズ一覧

ブログにアフィリエイトを載せるとき、もしものカード型リンク（MoshimoWidget）を使っています。

ただ運用していくうちに、「同じ商品を別記事でも出したい」「データが記事ごとに巨大なままコピペされている」「リンク切れに気づきにくい」というのが地味に気になってきました^^;

そこで今回、商品マスタを1か所にまとめて、記事からは ID だけ参照する形に変えました。あわせて、読者向けの公開ハブとして おすすめグッズ一覧 も作っています。

何がつらかったか

これまでの書き方は、だいたいこんな感じでした。

<MoshimoWidget
  data={{
    "n": "商品名がとても長い……",
    "eid": "xxxxx",
    // …画像URLや楽天・Yahooの検索リンクなどが続く
  }}
/>

動くには動くんですが、

• 同じ商品を2記事目に出すとき、またコピペになる
• Markdown が長くて読みにくい
• 商品が廃番になっても、どの記事に入っているか追いにくい

という状態でした。

「一覧ページを1つ用意して、そこをマスターにすればよくない？」というのが今回の発想です。

方針：マスタ JSON ＋ ID 参照 ＋ 公開一覧

構成はシンプルです。

1. data/moshimo/*.json に商品データを置く（もしもから出した JSON をほぼそのまま data に入れる）
2. 記事側は <MoshimoWidget id="thermos-jnl-s350" /> のように短く書く
3. <MoshimoCatalog /> でマスタ全件を並べた公開ハブを出す

従来の data={{...}} 直指定も残してあるので、まだマスタ化していない記事はそのままです。段階的に移せます。

マスタの中身

各ファイルはだいたいこんな形です。

{
  "id": "thermos-jnl-s350",
  "title": "サーモス 真空断熱ケータイマグ JNL-S350",
  "blurb": "タリーズのマイタンブラー割引で使用",
  "data": {
    "n": "……",
    "eid": "rCHfR",
    "u": { "u": "https://www.amazon.co.jp/dp/…" }
  }
}

• id: 記事から参照するキー
• title / blurb: おすすめグッズ一覧での見出し・一言コメント
• data: もしもカード本体（これまで記事に直書きしていたもの）

解決処理は lib/moshimo-catalog.ts にまとめて、id から該当 JSON を読むようにしています。

記事側はどう書くか

マスタに入れたあとの埋め込みは、これだけです。

<MoshimoWidget id="ergomaker-low-standing-desk-100" />

個別記事で「ふるさと納税で買った」「カット済みで便利」などの補足だけ小さく出したいときは、note / notePosition を使います（本文と同じ大きさで悪目立ちしにくいように、小さめ・薄い色で表示）。

<MoshimoWidget
  id="sofia-tach-pure-kitchen-paper-30"
  note={"こちらをふるさと納税で購入しました！\n最初からカットされているタイプなので、どこでも使いやすい！"}
  notePosition="above"
/>

• note: 補足テキスト（改行は \n）
• notePosition: above（省略時）または below
• ハブの <MoshimoCatalog /> 側は従来どおり（マスタの title / blurb）。個別記事の note はハブには出ません

実家の作業部屋記事では、昇降デスク・モニターアーム・補強プレート・マグネット電源タップをこの形で入れました。

→ 【実家リモートワーク】物置ソファを「低床電動昇降デスク」で神作業基地に覚醒させた話

おすすめグッズ一覧（公開ハブ）

管理用の非公開ページにはせず、読者にも見える一覧にしました。

記事の本文は短い導入＋これだけです。

<MoshimoCatalog />

MoshimoCatalog がマスタを全部読んで、タイトル・一言・カードを並べます。新しい JSON を足せば、一覧にも自動で増えます。

→ おすすめグッズ一覧｜実際に使っているアイテムまとめ

自分用には「マスタの中身を一画面で見る」「カード表示やリンクの異常に気づく」ための入口にもなります。Amazon の 404 を自動検知するところまではまだやっていないので、そこは次の課題です。

実装で気をつけた点

もしもの bundle.js は、ページ読み込み後に後から差し込むとキューが処理されない、というクセがあります。既存の MoshimoWidget では、読み込み後に DOMContentLoaded を自前で発火させて描画していました。

今回はそこを崩さないように、

• クライアント側の描画（MoshimoWidgetClient）
• サーバ側の ID 解決（MoshimoWidget / MoshimoCatalog）

に分けています。MDX から id だけ渡しても、解決した data をクライアントに渡して従来どおりカードが出ます。

これから

• まだ data={{...}} のままの記事を、よく使うものからマスタへ移す
• 必要ならカテゴリ分けや「この記事でも紹介」リンクを一覧に足す
• URL ヘルスチェック（リンク切れ検知）は別途検討

アフィリエイトは「貼って終わり」になりがちですが、サイト側の部品としてちゃんと持つと、記事も短くなるしメンテも楽になります。同じ悩みがある人の参考になれば(^^)

関連:

• おすすめグッズ一覧
• star-moti.com 改修ログまとめ