GemのIMGKitを使って見ました。
Kazuma.です。
個人で使う旅行用のポートフォリオサイトを作ろうとして使ったGemのIMGKitを今回メモしておきます。
あ、これはRailsのプロジェクトに入れる想定でした!
こんな感じ、サイズが適当なのでなんかおかしな比率になってます笑
IMGKitとは?
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に書かかれているので参考に〜。)
width: 350, height: 250
ここで保存のサイズ指定しています。
heightを指定しないとサイトの下まですべてレンダリングしますので時間がかかります。必要ない場合は指定してやるのでがいいかと。
次にimage_urlがCarrieWave、Cloudinaryに保存されるように設定します。ここは割愛!
それだけではHerokuでは変換できないので以下のgithubからwkhtmltoimage-amd64をとってきてアプリケーションディレクトリのbin内に保存します。
github.com
あとはHerokuにデプロイして、確かめます。
このGemではhtmlをレンダリングし、保存するため、現段階では日本語は文字化けするので、それを対応させます。