Node.jsを使ってアイキャッチ画像を自動生成する試み

2018/06/11
development
Node.js, blog

Node.jsのお勉強を兼ねてブログのアイキャッチ画像を自動生成するツールを作ってみました。 完全に自分向けに作ったので公開はできないのですが、代わりに作り方をまとめておきます。

処理の流れは

    1. 記事のメタ情報（タイトルやカテゴリなど）を取得
    1. カテゴリを元に背景画像を選択
    1. タイトル文字列を画像化
    1. 背景画像とタイトル文字列画像を合成
    1. ファイルに保存

となっています。この中からいくつかキーポイントをご紹介。

記事のメタ情報を取得

記事のメタ情報はmarkdownのFront Matterに書かれています。

きっとパーサがあるだろう、と思って探したらいくつか見つかりました。複雑なことをしたいわけではないのでどれを選んでもよさそうでしたが、今回はgray-matterをチョイス。自分はFront MatterをTOMLで書いているのでTOMLのパーサと連携させて使います。

使い方はこんな感じ。特に複雑なところはありません。

const matter = require('gray-matter');
const toml = require('toml');

const matterOptions = {
  language: 'toml',
  delimiters: '+++',
  engines: {
    toml: toml.parse.bind(toml)
  }
};

const frontmatter = matter.read('example.md', matterOptions);
console.log(frontmatter.data.title); // 記事のタイトル
console.log(frontmatter.data.date); // 記事の作成日

文字列の画像化

Node.jsでの画像処理はAutomattic/node-canvasがポピュラーのようですが、これってWindowsにインストールするのハードル高いんですよねー。

手軽にやりたいので今回は

を組み合わせることにしました。sharpはSVGを扱える画像加工ライブラリ。 text-to-svgは名前の通り文字列をSVG化するライブラリ。フォントを指定できます。日本語フォントもOKでした。

text-to-svgで文字列をSVG化し、sharpにSVGを渡して背景画像と合成、という流れですね。 SVGを使ったおかげで文字サイズを問わずキレイに描画できているようです。

タイトルの改行位置決め

長めのタイトルに改行しないと文字が小さくなり過ぎるので改行を入れます。文字数で改行するのが簡単ですが、読みやすさを考えると一工夫したいところ。

今回はAmanatsu.jsという簡易形態素解析ライブラリを使うことにしました。

解析結果は配列で取得できるので、あとは適当な長さで分割すればOK。 簡易的な解析ですが、そこそこいい感じの結果になっていると思います。

ちなみに、ピリオドが区切りとして解析されてしまうので、分割するときにピリオドの前後が分れないようにロジックで補正しています。

コメント欄を表示する

関連(するかもしれない)記事

おススメ