Expressで遊ぶ、npmモジュールの「feedparser」で外部サイトのRSSを取得して表示する方法

ハル

2018.01.15

Node.jsを使ってどんなことができるのか勉強中のハルです。

WordPressなどに、サイドバーに外部サイトのRSSフィードを簡単に追加できる機能ってありますよね。今回、そんな感じのことをNode.jsを使ってやる方法を調べてみたので、紹介したいと思います。

Node.jsのフレームワークのExpressでひな形を作成したものを用意し、Expressを必要最低限編集し、トップページに外部RSSフェードを取得して一覧で出すところまでしてみたいと思います。

環境準備
- macでExpressを準備
RSSフィードを扱いやすくするモジュールを使用して出力する
- 「feedparser」について
- 追加で必要モジュールのインストール
Expressを編集

環境準備

Macのパソコンを使っているので、動作確認コマンド紹介はMac環境対象です。

▼今回私が試したnode.jsのバージョン

$ node -v
v8.0.0
ちなみに、私はバージョン管理のnvmでバージョンを切り替えています。

nvmなどのバージョン管理を用意していない方は、まずそちらから準備されることをオススメします(その説明は省きます)。
 
macでExpressを準備
まずは、Expressを用意したいと思います。
こちらを用意します。

https://www.npmjs.com/package/express-generator
グローバルでnpmのインストールを行います。
$ npm install -g express-generator
これでExpressコマンドが使えるようになるかと思います。
 
次に、デフォルトのひな形を生成します。
$ mkdir ./express-feed
$ cd ./express-feed
$ express
すると、プロジェクトが用意されるので、終了したら `npm install` と `npm start`を実行します。
$ npm install
これで必要モジュールのインストールが始まります。
 
終了したら、
$ npm start
を実行し、起動し、ブラウザでlocalhostの3000番にアクセスしてみます。

(停止するときは ctrl+c で停止します)
URLは下記で表示されるかと思います。
http://localhost:3000/

「Welcome to Express」と出ていればExpressの準備は終了です。
RSSフィードを扱いやすくするモジュールを使用して出力する
「feedparser」について
npm公式から、“簡単にRSSを取得しjsonで扱えるもの”を検索するといろいろ出てくるのですが、「feedparser」や「rss-parser」が使いやすいかなと思いました。

今回は、 現時点で「feedparser」のほうがステータスが高かったので、こちらを使っていきます。
feedparser: https://www.npmjs.com/package/feedparser
追加で必要モジュールのインストール
npm installで「feedparser」モジュールをインストールします。
$ npm install feedparser
また、 「feedparser」のREADMEにある「request」モジュールも使いたいので、インストールします。
$ npm install request
Expressを編集
Expressのトップページに出力させるため、ファイルを編集していきます。
routsの編集
プロジェクト内に元から存在する routs/index.jsのファイルを編集します。
まず、初期状態はこのように（↓）なっていると思います。
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;
こちらを変更します。
まず、先ほどnpm installした 「feedparser」と「request」を読み込みます。
var express = require('express');
var router = express.Router();
var FeedParser = require('feedparser');// 追記
var request = require('request');// 追記
router.get() 以降の部分を変更してきます。
/* GET home page. */
router.get('/', function(req, res, next) {
  // ここに追記していきます。
  // res.render('index', { title: 'Express' }); //今回は使わないのでコメントアウト
});
「feedparser」のREADMEの説明を元に追記したものが、下記になります。
/* GET home page. */
router.get('/', function(req, res, next) {
  // ここに追記していきます。
  var data = [];
  var feed = request('https://liginc.co.jp/feed/')
  var feedparser = new FeedParser();

  feed.on('error', function (error) {
    // request エラー処理
  });

  feed.on('response', function (feed_res) {
    var stream = this;
    if (feed_res.statusCode !== 200) {
      this.emit('error', new Error('Bad status code'));
    }
    else {
      stream.pipe(feedparser);
    }
  });

  feedparser.on('error', function (error) {
    // feedparser エラー処理
  });

  feedparser.on('readable', function () {
    var item;
    while (item = this.read()) {
      data.push({
        'title': item.title,
        'url': item.link
      });
    }
  });

  feedparser.on('end', function () {
    res.render('index', { title: 'LIG Feed', data: data});
  });

  // res.render('index', { title: 'Express' }); //今回は使わないのでコメントアウト
});

「feedparser」のreadableイベント内のwhile文で、data変数に記事タイトルとURLを格納しています。
最後に「feedparser」のendイベントで、ビューに値を受け渡しています。

ビューに追記する
初期がjadeなので、jadeのファイルを編集してきます。
/views/index.jade を編集します。
extends layout

block content
  h1= title
  p Welcome to #{title}
このようになっているものに、下記のように追記します。
p Welcome to #{title}

  //- 下記を追記
  each item in data
    h2
      a(href="#{item.url}", target="_blank") #{item.title}
dataが渡ってきているので eachでループしています。
確認する
npm startしていたら、止めてから再度 npm startします。
$ npm start
起動したら、
http://localhost:3000/
にブラウザでアクセスします。

上記の画像のように表示されたかと思います（タイトルを表示するだけのものですが……）。
編集したソースの全体
▼　/rpites/index.js
var express = require('express');
var router = express.Router();
var FeedParser = require('feedparser');
var request = require('request');

/* GET home page. */
router.get('/', function(req, res, next) {
  var data = [];
  var feed = request('https://liginc.co.jp/feed/')
  var feedparser = new FeedParser();

  feed.on('error', function (error) {
    // request エラー処理
  });

  feed.on('response', function (feed_res) {
    var stream = this;
    if (feed_res.statusCode !== 200) {
      this.emit('error', new Error('Bad status code'));
    }
    else {
      stream.pipe(feedparser);
    }
  });

  feedparser.on('error', function (error) {
    // feedparser エラー処理
  });

  feedparser.on('readable', function () {
    var item;
    while (item = this.read()) {
      data.push({
        'title': item.title,
        'url': item.link
      });
    }
  });

  feedparser.on('end', function () {
    res.render('index', { title: 'LIG Feed', data: data});
  });

  // res.render('index', { title: 'Express' }); //今回は使わないのでコメントアウト
});

module.exports = router;
▼　/views/index.jade
extends layout

block content
  h1= title
  p Welcome to #{title}

  //- 下記を追記
  each item in data
    h2
      a(href="#{item.url}", target="_blank") #{item.title}
Expressの説明もあったので長く感じますが、かなり簡単にFeedを取得し、表示をすることができました。
僕の業務ではPHPがメインなので、Expressには触れることがなく、これでしっかりサイトを作ったことはないのですが、PHPではなくJavaScriptでいろいろ作れることに魅力を感じています。今後も個人的に挑戦していきたいと思います。
         
                         LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
              Webサイト制作の実績・料金を見る