【TypeScript】noteの記事サムネイルが取得できない

目次

困っていたこと

TypeScriptとNext.jsでポートフォリオサイトを作成中のこと、
noteの記事のサムネイルを取得しようとしていました。

rss-parserを使ってRSSを取得していたのですが、note:creatorImageで囲まれたサムネイルURLが取得できず苦戦・・・。

/**
 * noteの最新記事を取得(RSSフィードから)
 */
export async function getNoteArticles(limit: number = noteConstants.limit): Promise<Article[]> {
  try {
    const feed = await parser.parseURL(noteConstants.url);
    return feed.items.slice(0, limit).map((item) => ({
      id: item.id ?? item.guid ?? "",
      title: item.title ?? "",
      url: (item.link ?? item.guid ?? ""),
      createdAt: item.pubDate ?? new Date().toISOString(),
    }));
  } catch (error) {
    // エラー時は空配列を返す
    return [];
  }
}

わかったこと

rss-parserはデフォルトでカスタム名前空間をパースしないため取得できなかった

対応方法

以下のようにcustomFieldsオプションを追加した

const parser = new Parser({
  customFields: {
    item: [
      ['note:creatorImage', 'creatorImage'],
      // 他のnote名前空間のフィールドも取得したい場合は追加
      // ['note:creatorName', 'creatorName'],
      // ['note:likeCount', 'likeCount'],
    ]
  }
});
目次