オリジナル処理を利用して、APIエンドポイントに独自のスタブを設定する

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

スタブを利用する理由

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

  • Kurocoにまだ十分にデータを入れていない
  • 複雑なオリジナル処理の実装が必要だが、まだ未実装である

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

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

事前準備

今回はオリジナル処理と紐づいたAPIエンドポイントを作成するで作成した、下記オリジナル処理とエンドポイントを利用します。

項目内容
オリジナル処理PlainCustomFunction
エンドポイント/rcms-api/1/plain-custom-endpoint

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

シンプルな文字列を返すオリジナル処理を実装する

オリジナル処理の内容

オリジナル処理一覧画面より、「PlainCustomFunction」をクリックします。

fetched from Gyazo

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

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

fetched from Gyazo

SwaggerUIにて動作確認

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

fetched from Gyazo

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

fetched from Gyazo

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

fetched from Gyazo

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

JSONを返すオリジナル処理を実装する

オリジナル処理の内容

オリジナル処理一覧画面より、「PlainCustomFunction」をクリックします。

fetched from Gyazo

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

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

fetched from Gyazo

SwaggerUIにて動作確認

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

fetched from Gyazo

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

fetched from Gyazo

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

fetched from Gyazo

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

条件付きでJSONを返すオリジナル処理を実装する

オリジナル処理の内容

オリジナル処理一覧画面より、「PlainCustomFunction」をクリックします。

fetched from Gyazo

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

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

fetched from Gyazo

SwaggerUIにて動作確認

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

fetched from Gyazo

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

fetched from Gyazo

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

fetched from Gyazo

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

GETクエリの内容を判定して対応したJSONを返すオリジナル処理を実装する

オリジナル処理の内容

オリジナル処理一覧画面より、「PlainCustomFunction」をクリックします。

fetched from Gyazo

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

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

fetched from Gyazo

SwaggerUIの確認

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

fetched from Gyazo

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

fetched from Gyazo

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

fetched from Gyazo

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

fetched from Gyazo

curlにて動作確認

このオリジナル処理では、GETクエリのstatusに指定された値で処理を分岐しています。

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

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

fetched from Gyazo

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

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

fetched from Gyazo

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

お探しのページは見つかりましたか?解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。