楽天商品カードテスト
楽天商品カードの3つの指定方法（URL、itemCode、keyword）をテストする記事です
楽天商品カードテスト
この記事は、楽天商品カードシステムの動作確認用テスト記事です。
テスト内容
以下の3つの指定方法をテストします：
- URL指定（最も推奨）
- itemCode指定（商品コードが分かっている場合）
- keyword検索（URLが不明な場合）
パターン1: itemCode指定（デフォルトデザイン）
商品コード指定 - 従来の縦並びレイアウト
商品情報が見つかりませんでした。
パターン2: itemCode指定（統一デザイン）
商品コード指定 - 新しい横並びレイアウト（variant=‘unified’）
商品情報が見つかりませんでした。
パターン3: keyword検索（統一デザイン）
キーワード検索 - 統一デザイン
商品情報が見つかりませんでした。
Amazonおすすめ商品
最初に指定したASIN（インデックス0）の商品:
Skynew ファンレス ミニPC AMD A4-6400T / 8GB DDR3L / 128GB SSD / Windows10 産業用 工業用 COMポート WATCH DOG シリアル通信 小型 軽量 ミニパソコン 小型パソコン minipc デスクトップPC M2S+
ファンレス設計の産業用ミニPC
最初に指定したASIN（インデックス0）の商品（variant=‘unified’）:
2番目に指定したASIN（インデックス1）の商品（コンパクト表示）:
ASUS デスクトップパソコン V500 Mini Tower V500MV インテル Core i5 13420H メモリ16GB SSD 512GB MS Office 2024搭載 Windows11 DVDスーパーマルチドライブ搭載 グレー V500MV-13420H046WS
2番目に指定したASIN（インデックス1）の商品（variant=‘unified’）:
3番目に指定したASIN（インデックス1）の商品（コンパクト表示）:
商品情報が見つかりませんでした。
3番目に指定したASIN（インデックス1）の商品（variant=‘unified’）:
商品情報が見つかりませんでした。
実行手順
このテスト記事を使用するには、以下の手順を実行してください：
# 1. 環境変数を設定（.envファイル）
# RAKUTEN_APPLICATION_ID=your_app_id
# RAKUTEN_AFFILIATE_ID=your_affiliate_id
# 2. 商品情報をプリフェッチ
npm run product:refresh
# 3. ローカル開発サーバーを起動
npm run dev
# 4. ブラウザで確認
# http://localhost:4321/test-rakuten-product-card期待される結果
- ✅ 3つの商品カードが表示される
- ✅ 楽天市場バッジが表示される
- ✅ ポイント還元率が表示される（商品によっては）
- ✅ あす楽・送料無料バッジが表示される（対象商品の場合）
- ✅ ショップ名が表示される
- ✅ 商品画像・タイトル・価格が表示される
- ✅ 「楽天市場で見る」ボタンが機能する
トラブルシューティング
商品カードが表示されない
npm run product:refreshを実行しましたか？.envファイルに楽天APIキーが設定されていますか？src/data/product-cache.jsonが生成されていますか？
APIエラーが発生する
- APIキーが正しいか確認してください
- レート制限に達していないか確認してください（100 requests/秒）
- 商品URLが正しいか確認してください
外部リンクカードテスト（Issue #367）
外部リンクをカード形式で表示する新機能のテストです。
デフォルトバリアント
Web Content Accessibility Guidelines (WCAG) 2.2
Web Content Accessibility Guidelines (WCAG) 2.2 covers a wide range of recommendations for making web content more accessible. Following these guidelines will make content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but will not address eve
コンパクトバリアント
How to Meet WCAG (Quickref Reference)
WCAG 2.2の達成基準をフィルタ可能な一覧で参照できるクイックリファレンス。
Unified
How to Meet WCAG (Quickref Reference)
WCAG 2.2の達成基準をフィルタ可能な一覧で参照できるクイックリファレンス。
Unified astro-build
Astro
Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.
注意: このテスト記事は開発用です。本番環境では削除してください。