カスタム処理を利用して、APIエンドポイントに独自のスタブを設定する

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

スタブを利用する理由

下記のような場合、スタブを設定することで開発をスムーズに進めることができます。

• Kurocoにまだ十分にデータを入れていない
• 複雑なカスタム処理の実装が必要だが、まだ未実装である

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

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

事前準備

今回はカスタム処理と紐づいたAPIエンドポイントを作成するで作成した、下記カスタム処理とエンドポイントを利用します。

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

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

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

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

カスタム処理の内容

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

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

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

SwaggerUIにて動作確認

SwaggerUI画面より、[plain-custom-endpoint]をクリックします。

[Try it out]をクリックします。

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

「Response body」にシンプルな文字列がレスポンスされます。

JSONを返すカスタム処理を実装する

カスタム処理の内容

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

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

{* JSONを返します。 *}
{capture name=data}
{literal}
    {
        "key1": "val1"
    }
{/literal}
{/capture}
{assign var=data value=$smarty.capture.data|@json_decode}

SwaggerUIにて動作確認

SwaggerUI画面より、[plain-custom-endpoint]をクリックします。

[Try it out]をクリックします。

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

「Response body」にJSONがレスポンスされます。

条件付きでJSONを返すカスタム処理を実装する

カスタム処理の内容

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

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

{* 条件を設定します。 *}
{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}

SwaggerUIにて動作確認

SwaggerUI画面より、[plain-custom-endpoint]をクリックします。

[Try it out]をクリックします。

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

「Response body」に条件を判定した結果のJSONがレスポンスされます。

GETクエリの内容を判定して対応したJSONを返すカスタム処理を実装する

カスタム処理の内容

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

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

{* 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}

SwaggerUIの確認

SwaggerUI画面より、[plain-custom-endpoint]をクリックします。

[Try it out]をクリックします。

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

「Response body」には、statusが存在しないリクエストの場合、ANYがレスポンスされることを確認できます。

curlにて動作確認

このカスタム処理では、GETクエリのstatusに指定された値で処理を分岐しています。

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

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

curl -X 'GET' \
'https://[サイトキー].g.kuroco.app/rcms-api/1/plain-custom-endpoint' \
-H 'accept: */*'

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

ヒント

statusをSwaggerUI上で指定できない理由は、FAQ -> SwaggerUIで確認できないリクエストがあります。確認する方法はありますか？を参照してください。