...
```
実際にどのように描画されるかどうか確認するには、[Playground](https://og-playground.vercel.app/) で確認するのがよいでしょう。
`satori` 関数の第 2 引数には画像を生成する際のオプションを渡します。画像のサイズや使用するフォントの情報などです。OGP 画像のサイズは 1200×630px が一般的［要出典］ですのでそのとおりに `width` と `height` プロパティを渡しています。
最後に `sharp` により PNG 形式に変換して完了です。
```ts
const png = sharp(Buffer.from(svg)).png().toBuffer()
```
## 画像を生成するエンドポイントを作成する
さきほど作成した `generateOgpImage` 関数を使用して生成した画像を返却するエンドポイントを作成しましょう。SvelteKit のルーティングはファイルベースのルーティングを採用しており、ディレクトリの構造と同じパスでルートを作成します。例えば `src/routes/blog/[slug]` のようなディレクトリは `/blog/foo` や `/blog/bar/` のようなルートを作成します。
[ルーティング](https://kit.svelte.jp/docs/routing)
`routes` のディレクトリにはそれぞれ 1 つ以上のルートファイルが存在します。ルートファイルは `+page.svelte` のように接頭辞として `+` がついているのでそれで判別可能です。
Next.js の API Routes のようにサーバー側で動作するエンドポイントを作成するためには、ルートファイルとして `+server.ts` ファイルを作成します。今回は `src/routes/blog/ogp/[title].png/+server.ts` ファイルを作成して `/blog/ogp/記事のタイトル.png` のようなパスで画像を配置できるようにします。
[+server](https://kit.svelte.jp/docs/routing#server)
```ts:src/routes/blog/ogp/[title].png/+server.ts
import { generateOgpImage } from '$lib/generateOgpImage'
import type { RequestHandler } from '@sveltejs/kit'
export const prerender = true
export const GET: RequestHandler = async ({ params }) => {
const { title } = params
const png = await generateOgpImage(title)
return new Response(png, {
headers: {
'Content-Type': 'image/png',
},
})
}
```
`+server.ts` では `GET`,`POST`,`PATCH`,`PUT`,`DELETE` のような HTTP メソッドに対応する名前の関数を `export` します。この関数は [RequestEvent](https://kit.svelte.jp/docs/types#public-types-requestevent) を引数にとり [Response](https://developer.mozilla.org/ja/docs/Web/API/Response) オブジェクトを返却します。
さらに SvelteKit の面白い点として、サーバー側ルートであっても `export const prerender = true` を宣言することでプレレンダリングできます。これにより、ビルド時に静的アセットとして OGP 画像を配置することが可能です。
## 記事詳細画面で OGP 画像を設定する
OGP 画像を生成する仕組みが整ったので、記事詳細画面から OGP 画像を設定するようにしましょう。`src/routes/blog/[slug]/+page.svelte` ファイルが記事の詳細画面のコンポーネントだとします。
```html:src/routes/blog/[slug]/+page.svelte
{post.title}
<
```
`export let data: PageData` はページのレンダリングが開始する前にサーバーで取得されたデータです。Next.js のおける `getStaticProps` に相当するものだと考えればよいでしょう。型注釈に使用している `PageData` は `./$types` から import していますが、これは SvelteKit により自動で生成されるもので、サーバー側の関数の返り値の型（`+page.server.ts` の `load` 関数）が自動で割り当てられます。
OGP の情報の設定は `` タグ内に記述します。SvelteKit では `
` という特殊なタグを使用することで `` タグ内に要素を挿入できます。OGP 画像は `` というタグで設定します。`property` の値にはさきほど作成した OGP 画像を生成するパスを指定します。ここでは相対パスではなく絶対パスで指定する必要があるところに注意しましょう。
最後にとある事情で空の `` タグで OGP 画像へのパスを指定します。これは、SvelteKit がプレレンダリング可能なページを各ページの `` タグをクローリングして見つけるためです。この仕様により、動的なルートにおいて Next.js の `getStaticPaths` のような関数を用意する必要はないのですが、`` タグの `property` 属性に指定したパスはクローリングしてくれないためハック的な方法で空の `` タグを置いています。
ここまでの作業が完了したら、OGP 画像を生成できるはずです。`npm run build` コマンドでアプリケーションをビルドして成果物に OGP 画像が含まれていることを確認できます。このブログでも同様のことを行って OGP 画像を生成しているので、参考にしてみてください。
https://github.com/azukiazusa1/sapper-blog-app
azukiazusa
}.png`}){kind=link}