Puppeteerを使ったヒートマップ画像の保存

いや〜、大変な相場です。私のPFはYHからすでに1k万円近く下げています。今日だけで0.5kの下げでした。 年間給与の手取り分くらいの変動が1日で発生する日は年に4~5回はある印象ありますが、ダウンサイドのリスク管理ができていない証拠なので、信用売りをうまく使わないといけないです。

さて、先日、Node.jsのライブラリでpuppeteerというものを見つけました。 GoogleのChrome DevTeamが開発/メンテしているHeadlessでChromeが操作できるライブラリです。

これ何がいいかというと、Chromeブラウザ上での作業を自動化できることです。 例えば、

1. Yahoo Financeにログインする
2. 自分のPFを取得する
3. DailyでPFの総資産額を取得する
4. DBにためる

という一連の作業が自動化できます。

何か自動化できそうなネタはないかな〜と日経が300円近く下げているなかツイッターをみていると、 @siroku829さんから下記のツイートが

デイトレンドマップ | デイトレ株マップ.com https://t.co/S5f6hhLR2s

— siroku829 (@siroku829) 2017年11月15日

株マップのデイトレンドマップです。 これを毎日スクショとして保存すると後日見返すことができて役立ちそうです。感覚的にビジュアルでトレンドを判断することもできますね。

早速puppeteerを使ってヒートマップのスクショ保存までやってみました。下記そのソースコード。

const puppeteer = require('puppeteer');
const moment = require('moment');
const FAKE_USERAGENT = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/604.3.5 (KHTML, like Gecko) Version/11.0.1 Safari/604.3.5';
const KABUMAP_HEATMAP_URL = 'http://dt.kabumap.com/servlets/dt/Action?SRC=trendMap/base';
const HEATMAP_ELEM = 'div#contents div#trendMap';

(async () => {

    const browser = await puppeteer.launch({headless: true});
    const page = await browser.newPage();

    //FakeのUserAgentをセットする。
    await page.setUserAgent(FAKE_USERAGENT);
    await page.setViewport({width: 1000, height: 1000, deviceScaleFactor: 2});

　 //ヒートマップのURLに行く。waitUntilでページ読み込みが完了するまで待つことができる。
    await page.goto(KABUMAP_HEATMAP_URL, {waitUntil: 'networkidle2'});
    await page.waitFor(1000);

    //Heatmapのテーブルがある要素を取得
    const element = await page.$(HEATMAP_ELEM);

    //スクショを撮る
    await element.screenshot({
       path: moment().format('YY-MM-DD') + '_element.png'
    });
})();

node heatmap.jsで実行して、ディレクトリ上にpngファイルが生成されていると思います。

こんな感じです。moment.jsを使って日付をファイル名に加えています。