あっかぎのページ

phantomjsの文字化け解決

20150215_1

資産管理の自動化を進めています。寄り道でcapybaraを勉強中にphantomjsの文字化けではまったのでその時のメモ(VagrantのDebian環境)。

解決方法

先に解決方法です。

  • phantomjsをgit clone
  • 自環境で再ビルド(1時間以上かかりました)
  • できたphantomjsで動作させるとOK

前置き

資産管理の自動化用にデータ取得の自動化を勉強しています。主にこの本「Rubyによるクローラー開発技法 巡回・解析機能の実装と21の運用例」で勉強しています。

今の所ほとんどMechanizeでデータ取得できていますが、中にはJavascriptで動的に生成するjsonデータを途中で拾わないといけないのがあったりしてめんどくさかったです。ということもあって、擬似ブラウザ動作ができないものかと思っていたらcapybaraというのが使えそうと思って寄り道しました。

で、先ほどの本の中にcapybaraとpoltergeistを使うとコマンドライン上で擬似ブラウザ動作を再現できるとの記述あり。「これはいい!」と思って手順通りに進めてみました。

ところが、最初の画像みたいに日本語がことごとく□で文字化け・・・(;_;

「この文字化けが解決できました」というメモ。

解決方法

capybara上で

s.screenshot("hoge.png")

とすることでブラウザ動作の画面を取り出せます。で、キャプチャすると文字化けしまくります(;_;発生元を探すとpoltergeistが使っているphantomjsというのが文字化けの犯人のよう。

phantomjs
20150215_3

phantomjs自体はブラウザを立ち上げる必要なく擬似ブラウザ動作を再現できるというツールのようです。Googleで探してみると他にも同じように文字化けしている人がいる模様。

こちらのサイトさんと同じような状況でした。vagrantのDebian環境ということもあってX windowも入っていないので、まずはフォントのインストールやfonts.confの設定をいじってみても文字化けは改善しませんでした。

やってもダメだったこと

  • ipaフォントを入れる(apt-get install fonts-ipafont)
  • fonts.confの書き換え & local.conf作成
  • フォントキャッシュのクリア(fc-cache -fv)

ということで、苦し紛れにphantomjsを自分の環境でビルドしたら、なぜかうまくいきました。(phantomjsのこちらを参照しました)

うまくいった方法

20150215_2

手順1.コンパイル用のライブラリーのインストール

$ sudo apt-get install g++ flex bison gperf ruby perl 
  libsqlite3-dev libfontconfig1-dev libicu-dev libfreetype6 libssl-dev 
  libpng-dev libjpeg-dev

手順2.phantomjsのソース取得&コンパイル
(注意1:gitのデータは百MBを超えました 注意2:build.shは1時間以上かかりました)

$ git clone git://github.com/ariya/phantomjs.git
$ cd phantomjs
$ git checkout 2.0
$ ./build.sh

手順3.確認
コンパイルが完了したら次のコマンドでphantomjsできちんと文字化けしていないことを確認します。

$ bin/phantomjs examples/rasterize.js http://www.yahoo.co.jp yahoo.png

これで作成されたyahoo.pngを確認していなければ、phantomjsのバイナリは問題ないと思います。

手順4.capybaraなどで使えるように/usr/local/binへ移動

$ sudo cp bin/phantomjs /usr/local/bin

おまけ

phantomjsのビルドが大変なためコンパイル済のバイナリを置いておきます。
(環境や設定フォントが違うと使えない可能性が大きいのであらかじめご了承ください)

ダウンロードしてきたら次のコマンドで動作確認してみてください。

$ chmod +x phantomjs
$ ./phantomjs rasterize.js http://www.yahoo.co.jp yahoo.png

コマンド後にできたyahoo.pngが文字化けしていなければOKです。動作中にエラーや文字化けしてしまった場合は、上で紹介した方法を試してみてください。

勝手な推測ですが、phantomjsで配布されているバイナリはfont-configの設定自体を組み込んでしまっているのかもしれないですね。

参考