質問箱のようなOGP画像をImage::Magickでさくっと生成する

公開日:2019-05-06
最終更新:2019-05-06

質問箱のようにSNSでシェアした際に画像にテキストを入れたOGPを使うのはすごく賢いなと思って、自分でも作れるかと思ったら意外と簡単だったので手順を書いておきます。
完成イメージはこんな感じです。

やり方はいろいろあると思いますが、Image::Magickを使えばかなり簡単につくれますね。

必要な作業

  • Image::Magickのインストール
  • 背景画像の用意
  • フォントの用意

背景画像は1200x630pxのものを画像ソフトなどでつくっておいてください。ぼくがつくったサンプルも置いておきます。
https://kojodan.com/images/temp/ogp_base_sample.jpg
フォントはNotoフォントを使いました。
https://www.google.com/get/noto/#sans-jpan

じっさいのコード

こんな感じです。

#!/usr/bin/perl  
#==========================================================  
# create_ogp_image.pl  
#==========================================================  
use strict;  
use warnings;  
use Image::Magick;  
use Encode qw/decode/;  

# フォント  
# https://www.google.com/get/noto/#sans-jpan  
my $font = './NotoSansCJKjp-Regular.otf';  
my $fontsize = 48;  

# 背景画像(画像サイズは1200x630)  
my $base_img = "./ogp_base_sample.jpg";  

# 描画するテキスト  
# ここはDBから取り出したり、フォームから受け取ったりするはず  
my $text = '吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。';  
my $decode = decode('UTF-8', $text);  

# 20文字ずつ改行(最大5行)  
my $letters = 20;  
my $max_line = 5;  
my @lines = ();  
push @lines, substr $decode, 0, $letters, '' while $decode;  
my $body = '';  
my $line = 0;  
foreach my $str (@lines) {  
    if ($line >= $max_line) {  
        $body = substr $body, 0, (length($body) -2);   
        $body .= decode('UTF-8', "…");  
        last;  
    }  
    $body .= $str."\n";  
    $line++;  
}  

# オブジェクト作成  
my $image = Image::Magick->new;  

# 背景画像の読み込み  
$image->Read($base_img);  

# 開始位置は行数によって変わる  
my $area_height = 390;  
my $line_height = $area_height / $max_line;  
# 描画エリアのスタート座標  
my $x = 120;  
my $y = 120 + $fontsize;  
$y += (($area_height - ($line_height * $line)) /2) + ($fontsize /2);  

# 文字描画  
$image->Annotate(  
    encoding  => 'UTF-8',  
    text      => $body,  
    font      => $font,  
    pointsize => $fontsize,  
    #gravity   => 'Center',  
    #y => $fontsize,  
    x => $x,  
    y => $y,  
);  
my $output_file = "./result_".time().".jpg";  
$image->Write($output_file);  

undef $image;  
exit;  

最大行数と1行あたりの文字数について

使用するフォントによってけっこう変わりますので、先にフォントを決めてから最大行数を10行くらいに設定して流し込んでみて、最大行数を目視で確認するのが早いと思います。
画像を作成する場合は文字の描画エリアを決めて、その開始座標をメモっておいてください。

gravity => 'Center' を使うかどうか

じつは中央表示をするだけなら gravity => 'Center' を指定するとオッケーなのですが、以下のように文章全体が中央寄せになるので最後の行が読みづらくなります。

基本1行しか表示しないって場合はこっちを使えば、めんどくさい計算が不要になるのでいいと思います。

こんな感じで使ってます

じっさいには背景画像を変えて、DBからテキストを取り出しつつ、CGIとして画像を返すようにしましたが、こんなふうにいい感じに表示されています。

https://twitter.com/kojodanjp/status/1125004464266592256

OGPに設定するには以下のタグを使えばオッケーです。

<meta property="og:image" content="https://kojodan.com/images/temp/ogp_base_sample.jpg" />  
<meta property="og:image:width" content="1200"/>  
<meta property="og:image:height" content="630"/>  

それにしてもこのOGP画像でメッセージを伝えるのってすごくいいアイデアですよね。

追記

このQrunchのサイトも記事タイトルがOGP画像で生成されてるんですね。
しかも文節をいい感じで分割してるっぽいのですごい。

記事が少しでもいいなと思ったらクラップを送ってみよう!
44
+1
@kojodanの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする