Yahoo!ニュースコメント(ヤフコメ)のまとめツールをNode.jsで作ってみた

Share on:

この記事は約3 分で読めます。

目次

Yahoo!ニュースコメント欄のまとめサイト用の記事作成ツールをNode.jsで作ってみました。

まだプロトタイプですが、ヤマト運輸お問い合わせ伝票番号追跡APIに続く第2弾のNode.jsアプリです。

ヤフコメまとめサイト用にHexo向け(でなくてもいいのですが)のマークダウン記法の記事作成・保存と画像の保存を実現しています。
※画像の保存は実装しましたが、都合上トリミングやらwebp化やら画像の編集が必要なので、画像加工後Hexoに戻すという形をとっています。

プロトタイプであることとYahoo!ニュースコメントまとめサイトの需要はあまりないと思いますので、アプリの公開は今は行いませんが、アプリの設計を書き留めておきます。

アプリ画面と操作

超シンプルです。

Yahoo!ニュースのURLをコピペして、データ収集mdファイル作成ボタンを押すだけでHexoに記事ファイルが保存されます。

後はいつもどおり、hexo gで静的HTMLファイルを生成して、所定の場所へデプロイすれば完了です。

アプリソース概要

アプリ作成にはExpressを使用していますが、大幅にカット、修正して記述しています。

アプリ自体完全体ではないためエッセンスだけ備忘録として書き留めています。

 1const express = require('express');
 2const router = express.Router();
 3
 4// 使用したモジュール
 5const fs = require('fs');
 6const client = require('cheerio-httpcli');
 7
 8router.get('/', function(req, res, next) {
 9
10  // トップ画面
11
12});
13
14router.post('/result', function(req, res, next) {
15
16  // 記事(マークダウン記法)生成と画像ダウンロード 
17
18});
19
20router.post('/confirm', function(req, res, next) {
21  
22  // 記事保存処理
23
24});
25
26module.exports = router;

POST値の取得

1router.post('/result', function(req, res, next) {
2    const postUrl = req.body['url']
3});

画像のダウンロード

 1const client = require('cheerio-httpcli');
 2
 3router.post('/result', function(req, res, next) {
 4  client.download
 5  .on('ready', function (stream) {
 6    stream.pipe(fs.createWriteStream('画像保存パス+ファイル名'));
 7  })
 8  .on('error', function (err) {
 9    // エラー処理
10  })
11  .on('end', function () {
12    // 完了処理
13  });
14
15  let result = client.fetchSync(postUrl, {});
16  let imgSrc = result.$('img');
17  imgSrc.download();
18});

【追記】

上記コードだと、画像の保存を終える前に、データ収集結果画面が表示され、タイミングによっては画面に画像が表示されない、または、壊れた画像が表示されていました。

そこで、同期処理で画像を保存するよう修正しました。

1const request = require('sync-request');
2
3const imgSrc = result.$('img').attr('src');
4const body = request('GET', imgSrc); 
5fs.writeFileSync('画像保存パス+ファイル名', body.getBody(), 'binary');

Node.jsなのに同期処理や待つ処理を書くことが多い気がしてます、今の所。←Node.js向きでないアプリを作っているということですね。

記事の保存

1router.post('/confirm', function(req, res, next) {
2  const md = req.body['md']; 
3  fs.writeFileSync('/プロジェクトパス/source/_posts/ファイル名.md', md);
4});

まとめ

Yahoo!ニュースコメント(通称ヤフコメ)のまとめサイト作成用ツールのエッセンスのお話でした。

これは自分のNode.jsの勉強用のアプリであること、Hexo限定であること、ヤフコメまとめサイトの需要が少ない(?)ことからアプリの公開やフルソースの公開は現時点では控えておきます。

実際の作業時間ですが、

  • ニュースの選定
  • 記事生成
  • 画像加工
  • mdファイル作成

まで、2~3分で投稿できます。

文章に色を付けたり、下線を引いたり、強調したりと装飾作業が入るともう少し時間がかかります。

今回はアプリの素ということで、アプリのコード自体はざっくりしたものですが、別のアプリを作成していてこの機能はどうやって実装するのかな?と困ったときに一部の仕組みだけでもお役に立てればと思い書き留めました。

以上、Yahoo!ニュースコメントまとめサイト作成ツール~Node.js版~(長い!)のお話でした。