🌐

サイトに別媒体で書いた記事を自動で表示させたい

4 min read

こんにちは、@hatuta_8_です。
今回は自分のポートフォリオサイトに別媒体(はてなブログやキータなど)で書いた自分の記事を自動で表示できるようにしたいと思います。

ポートフォリオサイトをreactで作っているのでreactでの実装方法の説明となります。

使った技術

調べてみたところrss-parserというライブラリで簡単に実装できそうだとわかりました。

https://github.com/rbren/rss-parser

実装方法

全体のコードを紹介した後に細かいコードをみていきます。

とりあえず完成したコードです。

import React from 'react';
import { Component } from 'react';
import PropTypes from 'prop-types';
import './Posts.css';
import Moment from 'react-moment'

const RssParser = require('rss-parser');
const CORS_PROXY = "https://cors-anywhere.herokuapp.com/"
const url = CORS_PROXY + 'https://zenn.dev/shuntatakemoto/feed'
const rssParser = new RssParser();

class Posts extends Component {
  constructor(props) {
    super(props);
    this.state = {
      contents: [],
    };
    this.componentDidMount = this.componentDidMount.bind(this)
  }
  componentDidMount() {
    rssParser.parseURL(url)
      .then((feed) => {
        const data = feed.items;
        this.setState({
          contents: [...data]
        });
      })
      .catch((error) => {
        console.error('Get Failed', error);
      })
  }
  render(props) {
    const classes = this.props.classes;
    const contents = this.state.contents.map(content => {
      return <div className="posts-parent">
        <div  className="posts-return">
            <div className="post-date">
                <Moment format="YYYY/MM/DD">{content.pubDate}</Moment>
            </div>
            <div className="post-title">
                {content.title}
            </div>
            <div className="post-link">
                <a href={content.link}>Read More</a>
            </div>
        </div>
      </div>
    });
    return (
      <div className="Posts">
        <div className="posts-top-title">
            <h1>Posts</h1>
            <p>様々な媒体に投稿した記事を自動で集計して表示しています</p>
        </div>
        <header className="Posts-header">
          {contents}
        </header>
      </div>
    );
  }
}

Posts.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default Posts;

 

次に細かくコードをみていきます。

諸々のインポートです。
react-momentを使うことで世界標準の時刻表示をYYYY/MM/DDの表示にしています。

import React from 'react';
import { Component } from 'react';
import PropTypes from 'prop-types';
import './Posts.css';
import Moment from 'react-moment'

 

ここではRSSParserのインスタンス生成をしています。
今回は自分のポートフォリオサイトに自分のZennの記事を表示させています。
RSS情報を取得するときは基本的に各媒体の自分のトップURL/feedか各媒体のトップURL/rssで取れます。

キータはhttps://qiita.com/ユーザID/feed.atomです

const RssParser = require('rss-parser');
const CORS_PROXY = "https://cors-anywhere.herokuapp.com/"
const url = CORS_PROXY + 'https://zenn.dev/shuntatakemoto/feed'
const rssParser = new RssParser();

 

コンストラクターの定義をしています。

class Posts extends Component {
  constructor(props) {
    super(props);
    this.state = {
      contents: [],
    };
    this.componentDidMount = this.componentDidMount.bind(this)
  }

 

stateにrssParserの結果をバインドしています。

componentDidMount() {
  rssParser.parseURL(url)
    .then((feed) => {
      const data = feed.items;
      this.setState({
        contents: [...data]
      });
    })
    .catch((error) => {
      console.error('Get Failed', error);
    })
}

 

表示するコンテンツの形に合わせてstateの中身を書きだしています。

render(props) {
  const classes = this.props.classes;
  const contents = this.state.contents.map(content => {
    return <div className="posts-parent">
      <div  className="posts-return">
          <div className="post-date">
              <Moment format="YYYY/MM/DD">{content.pubDate}</Moment>
          </div>
          <div className="post-title">
              {content.title}
          </div>
          <div className="post-link">
              <a href={content.link}>Read More</a>
          </div>
      </div>
    </div>
  });
  return (
    <div className="Posts">
      <div className="posts-top-title">
          <h1>Posts</h1>
          <p>様々な媒体に投稿した記事を自動で集計して表示しています</p>
      </div>
      <header className="Posts-header">
        {contents}
      </header>
    </div>
  );
}
}

Posts.propTypes = {
classes: PropTypes.object.isRequired,
};

export default Posts;

 

最後に

簡単な説明でしたが参考にして頂ければ幸いです。
ここまで読んでいただきありがとうございました。

Discussion

ログインするとコメントできます