ReactでRSSを取得する

右側の余白が頭痛の種

キャップ野球情報局ではレスポンシブ対応を行っています。
ただ、2カラムレイアウトにするとどうしても右側に余白ができてしまう問題がありました。
そこで意見を募った結果、新着ブログ記事を表示してほしいなどの意見があったので早速実装しました。

rss-parserを使う

• rss-parser

再び立ちはだかるCORS

ブラウザでは、セキュリティの観点から、あるサイトで異なるサイトのデータを読み込むことに制限を設けています。それがCORS (Cross-Origin Resource Sharing)です。

解決策

基本的にCORSはサーバ側で'Access-Control-Allow-Origin'ヘッダを付加することによって解決できますが、amebaとかnoteのサーバの設定を変えてくださいとはお願いできないので、 プロキシサーバーを経由することが一般的です。

ありがたいことに、herokuを使ったプロキシサーバが用意されています。

• https://cors-anywhere.herokuapp.com/[URL]

これでブログのRSSが取得できます。

実装編

import Parser from 'rss-parser';
import moment from 'moment';

componentDidMount(){
        (async () => {
            const blogs = [
                'https://note.com/mpre/rss',
                'http://rssblog.ameba.jp/capfuta/rss20.xml',
                'https://note.com/kumagae_capthrow/rss',
                'http://rssblog.ameba.jp/tohru-cap/rss20.xml'
            ]
            let parser = new Parser();
            let feeds = [];
            for(let i = 0; i < blogs.length; i++){
                let feed = await parser.parseURL('https://cors-anywhere.herokuapp.com/'+blogs[i]);
                //console.log(feed.items);
                feeds = feeds.concat(feed.items);
            }
            feeds.sort((a,b)=>{
                if(moment(a.pubDate) > moment(b.pubDate)){
                    return -1;
                }else{
                    return 1;
                }
            })
            this.setState({
                blogs:feeds
            })
           
          })()
          .catch(err=>{
              console.error(err);
          });
    }

参考

• CORSまとめ