【Rails】wicked_pdf導入にあたってつまづいたところメモ

wicked_pdfという、HTMLをPDFに変換してくれる便利gemがあるのですが、導入の際に「ローカルで出力されてもサーバ上だと出力されない！」「画像が表示されない！」というようなつまづきポイントがいくつかあったので、はまりどころメモ。
## wkhtmltopdfのパス指定問題
まさかのインストール直後にはまりました。
はまったところはconfig/initializers/wicked_pdf.rb内に記載するwkhtmltopdfのパス指定。
wkhtmktopdfというのはHTMLをPDFに変換してくれるツールです。
wicked_pdfはwkhtmktopdfのラッパーなので、wkhtmktopdfもインストールする必要があります。
wkhtmktopdfのプロジェクトページは[こちら](http://wkhtmltopdf.org/)

ひとまず[wicked_pdf](https://github.com/mileszs/wicked_pdf)にある「Installation」の項目を見ながら進めます。
Gemfileに必要なGemを追加して、`bundle install`

~~~rb
gem 'wicket_pdf'
gem 'wkhtmltopdf-binary'
~~~

`rails generate wicked_pdf`でconfig/initializers配下にwicked_pdf.rbというファイルが生成されます。
Installationに従ってwicked_pdf.rbの中身を下記のように記述

``` config/initializers/wicked_pdf.rb
WickedPdf.config = {
  exe_path: '/usr/local/bin/wkhtmltopdf'
}
```

ローカルではこれでもOKでした。が、サーバ上で動かそうとしたところ、エラーで起動すらせず。
考えてみると当たり前ですが、サーバ上の同じ場所にwkhtmltopdfがないわけです。
そこで、こちら（[Rails4 wicked_pdfでPDF出力 ※windows未対応/ayaketanのプログラミング勉強日記](http://ayaketan.hatenablog.com/entry/2013/11/29/142308)）を参考にして、以下のように書き換え。

``` config/initializers/wicked_pdf.rb
WickedPdf.config = {
  exe_path: "#{Gem.loaded_specs['wkhtmltopdf-binary'].full_gem_path}/bin/wkhtmltopdf"
}
```
これでひとまずPDF生成までできました。

## フォントがちゃんと出力されない問題
環境が違うと、ローカルではさくさくと進んでも、サーバに上げるとはまるということは多々あります。
フォントもそのパターンで、サーバ上で生成すると日本語が出力されない状況に当たりました。
日本語が出力されないのは単純にフォントが入っていないからなので、[IPAフォント](http://ipafont.ipa.go.jp/ipaexfont/download.html)を入れます。
それでも句読点の間隔が詰まっていたり、文字バランスがずれていたりでイマイチ。
別のフォントが必要そうということで、[MigMixフォント](http://mix-mplus-ipa.osdn.jp/migmix/)を利用することにしました。1Pと2Pがありますが、今回は2Pを入れています。

~~~rb
# migmixフォントのzipをダウンロードして解凍
wget "http://jaist.dl.sourceforge.jp/mix-mplus-ipa/59021/migmix-2p-20130617.zip"
unzip migmix-2p-20130617.zip

# フォントを置いているところへ移動
sudo mv -i migmix-2p-20130617/*ttf /usr/share/fonts/japanese/TrueType/
ls /usr/share/fonts/japanese/TrueType/
  ipaexg.ttf  ipaexm.ttf  migmix-2p-bold.ttf  migmix-2p-regular.ttf

# 設定を反映させるためにフォントキャッシュをクリア
fc-cache -fv

# フォントが登録されていることを確認
fc-list | grep Mig
  MigMix 2P:style=Bold
  MigMix 2P:style=Regular
~~~
これでフォントもきれいに出力されました。

## S3の画像が表示されない問題

### __（今更ながら）追記＠2016/12/03__
2016/7/14に更新されたバージョン0.12.3でこちらの問題は解消されたようです。
https://rubygems.org/gems/wkhtmltopdf-binary



なので、Gemfileでは以下のように

```rb
gem 'wicked_pdf'
gem 'wkhtmltopdf-binary'
```

config/initializers/wicked_pdf.rbでは以下のように記述して解決でした。

``` config/initializers/wicked_pdf.rb
WickedPdf.config = {
  :exe_path => "#{Gem.loaded_specs['wkhtmltopdf-binary'].full_gem_path}/bin/wkhtmltopdf"
}
```

__※ 以下は追記前の古いバージョンでの対応になります__

恐らく一番途方にくれたところ。
元々ちゃんと表示されていた画像が、途中からS3の画像のみ表示されなくなってしまったので余計「なんで！？」感が強かったです。

ググると、stackoverflow似たような質問が投げられています。（[wicked pdf not displaying amazon s3 images](http://stackoverflow.com/questions/30837231/wicked-pdf-not-displaying-amazon-s3-images)）
調べていくと、どうやら最初に入れたwkhtmltopdf-binaryはGemだと最新版ではないとのこと。
このときのバージョンは0.9.9.3。一方wkhtmltopdfプロジェクトを見ると、最新は0.12.2.1。
__全然違うじゃないか！__ということで、恐らく原因はこれと踏んで、最新版を入れ直すことに。
最新版に対応したGemがないかと探したところ、ありました、[wkhtmltopdf-binary-edge](https://github.com/pallymore/wkhtmltopdf-binary-edge)
先ほどのGemfileを修正して、wkhtmltopdf-binaryをwkhtmltopdf-binary-edgeに変更して`bundle install`

~~~rb
gem 'wicket_pdf'
gem 'wkhtmltopdf-binary-edge', '~> 0.12.2.1'
~~~
あわせてwicked_pdf.rbも修正

``` config/initializers/wicked_pdf.rb
WickedPdf.config = {
  exe_path: "#{Gem.loaded_specs['wkhtmltopdf-binary-edge'].full_gem_path}/bin/wkhtmltopdf"
}
```
これできれいに表示された…！と思いきや、ローカルだけでした。
サーバ上で動かそうとすると、エラーの山。
何事かと思いきや、なにやらOSが合っていない模様。
サーバがAmazonLinuxだったのですが、wkhtmltopdf-binary-edgeが対応しているのはUbuntuとOS X。
AmazonLinuxは対応していません。確認ミスです。
AmazonLinuxに対応しているものもあるはず…と思って探してみると、ちゃんとありました、[wkhtmltopdf-binary-aml](https://github.com/insphire/wkhtmltopdf-binary-aml)
再度Gemfileとwicked_pdf.rbを修正

~~~rb
gem 'wicket_pdf'
gem 'wkhtmltopdf-binary-aml', git: 'https://github.com/insphire/wkhtmltopdf-binary-aml'
~~~
``` config/initializers/wicked_pdf.rb
WickedPdf.config = {
  exe_path: "#{Gem.loaded_specs['wkhtmltopdf-binary-aml'].full_gem_path}/bin/wkhtmltopdf"
}
```
これでローカル、サーバともにきれいにPDF出力ができました。
## その他ちょっとしたレベルのつまづき

- 変に改ページされてしまう問題
    - h2タグに色をつけていた場合、タグの下1/3が次ページになってしまうなど。
    - CSSの[page-break-inside](http://www.htmq.com/style/page-break-inside.shtml)を利用して解決
    - ex. h2タグで`page-break-inside: avoid;`を指定
- 任意のところで改ページしたい
    - CSSの[page-break-after](http://www.htmq.com/style/page-break-after.shtml)を利用
    - ex. bodyタグで`page-break-after: always;`を指定