Swagger UIを利用して、コンテンツのデータ構造を確認する

Swagger UIを利用すると、KurocoのAPIのレスポンスを確認することができます。 今回はSwagger UIを利用して、コンテンツ定義で設定した拡張項目のデータ構造を確認してみます。

1. コンテンツ定義を作成する

コンテンツ定義のページから右上の[グループを追加]をクリックします。 Image (fetched from Gyazo)

コンテンツ定義編集コンテンツ定義で利用できる拡張項目一覧を参考に、「画像」の拡張項目を設定してコンテンツ定義を追加します。

今回は下記設定にて項目追加します。

設定項目設定
親項目選択なし
注釈項目名画像
 注釈記入なし
設定項目画像
extensions::jpeg;jpg;png
並び順0

Image (fetched from Gyazo)

作成したコンテンツ定義のグループIDを控えておきます。(ここでは14) Image (fetched from Gyazo)

2. 記事を作成する

記事一覧のページから右上の[追加]をクリックします。 Image (fetched from Gyazo)

記事編集を参考に下記のように入力し、[追加する]をクリックして記事を作成します。 Image (fetched from Gyazo)

作成した記事のトピックスIDを控えておきます。(ここでは978) Image (fetched from Gyazo)

3. エンドポイントを作成する

APIのページで[Configure Endpoint]をクリックします。 Image (fetched from Gyazo)

今回は下記設定にてエンドポイントを作成します。

設定項目設定
パスtest
有効/無効有効
モデルカテゴリーコンテンツ
モデルTopics
オペレーションDetails
topics_group_id作成したコンテンツ定義のグループID(ここでは14)

Image (fetched from Gyazo) Image (fetched from Gyazo)

入力後、[Add]をクリックします。
Image (fetched from Gyazo)

4. Swagger UIで拡張項目の構造を確認する

APIのページで[Swagger UI]をクリックします。 Image (fetched from Gyazo)

先ほど作成したエンドポイントをクリックします。 Image (fetched from Gyazo)

[Try it out]をクリックします。 Image (fetched from Gyazo)

2で確認したトピックスIDを入力して、[Execute]をクリックします。 Image (fetched from Gyazo)

Responsesの項目のDetailsを確認します。 Image (fetched from Gyazo)

拡張項目のID=1に登録した「画像」の拡張項目については下記のデータ構造になっています。

"ext_col_01": {
  "id": "978_ext_01_0",
  "url": "https://**********.g.kuroco-img.app/v=1624343844/files/topics/978_ext_01_0.png",
  "desc": "会社ロゴ"
},
  • 画像のURL: details.ext_col_01.url
  • 画像の説明: details.ext_col_01.desc

同じ要領で他の拡張項目や、list形式のAPIエンドポイントのレスポンスなど、様々なデータを確認することができますので、フロントエンドの構築にご活用ください。

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