Koki's personal blog

Koki's personal blog

Another fine, responsive site template by HTML5 UP.

HugoブログのOGP画像をコマンド一発で自動生成し、それを自動設定する

作成するのに手間が掛かるOGP画像を、コマンド一発で自動生成し、それを自動設定する方法について説明します。

Koki

6 分で読めます

この記事では、HugoブログのOGP画像をコマンド一発で自動生成し、それを自動設定する方法を説明します。

この記事の内容です。

対象読者

  • HugoブログのOGP画像の生成および設定を自動化したい方

環境

  • WSL 2 (Ubuntu 20.04 LTS)
  • Homebrew
  • Node (v16.13.0)
  • Hugo (v0.94.2+extended linux/amd64 BuildDate=unknown)

前提条件

  • 使用しているテーマはHugo Future Imperfect Slim
  • 指定したOGP画像が存在しない場合は、プロフィール画像をOGP画像として使用

OGP画像自動生成のための環境構築

本セクション内で実行しているコマンドは、すべてプロジェクトのルートディレクトリで行うこと前提です。

1. 使用するテンプレート画像のダウンロード

OGP画像を生成するのに使用するテンプレート画像をダウンロードし配置します。
今回は 全てのイラスト素材が無料で利用できるサイト イラストボックス さんのものを利用しています。
ダウンロードが終わったら、画像サイズを 1200px * 630px に変更し、static/img/og/ へ /ogp-template.png という名前で保存します。
今回、画像サイズの変更には Online Image Resizer を使用しました。

2. 使用するフォントのダウンロード

次に、使用するフォントをダウンロードし配置します。
今回は参考にしたページを真似し、 HackGen (白源) を使用します。
ダウンロードは以下から。


GitHub - yuru7/HackGen: Hack と源柔ゴシックを合成したプログラミングフォント 白源 (はくげん／HackGen)
Hack と源柔ゴシックを合成したプログラミングフォント 白源 (はくげん／HackGen). Contribute to yuru7/HackGen development by creating an account on GitHub.
 

ダウンロードが終わったら、 HackGen-Regular.ttf と HackGen-Bold.ttf を static/fonts/hackgen/HackGen へ配置します。

3. Go言語のインストールおよび初期化

OGP画像の自動生成に使用するライブラリ、tcardgenを使用するのにGo言語をインストールする必要があるのでインストールします。
コマンドは以下の通りです。

brew install go

インストールが終わったら、以下のコマンドを実行し初期化しておきます。
go mod initの引数には、適当なモジュール名を指定します。
今回は、他のプログラムから特にモジュールを呼び出さないので、私のブログ環境のリポジトリ名をそのまま指定しています。

go mod init env-for-blog

4. tcardgenのインストールおよび設定

以下のコマンドを実行し、tcardgenをインストールします。

go get github.com/Ladicle/tcardgen

インストールが完了したら、プロジェクトのルートディレクトリに以下の設定ファイル、tcargen.ymlを作成します。
以下はあくまでも一例なため、自身の好みに合わせていろいろといじってみてください。

template: static/img/og/ogp-template.png
title:
  fontSize: 65
  fontStyle: Bold
info:
  start:
    pX: 126
    pY: 495
  fontSize: 30
  fontStyle: Regular
  separator: " - "
tags:
  start:
    pX: 1100
    pY: 495
  fontStyle: Regular
  fontSize: 0

5. ブログ記事のテンプレートを編集

tcardgenを使用しOGP画像を生成するためには、記事へのタグ設定が必須となっています。
私の環境だとブログ記事のテンプレートにtagsが無かったため、ここで追加しておきます。

+++
author = "Koki"
categories = [""]
tags = [""] # ←これを追加
date = {{ .Date }}
linktitle = ""
title = ""
description = ""
type = "post"
draft = true
+++
# 以下省略

また、tagsの設定内容が空だとOGP画像生成時にエラーが発生し生成できないため、必ず設定するようにしましょう。

6. 複数のOGP画像を一気に作成するためにスクリプト化

ここまできたら、tcardgenコマンドを実行しOGP画像を自動生成できるようになります。
コマンド例は

tcardgen \
--fontDir [フォントファイルが存在するディレクトリパス] \
--outDir [生成したOGP画像ファイルの出力先] \
--template [OGP画像生成に使用するテンプレート画像のパス] \
--config tcargen.yml \
[生成対象記事ファイルのパス]

で、本記事のOGP画像を生成する時のコマンドは以下になります。

tcardgen \
--fontDir static/fonts/hackgen/HackGen \
--outDir static/img/og \
--template static/img/og/ogp-template.png \
--config tcargen.yml \
content/post/hugo/generate-og-image-automatically.ja.md

ただ、これだと複数記事に対応できないため、スクリプト化しておきます。
私が実際に使用しているスクリプトは以下の通りです。

const fs = require("fs");
const path = require("path");
const { execSync } = require("child_process");

const fontDir = "static/fonts/hackgen/HackGen";
const outputDir = "static/img/og";
const configFilePath = "tcargen.yml";

for (let i = 2; i < process.argv.length; i++) {
  const filePath = path.join(__dirname, process.argv[i]);
  if (fs.existsSync(filePath)) {
    const commandStr = `~/go/bin/tcardgen --fontDir ${fontDir} --output ${outputDir} --config ${configFilePath} ${filePath}`;
    execSync(commandStr);
    console.info(`${process.argv[i]} completed`);
  } else {
    console.error(`\x1b[31m${filePath} was not found.`);
  }
}

引数として渡された記事ファイルの分、tcardgenコマンドを実行します。
本スクリプトは以下のように使用することができます。

node gen-ogp-image.js content/post/hugo/generate-og-image-automatically.ja.md content/post/hugo/generate-og-image-automatically.md

OGP画像を自動で参照するための設定

最後に、自動生成したOGP画像を自動で参照するための設定を行います。
使用しているテーマであるHugo Future Imperfect Slimのメタタグ設定箇所は layouts/partials/meta.html なため、このファイルを触っていきます。
該当箇所は

{{- with or (.Params.openGraph) (.Params.images) -}}
  {{ range . }}
    <meta property="og:image" content="{{ .src | absURL }}">
    <meta property="og:image:alt" content="{{ .alt }}">
  {{- end -}}
{{ else }}
  <meta property="og:image" content="{{ .Site.Params.intro.pic.src | absURL }}">
{{ end }}

なのですが、何故かテーマディレクトリ配下のサンプルサイトを元に設定しても .src を参照できないとエラーを吐かれたので、以下の様に独自処理に書き換えました。

{{ $ogImagePathBase := printf "/img/og/%s.png" .File.BaseFileName }}
{{ $ogImagePathForCheckExists := printf "/static%s" $ogImagePathBase }}
{{ if fileExists $ogImagePathForCheckExists }}
  {{ $ogImagePath := printf "/blog%s" $ogImagePathBase }}
  <meta property="og:image" content="{{ $ogImagePath | absURL }}">
{{ else }}
  <meta property="og:image" content="{{ .Site.Params.intro.pic.src | absURL }}">
{{ end }}
<meta property="og:image:alt" content="The Open Graph logo">

static/img/og/配下に記事ファイル名と同じ名前のpngファイルが存在していたらそれをOGP画像として使用し、そうでなければサイトプロフィールの画像をOGP画像として使用しています。
altは、とりあえず The Open Graph logo としておけばよさそうだったので、固定にしています。

本記事の対応を行った際のコミットログ

全体的に何をどのように触ったのかを確認したい方向けに、コミットログやファイル変更情報をおいておきます。
Pull request Files changed: 8 generate an ogp image automatically
Pull request Files changed: 8 generate an ogp image automatically 2

ハマった点

Go言語をインストールする際にapt-getコマンドを使用したところ、インストールされたバージョンが古くtcardgenインストール時に以下のエラーが発生しました。

# cd .; git clone -- https://gopkg.in/yaml.v2 /home/koki-n/go/src/gopkg.in/yaml.v2
Cloning into '/home/koki-n/go/src/gopkg.in/yaml.v2'...
fatal: unable to access 'https://gopkg.in/yaml.v2/': server certificate verification failed. CAfile: none CRLfile: none
package gopkg.in/yaml.v2: exit status 128
package github.com/pelletier/go-toml/v2: cannot find package "github.com/pelletier/go-toml/v2" in any of:
        /usr/lib/go-1.13/src/github.com/pelletier/go-toml/v2 (from $GOROOT)
        /home/koki-n/go/src/github.com/pelletier/go-toml/v2 (from $GOPATH)

apt-getコマンドでインストールすると最新安定版ではない古いバージョンのものがインストールされることが多々あるため、許されるならば可能な限りHomebrewを使用するなど、別ルートでライブラリをインストールした方が良いと思います。

参考にしたページ

[Hugo] tcardgen を使って OGP 画像を自動生成する
https://github.com/Ladicle/tcardgenLadicle/tcardgen

最近の投稿

カテゴリー