こんにちは。エンジニアのronです。
SmartHRは、Rubykaigi 2021 Takeoutでスケジュールアプリを提供しました。
https://tech.smarthr.jp/entry/2021/11/02/204403
実はその中で、スケジュールページで設定した一言コメントがOGPに反映されるようにしていました。
これは、Twitterで自分の視聴予定をシェアしてワイワイ盛り上がってほしいという気持ちから実装したものです。
今回は、どうやって画像の生成を行っているのかを解説していきたいと思います。
画像の生成方法
Rubyで画像を生成する方法はいくつかあります。
- imagemagick
- Thinreports
- wkhtmltoimage
などが候補になりますが、今回は改行などレイアウトの簡単さから、wkhtmltoimageを使うことにしました。
実際に生成する部分のコード
https://github.com/kufu/mie/blob/main/app/controllers/plans/ogps_controller.rb
こちらが、OGPの生成を行っているコントローラーのソースコードです。
class Plans::OgpsController < ApplicationController
before_action :set_plan
def show
send_data IMGKit.new(get_html(@plan.description), quality: 20, width: 800).to_img(:png), type: 'image/png', disposition: 'inline'
end
private
def set_plan
@plan = Plan.find(params[:plan_id])
end
def get_html(body)
<<~HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
@charset "UTF-8";
html {
font-family: 'Noto Sans CJK JP', 'Noto Color Emoji', 'Noto Emoji', sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
* {
box-sizing: border-box;
}
.ogp-frame {
width: 1200px;
height: 630px;
overflow: hidden;
background: no-repeat center url(data:image/png;#{ogp_background_image});
padding: 44px 34px 240px 64px;
line-height: 1.5;
font-size: 58px;
color: white;
word-break: break-all;
}
.ogp-body {
width: 100%;
height: 100%;
overflow-y: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
padding: 0 10px 0 0;
}
.ogp-body::-webkit-scrollbar {
display:none;
}
</style>
</head>
<body><div class="ogp-frame"><div class="ogp-body">#{ERB::Util.h(body)}</div></div></body></html>
HTML
end
def ogp_background_image
# data-url
end
end
wkhtmltoimageをrubyで扱うことができるIMGKitというGemを使用しています。使い方は非常に簡単で、
IMGKit.newの引数にHTML文字列(と、オプション)を渡し、to_imageを呼ぶことで、画像を得ることができます。
HTML自体は、背景画像をbackground-imageにして、その上に文字を表示しているだけのシンプルなものです。
overflowやwebkit-line-clampを使用して、文字が背景からはみ出すのを防止したり、長すぎる文章の場合は4行までしか表示しないようにしたりしています。
おわりに
画像に文字列を埋め込んでレイアウトすることはかなり簡単にできるということが伝われば幸いです。
OGPに限らず、アイディア次第で様々なサービスで利用できると思います。
面白いコラ画像ジェネレーターを作ったらぜひご一報ください！