feature: バナーを複数設定できるように変更

[nakanohiroko]

変更箇所

• バナー用のエンドポイントをbanner → bannersに
• 繰り返しフィールドで複数設定できるように
• 代替テキスト用のフィールドは削除し、画像に設定する形に

Summary by CodeRabbit

リリースノート

• ドキュメンテーション

  • バナーAPIのエンドポイントおよびカスタムフィールド情報を更新しました

• 新機能

  • 複数バナーの表示に対応する新しいバナー表示機能を実装しました

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

✅ Deploy Preview for blog-microcms ready!

Name	Link
🔨 Latest commit	8d4ba80
🔍 Latest deploy log	https://app.netlify.com/projects/blog-microcms/deploys/69202c450a1f9d0008c44320
😎 Deploy Preview	https://deploy-preview-183--blog-microcms.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

概要

シングルバナーコンポーネント（Banner.vue）を複数バナー対応のコンポーネント（Banners.vue）に置き換え、関連するAPI エンドポイント、データペイロード、ページコンポーネントの参照を一括更新する統一的なリファクタリング。

変更内容

コホート / ファイル(複数)	変更の概要
コンポーネント置き換え components/Banner.vue, components/Banners.vue	Banner コンポーネントを削除し、複数バナーの配列・オブジェクトをサポートする新しい Banners コンポーネントで置き換え。正規化ロジックで配列またはオブジェクト形式の両方に対応。
マイCMS エンドポイント更新 nuxt.config.js	バナーデータ取得エンドポイントを 'banner' から 'banners' に更新。すべてのルート生成フローでペイロードキーを banner から banners に統一。
ページコンポーネント更新（テンプレート・データ） pages/_slug/index.vue, pages/author/_authorId.vue, pages/draft/index.vue, pages/index.vue, pages/search/index.vue	各ページで Banner コンポーネントを Banners に置き換え、プロパティ :banner を :banners に更新。asyncData でエンドポイントを 'banner' から 'banners' に、ペイロード参照を payload.banner から payload.banners に変更。返却データ構造も対応。
ドキュメント更新 README.md	バナーエンドポイント表記を banner から banners に修正。フィールド定義表に繰り返し型カスタムフィールド cf_banner の説明を追加し、alt フィールドを削除。

推定レビュー難度

🎯 2 (シンプル) | ⏱️ ~12 分

レビューのポイント：

• 全ての変更が一貫した命名規則更新パターン（banner → banners）に従っており、同じロジックが複数ファイルで繰り返されている
• Banners.vue コンポーネントの正規化ロジック（配列・オブジェクト両対応）の動作確認
• ページコンポーネント間でのエンドポイント・ペイロード参照の一貫性確認
• Banners コンポーネントがレガシー Banner コンポーネントの全機能（遅延読み込み、WebP サポート、レスポンシブ対応）を引き継いでいるか確認

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	プルリクエストのタイトルは、バナーを単数から複数に変更するという主要な変更を明確に要約しており、変更セット全体の中心的な意図を正確に反映しています。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/multiple-banners

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

components/Banners.vue (1)

57-60: 未使用の必須プロパティ id について

id プロパティが必須として定義されていますが、コンポーネント内で使用されていません。このプロパティが将来の実装で必要ない場合は、required: false に変更するか、実際に使用することを検討してください。

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9953102 and 8d4ba80.

📒 Files selected for processing (9)

• README.md (1 hunks)
• components/Banner.vue (0 hunks)
• components/Banners.vue (1 hunks)
• nuxt.config.js (6 hunks)
• pages/_slug/index.vue (3 hunks)
• pages/author/_authorId.vue (3 hunks)
• pages/draft/index.vue (2 hunks)
• pages/index.vue (3 hunks)
• pages/search/index.vue (3 hunks)

💤 Files with no reviewable changes (1)

• components/Banner.vue

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: Redirect rules
• GitHub Check: Header rules
• GitHub Check: Pages changed

🔇 Additional comments (10)

README.md (1)

116-131: ドキュメント更新が適切に反映されています

バナー関連のAPIスキーマ設定が正しく更新されています。エンドポイント名の変更、繰り返しフィールドへの移行、カスタムフィールド定義が明確に記載されており、PRの目的と一致しています。

nuxt.config.js (1)

217-219: エンドポイントとペイロードの更新が一貫しています

banner から banners への変更が、データ取得とすべてのルート生成のペイロードで一貫して適用されています。

Also applies to: 245-245, 256-256, 270-270, 277-277, 305-305, 338-338

pages/draft/index.vue (1)

78-78: 下書きページの更新が適切です

コンポーネント使用、データ取得、プロパティバインディングが新しい Banners コンポーネントとエンドポイントに正しく更新されています。

Also applies to: 107-109, 116-116

pages/_slug/index.vue (1)

84-84: 記事詳細ページの更新が完了しています

テンプレート、データ取得ロジック、戻り値が新しい banners 構造に統一されています。

Also applies to: 118-123, 185-185

pages/search/index.vue (1)

80-80: 検索ページの更新が一貫しています

Banners コンポーネントの使用とデータフローが他のページと同じパターンで実装されています。

Also applies to: 104-109, 124-124

pages/author/_authorId.vue (1)

91-91: 著者ページの更新が適切です

著者ページにおいても、Banners コンポーネントとエンドポイントの変更が正しく反映されています。

Also applies to: 118-123, 159-159

pages/index.vue (1)

60-60: トップページの更新が完了しています

トップページのバナー統合が新しい Banners システムに正しく移行されています。

Also applies to: 94-99, 141-141

components/Banners.vue (3)

3-45: キー属性の安定性について確認してください

バナーのキーとして banner.id || idx を使用していますが、banner.id が存在しない場合、バナーの順序が変更されるとVueの再レンダリングで問題が発生する可能性があります。可能であれば、microCMSのAPIレスポンスに一意なIDが含まれることを確認するか、バナー設定時に一意なIDを付与することを推奨します。

---

62-70: 正規化ロジックがAPIレスポンス構造に依存しています

normalizedBanners の実装では、this.banners.banner という特定の構造を想定していますが、これはREADMEに記載されているAPIスキーマ（banners エンドポイントが banner フィールドを持つオブジェクトを返す）と一致しているようです。ただし、将来的にAPI構造が変更された場合に備えて、この依存関係を認識しておくことが重要です。

---

1-90: 新しい Banners コンポーネントが適切に実装されています

複数バナーのレンダリング、配列/オブジェクトの正規化、条件付きリンク、lazyload対応が実装されており、PRの目的を満たしています。画像のalt属性も適切に処理されています。