ChatGPT情報を複数のRSSから取得して一覧化させるサイトを作った

ChatGPTに関する最新情報を複数のRSSフィードから取得し、一覧化して表示するウェブサイトを作成しました。

https://chatgpt-rss.vercel.app/

実装

生成したJSONファイルを取得して、ニュース記事を表示します。

async function getChatGPTNewsTxt() {
  try {
    const response = await fetch('./chatgpt_news.json');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
    return null;
  }
}

function formatDate(dateString) {
  const utcDate = new Date(dateString);
  const offset = 9 * 60; // 日本のタイムゾーンはUTC+9
  const date = new Date(utcDate.getTime() + offset * 60 * 1000);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();

  return `${year}年${month}月${day}日 ${hour}時${minute}分`;
}

function formatMediaName(link){
  const pattern = /^(https?:\/\/)?(([\w\-]+\.)+[\w\-]+)(\/.*)?$/;
  const match = link.match(pattern);
  return match ? match[2] : null;
}

const btn = document.getElementById('btn');
let data;
btn.addEventListener('click', async (e)=>{
  e.preventDefault();
  data = await getChatGPTNewsTxt();
  const articleList = document.querySelector('.article-list');
  const articles = data.map((itm) => {
    const formatIsoDate = formatDate(itm.isoDate);
    const mediaName = formatMediaName(itm.link);
    return `<li class="article-list_itm nes-container is-dark"><p><a href="${itm.link}">${itm.title}</a></p><p>${formatIsoDate}  ${mediaName}</p></li>`;
  }).join('');
  articleList.innerHTML = articles;
})

以下のコードはJSON生成に使用します。複数のRSSフィードからChatGPTに関する記事を取得し、JSONファイルに書き込んでいます。

const Parser = require('rss-parser');
const axios = require('axios');
const fs = require('fs');

const chatGPTKeyword = 'GPT';

const rssFeeds = [
  //RSSフィードURLを追加
];

async function getChatGPTNewsFromFeed(feedUrl) {
  const parser = new Parser();
  const response = await axios.get(feedUrl);
  const feed = await parser.parseString(response.data);
  return feed.items.filter((item) => item.title.includes(chatGPTKeyword));
}

function writeNewsToFile(news, fileName) {
  const fileContent = JSON.stringify(news, null, 2);
  fs.writeFile(fileName, fileContent, (err) => {
    if (err) {
      console.error(`ファイル書き込み中にエラーが発生しました: ${err}`);
      return;
    }
    console.log(`ニュース情報をファイル ${fileName} に書き込みました。`);
  });
}

(async () => {
  try {
    const allNews = [];
    for (const feedUrl of rssFeeds) {
      const news = await getChatGPTNewsFromFeed(feedUrl);
      allNews.push(...news);
    }

    console.log('ChatGPT関連のニュース:');
    allNews.forEach((news, index) => {
      console.log(`\n記事 ${index + 1}:`);
      console.log(`title: ${news.title}`);
      console.log(`URL: ${news.link}`);
    });

    const newsFileName = 'chatgpt_news.json';
    writeNewsToFile(allNews, newsFileName);

  } catch (error) {
    console.error('エラーが発生しました:', error);
  }
})();

更新方法

JavaScriptを実行→最新のJSONファイルを生成→生成されたJSONファイルをプッシュ→デプロイの一連の流れをmacのAutomatorに登録しています。登録したバッジを叩くと、生成された新しいJSONを読んでくれるので一覧が更新されます。フロントでJSONを取得するだけなので、デプロイはVercelで静的サイトとしてホスティングしています。

この方法で、ChatGPTに関する最新情報を手軽にチェックできるようになりました。

*本記事は2023年03月30日にQiita投稿したものを移管したものです。