レンタルサーバー・自宅サーバー設定・構築のヒント
レンタルサーバー・自宅サーバー設定・構築のヒント - レンタルサーバー・自宅サーバーの設定・構築情報を公開しています。

Webページのキャプチャー画像をコマンドで撮る

2015年11月19日 2015年11月19日
キャプチャー

デスクトップ環境でない サーバーで、Webページのキャプチャー画像をコマンドで撮る には、wkhtmltoimage, CutyCapt などのコマンドが有名かと思います。 個人的にも いずれもよく利用させてもらいました。 ただ、昨今のページは、HTML5への対応やYoutube動画を張り付けたページなど、かなり、先のコマンドでは、イメージが異なるようなサイトを増えてきました。

そこで、今回は、Xulrunner を使った Webページのキャプチャー画像 を採取できるツールを使ってみます。

元ネタ

ここで試す Xulrunner を使った Webページのキャプチャー画像 を採取できるツール(web_capture)は、 既に GIHubに日本人の有志者の方が作成・公開されている web_capture(https://github.com/jugyo/web_capture) をもとにしています。
これが、そのまま使えれば記事にすることもなかったのですが、
このツールは、2008 年で更新が止まっており、実際に最新の Xulrunner では動かなくなっていました。 そこで、(xul ファイルとiniファイルだけですが )簡単に手を加えて、最新(ver 40)のバージョンでも動作するように手を加えてみました。

web_capture の更新版 一式の ダウンロードは、こちら からどうぞ。

Xulrunner を動作させる環境を整える

Xulrunner を動作させためには、基本的に Xサーバーが必要です。 ただ、今回は、サーバー環境で実行するので、Xサーバーを仮想的に利用できるようにする xvfb を Xulrunner と一緒にインストールします。

では、早速、インストールしてみましょう。


Xulrunner の最新版をダウンロードします

# 32bit OS の場合
$ wget https://ftp.mozilla.org/pub/xulrunner/releases/latest/runtimes/xulrunner-41.0.2.en-US.linux-i686.tar.bz2

# 64bit OS の場合
$ wget https://ftp.mozilla.org/pub/xulrunner/releases/latest/runtimes/xulrunner-41.0.2.en-US.linux-x86_64.tar.bz2

Xulrunner の最新版を /usr/local/ へ解凍します

# 解凍する
$ bzip2 -dc xulrunner-41.0.2.en-US.linux-x86_64.tar.bz2|tar xf -

# xulrunner  ディレクトリが作成されたか確認する
$ ls
... xulrunner 

# xulrunner  ディレクトリを移動する
$ mv xulrunner /usr/local/.

# xulrunner のパスは以下のとおりとなる
$ ls -l /usr/local/xulrunner/xulrunner
-rwxr-xr-x 1 root root 150100 10月 15 07:28 /usr/local/xulrunner/xulrunner
ここでは、 /usr/local/ へ xulrunner をインストールしましたが、各自の環境に合わせてお好きなところへインストールされたらよろしいかと思います。

xvfb と必要なライブラリをインストールします

# xulrunner を動かすには Xサーバーが必要となる
# Xサーバーの代わりに xvfb をインストールする
#   libasound2 libdbus-glib-1-2 は、xulrunner を動かすときに必要なライブラリ
$ apt-get -y install xvfb libasound2 libdbus-glib-1-2
....
Xサーバーを含めデスクトップ環境が既にある場合は、xvfbのインストールは必要ないと思います。 xvfbは、Xサーバーの代替として利用するもので、Xサーバーをインストールできないサーバーなどに画面環境を一時的に提供するものです。
もし、デスクトップ環境などで既にXサーバーがインストールされている場合は、以降の解説で出てくる xvfb ….. は割愛してご覧ください。

web_capture を適当なディレクトリへ解凍します

先の元ネタのところで書いている web_capture の更新版 をダウンロードし、適当なディレクトリへ解凍します。

$ pwd
/home/hoge

# ダウンロードした webcapture.zip を解凍するディレクトリを作成します。
$ mkdir webcapture
$ cd webcapture

# ダウンロードした webcapture.zip を解凍します。
[webcapture]$ unzip -q webcapture.zip 

# Xulrunner のアプリケーション設定ファイルのパスを確認しておきます。
[webcapture]$ ls -l /home/hoge/webcapture/application.ini
-rw-r--r-- 1 hoge hoge 1305 Nov 30  2013 application.ini

Xulrunner を使って Webページのキャプチャーを撮ってみる

xulrunner を動かしてWebページのキャプチャー画像を保存してみます。

# xulrunner を動かしてみる
# サーバー環境のため xvfb-run で xvfb を動かしながら xulrunner を動かします
$ xvfb-run --server-args="-screen 0, 1024x680x24" /usr/local/xulrunner/xulrunner /home/hoge/webcapture/application.ini -url https://www.youtube.com/results?search_query=F1 -file /home/hoge/webcapture/youtube.png
...
... ## サイトのよっては警告などのメッセージがすごい量出力されることがあります  ##
...


# 作成した画像ファイルを確認してみる
$ ls -l /home/hoge/webcapture/youtube.png
-rw-r--r-- 1 root root 366603 Nov 19 12:04 youtube.png
デスクトップ環境であれば、以下のように xvfb は不要で、xulrunnerのみでOKです。
# デスクトップ環境であれば、以下のように xulrunner のみで動かします
$ usr/local/xulrunner/xulrunner /home/hoge/webcapture/application.ini -url https://www.youtube.com/results?search_query=F1 -file /home/hoge/webcapture/youtube.png
xulrunner 実行時に 以下のような出力メッセージは、現状では、デバッグ情報を全て出力するようになっているためにです。
...
JavaScript strict warning: https://s.ytimg.com/yts/jsbin/www-en_US-vfl17IRx6/feed.js, line 12: SyntaxError: test for equality (==) mistyped as assignment (=)?
...
これらを出力しないようにするには、以下のファイルを編集すれば良いです。
$ vi /home/hoge/webcapture/defaults/preferences/prefs.js
...
// 以下の行を全てコメントアウトするとメッセージが出力されなくなります。 
// // [s] debugging prefs
// pref("browser.dom.window.dump.enabled", true);
// pref("javascript.options.showInConsole", true);
// pref("javascript.options.strict", true);
// pref("nglayout.debug.disable_xul_cache", true);
// pref("nglayout.debug.disable_xul_fastload", true);
// // [e] debugging prefs
...

実際に、ここで出力されウェブページのキャプチャー画像は以下のようなものでした。

キャプチャー

これだけ撮れればOKかなぁと思います。


(おまけ)xulrunner で作成したWebページのキャプチャー画像を圧縮してみる

最後に、xulrunner で作成したWebページのキャプチャー画像は、かなり大きくなってしまうので、pngquant を使って圧縮してみます。

まずは、pngquantをインストールします。

$ apt-get install pngquant
...

pngquantを使ってpngファイルを圧縮してみます。

# 後で比較したいので、現在のファイルサイズを確認しておきます。
$ ls -l /home/hoge/webcapture/youtube.png
-rw-r--r-- 1 root root 366603 Nov 19 12:04 youtube.png

# pngquant を使って pngファイルを圧縮します。
$ pngquant --force --ext .png /home/hoge/webcapture/youtube.png

# どれだけ圧縮されたかファイルサイズを確認してみます。
$ ls -l /home/hoge/webcapture/youtube.png
-rw-r--r-- 1 root root 91532 Nov 19 12:07 youtube.png

上記の例だと、 約 24 % まで圧縮できたようです。
非可逆ながら、かなり圧縮できますね。


いかがだったでしょうか?

最近では、HTML5 や Youtube などを駆使した動画ページも増えていて、いままでのコマンドツールでは、なかなか正しくWebページをキャプチャーできなくなりつつありました。

Xulrunner を使うことで、ほぼ FireFoxで確認できるウェブページのイメージをそのまま保存することができますので、かなり、見た目通りのWebページキャプチャー画像が作成できると思います。
また、Xulrunner は、スクリプトベースで画面およびコントロールの制御などGUIを統括できるスゴイツールだと思うのですが、 ちょっと、クセもありますし、GUIとして使うにはもっさり感もあるので広くユーザに浸透していないのかなぁという感じもします・・・。 (個人的には興味深いところもあるのですが・・・。)

プログラミング好きな方なら、こんなのもあると試されるのも良いかもかもしれません。
ご利用のブラウザは、広告ブロック(AdBlockなど) が適用となっていませんか?
このサイトでは、コンテンツの一部が非表示、あるいは、コメント、お問い合わせの投稿ができない検索ができないことがあります。


関連記事 :

YouTubeのようなストリーミング配信するRTMPサーバーをたててみる( C++ RTMP Server(crtmpserver)を使ってみた)

下記の記事では、Pseudo streaming(疑似ストリーミング)で動画配信を行う方法について、簡単に解説してみました。 ngin ...

ConoHa の API を使ってみる、ついでに、ISOイメージを使って Ubuntu Server 14.04 をインストールしてみる。

評価の高い 新 ConoHa VPS と さくらのVPS の特徴とUnixBenchを含めたパフォーマンスを比較してみました。 で Cono ...

評判のABLENET VPSを使うときに最初にやっておきたいこと(CentOS編)

さくらのVPSの時(評判のさくらのVPSを使うときに最初にやっておきたいこと(CentOS編))や CloudCore ( クラウ ...

nginx でKeepAliveを設定してみる

以前に ApacheのKeepAliveを考える で Apache による KeepAlive について記事を書きました。 今回は、その ...

PHP の renameは、mv(move)コマンドの代用ではない件

phpには、rename という関数があります。 Linuxおよび UNIXライクな環境をご存じの方であれば、renameコマンドの php版 ...



コメントを投稿 :

お名前 *

メールアドレス *
( メールアドレスが公開されることはありません。)

サイトアドレス

コメント *

* 印の項目は、入力が必要な項目です。




最近投稿の記事

[ 画像提供元 : Amazon ] 先日、1TBのディスクの入れ替え時にバックアップをとろうとディスクコピーを行いました。 その際 ...

Windows で Linux ファイルシステム Ext4 のディスクをマウントするには? Ext3Fsd が、おそらく、最も簡単なツール ...

今回は、Windows で Compass を使ってみました。 Compass とは、 Sass(サス、Syntactica ...

今回は、Anti Adblock を使ってみました。 Anti Adblock とは、 そもそも Adblock という ウェブ ...

デスクトップ環境でない サーバーで、Webページのキャプチャー画像をコマンドで撮る には、wkhtmltoimage, CutyCapt ...


さくらのVPS 全プラン リニューアルです。(石狩(北海道)も選択可)


root権限ありで ¥685 / 月 ~ と非常にリーズナブルな CPU 1(core)の 512 プランから、 最高 CPU 10(core), メモリ 32(GB), SSD容量 800(GB) までとプランが充実。
ディスクは、SSDとHDDの選択が可能になった他、データセンターは人気の東京、石狩(北海道)となりました。

また、どのプランでも好きなOSが選べます
( CentOS, Fedora, Scientific Linux, FreeBSD, Ubutu, Debian )

管理人もおすすめのVPSです。
試用期間がありますから、一度、お試しを!!

詳しくは、http://vps.sakura.ad.jp/さくらのVPSのサイトへ へどうぞ!!

カテゴリ


Serverman@VPS 完全1ヶ月無料 キャンペーン実施中です。


Serverman@VPS 完全1ヶ月無料 キャンペーン実施中です。
最近、スワップにも対応した Serverman@VPS は、かなりリーズナブルかもです。

  • メモリ1GB~2GBのEntryプラン :月額:490円
  • メモリ2MB~4GBのStandardプラン :月額:980円
  • メモリ4GB~8GBのProプラン :月額:1,980円

新規申し込みで1ヶ月間完全無料となるキャンペーンを実施中です。
Serverman@VPSの特徴は、安さとIPv6対応です。また、初期設定費0円もポイントです。

IPv6でちょっと遊んでみたい方には、おすすめかもしれませんね。最低利用期間もありませんから、気に入らないときは即解約もできます。

Serverman@VPSの詳細については、 http://dream.jp/vps/ Serverman@VPSのサイトへへどうぞ。



KVM採用 ConoHa VPSは、時間単位で借りれる便利なVPSです。


ConoHa VPS は、初期設定費0円最低利用期間無し時間単位で清算可能、 さらに、Web APIを使って自動化を図ることもできる便利なVPSです。

海外サーバー設置も可能で、ローカル接続にも対応と、かなり、機能豊富なサーバーです。

新規ユーザ登録で、クーポンもらえますから、まずは、お試しですね。

ConoHa VPSの詳細については、
http://www.conoha.jp/ へどうぞ。

KVM採用 お名前.com VPS(KVM) 2G プラン 初期設定費無料 キャンペーン 実施です。


メモリ2GBプラン CPU:3core、Disk:200GB
月額:1,153円から (初期設定:1,680円0円)

さくらのVPSがリニューアルされてもなんのその。
1GBメモリ / 2Core を ¥834 – の格安価格で提供中です!
間違いなくスペックからすると割安感ありです。
年間割引時の途中解約で返金がないのは、 ちょっと残念ですが、それでもこの割安感は魅力です。

まずは、お試しですね。

お名前.com VPS(KVM)の詳細については、
http://www.onamae-server.com/vps/ へどうぞ。(お試し期間が15日あります。)



  • ソーシャルブックマーク

  • はてなブックマークへ追加するはてな登録数
ページトップへ
Time : 0.6865 [s]