# テンプレート

### 定義

Jinja2のPythonテンプレート言語を使って、データ変換やテキスト処理などを柔軟に行うことができます。

### Jinjaとは？

> Jinjaは、高速で表現力豊かで拡張可能なテンプレートエンジンです。
>
> Jinja は、速く、表現力があり、拡張可能なテンプレートエンジンです。

—— <https://jinja.palletsprojects.com/en/3.1.x/>

### シーン

テンプレートノードを使うことで、強力なPythonテンプレート言語であるJinja2を用いて、ワークフロー内で軽量かつ柔軟なデータ変換が可能になります。これは、テキスト処理やJSON変換などのシナリオに適しています。例えば、前のステップからの変数を柔軟にフォーマットして結合し、単一のテキスト出力を作成することができます。これは、複数のデータソースの情報を特定のフォーマットにまとめ、後続のステップの要件を満たすのに非常に適しています。

\*\*例1：\*\*複数の入力（記事のタイトル、紹介、内容）を一つの完全なテキストに結合する

<figure><img src="https://3244742310-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBl3K6n12AeCkG3icHwfh%2Fuploads%2Fgit-blob-168596062d0a6499e43dd9fe2226e11db178b6df%2Fjp-template.png?alt=media" alt="" width="375"><figcaption><p>テキストの結合</p></figcaption></figure>

**例2：** ナレッジリトリーバルノードで取得した情報およびその関連メタデータを、構造化されたMarkdown形式にまとめる

```
{% for item in chunks %}
### Chunk {{ loop.index }}. 
### Similarity: {{ item.metadata.score | default('N/A') }}

#### {{ item.title }}

##### Content
{{ item.content | replace('\n', '\n\n') }}

---
{% endfor %}
```

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCdDIVDY6AtAz028MFT4d%2Fuploads%2FOtGkLaz38v0FSzSBNuV2%2Fimage.png?alt=media&#x26;token=122965f8-9d70-4e57-b0e2-1fdaf1320275" alt=""><figcaption><p>ナレッジリトリーバルノードの出力をMarkdownに変換</p></figcaption></figure>

Jinjaの[公式ドキュメント](https://jinja.palletsprojects.com/en/3.1.x/templates/)を参考にして、さまざまなタスクを実行するためのより複雑なテンプレートを作成することができます。

**例3：** HTMLフォームのレンダリングをサポート

```html
<form data-format="json"> // Default to text
  <label for="username">Username:</label>
  <input type="text" name="username" />
  <label for="password">Password:</label>
  <input type="password" name="password" />
  <label for="content">Content:</label>
  <textarea name="content"></textarea>
  <label for="date">Date:</label>
  <input type="date" name="date" />
  <label for="time">Time:</label>
  <input type="time" name="time" />
  <label for="datetime">Datetime:</label>
  <input type="datetime" name="datetime" />
  <label for="select">Select:</label>
  <input type="select" name="select" data-options='["hello","world"]'/>
  <input type="checkbox" name="check" data-tip="By checking this means you agreed"/>
  <button data-size="small" data-variant="primary">Login</button>
</form>
```

<figure><img src="https://3244742310-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBl3K6n12AeCkG3icHwfh%2Fuploads%2Fgit-blob-62312bcb46fe2445efa270fd0c0cb8e904aadecb%2Fform_002.jpg?alt=media" alt="" width="375"><figcaption></figcaption></figure>