NewダークモードGatsbyJSでOGP画像の動的生成にチャレンジしてみた2020-02-11QiitaやDev.toなどのブログサービスでは記事タイトルと著者情報をベースに、SNSにシェアされる際に展開されるOGP画像を自動的に生成してくれます。本記事ではGatsbyJS製のブログで同じ機能の実装にチャレンジしたので、その模様を紹介したいと思います。2020OGP画像の生成方法OGP画像の動的生成は大きく3つの方法で実現できます。画像配信CDNで画像を加工するCDNが提供する画像へのテキスト追加機能を利用するimgixやCloudinaryで実現可能サーバーサイドで画像を生成するサーバーサイドで画像処理を行う仕組みを準備するNode.jsではnode-canvasで実現可能クライアントで画像を生成するDOMから画像を生成する仕組みを利用するHTMLやCSSで作ったDOMをキャプチャーするOGP画像生成ライブラリの作成GatsbyJSのビルド時に画像生成を実現したかったので、今回はサーバーサイドで処理を行う方法を採用しました。catchy-imageという画像生成を行うNode.jsライブラリを作成しました。フォントや背景色などの画像のスタイルや記事タイトルや著者名などの情報を引数で渡して実行すると、画像生成を行います。類似の機能を持つライブラリはいくつか見つけたのですが、日本語が綺麗に表示できるものがなかったので、今回作成に至りました。ライブラリの使用例は下記のとおりです。}}run()ライブラリで生成される画像は下記のとおりです。記事タイトルと著者名、アイコンを含めることが可能です。背景色や背景画像の変更、任意のフォント指定などスタイルのカスタマイズもある程度できるようになっています。APIを操作するライブラリを駆使して実現しています。#1で発表したので、下記の資料を参照ください。GatsbyJSプラグインの作成ブログの記事情報からOGP画像を生成するために専用のGatsbyJSプラグインを作成しました。GatsbyJSではgatsby-transformer-remarkプラグインがマークダウンをパースして、HTMLファイルに変換しています。変換処理中に得られるマークダウンのパース結果を使用し、記事のタイトルやスラッグなどのメタデータを、画像生成ライブラリの引数に渡して、画像を生成します。画像は公開ディレクトリであるpublic/[slug]に出力されるので、GatsbyJSのビルド処理後に、自動的に公開されます。配置すると、プラグインをnpmに公開せずとも、ブログに組み込むことが可能です。今回はgatsby-remark-og-imageという名前のプラグインを作りました。tsconfig.jsonプラグインを使用するときは、gatsby-config.jsに設定を記載します。]}画像生成が成功したときは以下のように、生成画像のファイルパスがログとして出力されます。さいごに先月から取り組んでいたOGP画像の動的生成が形になったので、記事を公開しました。チャレンジしてみての感想ですが、Node.jsで画像にテキストを入れる際の座標計算が非常に大変でした。次に同じことやるなら、この方法は選ばないかもしれないです。何はともあれ、SNSに記事をシェアした際の見栄えを良くすることは達成できたので、個人的には満足しています。Kagawa現状は自分のブログ環境でしか動作を確認していないので、安定稼働のために、以下に挙げたものを順次やっていきたいと思います。