はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptの基本的な知識があり、API連携やスライダー実装に興味があるWeb開発者の方を対象にしています。特にECサイトの開発や商品紹介ページを作成する際に役立つ内容となっています。

この記事を読むことで、楽天APIを利用して商品情報を取得し、その画像をSwiperライブラリを使ってスライダーとして表示する方法がわかります。また、実装中に発生しがちな問題の解決策も学べるため、実際のプロジェクトにすぐに応用できるでしょう。API連携とUIライブラリの組み合わせは、現代のWeb開発では必須のスキルと言えるため、本記事で実践的なノウハウを身につけていただけます。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - JavaScriptの基本的な知識（非同期処理、DOM操作など） - HTML/CSSの基本的な知識 - npmやyarnを使ったパッケージ管理の経験 - API連携の基本的な理解

楽天APIとSwiperライブラリの概要と背景

楽天APIは、楽天市場の商品情報を取得できる強力なツールです。特に商品画像はECサイトのビジュアルとして重要な要素であり、動的に表示することでユーザーのエンゲージメント向上が期待できます。一方、Swiperはモダンで軽量なスライダーライブラリで、タッチ操作に対応し、レスポンシブデザインにも優れています。

この2つの技術を組み合わせることで、最新の商品情報を自動で取得し、魅力的なスライダーとして表示することが可能になります。特にセール期間や新商品の紹介など、頻繁に内容が更新されるコンテンツに最適です。また、楽天APIの利用は無料で始められるため、小規模なサイトでも気軽に導入できます。

具体的な実装手順

ステップ1：楽天APIの準備

まずは楽天APIを利用するための準備から始めます。楽天デベロッパーサイト（https://webservice.rakuten.co.jp/）にアクセスし、アカウントを作成します。ログイン後、「アプリケーション登録」から新しいアプリケーションを登録し、APIキーを取得します。このAPIキーは後ほどJavaScriptコード内で使用します。

次に、利用したいAPIを選択します。商品画像を取得する場合は「商品検索API」が適しています。APIの詳細ページでは、リクエストパラメータやレスポンス形式を確認できます。特に「imageFlag」を「1」に設定することで、商品画像のURLを含んだレスポンスを取得できます。

ステップ2：商品データの取得

次に、JavaScriptで楽天APIから商品データを取得します。非同期処理を行うため、fetch APIやaxiosを使用します。以下は基本的なコード例です。

Javascript

const rakutenApiKey = '取得したAPIキー';
const affiliateId = 'アフィリエイトID';
const keyword = '検索キーワード';
const url = `https://app.rakuten.co.jp/services/api/Product/Search/20220628?format=json&keyword=${keyword}&applicationId=${rakutenApiKey}&affiliateId=${affiliateId}&imageFlag=1`;

fetch(url)
  .then(response => response.json())
  .then(data => {
    // 取得したデータを処理
    console.log(data);
    // Swiper用のデータに整形
    const swiperData = data.Items.map(item => ({
      image: item.Item.mediumImageUrls[0].imageUrl,
      title: item.Item.itemName,
      price: item.Item.itemPrice
    }));
    // Swiperの初期化
    initSwiper(swiperData);
  })
  .catch(error => {
    console.error('APIエラー:', error);
  });

このコードでは、まず楽天APIにリクエストを送信し、レスポンスをJSONとして受け取ります。その後、必要な情報（画像URL、商品名、価格）を抽出し、Swiperで扱いやすい形式に整形しています。エラーハンドリングも行い、API通信に失敗した場合の処理も記述しています。

ステップ3：Swiperライブラリの導入

Swiperを使用するには、HTMLにSwiperのCSSとJSファイルを含める必要があります。CDNを利用する場合、以下のように記述します。

Html

<!-- Swiper CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />

<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

また、npmやyarnを使ってプロジェクトにインストールすることも可能です。

Bash

npm install swiper
# または
yarn add swiper

インストール後、JavaScriptファイルでSwiperをインポートします。

Javascript

import Swiper from 'swiper';
import { Navigation, Pagination } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

ステップ4：スライダーの実装

HTMLでSwiperの基本的なマークアップを作成します。

Html

<div class="swiper mySwiper">
  <div class="swiper-wrapper" id="swiperWrapper">
    <!-- 動的に追加されるスライド -->
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-pagination"></div>
</div>

次に、JavaScriptでSwiperを初期化し、APIから取得したデータを動的に追加します。

Javascript

function initSwiper(data) {
  const swiperWrapper = document.getElementById('swiperWrapper');

  // 既存のスライドをクリア
  swiperWrapper.innerHTML = '';

  // スライドを動的に追加
  data.forEach(item => {
    const slide = document.createElement('div');
    slide.className = 'swiper-slide';
    slide.innerHTML = `
      <img src="${item.image}" alt="${item.title}">
      <h3>${item.title}</h3>
      <p>価格: ${item.price}円</p>
    `;
    swiperWrapper.appendChild(slide);
  });

  // Swiperを初期化
  new Swiper('.mySwiper', {
    modules: [Navigation, Pagination],
    slidesPerView: 1,
    spaceBetween: 30,
    loop: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    breakpoints: {
      640: {
        slidesPerView: 2,
      },
      768: {
        slidesPerView: 3,
      },
      1024: {
        slidesPerView: 4,
      },
    },
  });
}

このコードでは、まずSwiperのラッパー要素を取得し、中身をクリアします。その後、APIから取得したデータをもとにスライド要素を動的に生成し、ラッパーに追加します。最後に、Swiperを初期化し、レスポンシブな設定を行っています。breakpointsオプションでは、画面サイズに応じて表示するスライド数を変更しています。

ハマった点やエラー解決

実装中にいくつかの問題に遭遇しました。

問題1：CORSエラーが発生する 楽天APIはブラウザから直接呼び出すとCORSエラーが発生することがあります。これは、ブラウザのセキュリティポリシーによるものです。

解決策： サーバーサイドでAPIを呼び出すか、CORSを許可するプロキシサービスを利用する必要があります。Node.jsのExpressを使って簡単なプロキシサーバーを作成する方法があります。

Javascript

// server.js
const express = require('express');
const cors = require('cors');
const axios = require('axios');
const app = express();
app.use(cors());

app.get('/api/rakuten', async (req, res) => {
  try {
    const { keyword } = req.query;
    const response = await axios.get('https://app.rakuten.co.jp/services/api/Product/Search/20220628', {
      params: {
        format: 'json',
        keyword,
        applicationId: 'APIキー',
        affiliateId: 'アフィリエイトID',
        imageFlag: 1
      }
    });
    res.json(response.data);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

問題2：画像の読み込み遅延による表示崩れ 商品画像の読み込みが遅い場合、スライドのレイアウトが崩れることがあります。

解決策： 画像の遅延読み込み機能を利用するか、画像の読み込み完了を待ってからSwiperを初期化します。

Javascript

function initSwiper(data) {
  const swiperWrapper = document.getElementById('swiperWrapper');
  swiperWrapper.innerHTML = '';

  data.forEach(item => {
    const slide = document.createElement('div');
    slide.className = 'swiper-slide';
    slide.innerHTML = `
      <div class="image-placeholder">
        <img src="${item.image}" alt="${item.title}" loading="lazy">
      </div>
      <h3>${item.title}</h3>
      <p>価格: ${item.price}円</p>
    `;
    swiperWrapper.appendChild(slide);
  });

  // すべての画像が読み込まれるのを待ってからSwiperを初期化
  Promise.all(
    Array.from(document.images).map(img => {
      if (img.complete) return Promise.resolve();
      return new Promise(resolve => {
        img.addEventListener('load', resolve);
        img.addEventListener('error', resolve);
      });
    })
  ).then(() => {
    new Swiper('.mySwiper', {
      // Swiperのオプション
    });
  });
}

問題3：スライダーのパフォーマンス問題 多数の商品データを一度に表示すると、パフォーマンスが低下することがあります。

解決策： 仮想スクロール技術を利用するか、データをページネーションして表示します。また、SwiperのlazyLoadingオプションを有効にすることも有効です。

Javascript

new Swiper('.mySwiper', {
  // その他のオプション
  lazy: {
    loadPrevNext: true,
    loadPrevNextAmount: 3,
  },
  // または
  virtual: {
    slides: data,
    renderSlide: function (slide, index) {
      return `<div class="swiper-slide">${/* スライドのHTML */}</div>`;
    },
  }
});

まとめ

本記事では、楽天APIから商品画像を取得し、Swiperライブラリでスライダーを実装する方法について解説しました。

  • 楽天APIの準備から商品データの取得方法
  • Swiperライブラリの導入と基本的なスライダーの実装
  • CORSエラーや画像読み込み遅延といった問題の解決策

この記事を通して、動的なコンテンツをAPI連携とUIライブラリの組み合わせで実装する方法を学ぶことができたはずです。これにより、ECサイトの商品紹介ページや新着情報の表示など、より魅力的なWebサイトを構築できるようになります。

今後は、Swiperの高度なアニメーション機能やカスタマイズ、楽天APIの高度な検索機能を組み合わせた実装についても記事にする予定です。

参考資料

参考にした記事、ドキュメント、書籍などが記載します。