📷

OGP画像を簡単に作れるvercelのRuntimeを作りました！

2020/12/19に公開

Vercel

tech

どうも、 @uzimaru0000 です。
タイトルにもあるように OGP 画像を簡単に作れる vercel の Runtime を作りました。

作ったもの

使い方としては vercel.json に以下のように記述します。

{
  "version": 2,
  "functions": {
    "api/**/*.(html|tsx)": {
      "runtime": "@uzimaru0000/vercel-og-image@1.4.0",
      "memory": 1024
    }
  }
}

functions の api/**/*.(html|tsx) に対応するファイルがこの Runtime で処理されます。
html と tsx に対応しています。

tsx は、React の Component を default で export することでその Component を元にした OGP 画像が生成されます。

// ベタ書きでCSSを書きたい
const Style = () => (
  <style
    dangerouslySetInnerHTML={{
      __html: `
    @import url('https://fonts.googleapis.com/css2?family=Langar&display=swap');

    .body {
        margin: 0;
        padding: 0;
    }

    .wrapper {
        display: flex;
        width: 100%;
        height: 100vh;
        justify-content: center;
        align-items: center;
    }

    .langar {
        font-family: 'Langar';
        font-size: 64px;
    }
`,
    }}
  />
);

export default ({ query }) => (
  <html>
    <head>
      <Style />
    </head>
    <body>
      <div className="wrapper">
        <div className="langar">{query.title || 'Hello'}</div>
        <div>generated from tsx</div>
      </div>
    </body>
  </html>
);

このような Component を作ることで下のような画像が生成されます。

この Component には下のような props が渡ってきます。

interface Props {
  query: { [key: string]: string };
  path: string;
}

query は渡ってきたクエリパラメータが入っています。
path はその Lambda 関数にアクセスされたパスが入っています。

やっていること

この Runtime でやっていることは

https://github.com/vercel/og-image

とほとんど同じものです。
このリポジトリでは作成される画像のテンプレートを HTML 文字列にしているのですがその部分を指定されたファイルの情報にしているという感じです。

html の場合はそのままで良いのですが、tsx は tsc でコンパイルして JavaScript に変換しています。
現在は jsx を利用することは出来ないのですが、後々利用できるようにしていきたいです。
また、今の状態ですと styled-component などの外部のライブラリを利用しようとすると動かないなどの問題点もあります。

まとめ

OGP 作成に FaaS を使っている人、特に vercel/og-image を fork して利用している人がいたら使ってみて欲しいです。
使ってみた感想やバグ報告、コントリビュートなど大歓迎です！！
僕のTwitter にリプをするなり、リポジトリの issue に投稿するなり、何でも大丈夫です！！

作ったもの

やっていること

まとめ

Discussion