> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# チュートリアル: Document Generator

> 実際の Twenty アプリを構築し、CRM データからパーソナライズされたドキュメントを生成しましょう。

このチュートリアルでは、再利用可能なテンプレートを、既に CRM にあるデータを使ってパーソナライズされたドキュメントに変換するアプリ **Document Generator** を作成します。

一度テンプレートを作成し、`{{placeholders}}` を記述しておけば、コマンドメニュー、AI エージェント、またはワークフローからワンクリックで、任意の Person または Company 用の入力済みドキュメントを生成できます。

<Frame caption="特定の人物向けに生成され、印刷可能なページとして開かれる 1 つのテンプレート。">
  <img src="https://mintcdn.com/twenty/sqJBeTZq-W-RDBPU/images/docs/developers/extends/apps/document-generator/07-rendered-document.png?fit=max&auto=format&n=sqJBeTZq-W-RDBPU&q=85&s=8b99ef8465512b51a2f7233518a869d2" alt="生成された営業提案書" width="1600" height="1178" data-path="images/docs/developers/extends/apps/document-generator/07-rendered-document.png" />
</Frame>

## 学べること

各章で 1 つずつ機能を追加していきます。 最後には、SDK のほとんどの部分に触れ終えていることになります。

| 章                                                                                             | 機能                                                              | リファレンス                                                             |
| --------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------------ |
| [1. データモデル](/l/ja/developers/extend/apps/tutorials/document-generator/data-model)             | オブジェクト、フィールド、およびリレーション                                          | [Data](/l/ja/developers/extend/apps/data/overview)                 |
| [2. ドキュメント生成](/l/ja/developers/extend/apps/tutorials/document-generator/generating-documents) | Markdown テンプレートを埋めて、整えられた PDF を添付するロジック関数（AI ツール + ワークフローアクション） | [ロジック関数](/l/ja/developers/extend/apps/logic/logic-functions)       |
| [3. HTTP ルート](/l/ja/developers/extend/apps/tutorials/document-generator/http-routes)          | ルートから JSON と共有可能な HTML ページを配信する                                 | [ロジック関数](/l/ja/developers/extend/apps/logic/logic-functions)       |
| [4. UI 構築](/l/ja/developers/extend/apps/tutorials/document-generator/building-the-ui)         | ビュー、ナビゲーション、コマンドメニュー、ドキュメントのプレビューとテンプレート編集用のフロントエンドコンポーネント      | [レイアウト](/l/ja/developers/extend/apps/layout/overview)              |
| [5. AI エージェント](/l/ja/developers/extend/apps/tutorials/document-generator/ai-agent)            | エージェント + スキル                                                    | [スキルとエージェント](/l/ja/developers/extend/apps/logic/skills-and-agents) |
| [6. 公開](/l/ja/developers/extend/apps/tutorials/document-generator/publishing)                 | マーケットプレイスに公開する                                                  | [公開](/l/ja/developers/extend/apps/operations/publishing)           |

## 前提条件

[クイックスタート](/l/ja/developers/extend/apps/getting-started/quick-start)を完了している必要があります。
ローカルの Twenty サーバーがポート `2020` で動作しており、CLI がそのサーバーに対して認証済みになっている状態です。

まだであれば、今すぐスキャフォールドして起動してください:

```bash filename="Terminal" theme={null}
npx create-twenty-app@latest document-generator
cd document-generator
yarn twenty dev
```

<Note>
  完成版のコードを読みたいですか？ 完成したアプリは
  [`packages/twenty-apps/examples/document-generator`](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/examples/document-generator) にあります。
  以下のすべてのスニペットは、そこからコピーしたものです。
</Note>

## アプリ全体の構成

<Frame>
  <img src="https://mintcdn.com/twenty/sqJBeTZq-W-RDBPU/images/docs/developers/extends/apps/document-generator/how-it-fits.svg?fit=max&auto=format&n=sqJBeTZq-W-RDBPU&q=85&s=5a4ecd9077a5d8a07d46ae5c1dee1439" alt="プレースホルダー付きテンプレートが、コマンドメニュー、AI エージェント、ワークフロー、または共有可能なリンクからのトリガーによって、PDF 付きの整えられたドキュメントに生成されます" width="900" height="380" data-path="images/docs/developers/extends/apps/document-generator/how-it-fits.svg" />
</Frame>

リッチテキストエディタで `{{placeholders}}` を使って **テンプレート** を一度作成します。 テンプレートと CRM レコードを選ぶと、プレースホルダーが埋められ、整えられた
**ドキュメント**（PDF ファイル付き）が保存されます。 その他のもの — コマンドメニュー、AI エージェント、
ワークフローステップ、共有可能なリンク — はすべて、その 1 つのジェネレーターをトリガーする別々の手段にすぎません。

## このループを動かし続ける

チュートリアル全体を通して、ターミナルで `yarn twenty dev` を実行したままにしておいてください。 `src/` 配下のファイルを追加または編集するたびに、数秒以内にサーバーへ再同期されるため、ビルドしながら各機能が UI に現れていく様子を確認できます。

<Card title="構築を開始する →" icon="database" href="/l/ja/developers/extend/apps/tutorials/document-generator/data-model">
  第 1 章: ドキュメントとテンプレートをモデリングする。
</Card>