長い集計データをいい感じの長い画像に変換し隊（その２）

何度もスクロールキャプチャの失敗を繰り返し、1000件を超える元データとの目視チェック。

隊員たちの顔にも疲労と焦りの表情が滲みはじめる。『どうしても手作業でこなすしかないのか…』『本当にこの作業は終わるのか…』

このままでは隊員たちの体力も限界に達し命にも危険がっ！

…と、その時である！

ﾃｨﾚﾚﾃｨｯﾃｨﾃｨｰﾝ♪
Puppeteer
（声：大山のぶ代）

ということで前回の続きです。
atodesimerareru.hatenadiary.jp

おそらく当記事を読まれている方は既にPuppeteerに関してググり済みと思いますので詳細は省きます。私もたくさんの方々のサイトを参考にさせて頂いたので紹介したいと思ったのですが、多すぎて元記事を失念。本当に申し訳ありません。お詫びとともにここで感謝の意を…。

いまググり直しましたけど、ただのスクリーンキャプチャ程度で利用されている方は逆に少数派のようですね。ハハハ…。

閑話休題。

以下、結論ですが、Puppeteerを利用することで無事長い画像を保存できるようになりました。元データは2280行。画像ファイルは、横1000px、縦102575pxで、ファイルサイズは実に12MB。

はてブにうまくアップ出来なかったので頭だけ切り取って貼り付けておきますね（まあこれだけだとブラウザの直キャプと見分けつかないと思いますけど…）。

f:id:atodesimerareru:20181207222804p:plain — Puppeteerでスクロールキャプチャ（一部）

いやあ長い道のりでした。

（参考）コード

# ng_sample.rb
require 'csv'

puts(<<"EOS")
<!DOCTYPE html>
<html lang="ja">
<head>
  <title>平成30年1月1日住民基本台帳人口・世帯数</title>
  <meta charset="utf-8">
  <link  href="ng_sample.css" type="text/css" rel="stylesheet" />
    </head>
<body>
<table>
EOS

#-----------------------------------------------------------
line = 0
CSV.foreach('ng_sample.csv', col_sep:",", liberal_parsing:true) do |row|
	if line == 0 then
		puts '<tr class="title">'
	elsif line.even? then
		puts '<tr class="even">'
	else
		puts '<tr class="odd">'
	end

	if line == 0 then
		puts '<td>' + row[0].to_s + '</td>'
		puts '<td>' + row[1].to_s + '</td>'
		puts '<td>' + row[2].to_s + '</td>'
		puts '<td>' + row[3].to_s + '</td>'
		puts '<td>' + row[4].to_s + '</td>'
		puts '<td>' + row[5].to_s + '</td>'
		puts '<td>' + row[6].to_s + '</td>'
		puts '</tr>'
	else
		puts '<td class="organization">' + row[0].to_s + '</td>'
		puts '<td class="prefectures">' + row[1].to_s + '</td>'
		puts '<td class="city">' + row[2].to_s + '</td>'
		puts '<td class="population_male">' + row[3].to_s + '</td>'
		puts '<td class="population_female">' + row[4].to_s + '</td>'
		puts '<td class="population_total">' + row[5].to_s + '</td>'
		puts '<td class="household">' + row[6].to_s + '</td>'
		puts '</tr>'
	end
	line+=1
end
#-----------------------------------------------------------

puts(<<"EOS")
</table>
</body>
</html>
EOS

/* ng_sample.css */
body
	{
	margin:0px;
	padding:0px;
	font-family: "Noto Sans CJK JP Regular";
	color:#000000;
	font-size:16px;
	}
table{
	width:1000px;
}
td{
	padding-top:2px;
	padding-bottom:2px;
	padding-left:8px;
	padding-right:8px;
}
tr.title {
	font-family: "Noto Sans CJK JP Black";
	font-size:18px;
	text-align:center;
	background:#ccddff;
}
tr.even {
    background:#ffffff;
}
tr.odd {
    background:#eeeeee;
}
td.organization{
	font-family: "Noto Sans CJK JP Black";
	font-size:26px;
}
td.prefectures, td.city{
	font-family: "Noto Sans CJK JP Bold";
	font-size:16px;
}
td.population_male,
td.population_female,
td.population_total,
td.household{
	text-align:right;
	margin-left:8px;
	margin-right:2px;
}

// ng_sample.js
const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('ng_sample.html');
    await page.screenshot({path: 'ng_sample.png', fullPage: true});
    await browser.close();
})();

ruby ng_sample.rb > ng_sample.html
node ng_sample.js

ハロー！プロジェクト超大好き日記。

ハロー！プロジェクトが超大好きなので、応援したいと思っています。ぉぱょ。

長い集計データをいい感じの長い画像に変換し隊（その２）