コードコネクト Tech Blog AstroでRSSフィードに画像のURLを組み込む方法
- この記事のポイント
-
- RSSは@astrojs/rssで実装
- Astroで画像のURLを含めたRSSフィードを生成する方法がわかる
AstroでRSSフィードを生成には@astrojs/rssを使えば簡単に実装できます。
だけど画像の配信ってどうやるんだ？と思い、調べて実装してみたので今回はその方法を紹介します。
公式サイトでは具体的な画像の配信方法が紹介されていなかったので、同じような悩みを持つ方の参考になると嬉しいです。
@astrojs/rssとは
@astrojs/rss は、AstroフレームワークでRSS フィードを生成するためのパッケージです。
このパッケージを使うこと記事や投稿のデータからRSSフィードを簡単に配信することができるようになります。
@astrojs/rssでRSSを生成する
@astrojs/rssを使って最低限のRSSフィードを生成するには、公式にもあるようにこんな感じのコードになります。
import type { APIContext } from 'astro'import rss from '@astrojs/rss'
export async function GET(context: APIContext) { const posts = await getCollection('post')
return rss({ title: 'Code Connect Tech Blog', description: '合同会社コードコネクトのテックブログです', site: context.site ?? '', items: [] // RSSで配信するコンテンツ}今回の記事ではitemsで配信するコンテンツに画像を追加します。
画像のURLを含めたRSSフィードを生成する
基本的なRSSフィードの生成方法は上記のコードで説明しましたが、画像のURLを含めたRSSフィードを生成するには、xmlnsの定義とcustomDataを使います。
先のコードにxmlnsの定義とcustomDataを追加することで、RSSフィードに画像のURLを含めることができます。
実際のコードはこんな感じになります。
{ title: 'Code Connect Tech Blog', description: '合同会社コードコネクトのテックブログです', site: context.site ?? '', xmlns: { media: 'http://search.yahoo.com/mrss/', }, items: posts .map((post) => { return { title: post.title, description: post.description, pubDate: post.publishedAt, link: `/posts/${post.slug}`, customData: `<media:content url="tech.codeconnect.co.jp/${post.thumbnail}" type="image/${post.thumbnail.split('.').pop()}" medium="image" width="1200" height="630" />`, } }) .filter((post) => post.pubDate)}まとめ
AstroでRSSフィードを生成する方法を紹介しました。
RSSを配信するなら画像は含めたいと思うのですが、公式になかったので実装方法を調べてみました。
一度理解してしまえばcustomDataの使い方にも慣れるので、画像以外のデータの配信にも応用できるかと思います。
