<p>長いことブログをやっていたのでRSSの存在は5億年前から認知していましたが、やっとのことで手をつける気になりました。遅い。</p><h2 id="h55b62d5072">RSSのURLを取得</h2><p>まずはRSSのURLを取得します。PCだとここ。<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/86db7eee0e9346d4a6690a9b7a1ab88e/picture_pc_cb121d2c067b44c3a76718f43e16f1a2.webp" alt=""><br>「RSS」をクリック<br>以下のURLがもらえます。</p><pre><code>https://note.com/{ユーザーID}/rss.xml</code></pre><h2 id="h99b702cc26">PHPを書く</h2><p>XML形式をJSONに変換する&amp;CORSを突破するために以下のPHPを書きました。</p><pre><code>&lt;?php
  $api = "https://note.com/3go_moon/rss.xml";
  $options = array("http" =&gt; array(
    "header" =&gt; "Content-type: application/json",
  ));
  $xml = file_get_contents($api, false, stream_context_create($options));
  $json = simplexml_load_string($xml);
  header( "Access-Control-Allow-Origin:*" );
  echo json_encode($json);</code></pre><h2 id="hed15d9d0c8">fetchして情報を取得する</h2><p>noteのRSSからは、記事ごとに</p><ul><li>URL</li><li>タイトル</li><li>投稿日</li></ul><p>の3つを取得することができます。<br>加えて、note自体のタイトルやURLももらえます。</p><pre><code>// src/types/note.ts

export type Note = {
  description: any[];
  guid: string;
  link: string;
  pubDate: string;
  title: string;
};

// src/components/Note.tsx  

const Note: FC = () =&gt; {
  const { data, error } = useSWR('PHPのURL', fetcher);

  let item: Note[] = [];
  let noteUrl = '';

  if (data) {
    item =  data.channel.item;
    noteUrl = data.channel.link;
  }

  return (
    ...
  );
};

export default Note;</code></pre><p>カバー画像などは取得できないようで、それぞれOGPから引っ張ってくる処理をmapで回すやり方を模索中です。。</p>

【初めてのポートフォリオ】RSSを取得してnoteを埋め込んだ【PHP/Next.js】