--- 
title: WYSIWYGエディターのプレースホルダー機能を実装する
description: このチュートリアルでは、WYSIWYGプレースホルダー機能、API、およびカスタム処理を使用して、複数のコンテンツにまたがる共通のテキストを設定する方法を説明します。
---

## 概要
WYSIWYGプレースホルダーの機能は柔軟でカスタマイズ可能なコンテンツを作成するための便利なツールです。これを使用することで、予め設定した文書を簡単にコンテンツへ登録できます。  
また、複数のコンテンツにまたがる共通のテキスト設定も可能です。

このチュートリアルでは、WYSIWYGプレースホルダー機能、API、およびカスタム処理を使用して、複数のコンテンツにまたがる共通のテキストを設定する方法を説明します。  
2つのプレースホルダー、`my_name`と`my_address`を使用し、これらのプレースホルダーが、APIリクエスト時に予設定したテキストへ動的に置換されます。  

### 学べること
以下の手順でWYSIWYGプレースホルダーの機能を設定する方法を学びます。

- [コンテンツ定義を準備する](#コンテンツ定義を準備する)
- [コンテンツを作成する](#コンテンツを作成する)
- [カスタム処理を作成する](#カスタム処理を作成する)
- [APIエンドポイントを作成する](#apiエンドポイントを作成する)
- [結果を確認する](#結果を確認する)

## コンテンツ定義を準備する
[コンテンツ定義一覧](/ja/docs/management/content-structure-topics-group/)の画面から[追加]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/ea26ddc511181a0ab07f4f4813feb686.png)

以下の内容で設定をします。  

|項目||設定|
|:--|:--|:--|
|全般|名前|My Content Structure|
|項目設定|項目設定|項目名：WYSIWYG<br/>項目設定：WYSIWYG<br/>WYSIWYGプレースホルダー：my_name,my_address|

:::tip
プレースホルダーはカンマ区切りで入力し、カンマの後ろにスペースは入れないことに注意してください。
:::

![Image from Gyazo](https://t.gyazo.com/teams/diverta/cc7e53239131cbf974ffbaa5edeafeae.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/5de5d7511acb282b622a195b0e42117b.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/36f808196c076fcc8f85ba1e4a7e90ec.png)

設定ができたら[追加する]をクリックしてコンテンツ定義を追加します。  

## コンテンツを作成する
前のステップで作成したコンテンツ定義に2つのコンテンツを作成し、プレースホルダーをコンテンツに入れます。

コンテンツ一覧の画面から[追加]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/cc8f424f26265344a22f4f807d0ab1d8.png)

以下を入力し、[追加する]をクリックします。

|項目|設定|
|:--|:--|
|タイトル|My First Content|
|WYSIWYG|`My name`と`My Address`を利用した任意の文章。<br/>プレースホルダーを設定すると、WYSIWYGエディターの機能に`Placeholder`が追加されるのでこちらからプレースホルダーを設定してください。|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d84f1589e0b9bf2944b0c7f9743a759e.png)

以下を入力し、[追加する]をクリックします。

|項目|設定|
|:--|:--|
|タイトル|My Second Content|
|WYSIWYG|`My name`と`My Address`を利用した任意の文章。<br/>プレースホルダーを設定すると、WYSIWYGエディターの機能に`Placeholder`が追加されるのでこちらからプレースホルダーを設定してください。|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/804bcff214d3229e83a837a1bc31fca8.png)

## カスタム処理を作成する
次に、`my_name`と`my_address`プレースホルダーを設定したテキストに置換するカスタム処理を作成します。

[オペレーション] -> [カスタム処理]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/f1cb672eab47b968ed24ca1e961223a2.png)

[追加]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/a7ced588e888224446baaccbb70d4557.png)

以下のように入力します。

|項目|設定|
|:--|:--|
|タイトル|Replase placeholders in content|
|識別子|replase_placeholders_in_content|
|処理|以下のコード|

```smarty
{* For every contents in the list *}
{foreach from=$json.list item='row' key='key'} 
    {* Replace placeholder my_name with "Diverta" *}
    {assign var=json.list.$key.content 
            value=$json.list.$key.content|replace:"<span class=\"placeholder\">`$smarty.ldelim`my_name`$smarty.rdelim`</span>":'Diverta'}
    {* Replace placeholder my_address with the real address value *}
    {assign var=json.list.$key.content 
            value=$json.list.$key.content|replace:"<span class=\"placeholder\">`$smarty.ldelim`my_address`$smarty.rdelim`</span>":'Central Plaza 6F 1-1 Kaguragashi Shinjuku-ku, Tokyo, Japan'}
{/foreach}

{$json|@json_encode:$smarty.const.JSON_UNESCAPED_UNICODE}
```

![Image from Gyazo](https://t.gyazo.com/teams/diverta/ca76781a89e4c87c93901e7c08444b3f.jpg)

入力ができたら[追加する]をクリックしてカスタム処理を追加します。

## APIエンドポイントを作成する
Contentカテゴリ、モデルトピック、オペレーションリストを持つ1つのAPIエンドポイントを作成します。前のステップで作成したコンテンツ定義のIDを「topics_group_id」パラメータに設定します。

### エンドポイントを追加する
エンドポイント一覧のページから、[新しいエンドポイントの追加]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/21a2261325607482db947c28667d0057.png)

以下のエンドポイントを作成します。

|項目|設定内容|
| :--- | :--- |
|パス|my-content|
|カテゴリー|コンテンツ|
|モデル|Topics|
|オペレーション|list|
|topics_group_id|作成したコンテンツ定義のID|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/e536c391d49a751f2149424fbbee8e6c.png)

設定ができたら[追加する]をクリックしてエンドポイントを追加します。  

### エンドポイントに後処理を追加する
前のステップで作成したカスタム処理をエンドポイントの後処理に設定します。  
エンドポイント一覧のページから[後処理]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/b3a8af6823af91069d7430d6c6bdb4e8.png)

APIのレスポンスを簡素化するために、「出力許可リスト」ポストプロセスも追加し、以下のように設定します。  

|項目|設定内容|
| :--- | :--- |
|出力許可リスト|`list.subject`<br/>`list.content`|
|カスタム処理|Replase placeholders in content|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d6ce62cc17f4dd03b9386574ce8296b1.png)

設定ができたら[保存する]をクリックして後処理の設定を保存します。  

## 結果を確認する
SwaggerUIでAPIエンドポイントを取得し、結果を確認します。

エンドポイント一覧のページから[SwaggerUI]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/1395a3802d9adeedb916c8b51816a444.png)

作成したエンドポイントの[Try it out]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/a509f70678e00bee171e8620f9f056c8.png)

[Execute]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/a0021b5a2b3dffe5f0863dba380cdaaf.png)

以下のように、プレースホルダーを設定した部分が、カスタム処理で設定したテキストに置き換わっていることが分かります。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/1c435b61daa8b4626a315ac14ddedc49.jpg)

## 関連ドキュメント
- [Smartyプラグイン](/ja/docs/reference/smarty-plugin/)
- [後処理](/ja/docs/reference/post-processing/)