Razor Pages：PhantomJS で動的サイトをスクレイピングする

執筆日時：

f:id:daruyanagi:20170908233127p:plain

（Windows 10 version 1703 の最新ビルドの番号をテキトーに得るサンプル）

静的サイトのスクレイピングは HTML をダウンロードしてごちゃごちゃっとやればいいけど、動的サイトの場合はブラウザーで JavaScript の評価をしたあとの HTML（DOM ツリーっていうの？）がほしい。というわけで、ヘッドレスブラウザー「PhantomJS」でアクセス → 評価するサンプルを Razor Pages で作ってみた。

ソリューションはこんな構成になった。

f:id:daruyanagi:20170908233703p:plain

ASP.NET Core＋Razor Pagesの導入方法は以下のページを参照のこと（別にこの通りにやる必要はないけど）。

blog.daruyanagi.jp

基本的な流れ

PhantomJS.exe にスクリプトと Uri とセレクターを渡し、標準出力を介して結果（JSON）を得る。標準出力には PhantomJS が吐くエラーが混じることがあるので、適当な正規表現で除去しておく。

Index.cshtml

コードビハインド？　MVVM じゃない方の ViewModel？　なんて言っていいのかは知らんけど（変な言葉遣いしたらその手のケーサツが来そうだし）、Index.cshtml の裏はこんな感じ。

// index.cshtml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Diagnostics;
using System.IO;


namespace WebApplication5.Pages
{
public class IndexModel : PageModel
{
[BindProperty]
public Uri Target { get; set; }


[BindProperty]
public string Selector { get; set; }


[BindProperty]
public Models.ScrapingResult Result { get; private set; }


public IActionResult OnPost(string message)
{
if (!ModelState.IsValid) return Page();


var root_dir = Hosting.Environment.ContentRootPath;
var work_dir = System.IO.Path.Combine(root_dir, "Tools");
var script_name = "scrape.js";


var info = new ProcessStartInfo()
{
Arguments = $@"""{script_name}"" ""{Target}"" ""{Selector}""",
FileName = Path.Combine(work_dir, "phantomjs.exe"),
CreateNoWindow = true,
RedirectStandardOutput = true,
StandardOutputEncoding = System.Text.Encoding.UTF8,
UseShellExecute = false,
WorkingDirectory = work_dir,
};


using (var process = new Process() { StartInfo = info, })
{
var output = string.Empty;


process.OutputDataReceived += (s, a) => { output += a.Data; Debug.WriteLine(a.Data); };


process.Start();
process.BeginOutputReadLine();
process.WaitForExit();


// エラー出力をちょん切る
var r = new System.Text.RegularExpressions.Regex("{.+}");
output = r.Match(output).Value;


Result = Newtonsoft.Json.JsonConvert.DeserializeObject<Models.ScrapingResult>(output);
}


return Page();
}
}
}

ユーザーインターフェイス（Index.cshtml）はこんな感じ。まだ慣れてないのでこれいいのかよくわかんないけど、タグヘルパーってやつでバインディングできるんだなー。便利ンゴ。

// Index.cshtml
@page
@model WebApplication5.Pages.IndexModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<html>
<body>
<style>
*, input { font-family: Meiryo; margin: 8px; }
pre { background-color: linen; width: 480px; overflow: scroll; }
</style>
<pre><code>
@Model.Result?.Text
</code></pre>
<div asp-validation-summary="All"></div>
<form method="POST">
<div>Target Uri: <input asp-for="Target" /></div>
<div>Selector: <input asp-for="Selector" /></div>
<input type="submit" />
</form>
</body>
</html>

モデル

スクレイピングの結果を表すモデル（？）クラスはこんな感じ。スクリプトが返す JSON の形式が固まるまでは dynamic にしちゃうと楽だね。

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication5.Models
{


public class ScrapingResult
{
[JsonProperty("uri")]
public string Url { get; set; }


//[JsonProperty("selector")]
public string Selector { get; set; }


public string Status { get; set; }


public string Text { get; set; }
}
}

[JsonProperty(“uri”)] は要らんのか？　コメントアウトしても動いたから、命名規約ベースでよしなにしてくれるのかもしれない。

PhantomJS スクリプト

PhantomJS に渡したスクリプトの中身はこんな感じ。

var page = require('webpage').create();
var system = require('system');
var url = system.args[1];
var selector = system.args[2];

page.open(url, function (status) {
var text = null;
if (status === ‘success’) {
text = page.evaluate(function (selector) {
var element = document.body.querySelector(selector);
if (element == null) return null;
return element.innerHTML;
}, selector);
}
console.log(JSON.stringify({ url: url, selector: selector, status: status, text: text, }));
phantom.exit();
});

ちょっと悩んだのは page.evaluate() がサンドボックスになっていたこと。プリミティブ型じゃないとやり取りできないのかな。page.evaluate() に変数を渡す方法も悩んだけど、だいたいこれでイケそう*1。

ほんとは引数チェックしたり、エラートラップして終了コードを渡したりした方がいいよね。まぁ、サンプルなのでいろいろ適当でいい気がする。

で、ここまで完成させたあとに昔ブックマークしたページのことを思い出した。

qiita.com

JavaScript の評価もできるなら、こっちを使った方がよかったかもしれない。

*1:JavaScript のスコープとか、基本があんまりわかってないのですごく悩んだ