画像データ用意して組み込む

[y4shiro]

• [x] 画像の配信方法
• [x] Cloudinary に画像設置
• [x] Supabase に画像パス追加
• [x] Card コンポーネント実装
• [x] ライセンス関連整備する

[y4shiro]

画像の配信方法

いくつか手段がある

• Next.js プロジェクトに直接配置
• Cloundinary (CDN)
• S3 などストレージ

今回は next/image コンポーネントを利用予定で、公式で Loader をサポートしている Cloudinary を採用した next/image | Next.js

アカウント作成とセットアップは非常に簡単なので省略

[y4shiro]

Cloudinary に画像設置

画像の種類ごとにディレクトリ分けてアップロードするだけなので簡単

カード画像本体 y4shiro/uma-support-card/card-images/ カードのタイプ画像 y4shiro/uma-support-card/card_types-icon/ カードのレアリティ画像 y4shiro/uma-support-card/card_rarity-icon/*

[y4shiro]

Supabase に画像パス追加

cards テーブルの card_img_path カラムにカード画像のファイル名を追加 card_id + 拡張子なので、sql でアップデートするコードを書くだけ

update cards
   set img_path = id || '.png',
       icon_path = 'icon_' || id || '.png';

[y4shiro]

Card コンポーネント実装

とりあえず next/image で表示する

next/image コンポーネントで外部の画像を読み込む場合は、next.config.js に読み込む画像が設置されているドメインを明記する next/image | Next.js

next.config.js の設定

const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['res.cloudinary.com'],
  },
};

コンポーネントで直接 URL を指定する

<Image
  width={180}
  height={240}
  src={`https://res.cloudinary.com/y4shiro/uma-support-card/card-images/${props.card.card_img_path}`}
  alt='サポートカードの画像'
/>

lazy load 設定

next/image コンポーネントは lazy load がデフォで有効なので、特に設定する必要なし

画像ロード中の表示

ローディングで円形のインジケータ表示も有りだが、next/image に blur を表示する機能があるので今回はこれを採用した

https://nextjs.org/docs/api-reference/next/image#placeholder placeholder='blur' と blurDataURL の設定が必要

blurDataURL の詳細は次の記事を参考にした https://zenn.dev/unreact/articles/nextjs-next-image

<Image
  layout='fill'
  objectFit='cover'
  placeholder='blur'
  blurDataURL='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mOcXg8AAbMBGIpVIK8AAAAASUVORK5CYII='
  style={{ transition: '0.2s' }}
  src={`uma-support-card/card-images/${card.card_id}.png`}
  alt={`サポートカード "${card.card_name}" の画像`}
/>

カードのスタイル、装飾追加

borderRadius とカードの枠を CSS で表現し、各種アイコンも表示するように実装した 詳細は Commit 参照 https://github.com/y4shiro/uma-card-deck-tools/blob/feature/%2318-prepare-image-data/src/features/CardDeck/Card/index.tsx

[y4shiro]

ライセンス関連整備する

ライセンス回りは別の Issue で規約の作成と同時に整備する

[y4shiro]

マージしたのでクローズする