Zenn
📚

[Next.js]NoteのRSSフィードを活用してブログ一覧を表示する方法

2024/08/26に公開
Next.js
Python
TypeScript
note
cs
tech

はじめに

今回は、Next.jsのAppルーターとRSSフィードを利用して、Noteの記事一覧をWebサイトに表示する方法を紹介します。
RSSフィードから記事情報を取得し、ブログセクションにサムネイル付きで表示するまでの流れを見ていきます。

目次

そもそもRSSフィードとは何か？

非情報系でCSの知識が片っ端からない私にとって、「まずなんだこれ」という話。

RSSフィードとは...

ウェブサイトが更新情報を配信するためのXMLベースのデータフォーマット。
ユーザーやアプリケーションは、RSSフィードを購読することで、最新のブログ記事やニュースなどのコンテンツを自動的に取得できます。

つまりこういうシーンかな？
1. ニュースアプリやリーダーアプリでの活用
RSSフィードを購読することで、ユーザーは特定のニュースサイトやブログが更新されるたびに、自動的に新しい記事を取得し、最新情報を逃さずキャッチできます。これにより、複数のサイトを個別にチェックする手間が省けます。

2. 企業のコンテンツ配信
企業が自社ブログやニュースリリースの更新情報をRSSフィードで提供すると、顧客やビジネスパートナーが簡単に最新のコンテンツを受け取れるようになります。例えば、特定の製品情報や業界ニュースを追っている人々に対して、重要なアップデートを自動的に配信することが可能です。

3. 自動化ツールやボット
RSSフィードを利用して、自動化ツールやボットが特定のウェブサイトの新着情報を収集し、必要な処理（例えば、通知を送信したり、データベースに保存したり）を自動的に実行するケースです。これにより、手作業での情報収集の効率化が図れます。

RSSフィードとスクレイピングの違い

これも気になった。
昨今AIなどの機械学習で業務の自動化が推進される中、ちょっとテックに触れたことのある人なら知っているだろうこの単語。
なんとなく情報を精査しながら欲しいものだけ取ってくる、なんならそれを加工する。みたいなイメージがあるが、今回の例と少し似ている箇所がある。
どこが違うのだろうか。

スクレイピングとは？

スクレイピングは、ウェブページのHTML構造を解析し、必要な情報をプログラムで抽出する技術。
ウェブサイト全体やその一部からデータを収集でき、RSSフィードに限定されない柔軟性があります。
しかし、サイトのHTML構造が変わるとスクレイピングのコードを修正する必要があります。
また、サイト運営者の許可なしに行うと法的リスクがある場合もあります。

RSSフィードとの違い

  • データ提供の公式性:
    RSSフィードは公式に提供されたデータで、安全かつ信頼性が高いのに対し、スクレイピングは非公式なデータ抽出手法であり、信頼性や合法性が保証されない場合があります。
  • 保守の手間:
    RSSフィードはサイト運営者が管理しているため、変更があっても自動的に対応されますが、スクレイピングはHTML構造の変更に対してコードの修正が必要です。
  • 倫理的・法的リスク:
    RSSフィードの利用はサイト運営者の意図に沿ったものでありリスクが低いですが、スクレイピングは許可なしに行うと法的リスクが生じる可能性があります。

RSSフィードのメリットとデメリット

保守的にも、法的にもより安全で構造化されたRSSだとわかった。
では今回のようないわゆる「まとめ」を作るのにどうメリットがあり、デメリットなのかを見ていく。

メリット

  • 構造化されたデータ:
    RSSフィードは規格化されたフォーマットで提供されるため、データの取得と解析が簡単です。
  • 自動更新:
    フィードを購読することで、サイトが更新されるたびに自動的に新しい情報を取得できます。
  • 法的リスクが低い:
    サイト運営者が提供している公式なデータなので、スクレイピングと比べて法的リスクが低いです。

デメリット

  • 提供範囲が限られる:
    サイト運営者が提供する情報に限定されるため、必要な情報がフィードに含まれていない場合があります。
  • 柔軟性の欠如:
    スクレイピングのように細かい情報を取得する柔軟性はありません。

以上のようにRSSにはどこか安全で安心ではあるが、一方で柔軟性には欠けそうだ。
ただ、その機能だけで満足するなら取り入れるべきだとわかった。

今回の実装目標

制作しているWEBページ(Next.js)の中のBlogというコンテンツに、noteで配信しているコンテンツをそのまま展開すること！

具体的には

  1. 画像（サムネイル）
  2. タイトル
  3. 投稿日
  4. 遷移先のURL（取得できなくてもクリックでnoteに遷移できれば良い）

手順1: RSSフィードを解析するための準備

まずは、RSSフィードを解析するために必要なパッケージをインストールします。

npm install rss-parser

rss-parserを使うことで、RSSフィードを簡単に解析できます。

手順2: RSSフィードの解析用APIを作成

次に、NoteのRSSフィードを取得し、必要な情報を抽出するAPIを作成します。
以下のコードは、Appルーターを使って /app/api/note/rss/route.ts に実装します。

typescript
import { NextResponse } from 'next/server';
import Parser from 'rss-parser';

const parser = new Parser({
  customFields: {
    item: ['media:thumbnail'],
  },
});

export async function GET() {
  const feed = await parser.parseURL('https://note.com/アカウント名/rss');
  const articles = feed.items.map((item) => ({
    title: item.title,
    link: item.link,
    pubDate: item.pubDate,
    thumbnail: item['media:thumbnail'] || '/assets/images/logo.jpg', // デフォルト画像
  }));

  return NextResponse.json(articles);
}

この時
const feed = await parser.parseURL('https://note.com/アカウント名/rss');
についてですが、実はnoteのアカウントページを見にいくと、以下のようなタブが存在します。

このRSSをクリックすると、こんな画面がバーーっと表示されます。

よく見るとhrefにhttps://note.com/jyuuigaku_note/rssとあります。
これがrssフィードのURLというものです。

手順3: フロントエンドでブログ一覧を表示

次に、フロントエンド側でAPIから取得した記事情報を表示するコンポーネントを作成します。以下は BlogList.tsx コンポーネントの例です。

typescript
"use client";

import { useEffect, useState } from 'react';

interface Article {
  title: string;
  link: string;
  pubDate: string;
  thumbnail: string;
}

const BlogList = () => {
  const [articles, setArticles] = useState<Article[]>([]);

  useEffect(() => {
    const fetchArticles = async () => {
      const res = await fetch('/api/note/rss');
      const data = await res.json();
      setArticles(data);
    };

    fetchArticles();
  }, []);

  return (
    <section>
      <h2 className="text-3xl font-bold mb-8">Blog</h2>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {articles.map((article, index) => (
          <a href={article.link} key={index} className="block p-4 bg-white rounded shadow hover:shadow-lg transition">
            <img src={article.thumbnail} alt={article.title} className="w-full h-48 object-cover rounded" />
            <h2 className="mt-4 text-lg font-bold">{article.title}</h2>
            <p className="text-sm text-gray-500">{new Date(article.pubDate).toLocaleDateString()}</p>
          </a>
        ))}
      </div>
    </section>
  );
};

export default BlogList;

手順4: ページを確認

いい感じですね！！

まとめ

これで、NoteのRSSフィードを解析し、Next.jsのアプリケーションでブログ記事一覧を表示できるようになりました。
この方法を使えば、自分のブログや他のRSS対応サービスの記事を簡単にWebサイトに組み込むことができます。

Discussion