GemのIMGKitを使って見ました。

Kazuma.です。

個人で使う旅行用のポートフォリオサイトを作ろうとして使ったGemのIMGKitを今回メモしておきます。
あ、これはRailsのプロジェクトに入れる想定でした！

こんな感じ、サイズが適当なのでなんかおかしな比率になってます笑

IMGKitとは？

github.com

URLを渡して上げるだけでそのサイトのスクリーンショットをとってくれるGemです。
その他にもPDFに変換してくれたりもします。
その場合Gemをインストールする際にwkhtmltopdfを入れてあげます。

Gemをインストールと初期設定

今回はcarriewaveを使って画像保存し、Herokuと連携できるCloudinaryを使います。
つまり今回はHerokuにデプロイ前提です。

gem 'imgkit'
gem 'wkhtmltoimage'
gem 'carrierwave'
gem 'cloudinary'

bundle install

インストールが終わった後、config/initializers/imgkit.rbに以下のようなコードを記載します。

IMGKit.configure do |config|
  config.wkhtmltoimage = Rails.root.join('bin', 'wkhtmltoimage-amd64').to_s if ENV['RACK_ENV'] == 'production'
end

早速使ってみる！

今回はPortfolioというモデルを使い、カラムはstring型のweb_urlとimage_urlを使います。
web_urlにキャプチャしたいURLを入れます。変換されてimage_urlに入るという形になります。

キャプチャまでの流れ

• viewでweb_urlにいれる
• controllerで画像に変換
• carriewave、Cloudinaryで保存

では、変換部分のControllerを書きます。使いたい関数の中に次のコードを追加します。
変数やモデル名は随時変更してください。

    file = Tempfile.new(["image_#{@portfolio.id}", '.png'], 'tmp', :encoding => 'ascii-8bit')
    file.write(IMGKit.new(@portfolio.web_url, quality: 50, width: 350, height: 250 ).to_png)
    file.flush
    @portfolio.image_url = file

引数のtmp

ローカルで利用する際にアプリケーションディレクトリのtmpに保存されます。
Githubにpushする場合はgitignoreしておくといいと思います。
(ちなみにローカルMacでやる場合はGithubのReadmeに書かかれているので参考に〜。)

IMGKit.new(........).to_png

ここでpngに変換します。to_jpegにすることもできます。

width: 350, height: 250

ここで保存のサイズ指定しています。
heightを指定しないとサイトの下まですべてレンダリングしますので時間がかかります。必要ない場合は指定してやるのでがいいかと。

次にimage_urlがCarrieWave、Cloudinaryに保存されるように設定します。ここは割愛！

それだけではHerokuでは変換できないので以下のgithubからwkhtmltoimage-amd64をとってきてアプリケーションディレクトリのbin内に保存します。
github.com

あとはHerokuにデプロイして、確かめます。

このGemではhtmlをレンダリングし、保存するため、現段階では日本語は文字化けするので、それを対応させます。

こんな感じなサイトを参考にすると日本語解決できるのでは？

qiita.com

最後に

ホントはURLをスクレイピングして一番ベスト（アイコンなど）を取ってきて表示するのがいいのですが、面倒だったのでこっちを採用しました。
スクレイピング用の便利なGemはnokogiriを使うようです。

もっと良い書き方があります！というのがあれば教えて下さいね！

うーん、Railsでは一番この本がいい気がしますが僕的には実践が一番かな・・・・。

これはほしい。笑