<p>この記事は、microCMSのデータとAstroの<a href="https://docs.astro.build/ja/reference/routing-reference/#paginate" target="_blank" rel="noopener noreferrer nofollow">paginate関数</a>を使用して、ChatGPTでページネーションコンポーネントを作成した備忘録です。</p><p><span class="txt-small">※microCMSの詳しい記事取得方法は含みません。</span></p><h2 id="h115ee6803f">完成したページネーション</h2>

<h2 id="h9f510f3156">やりたいこと</h2><ul><li>最初・最後のページを表示するオプション</li><li>ページ数が多い場合に「...」を表示する機能</li><li>前後のページへ移動するボタン</li><li>現在のページを示すインジケーター</li><li>ページが1つしかない場合にページネーションを非表示にするオプション</li><li>全ページ表示ができる</li><li>1つのコンポーネントで管理できる</li><li>aria-current/aria-labelの設定</li></ul>

<h2 id="h9abf11e0fe">ページの作成</h2><p>getStaticPaths()でページを作成します。</p>

---
import type { InferGetStaticPropsType, GetStaticPaths } from "astro";
import Pagination from "@components/Pagination.astro";
import { getAllBlogList } from "@libs/microcms";
type Props = InferGetStaticPropsType<typeof getStaticPaths>;

export const getStaticPaths = (async ({ paginate }) => {
  const allPosts = await getAllBlogList();  // 全記事取得
  return paginate(allPosts, { pageSize: 1 });  // pageSize=1ページあたりの件数・わかりやすくするため1件にしてます
}) satisfies GetStaticPaths;

const { page } = Astro.props;
---
～略：記事一覧
<Pagination page={page} baseUrl="/blog" />

<h2 id="hb006a1f278">ページネーションの表示形式を独自オプションで柔軟にカスタマイズ</h2><p>オプションは主に表示に関するもののみを管理し、それ以外の部分はHTMLソースで柔軟にカスタマイズできるようにしています。</p><p>コンポーネントは、アイテムごとに分けることもできますが、他の部分で再利用されることが少ないため、1つのコンポーネントで管理する形にしました☺️</p>

---
const { page, baseUrl } = Astro.props;
const { lastPage, currentPage, url } = page;
const paginationOptions = {
  alwaysShowPagination: true, // ページネーションを常に表示するか
  showFirst: true,  // 「最初のページ」ボタンを表示するか
  showLast: true,  // 「最後のページ」ボタンを表示するか
  showItems: 5, // 表示するページ番号の最大数（0で全ページ表示、偶数指定時は自動で-1して奇数に調整）
  showIndicator: true,  // 現在のページを示すインジケーターを表示するか
  showDots: true, // ページ数が多い場合に「...」を表示するか
  dot: "...", // ドットの表記文字列
};
// 略
---

<h3 id="h4ca45d55d3">alwaysShowPagination: true</h3><p>ページネーションは、記事の総数が <code>pageSize</code> よりも少ない場合でも、常に表示するかどうかを設定するオプションです。もし記事の総数がページサイズより少ない場合でも、1ページのみが生成されます。それでもページネーションを常に表示するかどうか、このオプションで制御できます。</p>

<h3 id="h9504743803">showFirst: true</h3><p>最初のページへのリンクを表示するかどうかを設定するオプションです。true に設定すると、最初のページへのリンクが表示されます。</p><h3 id="h7ad4cee0cd">showLast: true</h3><p>最後のページへのリンクを表示するかどうかを設定するオプションです。true に設定すると、最後のページへのリンクが表示されます。</p>

<h3 id="hbcdc850fea">showItems: 5</h3><p>ページネーションで表示するページ番号の個数を設定するオプションです。</p><ul><li><code>0</code> に設定すると、ページ番号を省略せず、全てのページ番号を表示します。</li><li>偶数の値を設定した場合、自動的に1引かれて奇数の値に調整されます。これにより、左右のページリンクが均等に表示されるようになります。</li></ul>

<h3 id="h0c6dbce2cf">showIndicator: true</h3><p>現在のページ番号と総ページ数を表示するかどうかを設定するオプションです。true に設定すると、現在のページ番号と総ページ数（例: &quot;3 / 10&quot;）が表示されます。</p><h3 id="h43ffb9ebe2">showDots: true</h3><p>ページ番号の間にドット（...）を表示するオプションです。ページ数が多くなると、全てのページ番号を表示するのは煩雑になるため、ドットで省略する部分を表示します。</p><p>例えば、ページ数が10ページの場合、1ページ目、3ページ目、最終ページなどを表示し、それ以外はドットで省略されます。</p><h3 id="hf5bcff2424">dot: &quot;...&quot;</h3><p>ドットを表示する文字列を設定するオプションです。デフォルトでは &quot;...&quot; が使用されますが、カスタマイズが可能です。</p><h3 id="hc371195a66">dot機能の適用に関する処理</h3><ul><li>ページ数が <code>showItems</code> より多く、<code>showItems</code> が3ページ以上の場合、ドット（<code>...</code>）を表示します。</li><li><code>startPage</code> が1より大きい場合、最初のページ番号の後にドットを表示します。</li><li><code>endPage</code> が総ページ数の1つ前より小さい場合、最後のページ番号の前にドットを表示します。</li><li>最初のページは <code>1</code> に設定され、最後のページは <code>totalPages</code> に設定されます。</li></ul><p>例えば、ページ数が3ページの場合は、ドットが表示されることなく、すべてのページ番号が表示されます。</p>

---
const { page, baseUrl } = Astro.props;
const { lastPage, currentPage, url } = page;
const paginationOptions = {
  alwaysShowPagination: true,
  showFirst: true,
  showLast: true,
  showItems: 5,
  showIndicator: true,
  showDots: true,
  dot: "...",
};
let {
  alwaysShowPagination,
  showFirst,
  showLast,
  showDots,
  showItems,
  showIndicator,
  dot,
} = paginationOptions;

// showItemsが偶数なら-1して奇数にする
if (showItems % 2 === 0 && showItems !== 0) {
  showItems -= 1;
}

const totalPages = lastPage;

// 表示するページ番号を計算
let startPage, endPage;
if (showItems === 0 || totalPages <= showItems) {
  startPage = 1;
  endPage = totalPages;
} else if (currentPage <= Math.floor(showItems / 2) + 1) {
  startPage = 1;
  endPage = showItems;
} else if (currentPage > totalPages - Math.floor(showItems / 2)) {
  startPage = totalPages - showItems + 1;
  endPage = totalPages;
} else {
  startPage = currentPage - Math.floor(showItems / 2);
  endPage = currentPage + Math.floor(showItems / 2);
}

let pageNumbers = [...Array(endPage - startPage + 1)].map(
  (_, i) => startPage + i
);

// dot機能の適用
if (showDots && totalPages >= showItems + 1 && showItems > 3) {
  if (startPage > 1) pageNumbers[1] = 0;
  if (endPage <= totalPages - 1) pageNumbers[pageNumbers.length - 2] = 0;

  // 1番目を1、items番目を最後のページにする
  pageNumbers[0] = 1;
  pageNumbers[pageNumbers.length - 1] = totalPages;
}

const getAriaLabel = (pageNum: number) =>
  pageNum !== currentPage
    ? `ページ ${pageNum}`
    : `現在のページ（ページ ${pageNum}）`;
---

{
  alwaysShowPagination || totalPages > 1 ? (
    <nav aria-label="ページネーション" class="pagination">
      {showIndicator && (
        <p class="indicator" aria-live="polite">
          {currentPage} / {totalPages}
        </p>
      )}
      <ul class="list">
        {showFirst && url.first && (
          <li class="item first">
            <a
              href={url.first}
              class="link"
              aria-label={`最初のページ（ページ 1）`}
            >
              &#171;
            </a>
          </li>
        )}
        {url.prev && (
          <li class="item prev">
            <a
              href={url.prev}
              class="link"
              aria-label={`前のページ（ページ ${currentPage - 1})`}
            >
              &#139;
            </a>
          </li>
        )}
        {pageNumbers.map((pageNum) => (
          <li class="item">
            {pageNum === 0 ? (
              <span class="dot" aria-hidden="true">
                {dot}
              </span>
            ) : (
              <a
                href={`${baseUrl}${pageNum > 1 ? `/${pageNum}` : ""}`}
                class:list={["link", pageNum === currentPage ? "current" : ""]}
                aria-current={pageNum === currentPage ? "page" : undefined}
                aria-label={getAriaLabel(pageNum)}
              >
                {pageNum}
              </a>
            )}
          </li>
        ))}
        {url.next && (
          <li class="item next">
            <a
              href={url.next}
              class="link"
              aria-label={`次のページ（ページ ${currentPage + 1})`}
            >
              &#155;
            </a>
          </li>
        )}
        {showLast && url.last && (
          <li class="item last">
            <a
              href={url.last}
              class="link"
              aria-label={`最後のページ（ページ ${totalPages}）`}
            >
              &#187;
            </a>
          </li>
        )}
      </ul>
    </nav>
  ) : null
}

<h3 id="ha214098e44">まとめ</h3><p>最初と最後の「前へ」「次へ」ボタンはpaginate関数を使用して実装しました。</p><p>間のページリストやドット表示は、ChatGPTを活用して基本的な構成を作り、その後、細かな条件調整を自分で行いました。ChatGPTにまとめて条件を提示すると希望通りにならないことがあるため、各オプションについて具体的な条件を提示し、段階を経て最終的な仕様に仕上げました。</p><p></p><p>📝参考サイト</p><ul><li><a href="https://docs.astro.build/ja/guides/routing/#%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%8D%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3" target="_blank" rel="noopener noreferrer nofollow">Astro公式 ページネーション</a></li><li><a href="https://code.vool.jp/blog/astro-pagination/" target="_blank" rel="noopener noreferrer nofollow">Astroのサイトにページ番号付きのページネーションを実装する方法</a></li><li><a href="https://zenn.dev/chabatake_i/articles/astro-microcms" target="_blank" rel="noopener noreferrer nofollow">AstroとmicroCMSで作ったサイトにページネーションを実装する</a></li></ul>

Astroのpaginate()を使ってページネーションコンポーネントをつくる

<p>Newtに登録しているものの最近はmicroCMSばかり使っていたので、久々に使ってみることに。<br>このサイトの記事はmicroCMSを使っているので同じフィールド構成でNewtを使って実装した備忘録。<br>microCMSからNewtへ置き換えたときの違いやNewtのいいところ・うれしいことをまとめた。<br>※この記事はNewtの登録から初期設定などの説明は含まない<br>モデルとフィールドの構成は以下の通り（一部フィールド除く）<br>モデル＝microCMSでのコンテンツ（API）<br>フィールド＝microCMSのAPIスキーマ<br>&lt;記事&gt;<br>タイトル<br>スラッグ<br>カテゴリー<br>サムネイル画像<br>セクション<br>メタデータ<br>&lt;カテゴリ&gt;<br>タイトル<br>スラッグ<br>イメージカラー<br>Newtのフィールドでうれしいポイント<br>・フリープランでもフィールドの種類が豊富<br>テキスト、エディタ、画像などはもちろんのことマークダウン・ファイル・地図・埋め込みなどがある<br>Newtのメディアでうれしいポイント<br>・メディアに情報が設定できる<br>画像にタイトル・代替テキスト・説明・タグなどが設定できるのでalt用の専用のフィールドを作る必要がない<br>記事の編集画面から変更できたらうれしいな...<br>フィールドで設定できることが多い！<br>かゆいところに手が届く<br>ここが変わったらうれしい<br>フィールド設定した画面に必須項目になってるかどうかが見える化されるとうれしい<br>カスタムフィールドなど入力画面がポップアップなので、外クリックしたときに入力途中までしていたデータが消えるので位置から登録しないといけないのが辛い。<br>リッチテキストをただのプレーンテキストエリアで使うとき、全部無効にするためクリックするのが手間だから一括でOFFにする機能がるとうれしい<br>→間違えた！テキストが1行・複数行が選べるからこれがプレーンテキストとして使う　間違えがち<br>テーブルがない<br>嬉しい機能<br>カスタムフィールドの初期値が設定できる<br>アップロードした画像に対してタイトル・altが設定できる<br>フィールドの種類が多い<br>添付の種類が豊富（上限は50MB）<br>選択肢がラベルと値で設定できる。ただラベルは取得できないので、管理画面だけのもの。<br>型が用意されてる</p><ul><li>Content: コンテンツ共通のプロパティが定義されています</li><li>Image: 画像フィールドのプロパティが定義されています</li><li>File: ファイルフィールドのプロパティが定義されています</li></ul><p><br></p>

<p>Newtには登録していたものの、最近はmicroCMSばかり使っていました。そこで、久々に<a href="https://www.newt.so/" target="_blank" rel="noopener noreferrer nofollow">Newt</a>を使ってみることにしました。</p><p>このサイトの記事はmicroCMSを利用して作っています。この記事はmicroCMSと同じフィールド構成でNewtとAstroを使って実装した備忘録です。</p><p>また、microCMSからNewtへ置き換えた際の違いや、Newtの魅力・便利な点も合わせてまとめました。</p><p><span class="txt-small">※この記事では、Newtの登録や初期設定に関する説明は省略しています。</span></p>

<h2 id="h638b0e78b5">モデルとフィールド構成</h2><p>Newtでは、モデルとフィールドは以下のように構成しました（一部フィールドは除いています）。</p><ul><li><strong>モデル</strong>＝microCMSでいう「コンテンツ（API）」</li><li><strong>フィールド</strong>＝microCMSでいう「APIスキーマ（フィールド）」</li></ul><h3 id="h59904525d3">モデル：ブログ</h3><table><tbody><tr><th colspan="1" rowspan="1"><p>項目</p></th><th colspan="1" rowspan="1"><p>フィールドの種類</p></th></tr><tr><td colspan="1" rowspan="1"><p>タイトル</p></td><td colspan="1" rowspan="1"><p>テキスト（１行）</p></td></tr><tr><td colspan="1" rowspan="1"><p>スラッグ</p></td><td colspan="1" rowspan="1"><p>テキスト（１行）</p></td></tr><tr><td colspan="1" rowspan="1"><p>カテゴリー</p></td><td colspan="1" rowspan="1"><p>参照（複数値）</p></td></tr><tr><td colspan="1" rowspan="1"><p>サムネイル画像</p></td><td colspan="1" rowspan="1"><p>画像</p></td></tr><tr><td colspan="1" rowspan="1"><p>セクション</p></td><td colspan="1" rowspan="1"><p>マルチタイプ（複数値）</p></td></tr><tr><td colspan="1" rowspan="1"><p>メタデータ</p></td><td colspan="1" rowspan="1"><p>マルチタイプ</p></td></tr></tbody></table><h3 id="h8996246fe1">モデル：カテゴリ</h3><table><tbody><tr><th colspan="1" rowspan="1"><p>項目</p></th><th colspan="1" rowspan="1"><p>フィールドの種類</p></th></tr><tr><td colspan="1" rowspan="1"><p>タイトル</p></td><td colspan="1" rowspan="1"><p>テキスト（１行）</p></td></tr><tr><td colspan="1" rowspan="1"><p>スラッグ</p></td><td colspan="1" rowspan="1"><p>テキスト（１行）</p></td></tr><tr><td colspan="1" rowspan="1"><p>イメージカラー</p></td><td colspan="1" rowspan="1"><p>テキスト（１行）</p></td></tr></tbody></table><h2 id="h728eb3ccf2">Newtのフィールドのいいところ</h2><p>microCMSと似ている部分も多いNewtですが、異なるポイントもいくつかあります。ここではその違いに注目していきます。</p><h3 id="h59ae091fe2">単一と複数</h3><p>Newtでは、フィールドの種類に対して「単一」または「複数」を選択できる仕様になっています。<br>例えば、テキストフィールドの場合：</p><ul><li><strong>microCMSの場合</strong>：1行テキストとテキストエリアは別のフィールドとして用意されている。</li><li><strong>Newtの場合</strong>：テキストフィールドを選択した後に、「1行」または「複数行」を設定可能。</li></ul><p>この仕組みは画像や参照フィールドでも同様で、用途に応じて柔軟に選択できます。</p>

<h3 id="hb76587122e">メディア</h3><p>Newtでは、アップロードしたメディア自体に次のような情報を設定可能です。</p><ul><li><strong>タイトル</strong></li><li><strong>代替テキスト</strong></li><li><strong>説明</strong></li><li><strong>タグ</strong></li></ul><p>画像のalt用フィールドを別途作成する手間を省けます。さらに、画像フィールドに設定したメディアから、このmetadataを取得することもできます。</p><p>ただし、これらの情報は現在の仕様では<strong>メディア管理画面からしか編集できない</strong>ため、記事編集画面から直接編集できるとさらに便利だと感じました。</p>

<h3 id="h73f1d28c80">ファイル</h3><p>Newtではフリープランでもファイルのアップロードが可能です。</p>

<h3 id="h935070b9ac">選択フィールド</h3><ul><li><strong>Label</strong>（管理画面に表示される項目名）</li><li><strong>Value</strong>（戻り値として取得される値）</li></ul><p>LabelはAPIから取得することはできませんが、管理画面用に編集者がわかりやすい名前を設定できる点が便利です。</p>

<h3 id="h71c388d8f7">マルチタイプ</h3><p>Newtでは、microCMSでいう「繰り返しフィールド」が「マルチタイプ」として提供されています。</p><ul><li><strong>デフォルト値</strong>：初めからフィールドを表示させておくことが可能。</li><li><strong>表示タイプ</strong>：<ul><li>アコーディオン（デフォルトで閉じた状態、上下入れ替えがしやすい）</li><li>フラット（全て展開された状態、内容を一目で把握しやすい）</li></ul></li></ul><p>どちらを使うかは好みによりますが、それぞれ利点があるので用途に応じて選択するといいと思います。</p>

<h2 id="h36d3f57ef6">NewtのJavaScript SDK を使った記事表示</h2><p>Newtには <code>newt-client-js</code> というJavaScript SDKが提供されています。このSDKを利用して、記事データを取得し、ページに表示する方法を見ていきます。</p><pre><code>npm i newt-client-js</code></pre><h3 id="hc9a34d5296">型定義</h3><p>NewtのSDKでは、TypeScriptを活用できるよう、型が用意されています。これはmicroCMSのSDKで提供される型（例: <code>MicroCMSImage</code>, <code>MicroCMSContentId</code>, <code>MicroCMSDate</code>）に似ています。</p><blockquote><ul><li><strong>Content</strong>: コンテンツ共通のプロパティを定義した型。</li><li><strong>Image</strong>: 画像フィールドのプロパティを定義した型。</li><li><strong>File</strong>: ファイルフィールドのプロパティを定義した型。</li></ul><p><a href="https://www.newt.so/docs/js-sdk#TypeScript%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88" target="_new">Newt JavaScript SDK - TypeScriptでの利用方法</a></p></blockquote><h3 id="hc25b523cee">クライアントの作成とコンテンツ一覧の取得</h3><p>NewtのJavaScript SDKを使用してクライアントを作成し、コンテンツ一覧を取得する関数を実装しました。</p>

import { createClient } from 'newt-client-js'

export interface Blog extends Content {
  title: string
  slug: string
  category: Category[]
  thumb?: Image
  section?: (Richeditor|HtmlCode|Highlight|Gallery)[]
  metadata?: Metadata
}

export const newtClient = createClient({
  spaceUid: import.meta.env.NEWT_SPACE_UID,
  token: import.meta.env.NEWT_CDN_API_TOKEN,
  apiType: 'cdn',
})

export const blogList = async() => {
  const {items} = await newtClient.getContents<Blog>({
    appUid: 'YOUR_APP_UID ',  //コンテンツのApp UID
    modelUid: 'YOUR_MODEL_UID',  //コンテンツのモデルUID
  })
  return items
}

<h3 id="hfd99af07cb">Astroで記事詳細ページの作成</h3><p>記事一覧を取得し、slug フィールドを基に記事詳細ページのパスを生成する方法を紹介します。</p><h4 id="h6f187338d7">パス生成の仕組み</h4><p>以下のコードは、記事一覧を取得して各記事の slug を使って動的なパスを生成しています。<br><span class="txt-small">※実際のフィールド定義は簡略化しています。</span></p>

---
import Layout from "../../layouts/Layout.astro";
import { blogList } from "../../lib/newt";
import dayjs from "dayjs";
import "dayjs/locale/ja";

export const getStaticPaths = async () => {
  const posts = await blogList();
  const paths = posts.map((post) => {
    return {
      params: {
        path: `entry/${post.slug}`,
      },
      props: {
        post,
      },
    };
  });
  return paths;
};
const { post } = Astro.props;
const { title, category, section, _sys } = post;
const datetime = dayjs(_sys.createdAt).locale("ja").format("YYYY-MM-DD");
const publishDate = dayjs(_sys.createdAt).locale("ja").format("YYYY/MM/DD");
---

<Layout>
  <h1>{title}</h1>
  <time datetime={datetime}>{publishDate}</time>
  <ul>
    {category.map((cat) => <li>{cat.title}</li>)}
  </ul>
  {
    section &&
      section.map((sec) => {
        switch (sec.type) {
          case "richeditor":
            return <div set:html={sec.data.body} />;
          case "htmlCode":
            return <div set:html={sec.data.htmlCode} />;
          case "highlight":
            return (
              <div>
                <p>{sec.data.lang}</p>
                <p>{sec.data.filename}</p>
                <pre>
                  <code>{sec.data.body}</code>
                </pre>
              </div>
            );
          case "gallery":
            return (
              <div>
                {sec.data.images.map((img) => (
                  <img src={img.src} alt={img.altText} />
                ))}
              </div>
            );

          default:
            return null;
        }
      })
  }
</Layout>

<p>📝参考</p><ul><li><a href="https://www.newt.so/docs/tutorials/get-contents-in-astro" target="_blank" rel="noopener noreferrer nofollow">NewtとAstro v4を利用してブログを作成する</a></li><li><a href="https://www.newt.so/docs/js-sdk" target="_blank" rel="noopener noreferrer nofollow">SDK | ガイド: CDN API・Newt API | ヘッドレスCMS「Newt」</a></li></ul>

ヘッドレスCMS Newtを使ったコンテンツ管理とAstroでのページ構築①

<h2 id="hae76a5038a">なぜPostCSSを選んだのか</h2><p>これまでSCSSを使用してスタイルを管理していましたが、より新しいCSS機能を活用したいと考え、PostCSSを選択することにしました。</p><p>Sass(SCSS)の@mixinを使い慣れていたこともあり、PostCSSへ移行したときにメディアクエリはVSCodeにスニペットを登録して対応していました。</p><p>スニペットで簡単に呼び出すことはできても可読性があまりよくないため、Sass(SCSS)のように可読性を保ち、変更に柔軟に対応できるcustom-media機能を使えるようにするために、PostCSSの導入を最終的に決定しました。</p><h2 id="hf51de7b49c">AstroでPostCSSを使えるようにする</h2><p>３つのパッケージを使います。</p><p><strong>@csstools/postcss-global-data</strong><br>グローバルデータとしてCSSファイルをインポートするためのプラグイン。指定したファイルをCSS全体で利用可能にする。</p><p><strong>postcss-custom-media</strong><br>カスタムメディアクエリをサポートするプラグイン。ユーザー定義のメディアクエリを定義し、使いやすくする。</p><p><strong>postcss-preset-env</strong><br>将来のCSS仕様を現在のブラウザ向けに変換するプリセット。CSSの最新機能を利用可能にし、ブラウザ互換性を確保する。</p><pre><code>npm i @csstools/postcss-global-data postcss-custom-media postcss-preset-env</code></pre><h3 id="h3001c5a44e">postcss.config.cjsの設定</h3><p>postcss.config.cjsを作成してカスタムメディアをまとめたcssファイルの読み込みなどパッケージの設定をします。</p>

module.exports = {
  plugins: [
    require('@csstools/postcss-global-data')({
      files: ['./src/styles/media.css'],  // @custom-mediaをまとめたファイル
    }),
    require('postcss-custom-media'),
    require('postcss-preset-env')
  ],
};

<h3 id="h896a1c3245">カスタムメディアの設定</h3><p>今回はBootstrapのブレイクポイントに合わせて設定ファイルを作ってみました。</p>

@custom-media --sm (width >= 576px);
@custom-media --md (width >= 768px);
@custom-media --lg (width >= 992px);
@custom-media --xl (width >= 1200px);
@custom-media --xxl (width >= 1400px);

@custom-media --sm-only (768px > width >= 576px);
@custom-media --md-only (992px > width >= 768px);
@custom-media --lg-only (1200px > width >= 992px);
@custom-media --xl-only (1400px > width >= 1200px);

<p>設定はこれで終わりです。</p><h2 id="h97a19aa59e">設定したカスタムメディアを使ってみる</h2><p>使い方は簡単です。</p>

@media (--sm){
  p{
    font-size: 1rem;
  }
}

<h2 id="h20a07fbcd2">出力されたcssを確認してみる</h2><p>ビルドされたcssファイルを確認してみる<code>@media (--sm)</code>が<code>@media (min-width: 576px)</code>に変換されてます。</p>

@media (--sm){ ～ }
　↓
@media (min-width: 576px){ ～ }

@media (--md){ ～ }
　↓
@media (min-width: 768px){ ～ }

@media (--lg){ ～ }
　↓
@media (min-width: 992px){ ～ }

@media (--xl){ ～ }
　↓
@media (min-width: 1200px){ ～ }

@media (--xxl){ ～ }
　↓
@media (min-width: 1400px){ ～ }

@media (--sm-only){ ～ }
　↓
@media (min-width: 576px) and (max-width: 767.98px){ ～ }

@media (--md-only){ ～ }
　↓
@media (min-width: 768px) and (max-width: 991.98px){ ～ }

@media (--lg-only){ ～ }
　↓
@media (min-width: 992px) and (max-width: 1199.98px){ ～ }

@media (--xl-only){ ～ }
　↓
@media (min-width: 1200px) and (max-width: 1399.98px){ ～ }

<h2 id="ha214098e44">まとめ</h2><p>Sass(SCSS)でもいいのでは？ともなりますが、将来のCSSが使えるのはメリットが大きいかなと感じています。</p><p>Sass(SCSS)からの移行も最初は慣れなかったり、設定が大変かもしれませんが、プラグインを使えば大抵のことはできるし、それほど不便ではありません。（慣れ..？）</p><p></p><p>💭余談</p><p>パッケージをインストールしなくても使える？と思ったけど、そういうわけではなかった。エラー出ました。</p><pre><code>Astro detected an unhandled rejection. Here&apos;s the stack trace:
Failed to load PostCSS config: Failed to load PostCSS config (searchPath: C:/Users/xxx): [Error] Cannot find module &apos;postcss-preset-env&apos;Require stack:
- C:\xxx\postcss.config.cjs
Error: Cannot find module &apos;postcss-preset-env&apos;</code></pre><blockquote><p>Astroには、Viteの一部としてPostCSSが同梱されています。プロジェクトにPostCSSを設定するには、プロジェクトルートにpostcss.config.cjsファイルを作成します。プラグインはrequire()を使ってインポートできます。</p><p>Astroドキュメント PostCSS<br><a href="https://docs.astro.build/ja/guides/styling/#postcss" target="_blank" rel="noopener noreferrer nofollow">https://docs.astro.build/ja/guides/styling/#postcss</a></p></blockquote>

AstroとPostCSSで実現するカスタムメディアクエリを使った効率的なCSS管理

<p>rss-parser　エラーでNG</p><pre><code>02:15:00 [ERROR] [vite] x Build failed in 1.76s
[commonjs--resolver] [plugin vite:resolve] Cannot bundle Node.js built-in "http" imported from "node_modules\rss-parser\lib\parser.js". Consider disabling ssr.noExternal or remove the built-in dependency.</code></pre><p>xml2js エラーでNG</p><pre><code>02:15:37 [ERROR] [vite] x Build failed in 1.43s
[commonjs--resolver] [plugin vite:resolve] Cannot bundle Node.js built-in "events" imported from "node_modules\xml2js\lib\parser.js". Consider disabling ssr.noExternal 
or remove the built-in dependency.</code></pre><p>fast-xml-parser　で何とかできた。<br><a href="https://nemunote.com/blog/astro-v3-to-v4.5-updates-and-new-features/" target="_blank" rel="noopener noreferrer">https://nemunote.com/blog/astro-v3-to-v4.5-updates-and-new-features/</a><br>inferSize<br>画像　をassets使う<br>アメブロはない。<br>はてぶは&lt;enclosure url=""&gt;<br>オプションをつけておかないとurlの部分が削除されて取得できなかった</p><pre><code>    const parser = new XMLParser({
      ignoreAttributes: false, // 属性を無視しない
    });

</code></pre><p>qiitaはAtom形式でアイキャッチ画像がない<br>zenはrssでアイキャッチある&lt;enclosure url=""&gt;<br>note.comはrssで&lt;media:thumbnail&gt;</p>

<p>自身のnoteに書いた記事をRSSフィードを利用してAstroに一覧表示するための手順をまとめた記事です。</p><p><span class="txt-small">※RSSを配信しているサービスの利用規約やルールをご確認ください。</span></p><h2 id="ha6370ccfe0">設定と完成したコード</h2><h3 id="h6ae33e7349">設定</h3><ul><li>Astro 4.7.1</li><li>Astroの出力モード<code>hybrid</code></li><li>Cloudflare Pagesの互換性フラグに<code>nodejs_compat</code>を設定</li><li>XMLデータをJSON形式に変換するパッケージ<code>npm i fast-xml-parser -D</code></li></ul><h3 id="h9a8d5667c1">このコードでできること</h3><ul><li>複数のRSSフィードから記事を取得して日付が新しい順に並び替えて10件表示</li><li>RSS 2.0、Atom形式</li><li>日付をYYYY.MM.DD形式</li></ul>

import { XMLParser } from "fast-xml-parser";

// 記事のインターフェースを定義
interface Article {
  title: string;
  link: string;
  thumb: string | null;
  description: string;
  pubDate: string;
}

// RSSフィードを取得してJSONデータに変換する関数
export async function fetchRSS(url: string): Promise<any> {
  try {
    const response = await fetch(url); // URLからRSSフィードをフェッチ
    const xmlData = await response.text(); // フェッチしたデータをテキストとして取得
    const parser = new XMLParser({
      ignoreAttributes: false, // 属性を無視しない設定
    });
    const jsonData = parser.parse(xmlData); // XMLデータをJSONに変換
    return jsonData;
  } catch (error) {
    console.error("Error fetching or parsing RSS feed:", error); // エラーが発生した場合にコンソールに表示
    throw error; // エラーをスロー
  }
}

// 日付をYYYY.MM.DD形式にフォーマットする関数
function formatDate(date: Date): string {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  return `${year}.${month}.${day}`;
}

// アイテムからサムネイルURLを抽出する関数
function extractThumb(item: any): string | null {
  if (item.enclosure && item.enclosure.url) {
    return item.enclosure.url;
  } else if (item["media:thumbnail"]) {
    return item["media:thumbnail"];
  } else if (Array.isArray(item.link)) {
    const link = item.link.find(
      (l: any) => l.rel === "enclosure" || l.type?.startsWith("image")
    );
    return link ? link.href : null;
  }
  return null;
}

// RSSアイテムをArticleインターフェースにパースする関数
function parseRSSItem(item: any, isAtom: boolean = false): Article {
  return {
    title: item.title,
    link: isAtom ? item.link?.href || item.link : item.link,
    thumb: extractThumb(item),
    description: item.description || item.summary || item.content,
    pubDate: formatDate(
      new Date(item.pubDate || item.updated || item.published)
    ),
  };
}

// RSS 2.0形式のJSONデータをArticle配列にパースする関数
function parseRSS2(jsonData: any): Article[] {
  const items = Array.isArray(jsonData.rss.channel.item)
    ? jsonData.rss.channel.item
    : [jsonData.rss.channel.item];
  return items.map((item: any) => parseRSSItem(item));
}

// Atom形式のJSONデータをArticle配列にパースする関数
function parseAtom(jsonData: any): Article[] {
  const entries = Array.isArray(jsonData.feed.entry)
    ? jsonData.feed.entry
    : [jsonData.feed.entry];
  return entries.map((entry: any) => parseRSSItem(entry, true));
}

// 複数のRSSフィードURLを処理し、最新の10記事を返す関数
export async function fetchAndProcessRSS(
  rssURLs: string[]
): Promise<Article[]> {
  let articles: Article[] = [];

  await Promise.all(
    rssURLs.map(async (rssURL) => {
      try {
        const rssData = await fetchRSS(rssURL); // 各RSSフィードをフェッチ
        let fetchedArticles: Article[] = [];

        if (rssData.rss) {
          fetchedArticles = parseRSS2(rssData); // RSS 2.0形式を解析
        } else if (rssData.feed) {
          fetchedArticles = parseAtom(rssData); // Atom形式を解析
        } else {
          console.error(`Unknown feed format for ${rssURL}`, rssData); // 不明なフォーマットのフィード
        }

        articles.push(...fetchedArticles); // 取得した記事を追加
      } catch (error) {
        console.error(`Error processing RSS feed ${rssURL}:`, error); // エラー処理
      }
    })
  );

  // 記事を日付でソートし、最新の10記事を取得
  articles.sort(
    (a, b) => new Date(b.pubDate).getTime() - new Date(a.pubDate).getTime()
  );
  articles = articles.slice(0, 10);

  return articles; // 最終的な記事リストを返す
}

---
import Layout from "@/layouts/Layout.astro";
import { fetchAndProcessRSS } from "@/libs/fetchAndProcessRSS";
import { Image } from "astro:assets";
import noimage from "@/images/noimage.png";

// RSSフィードのURL 配列で複数RSSフィードURLの指定が可能
const rssURLs = [
  "https://note.com/xxx/rss"
];

// RSSフィードから記事を取得して統合
const articles = await fetchAndProcessRSS(rssURLs);
---
<Layout>
  <h1>Latest Articles</h1>
  <ul>
    {
      articles.map((article) => (
        <li>
          <a href={article.link}>
            {article.thumb ? (
              <img src={article.thumb} alt="" />
            ) : (
              <Image src={noimage.src} width={400} height={300} alt="" />
            )}
            <div class="info">
              <p class="date">{article.pubDate}</p>
              <p class="title">{article.title}</p>
            </div>
          </a>
        </li>
      ))
    }
  </ul>
</Layout>

<h3 id="h3e3954103e">😢つまづき⓵XMLデータをJSON形式に変換するパッケージでデプロイ失敗</h3><p>はじめはxml2jsで試して作成していましたが、いざデプロイしようとしたらエラーでデプロイできませんでした。</p><h4 id="h5210acff2f">エラー内容</h4><pre><code>02:15:37 [ERROR] [vite] x Build failed in 1.43s
[commonjs--resolver] [plugin vite:resolve] Cannot bundle Node.js built-in &quot;events&quot; imported from &quot;node_modules\xml2js\lib\parser.js&quot;. Consider disabling ssr.noExternal 
or remove the built-in dependency.</code></pre><h4 id="heaa723eefe">ChatGPTに聞いてみた</h4><blockquote><p>このエラーは、Viteビルド中に発生したものです。エラーメッセージによると、<code>node_modules\xml2js\lib\parser.js</code>からNode.jsの組み込みモジュールである &quot;events&quot; をインポートしようとしているが、それがバンドルされていないため、エラーが発生しています。エラーの提案として、<code>ssr.noExternal</code>を無効にするか、組み込みの依存関係を削除することが挙げられています。</p><p>このエラーの理由として、ViteがデフォルトでNode.jsの組み込みモジュールをバンドルしないためです。これは、Viteがブラウザ向けのフロントエンドアプリケーションを効率的にビルドするための設計上の決定です。しかし、<code>xml2js</code>ライブラリがNode.jsの組み込みモジュールである &quot;events&quot; を使用しているため、このエラーが発生しています。</p></blockquote><p>astro.config.mjsのviteに設定を追加したり試したのですが、うまくいきません・・</p><p>rss-parserも試してみたのですが、<code>Cannot bundle Node.js built-in &quot;http&quot; imported from &quot;node_modules\rss-parser\lib\parser.js&quot;</code>と同様のエラーが出たため断念しました。</p><p>最終的にはデプロイできたfast-xml-parserで落ち着きました。</p>

<h3 id="h0701d7302b">😢つまづき②画像を取得するときにundefinedになる</h3><p>はじめはnoteのRSSフィードの形式をもとに作っていたのですが、複数のRSSフィードからデータを取得するときに画像が取得できないケースに遭遇しました。</p><pre><code>&lt;enclosure url=&quot;https://xxx.xyz/xxxx.jpg&quot; type=&quot;image/jpeg&quot; length=&quot;0&quot; /&gt;</code></pre><p>取得しようと設定してもundefinedになります・・</p><p>parserするときに属性が削除されてしまいurlがなくなっていました。そこでXMLParserのignoreAttributesとattributeNamePrefixオプションの設定を追加したら取得できるようになりました🎉</p>

const parser = new XMLParser({
  ignoreAttributes: false, // 属性を無視しない
  attributeNamePrefix: "", // 属性名のプレフィックスを削除
});

<h2 id="h9a28d23373">いろんなサービスのRSSフィードを見てみよう👀</h2><p><span class="txt-small">※2024/6/11時点</span></p><h3 id="ha62a81d053">note</h3><p><a href="https://www.help-note.com/hc/ja/articles/4402395202841-iframe-RSS%E3%81%A7-%E8%87%AA%E5%88%86%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88%E3%81%ABnote%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B" target="_blank" rel="noopener noreferrer nofollow">iframe、RSSで、自分のサイトにnoteを表示する</a></p><pre><code>&lt;item&gt;
  &lt;title&gt;記事タイトル&lt;/title&gt;
  &lt;media:thumbnail&gt;画像URL&lt;/media:thumbnail&gt;
  &lt;description&gt;&lt;![CDATA[ 本文 ]]&gt;&lt;/description&gt;
  &lt;note:creatorImage&gt;クリエイター画像&lt;/note:creatorImage&gt;
  &lt;note:creatorName&gt;クリエイター名&lt;/note:creatorName&gt;
  &lt;pubDate&gt;Thu, 08 Sep 2022 01:47:28 +0900&lt;/pubDate&gt;
  &lt;link&gt;記事URL&lt;/link&gt;
  &lt;guid&gt;記事URL&lt;/guid&gt;
&lt;/item&gt;</code></pre><h3 id="h36df264104">Qiita</h3><p><a href="https://help.qiita.com/ja/articles/qiita-feed" target="_blank" rel="noopener noreferrer nofollow">フィード機能（ホーム・タイムライン・トレンド）</a></p><pre><code>&lt;entry&gt;
  &lt;id&gt;tag:qiita.com,2005:PublicArticle/記事ID?&lt;/id&gt;
  &lt;published&gt;2024-06-11T15:46:46+09:00&lt;/published&gt;
  &lt;updated&gt;2024-06-11T15:46:49+09:00&lt;/updated&gt;
  &lt;link rel=&quot;alternate&quot; type=&quot;text/html&quot; href=&quot;記事URL＋パラメータ&quot;/&gt;
  &lt;title&gt;記事タイトル&lt;/title&gt;
  &lt;content type=&quot;html&quot;&gt;本文&lt;/content&gt;
  &lt;author&gt;
    &lt;name&gt;ユーザ名&lt;/name&gt;
  &lt;/author&gt;
&lt;/entry&gt;</code></pre><h3 id="hbfca088075">Zenn</h3><p><a href="https://zenn.dev/zenn/articles/zenn-feed-rss" target="_blank" rel="noopener noreferrer nofollow">ZennをRSSフィードで購読する</a></p><pre><code>&lt;item&gt;
  &lt;title&gt;&lt;![CDATA[ 記事タイトル ]]&gt;&lt;/title&gt;
  &lt;description&gt;&lt;![CDATA[ 本文 ]]&gt;&lt;/description&gt;
  &lt;link&gt;記事URL&lt;/link&gt;
  &lt;guid isPermaLink=&quot;true&quot;&gt;記事URL&lt;/guid&gt;
  &lt;pubDate&gt;Wed, 12 Jun 2024 00:00:00 GMT&lt;/pubDate&gt;
  &lt;enclosure url=&quot;OGP画像URL&quot; length=&quot;0&quot; type=&quot;image/png&quot;/&gt;
  &lt;dc:creator&gt;ユーザ名&lt;/dc:creator&gt;
&lt;/item&gt;</code></pre><h3 id="h926adb4daf">はてなブックマーク</h3><p><a href="https://developer.hatena.ne.jp/ja/documents/bookmark/misc/feed/" target="_blank" rel="noopener noreferrer nofollow">はてなブックマークフィード仕様</a></p><p>RSS 2.0、Atom形式の両方あります。</p><pre><code>&lt;item&gt;
  &lt;title&gt;記事タイトル&lt;/title&gt;
  &lt;link&gt;記事URL&lt;/link&gt;
  &lt;description&gt;本文&lt;/description&gt;
  &lt;pubDate&gt;Thu, 23 May 2024 11:57:41 +0900&lt;/pubDate&gt;
  &lt;guid isPermaLink=&quot;false&quot;&gt;hatenablog://entry/ID?&lt;/guid&gt;
  &lt;enclosure url=&quot;画像URL&quot; type=&quot;image/png&quot; length=&quot;0&quot; /&gt;
&lt;/item&gt;</code></pre><pre><code>&lt;entry&gt;
  &lt;title&gt;記事タイトル&lt;/title&gt;
  &lt;link href=&quot;記事URL&quot; /&gt;
  &lt;id&gt;hatenablog://entry/記事ID?&lt;/id&gt;
  &lt;published&gt;2024-06-11T17:45:54+09:00&lt;/published&gt;
  &lt;updated&gt;2024-06-11T17:45:54+09:00&lt;/updated&gt;
  &lt;summary type=&quot;html&quot;&gt;要約&lt;/summary&gt;
  &lt;content type=&quot;html&quot;&gt;本文&lt;/content&gt;
  &lt;category term=&quot;カテゴリ&quot; label=&quot;カテゴリ&quot; /&gt;
  &lt;category term=&quot;カテゴリ&quot; label=&quot;カテゴリ&quot; /&gt;
  &lt;link rel=&quot;enclosure&quot; href=&quot;画像URL&quot; type=&quot;image/png&quot; length=&quot;0&quot; /&gt;
  &lt;author&gt;
    &lt;name&gt;ユーザ名&lt;/name&gt;
  &lt;/author&gt;
&lt;/entry&gt;</code></pre>

<p>📝参考サイト</p><ul><li><a href="https://zenn.dev/kazuki_tam/articles/f7d3c0f1074969" target="_blank" rel="noopener noreferrer nofollow">Astro環境でnote記事一覧を事前ビルドして表示する方法</a></li><li><a href="https://zenn.dev/catnose99/articles/cb72a73368a547756862" target="_blank" rel="noopener noreferrer nofollow">チーム個々人のテックブログをRSSで集約するサイトを作った（Next.js）</a></li></ul>

AstroでRSSフィードから記事一覧を取得してCloudflare Pagesで表示してみる

<h2 id="h3984736af0">基本的な使い方</h2><p>パッケージをインストールします。</p><pre><code>npm install @astrojs/sitemap</code></pre><p>astro.config.mjsにインポート、site・integrationsを設定します。</p>

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: "site: "https://xxx.com",  //ドメイン・末尾スラッシュなし
  integrations: [sitemap()],
});

<h2 id="hace9cc8049">特定のURLを追加する</h2><p>customPagesに配列でURLを指定します。</p>

export default defineConfig({
  //～
  integrations: [sitemap({
    customPages: [
      "https://xxx.com/yyy/",
      "https://xxx.com/yyy/zzz/",
    ]
  })],
});

<h3 id="h08addc5be4">追加したURLはどのような順番で記述される？</h3><p>サイトマップ内のURLの記述の順番がSEOに影響することはありませんが、どのような順番で出力されるか試してみました。</p><h4 id="hcb9dacb773">結論</h4><p>_（アンスコ）、-（ハイフン）、0-9a-zA-Zの順に出力される。</p><p>数字のみだと数字として判断し、数字+文字列だと文字となるけど、「数字のみ」→「数字+文字列」でまとまって出力されるわけではないようです。</p><p>以下はcustomPagesの配列で指定した場合の出力結果です。</p><pre><code>&lt;url&gt;&lt;loc&gt;https://xxx.com/0/&lt;/loc&gt;&lt;/url&gt;
&lt;url&gt;&lt;loc&gt;https://xxx.com/00/&lt;/loc&gt;&lt;/url&gt;
&lt;url&gt;&lt;loc&gt;https://xxx.com/0hoge/&lt;/loc&gt;&lt;/url&gt;
&lt;url&gt;&lt;loc&gt;https://xxx.com/1/&lt;/loc&gt;&lt;/url&gt;
&lt;url&gt;&lt;loc&gt;https://xxx.com/01/&lt;/loc&gt;&lt;/url&gt;
&lt;url&gt;&lt;loc&gt;https://xxx.com/1hoge/&lt;/loc&gt;&lt;/url&gt;
&lt;url&gt;&lt;loc&gt;https://xxx.com/2hoge/&lt;/loc&gt;&lt;/url&gt;
&lt;url&gt;&lt;loc&gt;https://xxx.com/11/&lt;/loc&gt;&lt;/url&gt;
&lt;url&gt;&lt;loc&gt;https://xxx.com/99/&lt;/loc&gt;&lt;/url&gt;
&lt;url&gt;&lt;loc&gt;https://xxx.com/111/&lt;/loc&gt;&lt;/url&gt;</code></pre><h4 id="h802e75c367">この場合どうなる？</h4><ol><li>/recruit/をcustomPagesに追加したとき</li><li>/form/complete/をcustomPagesに追加したとき</li><li>すでに存在する/form/error/を追加したとき</li></ol>

.
└── src/
    └── pages/
        ├── about/
        │   └── index.astro
        └── form/
            ├── index.astro
            ├── thanks.astro
            └── error.astro

<h5 id="h6e4371f858"><strong>1. /recruit/をcustomPagesに追加したとき</strong></h5><p>a-zA-Zの順に則って一番最後に追加されました。</p><h5 id="h9c04ab7bb4"><strong>2. /form/complete/をcustomPagesに追加したとき</strong></h5><p>form/とform/error/の間に追加されました。</p><h5 id="ha3134f7fe2">3. すでに存在する/form/error/を追加したとき</h5><p>重複登録・追加されませんでした。</p>

<h2 id="h7537b25610">特定のURLを除外する</h2><p>filterに条件を設定します。</p>

export default defineConfig({
  //～
  integrations: [sitemap({
    filter: (page) => page !== 'https://xxx.com/hoge/',
  })],
});

<h3 id="h442dd67779">includes/matchメソッドでまとめて除外する</h3><p>URLの一部に含まれているかどうかで判定されるので、/hogeを除外すると/hoge/hogeも除外されます。</p><p>特定の階層やURLを除外する場合は、完全一致またはドメインから指定するといいでしょう。</p>

// /hogeが含まれるURLを除外
filter: (page) => !page.includes("/hoge"),

// /hogeと/errorが含まれるURLを除外
filter: (page) =>
  !page.includes("/hoge") &&
  !page.includes("/error")

// /hoge/数字のみ/が含まれるURLを正規表現で除外
filter: (page) => !page.match(/\/hoge\/[0-9]+\//),

<h2 id="h85d9e2d7b4">filterとcustomPagesどちらが優先？</h2><p>customPagesに追加したURLをfilterで除外設定をすると、filterが優先されURLが追加されませんでした。</p>