現在システム課では、とある会社のエンジニアの方（以下、Ｃさんと記述）と一緒にお仕事をさせてもらっています。
とある国から、日本に来て十数年のＣさんに原稿を書いていただき、私の方で加筆したものをご紹介させていただきます。
↓↓↓↓↓↓↓↓↓↓ここからがＣさんの記事です↓↓↓↓↓↓↓↓↓↓
当社が運営するポータルサイトに多種多様なクライアント様の情報を掲載しておりまして、そこにクライアント様のHPのリンクも貼り付けて誘導を行っています。
今までそのリンクはクライアント様名にaタグを付けていましたが、「より直感的」「より目立つ」ということで、対象サイトが表示される画面キャプチャの画像を表示したら、クリック率はもっと高くなるじゃないかと企画部からお題が上がってきました。
確かに！よく考えていますね！
クライアント様のサイトへの誘導率を高められる見込みがあるので、優先で対応すべき！
早速PMからタスクが振られました。
クライアント様の情報を管理するCMSがありまして、そこにHPのURLを入力する項目が定義されています。
同管理画面でキャプチャ画像をアップロードする項目を追加するのも簡単ですが、手動でキャプチャを取るのは手間がかかるし、またアップロード画像が実際の内容と一致しない問題も起こり得るので、URLを入力されたら、自動的に該当サイトの画面キャプチャを取得して保存するのが望ましいです。
ということで、、、
*******************************************************
＜今回のお題＞
指定されたURLのサイトのキャプチャーを自動で取得せよ！
*******************************************************
ご存知の通りブラウザがサイトから取得したHTMLを解析して表示することをレンダリングといいます。
今回はそのレンダリング処理を通常のブラウザソフトを使わずサーバ上のプログラムで自動的に行う必要があります。
１０年前ほどBOTを開発する案件に関わったことがありまして、同様にサイトのキャプチャを取得する機能にチャレンジしてましたが、その時使えるライブラリのレンダリング機能はまだ貧弱で、特にJavascriptやFlashなどの対応は全くされておらず、こういう動的なコンテンツを含めるサイトはほとんど対応できませんでした。
近年でヘッドレスブラウザ（Headless browser）の製品が豊富になってきまして、こういう問題は一気に改善されました。
ヘッドレスブラウザというのはGUIがないブラウザのことです。
コマンドラインで起動し、URLをパラメーターとします。
通常のブラウザと同様に取得したHTMLをレンダリングすることができます。
GUIはないですが、レンダリングした結果を画像として保存することができます。
一般的な用途としてはWEBサイト開発に当たってテストの自動化のことです。
今回はテスト目的ではないですが、そのレンダリング機能を使ってサイトのキャプチャ画像を取得します。
ヘッドレスブラウザの中一番有名なのはPhantomJSという製品です。
http://phantomjs.org/
キャプチャ画像の取得方法もサイト上に紹介されています。
http://phantomjs.org/screen-capture.html
使い方が非常にシンプルで数行のJavascriptを書くだけです。
しかし、、、PhantomJSを使うとほぼ決めた頃、pageresというより使いやすいツールを見つけました。
https://github.com/sindresorhus/pageres-cli
PhantomJSをベースにして、キャプチャを取得する機能を特化しオプティマイズされたツールです。
コマンドラインが提供されていて、一行のコードも書かずコマンド一つでキャプチャを取得できます。
早速実際動かしてみます。
ツールのインストールは非常に簡単ですが、Node.jsがインストールされる環境が前提らしいので先にNode.jsをインストールします。
実行環境はCentOSですので、下記の手順でNode.jsをインストールします。
curl --silent --location https://rpm.nodesource.com/setup_4.x | bash - yum -y install nodejs
※参考：
https://nodejs.org/ja/download/package-manager/#enterprise-linux-and-fedora-enterprise-linux-fedora
Node.jsは無事インストールされまして、次はpageresのインストールです。
npm install --global pageres-cli
こちらも問題なくインストールが完了。早速キャプチャを取得します。
pageres http://www.k-1.ne.jp/ 1024x768 --crop --filename=k1_hp
–cropを指定しないと、ページ全部キャプチャを取得してしまいます。
今回はファーストビューのみ取得したいので、–cropを付けて、指定したサイズで画像を切り取ります。
取得したキャプチャはこちらになります。
あれ？メインイメージはローディング中になっている！
やはりメインイメージは初期化する時に定義されてなく、Javascriptで動的にロードしているようです。
うん。。。
本来であればデザインチームに直してもらうべきですが、クライアントのサイトにも類似な実装をされるケースもありえますし、その他画面初期表示し終わってからJavascriptを動かして動的にコンテンツを取得して画面に表示する可能性もあると思います。
より汎用性を高めるために、下記のようにのコマンドに一つパラメーターを追加します。
pageres http://www.k-1.ne.jp/ 1024x768 --crop --delay=3 --filename=k1_hp
Javascriptで動的なコンテンツをロードし終わることを待つため、アクセスし終わってからキャプチャを取るまで３秒間待つ時間をはさみます。
実行結果はこうなります。
いかがでしょうか？
当然ヘッドレスブラウザも他のブラウザと同じく、まれにHTML対応の問題がありまして、特定のcssやhtmlタグの対応は違って画面が崩れてしまったり、Javascriptがエラー出したり可能性がなくはないですが、ほとんどのサイトは正常にレンダリングできます。
もちろんchromeをコアとするヘッドレスブラウザがあればベストですね。
確かにGoogleにこういう動きがあるという噂がありましたが、未だ正式に公開されてないです。
Googleの今後の動きも注目しましょう。
以上です。
↑↑↑↑↑↑↑↑↑↑ここまでがＣさんの記事です↑↑↑↑↑↑↑↑↑↑
いやぁ、十数年でこんなに達者な日本語を操れるようになるなんて尊敬します。
Ｃさんありがとうございました。
いかがだったでしょうか？
ちょっとした演出ですが少しでもユーザーに喜んでもらえればと、日々、システム課はユーザーの皆様を第一に考えて業務に取り組んでおります！
こういったシステム構築等にご興味ある方は是非とも弊社オフィシャルサイトをご覧ください。
ご興味ある方はオフィシャルHPから是非お問合せください、採用も随時募集しておりますよ
ケーワン・エンタープライズオフィシャルHP
