Jamstack構成で作ったサイトのバナーをmicroCMSで管理してみた

// src/components/Banner.astro

---
import closeIcon from '@/assets/icons/popup-close.png'
import bannerImage from '@/assets/banner.png'
---

<div id="popup">
  <div id="close-button">
    <img src={closeIcon.src} alt="閉じるボタン" />
  </div>
  <div>
    <a href={'https://marke.members.co.jp/membersroots_paper11.html'}>
      <img
        src={bannerImage.src}
        alt="第一地銀62行・メガバンクデジタル広告出稿比較レポート（2023年6月実施 独自WEBサイト調査より）"
      />
    </a>
  </div>
</div>

Copy

// src/libs/microcms.ts

// バナーの型
export type BannerType = {
  image: MicroCMSImage
  alt?: string
  link: string
  isExternal: boolean
}

Copy

// src/libs/microcms.ts

// コンテンツ全件取得
export const getAllContentList = async <T>(
  apiName: string,
  queries: MicroCMSQueries = {}
) => {
  const contents = await client.getAllContents<T>({
    endpoint: apiName,
    queries
  })
  return contents
}

Copy

// src/components/Banner.astro

---
import closeIcon from '@/assets/icons/popup-close.png'
import { getAllContentList, type BannerType } from '@/libs/microcms'

// バナー取得処理
const banners = await getAllContentList<BannerType>('banner')

// バナーが0件の時は描画しない
if (banners.length === 0) {
  return;
}
---

<div id="popup">
  <div id="close-button">
    <img src={closeIcon.src} alt="閉じるボタン" />
  </div>
  <div>
  {
    banners.map((banner) => {
      return (
        <a href={banner.link} target={banner.isExternal ? '_blank' : undefined}>
          <img src={banner.image.url} alt={banner.alt} />
        </a>
      )
    })
  }
  </div>
</div>

Copy

<div class="banner">
  <a href={banner.link} target={banner.isExternal ? '_blank' : undefined}>
    <img src={banner.image.url} alt={banner.alt} />
  </a>
</div>

Copy

<style>
  .banner {
    display: none;
  }
</style>

Copy

<script>
  const banners = document.querySelectorAll<HTMLDivElement>('.banner')

  // バナーが0件じゃない時に処理
  if (banners.length !== 0) {
    // 0からバナーの数までのランダムな数値を取得
    const bannerNum = Math.floor(Math.random() * banners.length)

    // ランダムに1つだけ表示
    banners[bannerNum].style.display = 'block'
  }
</script>

Copy

// src/components/Banner.astro

---
import closeIcon from '@/assets/icons/popup-close.png'
import { getAllContentList, type BannerType } from '@/libs/microcms'

// バナー取得処理
const banners = await getAllContentList<BannerType>('banner')

// バナーが0件の時は描画しない
if (banners.length === 0) {
  return;
}
---

<div id="popup">
  <div id="close-button">
    <img src={closeIcon.src} alt="閉じるボタン" />
  </div>
  <div>
    {
      banners.map((banner) => {
        return (
          <div class="banner">
            <a href={banner.link} target={banner.isExternal ? '_blank'
 : undefined}>
              <img src={banner.image.url} alt={banner.alt} />
            </a>
          </div>
        )
      })
    }
  </div>
</div>

<style>
  .banner {
    display: none;
  }

  /* 〜その他のスタイル〜 */
</style>

<script>
  const banners = document.querySelectorAll<HTMLDivElement>('.banner')
  // バナーが0件じゃない時に処理
  if (banners.length !== 0) {
    // 0からバナーの数までのランダムな数値を取得
    const bannerNum = Math.floor(Math.random() * banners.length)

    // ランダムに1つだけ表示
    banners[bannerNum].style.display = 'block'
  }

  // 〜その他のJS処理〜
</script>

Copy