NoteのRSSフィードを読み込んでWebページに記事一覧を表示する処理

実現したいこと

NoteのRSSフィードを読み込んでWebページに記事一覧を表示する処理をおこないたい。

発生している問題・分からないこと

rss2jsonというサービスを使って、NoteのRSSをJSON形式で取得し、HTML上に反映することまでできました。
日付、タイトル、サムネイル画像を反映したいのですが、サムネイル画像が反映されなく困っています。

参考サイト
https://visiongram-project.com/#news

参考サイトを参考に私が作成したCodepen
https://codepen.io/ymymymymmmm/pen/gbpZPLY

該当のソースコード

document.addEventListener("DOMContentLoaded", function () {
  (async function loadNoteRSS() {
    try {
      const apiUrl = "https://api.rss2json.com/v1/api.json?rss_url=https://note.com/visiongram/m/m54d8edffc68f/rss";

      const response = await axios.get(apiUrl);
      const data = response.data;

      if (data.status === "ok") {
        let html = "";

        for (const item of data.items) {
          const dateStr = new Date(item.pubDate).toLocaleDateString("ja-JP", {
            year: "numeric",
            month: "numeric",
            day: "numeric"
          });

          const imgMatch = item.description.match(/<img.*?src="(https:\/\/assets\.st-note\.com\/.*?)"/);
          const thumbnail = imgMatch ? imgMatch[1] : "_assets/img/noimage.jpg";

          html += `
            <li class="item_note">
              <a class="rss-link" href="${item.link}" target="_blank" rel="noopener noreferrer">
                <section>
                  <p class="date">${dateStr}</p>
                  <div class="detail">
                    <div class="txts">
                      <h3>${item.title}</h3>
                    </div>
                    <div class="img">
                      <img src="${thumbnail}" alt="${item.title}">
                    </div>
                  </div>
                </section>
              </a>
            </li>
          `;
        }
        const container = document.getElementById("items");
        if (container) {
          container.innerHTML = html + container.innerHTML;
        }

        if (data.items.length <= 3) {
          document.querySelectorAll(".btn_more").forEach(el => el.classList.add("hide_sp"));
        }
        if (data.items.length <= 9) {
          document.querySelectorAll(".btn_more").forEach(el => el.classList.add("hide_pc"));
        }
      } else {
        console.error("RSSデータの取得に失敗しました:", data.message);
      }
    } catch (error) {
      console.error("RSSの読み込み中にエラーが発生しました:", error);
    }
  })();
});

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

      const imgMatch = item.description.match(/<img.*?src="(https:\/\/assets\.st-note\.com\/.*?)"/);
      const thumbnail = imgMatch ? imgMatch[1] : "_assets/img/noimage.jpg";

補足

上記が何か間違っているのかと考えて色々試したのですが、うまくいきません。

int32_t

2025/06/24 06:51

item.descriptionが具体的にどんな値のときに、変数thumbnailが具体的にどのようになって欲しくて、実際はどのような値になってしまうのでしょうか。

mmmmmmy

2025/06/24 07:45

お忙しい中、コメントありがとうございます。 item.descriptionの画像リンクを取得した際に、変数thumbnailがimgMatchを表示して欲しく、またイメージが取得できないときは用意したサムネイル画像を取得して欲しいのですが、実際のところthumbnail: undefinedとなってしまいます。不慣れなものでもし意図を取り違えていたら申し訳ありません。よろしくお願いいたします。

int32_t

2025/06/24 07:52

提示のコードでは変数 thumbnail が undefined にはならない気がします。undefinedになるとしたら、undefinedになるときにどういうitem.descriptionだったのか具体例を示していただけると問題の理解が深まります。 Codepenを見るかぎり、画像が表示される項目と表示されない項目があるように見えます。特定の場合だけ期待通り動いていないのではないのでしょうか?

Lhankor_Mhy

2025/06/24 08:12

CodePen を拝見しましたが、サムネイル画像は読み込めているようでした。

mmmmmmy

2025/06/24 08:30

ご返信ありがとうございます。画像が表示される項目と表示されない項目があるように見えます。特定の場合だけ期待通り動いていないのではないのでしょうか? → おっしゃる通りです。特定の場所だけ動いていないエラーの読み取り方からわからず、、原因の探し方がブラウザの開発者ツール→Sources→JSファイル→見たい動きの行番号にブレイクポイント→リロードで変数で確認したのですが、確認方法から誤っていますでしょうか...？ただ、サムネイル画像がきちんと読み込めている箇所も、実際の参考サイトとは異なる画像を読み込んでおりその原因も突き止めたいのですが、現時点でわからず困っている状態です。。

int32_t

2025/06/24 08:54

確認方法ですが、開発者ツールでブレークしたらその時点での変数の値を見られるので、そこで見てもいいですし、「 const thumbnail = ... 」の行の直後に「console.log(`description=${item.description} thumb=${thumbnail}`);」などと入れてコンソールを確認してもいいでしょう。

mmmmmmy

2025/06/24 09:43 編集

ありがとうございます！！コンソールでの確認ができた気がします！サムネイルが表示されていない時は imgMatchがnullと表示されておりthumbnailが読み取れないため、読み取れなかったとき用のhttps://placehold.jp/13/cfcfcf/ffffff/640x400.png?text=dummy"が表示されておりました。（codepenのthumbnail代わりの画像変更しました） item.descriptionは以下のようにきちんと記事を読み込んでいました。 "2024年8月26日、朝日新聞のパリ2024パラリンピック特集記事に、VISIONGRAMが技術協力を行いました。 パリ2024パラリンピックに出場する、視覚障害者柔道の瀬戸勇次郎選手(73kg級・J2)、パラ水泳の辻内彩野選手(競泳・S12/13)の見え方を再現したVISIONGRAMを作成。このビジュアルフィルターを適用した、選手の一人称視点の画像・動画が記事に掲載されました。競技中のパラアスリートにはどのような世界が見えているのか、直感的に理解できるものとなっています。 VISIONGRAMは、スポーツ領域での活用も期待されています。たとえば健常者のコーチが、視覚障がいのある選手一人ひとりの見え方を把握できるようになることで、より効果的な指導やトレーニングが可能になります。今後もVISIONGRAMは、パラスポーツの振興や競技力向上に貢献していきます。 朝日新聞デジタル版の記事は下記リンクよりご覧いただけます <a href="https://note.com/visiongram/n/n16498cc986df">続きをみる</a> " この上記のhttps://note.com/visiongram/n/n16498cc986dfの記事だと、朝日新聞と書かれた見出し画像が表示されるように実装したいと思っているのですができません。。。

mmmmmmy

2025/06/24 10:14

const imgMatchのurlを拾うパスが、拾って欲しいパスと違うので、思っている画像が反映されないんだと理解できました...！ただ以下に変更してみたのですが、うまくいきません。。。 const imgMatch = item.description.match( /<img[^>]+src=['"](https:\/\/assets\.st-note\.com\/production\/uploads\/images\/[^\/]+\/[^\/'"]+\.(?:jpg|jpeg|png|gif))['"]/);

int32_t

2025/06/24 12:07

元のRSSを見ると、 <item> <title>#5 【メディア掲載】朝日新聞のパラリンピック特集記事にVISIONGRAMが技術協力</title> <media:thumbnail>https://assets.st-note.com/production/uploads/images/173543737/rectangle_large_type_2_63b7a9db89e8a9e649914f0f759beb48.png?width=800</media:thumbnail> <description> <![CDATA[ 2024年8月26日、朝日新聞のパリ2024パラリンピック特集記事に、VISIONGRAMが技術協力を行いました。 ... と <media:thumbnail> に画像URLが入ってますが、JSON化されたものだと { "title": "#5 【メディア掲載】朝日新聞のパラリンピック特集記事にVISIONGRAMが技術協力", "pubDate": "2025-02-07 11:43:00", "link": "https://note.com/visiongram/n/n16498cc986df", "guid": "https://note.com/visiongram/n/n16498cc986df", "author": "", "thumbnail": "", "description": "\n\u003Cp name=\"de38d1ed-e2d2-4cea-8f89-46a40eec7a34\"\u003E2024年8月26日、朝日新聞のパリ2024パラリンピック特集記事に、VISIONGRAMが技術協力を行いました。 ... と media:thumbmail が欠落しているようです。どこにも画像URLは入ってないようですから、rss2json を使うとお望みの動作は不可能かもしれません。

mmmmmmy

2025/06/24 13:06 編集

ご返信ありがとうございます。私も画像の取得を色々試してみたのですが、上手くいかず、rss2jsonでの実装は諦めて、PHPでまだ未完成ですが実装を行っているところです。一緒に試していただきありがとうございました！ご丁寧に何度もお返事くださったおかげで、JSの変数の見方などあやふやだったのですがしっかり理解することができました。また何度もご質問いただいたことで、自分自身が作ったコードをきちんと理解できていないことにも気付き、急いで答えを探すのではなくひとつひとつも丁寧に読み解いていかないといけないなと学びになりました。本当にありがとうございます！ PHPで頑張って完成させてみます^ ^！