JavaScript/jQuery 画像素材 自動化

Tampermonkeyとhtml2canvasでWebページをスクリーンショットのように画像で保存する

投稿日:

スポンサードリンク

はじめに

特定の範囲の株価チャートを画像として保存しようとしたことがあったのですが、一つ問題がありました。比較的自由度の高いWebツールであればスライダーやボタンで表示範囲や表示するものの選択ができると思いますが、それを画像として保存するには自らスクリーンショットをしてトリミングするという手間がありました。

そこで、今回はhtml2canvasというHTMLを画像にするJavascriptのライブラリ(プラグイン)とオリジナルのJavascriptを動作させられるようになるChromeアドオンのTampermonkeyを組み合わせて特定のWebページの特定の要素をキャプチャしてみようと思います。

管理人
株価チャートについては今回取り上げません。すいません…

html2canvas

html2canvasというHTMLページを画像としてキャプチャするスクリプトを使わせていただきました。本家ページのHello Worldの例を見るとたった3行でキャプチャを実行できることがわかります。

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

これは「capture」というIDのついた要素を選択してキャプチャをとっているという様子です。
まずは本家からhtml2canvas.min.jsスクリプトをダウンロードしておきます。
また、私は今回jQueryを使ったので必要に応じてそちらもダウンロードしてください。

Tampermonkey

TampermonkeyはChrome・Firefoxのアドオンで、任意のWebページでオリジナルのスクリプトを動作させることができるようになるものです。

これを使って特定のサイトでhtml2canvasを利用した画像キャプチャスクリプトを動作させようという狙いです。

では早速これをインストールして準備を勧めていきます。今回私はChromeで動作確認をしましたが、FireFoxでの動作は未確認です。(おそらく動くとは思いますが)

Webページキャプチャスクリプト作成

今回は本サイトのWebページの記事をキャプチャすることを例として取り上げます。

対象Webページ確認

まずは対象とするページへ移動します。今回はこのサイトの記事全体をキャプチャしてみたいと思いますので例えばこちらのページに移ります。

管理人
今回はあくまでやり方について紹介したいのでこのサイトにしました。ここはそれぞれ自分の好きなサイトを選んでください。

記事HTML要素チェック

それではこの要素をチェックします。F12キーもしくはChromeの場合ページのどこかで右クリックをして「検証」を選びます。すると、HTMLが解析できるので該当する記事部分の要素をチェックします。

左上の矢印ボタンを押すと、ページをホバーしたときの要素がピックアップされるので便利です。

すると「article」というのがどうもそのようだということがわかりました。画面選択中は該当の要素が選択状態になるので視覚的にあっているかどうか確認できます。

Webページキャプチャスクリプト実装

以上を踏まえてTampermonkey上にスクリプトを作成していきます。アドオンをクリックして「ダッシュボード」を開きます。タブにある「+」ボタンなどから新規作成します。今回、名前は「Screen Shot Test」などとしました。

// ==UserScript==
// @name         Screen Shot Test
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://mementoo.info/archives/*
// @grant        none
// @require file:///C:/Users/(ユーザー名)/Documents/js/jquery.min.js
// @require file:///C:/Users/(ユーザー名)/Documents/js/html2canvas.min.js
// ==/UserScript==

(function() {
    'use strict';

    // add screen shot
    function ScreenShot() {
        // キャプチャボタン
        var btn = $('<div style="z-index:9999; position: fixed; padding: 5px 8px; top:5px; right:10px; border: 1px solid #333; background: white; cursor:pointer;">Capture</div>');

        // 出力画面(#screenshot)
        var screen = $('<div style="z-index:9999; position:fixed; overflow:hidden; top:45px; right: 10px; width: 100px; height: 100px; background:white; padding: 3px; border: 1px solid #333;"></div>');

        // キャプチャ関数
        var isrunning = false;
        var capture = function() {
            if(!isrunning) {
                isrunning = true;
                screen.html("待機中…");
                html2canvas(document.querySelector("article")).then(canvas => {
                    var cvs = $(canvas);
                    cvs.css("width","100%");
                    cvs.css("height","100%");
                    screen.html (cvs);
                    isrunning = false;
                });
            }
        }

        // 実行用
        this.main = function() {
            btn.click(capture);
            $("body").append(btn);
            $("body").append(screen);
        }
    }
    $(function(){
        var ss = new ScreenShot();
        ss.main();
    });

})();

 

このときのtampermonkeyのダッシュボードはこんな感じになります。タイトルはこのスクリプト冒頭の「@name」に指定したものになります。

「@match」で対象となるページのURLを指定できるので、このサイトを指定しました。末尾に「*」とすることでそれ以降は無限にマッチできるようになり、あらゆる記事に対応できます。

また、読み込むスクリプトのパスはダウンロードしたスクリプトのパスを設定してください。サーバー上であれば「http(s)://~」のもの、もしくはローカルファイルのものであれば「file:///~」にします。

ローカルファイルを読み込ませるには拡張機能の設定変更が必要です。
chrome://extensions」を開き、Tampermonkeyの「詳細」の項目へ移動します。

そして、「ファイルのURLへのアクセスを許可する」をONにします。これでローカルからもrequireスクリプトが取り込めるようになりました。

動作確認

ページに移動すると右上に以下のような(貧相な)固定要素が出現して、「Capture」をクリックすると「待機中…」の文字が出たしばらく待つと記事がキャプチャできます。

画面上では小さいですが、右クリックして保存するときちんとしたサイズの画像が保存できます。

管理人
この辺のやり方は各自カスタマイズしてください。私はとりあえず動くものを…というノリで作ったのでここは作りこみが甘いです。

こちらが今回キャプチャした画像(の一部)です。長いのでトリミングしました。

それなりにうまくキャプチャできていますが、一部の画像がとれていなかったり、デザインがややくずれていたりとしています。傾向として非同期のデータは対応できていなさそうな感じがします。

おわりに

このサイトで試した結果は微妙なものとなってしまいましたが、ページによってはうまくいくことも多いので画像キャプチャを自動化したいというサイトがあればそれでやってみてはどうでしょうか。

Tampermonkeyは色々なサイトで色々なスクリプトを動かせるのでこれを応用すれば何でもできると思います。

スポンサードリンク

-JavaScript/jQuery, 画像素材, 自動化

Copyright© めめんと , 2019 All Rights Reserved Powered by AFFINGER5.