どうも、たくチャレ(@takuchalle)です。

だいぶ遅くなってしまいましたが、Ruby on Rails その2 Advent Calendar 2018の6日目です。

日にちは前後しますが、個人開発 #2 Advent Calendar 2018Rails で質問箱もどきを作ったという記事を書きました。

そこで質問箱っぽい画像を生成するのにwkhtmltoimageというツールを使いましたので、導入方法や使い方を紹介します。

wkhtmltoimage とは

もともとはwkhtmltopdfという HTML から PDF を生成するツールがあって、そのプロジェクトの一つとしてwkhtmltoimageがあります。こちらは HTML から画像を生成するツールです。

インストール方法

公式サイトのダウンロードページから自身のプラットフォームのバイナリをダウンロードしてインストールしてください。

以下のようにバージョンが表示されたらインストール成功です。

$ wkhtmltoimage --version
wkhtmltoimage 0.12.5 (with patched qt)

コマンドラインで使ってみる

外部のサイトを画像にすることができるので、以下のコマンドで Google のトップページが画像で保存されます。

$ wkhtmltoimage https://google.com google.png 

サイズや画質をオプションで指定できるので--helpを確認してみてください。

Rails で使う

IMGKit をインストール

wkhtmltoimageを Rails で使うために IMGKit という gem を使います。

Uses wkhtmltoimage to create JPGs and PNGs from HTML - csquared/IMGKit

Gemfile にgem 'imgkit'を追加して、bundle installしてください。

簡単な使い方

ここでは簡単な使い方を紹介します。

TempFile を使って一時ファイルを生成して、そこにIMGKitで生成されデータを書き込んでいます。

Tempfile.create([`hoge`, '.png'], :encoding => 'ascii-8bit') do | file |
	file.write(IMGKit.new('https://google.com', quality: 20, width: 800).to_png)
	file.rewind
	
	# file をどこかに保存
end

このままだと一時ファイルは消えてしまいますので、どこかに保存をしてください。僕はActiveStorageを使って保存しています。やり方を別の記事に書いてあるので参考にしてみてください。

質問箱っぽい画像を作る

IMGKitでは HTML を直接引数で渡して画像を生成することができます。

コードは長いので直接GitHubを見てもらうと良いと思います。

get_htmlメソッドに HTML を直接書いて使っています。CSS を指定する方法などもあるのですが、そこまで大きな HTML でもないのでベタ書きしています。

生成される画像のイメージは僕の QBox の回答を見てみてください。HTML ですので気に入らなければ自分でカスタマイズ可能です。

あと、get_htmlはヘルパーに書いてしまっていますが、libディレクトリの下にあったほうが良かったかもしれないです…

まとめ

Ruby on Rails その2 Advent Calendar 2018の6日目の記事で、Rails で質問箱っぽい画像を作る方法を紹介しました。

本家質問箱はImageMagickを使ってるみたいですが、HTML でデザインできるのでwkhtmltoimageの方が柔軟かなと思って使っています。

Heroku でwkhtmltoimageを使う方法は別の記事に書いたので参考にしてみてください!

同じカテゴリの記事