見出し画像

noteのRSS-FEEDデータでトップ画像を採りたい

他のサイトのRSS-FEEDデータから、タイトルやトップの画像を取り出して最新情報を表示するサイトを作っています。
しかし通常のブログサイトなどの記事は、トップ写真も表示されますが、最近流行りの、『note.com』のRSSデータでは画像が表示されない問題が発生しました。

そもそもnoteのRSS-FEEDデータを題材にしたのは、RSS-FEEDの画像として上記のヘッダーの画像を取り込みたかったのに出てこないということから始まりました。他のブログのRSSでは問題ないのに。

noteのRSS-FEEDデータを調べると下記のようになっている

<rss xmlns:webfeeds="http・・・・・
  <channel>
   <title> note のタイトル </title>
   <description> 自己紹介など   </description>
   <item>
    <title>  記事タイトル1  </title>
      <media:thumbnail>https://・・・・・XXX1.jpeg?width=800</media:thumbnail>
      <description> 記事の最初のブロックの文章や画像  </description>
    </item>

    <item>
      <media:thumbnail>https://・・・・・XXX2.jpeg?width=800</media:thumbnail>
      <title>  記事タイトル2  </title>
      <description> 記事の最初のブロックの文章や画像  </description>
    </item>
     ・
     ・
     ・
     ・
     ・

  </channel>
</rss>

 
<media:thumbnail>https://・・・・XXX1.jpegwth=800</media:thumbnail>

の部分のXXX1.jpgが記事のヘッダーの画像を指している。
通常のブログのRSSには<media:thumbnail>なんてタグはなくて、<description>の中に最初の画像が入っている。
noteのRSSデータの<description>には、記事の最初のブロックの文章や画像が入っている。この最初のブロックに画像がなければRSSデータに画像を指すファイル名は出てこない。

RSSデータを取り込んで画像を表示するとき、
<description>・・</description>
の中の画像を探していたので、noteの記事の最初のブロックに画像を入れていないと画像なしとなってしまった。
そこで、ヘッダーの画像(XX1.jpg)を出したいので、
<media:thumnail>・・・</media:thumbnail>内に画像ファイル名を探して表示するように、RSS表示ロジックを変更すると、noteのトップ画像を表示できることが分かった。
または、noteの記事の最初のブロックに画像を入れると(記事のトップ画像ではないが)最初に入れた画像がRSSで採取できる。。

この記事が気に入ったらサポートをしてみませんか?