# Fumadocs (Framework Mode, TanStack Start): Takumi
URL: /ja/docs/tanstack-start/integrations/og/takumi
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/(framework)/[framework]/integrations/og/takumi.ja.mdx

Takumi を統合して、フレームワークに依存しない高速なメタデータ画像生成を実現します。

## インストール [#installation]

```npm
npm install takumi-js
```

## メタデータ画像 [#metadata-image]

ページの画像 URL を返す関数を追加し、ドキュメントページのメタデータからその画像を参照します。

```ts tab="src/lib/shared.ts"
import { createGetUrl } from 'fumadocs-core/source';

// [!code ++:7]
const getImageUrl = createGetUrl('/og/docs');

export function getPageImageUrl(page: { slugs: string[]; locale?: string }) {
  const segments = [...page.slugs, 'image.webp'];

  return { segments, url: getImageUrl(segments, page.locale) };
}
```

```tsx tab="src/routes/docs/$.tsx"
// [!code ++]
import { getPageImageUrl } from '@/lib/shared';

export const Route = createFileRoute('/docs/$')({
  // [!code ++:3]
  head: ({ loaderData }) => ({
    meta: loaderData ? [{ property: 'og:image', content: loaderData.imageUrl }] : [],
  }),
});

// サーバー関数内の任意の場所で
return {
  // [!code ++]
  imageUrl: getPageImageUrl(page).url,
};
```

> `/docs/my-page` の画像は `/og/docs/my-page/image.webp` に配置されます。WebP 画像は PNG 画像よりもファイルサイズが小さいためです。PNG を生成したい場合は、代わりに `image.png` と `format: 'png'` を使用してください。

次に、画像を生成するルートを作成します。

```ts tab="src/routes/og/docs/$.ts"
import { createFileRoute } from '@tanstack/react-router';
import { generateOGImage } from 'fumadocs-ui/og/takumi';
import { source } from '@/lib/source';

export const Route = createFileRoute('/og/docs/$')({
  server: {
    handlers: {
      GET: ({ params }) => {
        const slugs = (params._splat?.split('/') ?? []).filter((v) => v.length > 0).slice(0, -1);
        const page = source.getPage(slugs);
        if (!page) return new Response(undefined, { status: 404 });

        return generateOGImage({
          title: page.data.title,
          description: page.data.description,
          site: 'My App',
          format: 'webp',
        });
      },
    },
  },
});
```

```ts tab="vite.config.ts"
// SPA モードの場合のみ: TanStack Start はレスポンスをテキストとしてプリレンダリングするため、画像が破損します
import { defineConfig } from 'vite';
import { nitro } from 'nitro/vite';
// [!code ++:3]
import { glob } from 'node:fs/promises';
import { getSlugs } from 'fumadocs-core/source';
import { getPageImageUrl } from './src/lib/shared';

// [!code ++:4]
const imageRoutes: string[] = [];
for await (const entry of glob('**/*.{md,mdx}', { cwd: 'content/docs' })) {
  imageRoutes.push(getPageImageUrl({ slugs: getSlugs(entry) }).url);
}

export default defineConfig({
  plugins: [
    // その他のプラグイン...
    nitro({
      // [!code ++]
      prerender: { routes: imageRoutes },
    }),
  ],
});
```

> Takumi には全ウェイト (100-900) に対応した [`Geist`](https://vercel.com/font) フォントと `Geist Mono` フォントが同梱されているため、フォントの設定は不要です。

高度な使い方については、[Takumi のドキュメント](https://takumi.kane.tw/docs)を参照してください。

### その他のテンプレート [#other-templates]

利用できるテンプレートについては、[Takumi Templates](https://takumi.kane.tw/docs/templates) を参照してください。