【Node.js】おさらいがてら、スクレイピングしてみる

研究
OLYMPUS DIGITAL CAMERA
この記事は約6分で読めます。

この記事は1年前の記事です。当時の情報、理解に基づいておりますのでご留意ください

イチからやってみましょう

さて今回はイチからnode.jsのプロジェクトを作ってみたいと思います。

リポジトリを作る

リポジトリのフォルダをローカルに作り、それをVSCodeで開き以下の手順を踏みます。

git init #←gitに空リポジトリを作る、これを行うとブラウザの該当リポジトリに以降の手順を指示される。

heroku apps:create #←herokuを作り関連づける

npm init #package.jsonをよしなに作ってくれる

git push heroku main #今回はmainをherokuにアップロードする

npm initでイエスマンして作ったpackage.jsonをherokuにあげると

2020-12-04T10:25:26.431015+00:00 heroku[web.1]: Starting process with command `npm start`
2020-12-04T10:25:29.274544+00:00 app[web.1]: npm ERR! missing script: start

などと叱られる…少なくともscriptsのstartを以下に修正。

  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

index.jsを以下の通り記述。

console.log('Hello, world!');

こうすると、ブラウザではルーティングが繋がっていないので叱られるけれど、

heroku logs --tail

で参照できるログの中にHello, World!が記述されます。

Express配置

Expressは少なくとも使いたいので配備。
フォルダ内で

npx express-generator

を実行すると、

   create : public/
   create : public/javascripts/
   create : public/images/
   create : public/stylesheets/
   create : public/stylesheets/style.css
   create : routes/
   create : routes/index.js
   create : routes/users.js
   create : views/
   create : views/error.jade
   create : views/index.jade
   create : views/layout.jade
   create : app.js
   create : package.json
   create : bin/
   create : bin/www

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=nodescraper:* npm start

とよしなにフォルダが作られます。

https://blooming-hollows-50263.herokuapp.com/

これを開くと、expressのjadeファイルが表示されます。

本懐のスクレイピングへ

さて本懐へ近づきましょう。
任意のサイトの内容を読み込んでみます。
ここを参考に、routes/index.js を修正します。

Node.js+https+jsdomで超簡単にHTMLの要素やテキストを調べる方法
目次Node.jsでHTMLの要素取得document.querySelectorを使いたいjsdomでdocument.querySelectorを使う Node.jsでHTMLの要素取得 Node.jsを使用してWe …
var express = require('express');
const https = require('https');
const url = 'https://maya-pg.net';

var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {

  https.get(url, res => {
    let html = '';
    res.on('data', line => html += line);
    res.on('end', () => {
      console.log(html);
    });
  });

  res.render('index', { title: 'Express' });
});

module.exports = router;

こうすると、ログに私のサイトのdom要素が記述されます。

npm i jsdom

でjsdomをインストールして、routes/index.js を以下のように修正。

var express = require('express');
const https = require('https');
const jsdom = require('jsdom');
const { JSDOM } = jsdom;
const url = 'https://maya-pg.net';

var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {

  https.get(url, res => {
    let html = '';
    res.on('data', line => html += line);
    res.on('end', () => {

      //console.log(html);
      const dom = new JSDOM(html);
      console.log(dom.window.document.querySelector('.entry-title').textContent);

    });
  });

  res.render('index', { title: 'Express' });
});

module.exports = router;

…あれ?最初のしか引っかかってこない?(´・ω・`)
これ散々jQueryで引っかかったやつだ。

dom.window.document.querySelector('.entry-title').textContent
↓
dom.window.document.getElementsByTagName('article')

getElementsByTagName を使うんでした。

一応動くようにはなりました

結局ガジャガジャやってた結果、こんな感じで動くようにはなりました。
何をやっているかって、このサイトのソースを解析し記事のタイトル、抜粋の最初の1行目、及びリンクを取得します。

https://blooming-hollows-50263.herokuapp.com/
mayarin/nodescraper
Contribute to mayarin/nodescraper development by creating an account on GitHub.

参考リンク

Pug : for文、each文でリストをループ出力する | ハックノート
See the Pen Pugのループ処理 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. HTMLのメタ言語 **Pug** (旧名Jade)の、forとeachを使ったループの書き方サンプルです。 jsonと相性よさそうなのが分かりますね。
覚えるのはこれだけ!Pug(Jade)のよく使う9つの書き方 | Tips Note by TAM
TAM のテクニカルチームがお届けする WEB技術ブログ!

コメント

タイトルとURLをコピーしました