企業があなたを奪い合う|リブセンス様
企業があなたを奪い合う|リブセンス様
2018.01.15
#116
それいけ!フロントエンド

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

ハル

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

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

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

 

環境準備

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

「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/

にブラウザでアクセスします。

ss 2017-11-28 21.45.16

上記の画像のように表示されたかと思います(タイトルを表示するだけのものですが……)。

編集したソースの全体

▼ /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でいろいろ作れることに魅力を感じています。今後も個人的に挑戦していきたいと思います。

2 0