この記事は、LIFULL Advent Calendar 2019の19日目（2019-12-19）の記事です。
はじめに
先日、LIFULLのSETグループから新しいOSSツールが発表されました
[Visual Testingに最適な画像差分検知ツール「Gazo-san」をOSS化しました]
(https://www.lifull.blog/entry/2019/12/16/110000)
この発表に触発され普段はバックエンド業務が多いのですが、
headless browser触って準備しておこうと思いPuppeteerの記事を書くことにしました
この記事で作成したものはこちらに。何かの参考になればと思います。
https://github.com/hirokawai/endroll
ちなみに、「Gazo-san」に関しては後日
「LIFULLその2 Advent Calendar 2019」カレンダーで記事が公開されるようで楽しみにしています。
puppeteerで動画
とはいえ、キャプチャ撮影だけではなくもっと遊びたい。
AdventCalendarも後半戦になったので、ちょっと気が早いですがAdventCalendarの振り返り用ムービーを作ります。
動画生成元のHTMLを用意
→ Puppeteerで自動スクロール操作
→ 1frameずつscreenshot作成
→ ffmpegへストリームしてmp4作成
この手順で動画を作成していきます。
今回利用するツールのバージョンです。
% ffmpeg
ffmpeg version 4.2.1 Copyright (c) 2000-2019 the FFmpeg developers
built with Apple clang version 11.0.0 (clang-1100.0.33.8)
node_modules
+ puppeter@2.0.0
+ child_process@1.0.2
+ gsap@3.0.2
動画生成元のHTMLを用意
Codropsから良さそうなHTMLを見つけてきます。
大変勉強させていただいています。Codropsマジで最高です。
https://github.com/codrops/SmoothScrollingImageEffects
このHTMLを参考にページを一部変更していきます。
画像がないと寂しいので、著作権フリーなunsplashの写真を取得できるpicsumから取得します。
demo.jsの一部を改変しAjaxリクエストでAdventCalendarの記事取得処理するようにします。
const getAdventCalendarRSS = () => {
return new Promise((resolve, reject) => {
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = function()
{
if( this.readyState == 4 && this.status == 200 )
{
if( this.response )
{
var content = document.getElementById("content");
var idx = 1;
for (const item of this.response) {
var str = `
<div class="content--full content--alternate">
<div class="content__item content__item--wide">
<span class="content__item-number">${idx}</span>
<div class="content__item-imgwrap"><div class="content__item-img" style="background-image: url(https://picsum.photos/960/540?random=${idx});"></div></div>
<div class="content__item-deco">${item.author}</div>
<h2 class="content__item-title">12/${idx}</h2>
<p class="content__item-description">${item.title}</p>
</div>
</div>
`
var div = document.createElement('div');
div.innerHTML = str;
content.appendChild(div);
idx++;
}
xmlHttpRequest = null;
resolve();
}
}
}
xmlHttpRequest.open( 'GET', 'http://hirokawai.mock.server/rss', true );
xmlHttpRequest.responseType = 'json';
xmlHttpRequest.send( null );
});
};
// And then..
getAdventCalendarRSS().then(() => {
return preloadImages();
}).then(() => {
// Remove the loader
document.body.classList.remove('loading');
// Get the scroll position and update the lastScroll variable
getPageYScroll();
lastScroll = docScroll;
// Initialize the Smooth Scrolling
new SmoothScroll();
});
HTMLは記事取得を行いDOMがappendされるのを期待します
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/dec4mzz.css">
<link rel="stylesheet" type="text/css" href="css/base.css" />
</head>
<body class="demo-1 loading">
<main>
<div data-scroll class="page page--layout-2">
<h1 class="page__title">LIFULL ADVENT CALENDAR 2019</h1>
<div id="content" class="content">
</div>
</div>
</main>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/demo.js"></script>
</body>
</html>
Puppeteerで自動スクロール操作
いよいよPuppeteerを操作していきます
以下のコマンドで実行できるように作成します
node capture.js [filepath] [viewport-width] [viewport-height] [deviceScaleFactor]
例）
node capture.js 'file:///Users/hirokawai/Desktop/adcalendar.html' 960 540 2
capture.js実装は以下のようにします
(async() => {
// ※1) ffmegのオプションを設定してstreamに書き込んでいく
// ※2) puppeteerを起動
// ※3) スクレイピング
// ※4) timelineを設定
// ※5) 1frameずつstream処理
})();
※1) ffmegのオプションを設定してstreamに書き込んでいく
ffmpegオプションを定義し外部コマンド実行形式で処理をさせます
const ffmpegArgs = fps => [
'-y',
'-f',
'image2pipe',
'-r',
`${+fps}`,
'-i',
'-',
'-c:v',
'libx264',
'-auto-alt-ref',
'0',
'-pix_fmt',
'yuva420p',
'-metadata:s:v:0',
'alpha_mode="1"'
]
var ffmpegPath = options.ffmpeg || 'ffmpeg';
var fps = options.fps || 30;
var outFile = options.output;
const args = ffmpegArgs(fps);
args.push(outFile || '-');
const ffmpeg = spawn(ffmpegPath, args);
if (options.pipeOutput) {
ffmpeg.stdout.pipe(process.stdout);
ffmpeg.stderr.pipe(process.stderr);
}
const write = (stream, buffer) =>
new Promise((resolve, reject) => {
stream.write(buffer, error => {
if (error) reject(error);
else resolve();
});
});
※2) puppeteerを起動
puppeteerの起動オプションを設定して先程用意したHTMLファイルをロードします。
networkidleを監視し、リクエストの完了とready判定まで待ちます。
const viewportHeight = parseInt(process.argv[3])
const viewportWidth = parseInt(process.argv[4])
const browser = await puppeteer.launch({
headless: false,
devtools: true,
defaultViewport: {
width: viewportWidth,
height: viewportHeight,
deviceScaleFactor: parseFloat(process.argv[5]),
},
});
const page = await browser.newPage();
await page.goto(
process.argv[2]
, { waitUntil: 'networkidle0' }
);
await page.waitFor(() => !document.querySelector(".loading"));
※3) スクレイピング
記事のリストを作成するためにadvent calendarページをスクレイピングして取得します。
page.evaluateで該当の部分から日付・アカウント・タイトルを取得し用意したHTMLへ渡すようにします。
await page.setRequestInterception(true);でリクエストを監視しスクレイピングしたデータをインターセプトしています。
await page.goto(
"https://qiita.com/advent-calendar/2019/lifull"
, { waitUntil: 'networkidle0' }
);
const scrapingData = await page.evaluate(() => {
const dataList = [];
const nodeList = document.querySelectorAll(".adventCalendarItem");
nodeList.forEach(_node => {
const calendar = _node.children[0].innerText
const author = _node.children[1].children[0].getAttribute('href').slice(1);
const title = _node.children[1].children[1].firstElementChild.innerText
dataList.push({calendar,author,title});
})
return dataList;
});
await page.setRequestInterception(true);
page.on('request', request => {
if (request.url() === "http://hirokawai.mock.server/rss") {
request.respond({
content: 'application/json',
headers: {"Access-Control-Allow-Origin": "*"},
body: JSON.stringify(scrapingData)
});
}
else {
request.continue();
}
});
※4) timelineを設定
スクロールの制御にはGSAPのtimelineを利用します。GSAP3がリリースされ利用方法が少し変わりましたね。
（GSAP３新機能が増えていてますね！DEMOがすごい・・・ https://greensock.com/3/）
セレクタをハードコードしていて美しくはないですが、スクロール対象間の移動量を計算していきます。
// ページにスクロール制御用に利用するgsapを追加する
await page.addScriptTag({ path: './node_modules/gsap/dist/ScrollToPlugin.min.js' });
await page.addScriptTag({ path: './node_modules/gsap/dist/gsap.min.js' });
// 1記事の範囲を計算するためのclassを指定
// timelineのスクロールに利用する全ての記事の座標を取得
const $item = await page.$('.content__item-title');
const bounding_box = await $item.boundingBox();
const selector = ".content__item";
await page.waitForSelector(selector);
const items = await page.evaluate(selector => {
let positions = []
const elements = Array.from(document.querySelectorAll(selector));
for (const ele of elements) {
const {x, y, width, height} = ele.getBoundingClientRect();
positions.push({x, y, width, height})
}
return positions;
}, selector);
await page.evaluate(async (items, margin) => {
gsap.registerPlugin(ScrollToPlugin);
var tl = gsap.timeline();
tl.pause();
for (const item of items) {
// １記事に対するスクロールを定義
tl.add(gsap.to(window, {duration: 3.5, scrollTo: item.y - margin, ease: "expo.inOut"}));
}
window.timeline = tl
return Promise.resolve()
}, items, bounding_box.height);
※5) 1frameずつstream処理
timelineを進めながらキャプチャを生成していきます。
// fpsに対する総frame数を計算する
const frames = await page.evaluate(async _fps =>
Math.ceil(window.timeline.duration() / 1 * _fps)
, fps)
let frame = 0
const nextFrame = async () => {
// timelineの進行をコントロール
await page.evaluate(async progress => {
window.timeline.progress(progress)
await new Promise(r => setTimeout(r, 16))
}, frame / frames)
// 見えている範囲をキャプチャする
let screenshot = await page.screenshot({
fullPage: false,
});
await write(ffmpeg.stdin, screenshot)
frame++
console.log(`frame ${frame} / ${frames}`)
if (frame > frames) {
console.log('done!')
ffmpeg.stdin.end()
await closed
await browser.close()
return
}
nextFrame()
}
nextFrame()
出来上がり
出来上がりの一部です。puppeteerで動画を作成できました
puppeteerは様々なautomationが可能で非常に有用なツールですね。
個人的にはテストやスクレイピングなどのイメージがありましたが、こういった利用も面白いのではないでしょうか。
明日以降もLIFULLアドベントカレンダーは続きます。引き続きお楽しみに！
https://qiita.com/advent-calendar/2019/lifull