概要

ブログに動的OGP生成機能を追加しました。
そのために、初めて自分でnpmパッケージを開発して公開しました。
node-ogp-creator
リポジトリ

node-ogp-creatorを使用すると以下のようなOGP画像を動的に生成することができます。


node-ogp-creatorでは、canvasに文字列を描画してpngに出力しています。
使用方法は以下のような感じです。

// gatsby-node/index.ts  
blogResult.data.allMicrocmsBlog.edges.forEach(({ node, next, previous }) => {
    createOGP({
      title: node.title || "",
      path: `public/ogp/${node.slug}.png`,
      userName: TWITTER_ACCOUNT || "",
      width: 640,
      height: 480,
      fontPath: "fonts/NotoSansCJKjp-Regular.otf",
      styles: {
        font: "Noto Sans CJK JP",
        fontSize: 30,
      },
    })
    createPage({
      path: `/blog/post/${node.slug}`,
      component: path.resolve(`./src/templates/blogPostTemplate.tsx`),
      context: {
        id: node.id,
        next,
        previous,
      },
    })
  })


もう少し詳細

  • tiny-segmenterというライブラリを使用して、タイトル文字列の形態素解析を行い、不自然な位置での改行を避けるようにしています
  • 全角文字列は2文字、半角文字列は1文字としてカウントし、文字列幅の調整をいい感じにやっています
  • フォントファイルの指定をできるようにしているのは、デフォルトだと日本語が文字化けするためです
  • 背景に画像を設定することは現状はできません。気が向いたら対応するかもしれないです


作ってみた感想

まず、人生初npm publishできたのが嬉しかったです。
公開して実際に自分でyarn addして使ってみたら文字化けしまくりで使い物にならなかったときはショックでしたが。
タイトルの座標計算が結構しんどくて、世の中の自作OGP画像生成コード作っている人たちはすごいなと思いました。
Node.js + TypeScriptにも慣れてきました。今回のライブラリ開発では初めてJestを使ってテストコードも書きました。
ツール周りの理解（prettier, ESLint, babelなど）が浅いのでどこかのタイミングでちゃんと時間撮って勉強したいです。

SNSシェアボタンの追加、動的OGP生成、シンタックスハイライト（jsxのハイライト壊れる問題はprismjs → hightlight.jsに乗り換えることで解決しました）が揃ったことで、自作技術ブログに必要な機能は大体揃ってきたかな、という印象です。TypeScript化もすでに終わったので、ブログへの機能追加は一旦このへんで落ち着いておこうかなと思います。余裕があったら目次リンク対応とかやりたいです。