---
title: カスタム処理を利用して、APIエンドポイントに独自のスタブを設定する
description: カスタム処理を使用して、APIエンドポイントに独自のスタブを設定する方法を解説します。この機能を利用すると、実際のカスタム処理を作成する前に、フロントエンド側からの動作確認が可能になります。
---

カスタム処理を使用して、APIエンドポイントに独自のスタブを設定する方法を解説します。  
スタブを設定すると、実際のカスタム処理を作成する前に、フロントエンド側からの動作確認が可能になります。

## スタブを利用する理由

下記のような場合、スタブを設定することで開発をスムーズに進めることができます。
- Kurocoにまだ十分にデータを入れていない
- 複雑なカスタム処理の実装が必要だが、まだ未実装である

本来であれば、バックエンドの実装完了後にフロントエンドの実装をする流れになります。
そのため、バックエンドの実装が完了するまでフロントエンド側はダミーのデータを準備してテストしなくてはいけませんでした。
また、バックエンド実装後にダミーデータの内容を修正する必要もあります。

しかしながら、スタブを利用することで想定のエンドポイントへリクエストをすることが可能となります。
ダミーデータの準備や、バックエンド実装後の修正が不要になり、開発効率が上がります。

## 事前準備

今回は[カスタム処理と紐づいたAPIエンドポイントを作成する](/ja/docs/tutorials/creating-a-custom-function-endpoint/)で作成した、下記カスタム処理とエンドポイントを利用します。

| 項目 | 内容 |
| :--- | :--- | 
|カスタム処理 | PlainCustomFunction |
|エンドポイント | /rcms-api/1/plain-custom-endpoint |

それでは、以下パターンにてカスタム処理にスタブを設定する方法を説明します。カスタム処理をそれぞれのパターンで修正して確認します。

- [シンプルな文字列を返すカスタム処理を実装する](#シンプルな文字列を返すカスタム処理を実装する)
- [JSONを返すカスタム処理を実装する](#jsonを返すカスタム処理を実装する)
- [条件付きでJSONを返すカスタム処理を実装する](#条件付きでjsonを返すカスタム処理を実装する)
- [GETクエリの内容を判定して対応したJSONを返すカスタム処理を実装する](#getクエリの内容を判定して対応したjsonを返すカスタム処理を実装する)

## シンプルな文字列を返すカスタム処理を実装する

### カスタム処理の内容
カスタム処理一覧画面より、「PlainCustomFunction」をクリックします。

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

カスタム処理の実行内容フィールドに下記を記載し、[更新する]をクリックします。

```php
{* シンプルなダミー文字列を返します。 *}
{capture name=data}
{literal}
    response text
{/literal}
{/capture}
{assign var=data value=$smarty.capture.data}
```

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

### SwaggerUIにて動作確認
SwaggerUI画面より、[plain-custom-endpoint]をクリックします。

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/408821848b40886fcbfd92b634733ac7.png)
[Try it out]をクリックします。

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/ed40a21db9b785e925e7bdfb9a3fe25f.png)
[Execute]をクリックします。

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/5601074a29c44c0cc14df57304ac1a71.png)
「Response body」にシンプルな文字列がレスポンスされます。  
![fetched from Gyazo](https://t.gyazo.com/teams/diverta/3e41849347bfe3930ab29206a2fb603d.png)
## JSONを返すカスタム処理を実装する

### カスタム処理の内容
カスタム処理一覧画面より、「PlainCustomFunction」をクリックします。

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

カスタム処理の実行内容フィールドに下記を記載し、[更新する]をクリックします。

```php
{* JSONを返します。 *}
{capture name=data}
{literal}
    {
        "key1": "val1"
    }
{/literal}
{/capture}
{assign var=data value=$smarty.capture.data|@json_decode}
```
![Image from Gyazo](https://t.gyazo.com/teams/diverta/887768d2a4d47f08046d14897562e8fa.png)

### SwaggerUIにて動作確認
SwaggerUI画面より、[plain-custom-endpoint]をクリックします。

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/408821848b40886fcbfd92b634733ac7.png)
[Try it out]をクリックします。

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/ed40a21db9b785e925e7bdfb9a3fe25f.png)
[Execute]をクリックします。

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/5601074a29c44c0cc14df57304ac1a71.png)
「Response body」にJSONがレスポンスされます。  
![fetched from Gyazo](https://t.gyazo.com/teams/diverta/8c99c3d599255449d3b3943c02b8684a.png)
## 条件付きでJSONを返すカスタム処理を実装する

### カスタム処理の内容
カスタム処理一覧画面より、「PlainCustomFunction」をクリックします。

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

カスタム処理の実行内容フィールドに下記を記載し、[更新する]をクリックします。

```php
{* 条件を設定します。 *}
{assign var=condition value=false}

{* 条件により内容を変更しつつ返します。 *}
{capture name=data}
{if $condition}
    {literal}
        {
            "condition_value": true
        }
    {/literal}
{else}
    {literal}
        {
            "condition_value": false
        }
    {/literal}
{/if}
{/capture}

{assign var=data value=$smarty.capture.data|@json_decode}
```

![Image from Gyazo](https://t.gyazo.com/teams/diverta/f9d7ca55220f423bc852735e282e3422.jpg)
### SwaggerUIにて動作確認
SwaggerUI画面より、[plain-custom-endpoint]をクリックします。

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/408821848b40886fcbfd92b634733ac7.png)
[Try it out]をクリックします。

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/ed40a21db9b785e925e7bdfb9a3fe25f.png)
[Execute]をクリックします。

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/5601074a29c44c0cc14df57304ac1a71.png)
「Response body」に条件を判定した結果のJSONがレスポンスされます。  
![fetched from Gyazo](https://t.gyazo.com/teams/diverta/44ebaa40d27315e658608db4ad7be3a8.png)
## GETクエリの内容を判定して対応したJSONを返すカスタム処理を実装する

### カスタム処理の内容

カスタム処理一覧画面より、「PlainCustomFunction」をクリックします。

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

カスタム処理の実行内容フィールドに下記を記載し、[更新する]をクリックします。

```php
{* GETパラメータにより内容を変更しつつ返します。 *}
{capture name=data}

{if $smarty.get.status == 'new'}
    {literal}
        {
            "requested_status": "NEW"
        }
    {/literal}
{elseif $smarty.get.status == 'old'}
    {literal}
        {
            "requested_status": "OLD"
        }
    {/literal}
{else}
    {literal}
        {
            "requested_status": "ANY"
        }
    {/literal}
{/if}
{/capture}

{assign var=data value=$smarty.capture.data|@json_decode}
```

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d5efc7d664efbb07fff1ede2eebae567.png)
### SwaggerUIの確認
SwaggerUI画面より、[plain-custom-endpoint]をクリックします。

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/408821848b40886fcbfd92b634733ac7.png)
[Try it out]をクリックします。

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/ed40a21db9b785e925e7bdfb9a3fe25f.png)
[Execute]をクリックします。

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/5601074a29c44c0cc14df57304ac1a71.png)
「Response body」には、`status`が存在しないリクエストの場合、`ANY`がレスポンスされることを確認できます。

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/8f15ec125b9345903ba1454f4f9e5090.png)
### curlにて動作確認
このカスタム処理では、GETクエリの`status`に指定された値で処理を分岐しています。  

紐づいたAPIエンドポイントと合わせると、`/rcms-api/1/plain-custom-endpoint?status=...`という形のURLへGETリクエストが送信される想定です。
しかしながら、このリクエストはSwaggerUI上からは実行できないため、curlで動作確認をします。

SwaggerUIの「Curl」に記載されている内容をコピーします。

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/4d14b4b3060fa78a86f090c156ed5b5a.png)
```
curl -X 'GET' \
'https://[サイトキー].g.kuroco.app/rcms-api/1/plain-custom-endpoint' \
-H 'accept: */*'
```

ターミナルを開き、コピーしたURLを貼り付け確認します。
その際に、URL末尾に`?クエリキー名=値`を指定するとGETクエリを付加できます。

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/b27b4ad1dbfbb940da1b9630e5e7c83d.png)
:::tip
`status`をSwaggerUI上で指定できない理由は、[FAQ -> SwaggerUIで確認できないリクエストがあります。確認する方法はありますか？](/ja/docs/faq/how-do-i-verify-requests-that-cannot-be-verified-with-swagger-ui/)を参照してください。
:::