ブログ記事の画像を生成する
SNSでURLをシェアしたときに表示されるページ情報に画像があるとかっこいいのでできるようにしました。
画像表示のテストhttps://t.co/YRGuXME8dI
— Kei Ito (@gjbkz) February 11, 2022
これを書いている時点の記事画像はこのような感じです。右下の枠にはURLのQRコードを表示する予定です。
2/12追記: タイトルが目立つようにデザインを修正しました。
画像の生成方法 #link
画像に含めている情報は以下の通りです。
記事のタイトル
記事の作成日と更新日
記事のURL
これらはページのmetaタグを入れるためにこのような形でデータを用意してありました。
export interface PageData {pathname: string,title: string,filePath: string,publishedAt: string,updatedAt: string,commitCount: number,}
これをnode-canvasでPNG出力します。
背景の影 #link
画像の枠についている影はStackBlurを使っています。
/** 影の四角を描いて */ctx.fillStyle = 'rgba(0,0,0,0.2)';drawRoundedRect(ctx, x + 2, y + 2, w, h, borderRadius);ctx.fill();/** まるごとぼかして */stackBlur.canvasRGB(ctx.canvas, 0, 0, width, height, blurRadius);/** 枠を書く */ctx.fillStyle = colors.background;drawRoundedRect(ctx, x - 1, y - 1, w, h, borderRadius);ctx.fill();
改行位置の調整 #link
フォントサイズが60pxだと日本語で17文字で横幅いっぱいになります。文字を小さくするのは読みにくいので長いタイトルの場合は改行することにしたのですが、看板のようなものなのでたとえ
ばこのような位置で改
行されると格好が悪いです。
文節を切らないように改行位置を決めればいい具合になります。今回はKuromojiを使って以下のような禁則処理を実装をしました。
助詞、助動詞の前では改行しない
開き括弧の後ろでは改行しない
閉じ括弧の前では改行しない
句読点の前では改行しない
数字の後ろでは改行しない（"10cm"など単位を想定しています）
例えば「今日の8時からNext.jsの話をします」の場合は以下のスラッシュの位置でのみ改行します。
「今日の/8時から/Next.jsの/話を/します」
はみ出し対策 #link
タイトルが長いとはみ出してしまうので行がはみ出す場合はフォントを小さくしてリトライするようにしました。QRコード部分に重ならないように改行位置も調整しています。
課題 #link
QRコード表示を実装して右下の謎の枠をなんとかしないといけません。