Hatena::ブログ(Diary)

C++でゲームプログラミング

2013-07-26

[][]phantomjs でアンカーへ移動した状態でスクリーンショットを保存したかった

phantomjs で

https://github.com/osyo-manga/vim-textobj-multiblock/blob/master/plugin/textobj/multiblock.vim#L10

みたいにアンカーへ移動した状態でスクリーンショットを保存したかったんですが、そのまま開くだけでは移動しなかったので自前でクリッピングしました。


[ソース]

var url = "https://github.com/osyo-manga/vim-textobj-multiblock/blob/master/plugin/textobj/multiblock.vim#L10"
var output = "output.png"


var page = require('webpage').create();
page.open(url, function (status) {
    page.includeJs('http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', function() {
        var anchor = page.evaluate(function() {
            var hash = location.hash;
            if( hash == "" ){
                return 0
            }
            return $(hash).offset().top;
        });

        var width = page.evaluate(function() {
            return $(document).width();
        });
        var height = page.evaluate(function() {
            return $(document).height();
        });

        page.clipRect = { top: anchor, left: 0, width: width, height: height - anchor };
        page.render(output);

        phantom.exit();
    });

});

[output.png]

f:id:osyo-manga:20130726221157p:image


jQuery 便利だなぁ。

2013-06-26

[][]heroku で phantomjs を使用した時に日本語が文字化けするのを解決する

heroku 内で phantomjs を使用して Webサイトのスクリーンショットを保存しようとしたんですが、その際に次のように日本語が文字化けしてしましまいました。


f:id:osyo-manga:20130626102728p:image


[解決]

アプリケーションリポジトリに ~/.fonts/ ディレクトリを追加し、そのディレクトリに日本語に対応している .ttf ファイルを保存して commit & push すればそのフォントを使用するようになりました。

実際のディレクトリ構成はこんな感じです。

heroku や phantomjs 側で設定等を追加する必要も特にありませんでした。


f:id:osyo-manga:20130626102729p:image


上記は Ume-font を使用した状態です。


[注意]

heroku の環境変数

LANG=ja_JP.UTF-8

を設定した場合、フォントファイルを追加しても文字化けしたままでした。

ここら辺は詳しく調べなかったのでもしかしたら他の要素が原因になっているかも知れませんが…。


[参照]

http://d.hatena.ne.jp/deeeki/20120902/heroku_wkhtmltopdf_fonts

http://d.hatena.ne.jp/shinichitomita/20120519/1337479457