タイトルのとおり。

この日記サイトはHonoXとmicroCMSで動かしていて、先日FEED配信機能を追加した。

というわけで今日はさくっと実装内容を共有。

ちょっと前に同様のスタックでsitemapを生成する記事を紹介していた。

HonoXとmicroCMSのブログでsitemapをサクッと動的に生成

このときはroutes配下にsitemap.xml.tsを作成してテキストを{ "Content-Type": "application/xml" }で返せばよかった。

なので、FEEDも配信も同様にfeed.atom.tsのようなエンドポイントファイルを作成して、テキストを生成したのちに、{"Content-Type":"atom+xml"}で返せばいい。

以下のようなコードになった。

import { createRoute } from "honox/factory";
import { config } from "../settings/siteSettings";
import type { MicroCMSListResponse } from "microcms-js-sdk";
import type { Post } from "../types/blog";
import { MicroCMSClient } from "../libs/microcmsClient";
import { jstDatetime } from "../utils/jstDatetime";

export default createRoute(async (c) => {
  const client = new MicroCMSClient(c.env.SERVICE_DOMAIN, c.env.API_KEY);
  const limit = 50;
  const r = await client.getListResponse<MicroCMSListResponse<Post>>("post", {
    limit: limit,
    fields: "id,title,updatedAt,createdAt,description",
  });
  const baseUrl = config.siteURL;
  const feedItems: string[] = [];
  for (const post of r.contents) {
    feedItems.push(` <entry>
      <title>${post.title}</title>
      <link href="${baseUrl}/post/${post.id}" />
      <id>${baseUrl}/post/${post.id}</id>
      <updated>${jstDatetime(post.updatedAt)}</updated>
      <published>${jstDatetime(post.createdAt)}</published>
      <summary>${post.description ? post.description.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;") : ''}</summary>
    </entry>`);
  }
  const atomFeed = `<?xml version="1.0" encoding="UTF-8"?>
  <feed xmlns="http://www.w3.org/2005/Atom">
    <title>${config.siteTitle}</title>
    <link href="${baseUrl}/feed.atom" rel="self"/>
    <link href="${baseUrl}/"/>
    <id>${baseUrl}/</id>
    <updated>${jstDatetime(new Date().toISOString())}</updated>
    ${feedItems.join("")}
  </feed>`;
  return c.text(atomFeed,200,{"Content-Type":"atom+xml"})
}); 

あまり難しいことはなく適当に50件程度記事を取得して、FEED配信に即したxmlテキストを生成して返す。

/feed.atomにアクセスするとxmlデータが表示される。

この日記サイトのフィード配信URL。

https://qlitre-dialy.ink/feed.atom

あとは適当なリーダーに登録してもらえば最新の記事が取得される。

iPhoneのNetNewsWireで取得した例。最新のエントリが配信された。

これは良い。これから日記の更新を増やそうと思っている、よろしければぜひFEED登録してみてください。ではでは。