---
title: Swagger UIを利用して、コンテンツのデータ構造を確認する
category: API
weight: 1
---

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

### 1. コンテンツ定義を作成する 
[コンテンツ定義](/ja/docs/management/content-structure-topics-group/)のページから右上の[追加]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/7bc3399fac90126f8e7c3ae477ed3dca.png)

[コンテンツ定義編集](/ja/docs/management/content-structure-topics-group/)や[コンテンツ定義で利用できる拡張項目一覧](/ja/docs/reference/list-of-extra-column-available-on-content/)を参考に、「画像」の拡張項目を設定してコンテンツ定義を追加します。

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

| 設定項目 | 設定           |             |
| :------- | :------------- | :---------- |
| 項目名 | 画像 |
| 項目設定 | 画像（KurocoFilesにアップロード） |
| 拡張子 | jpeg、jpg、png |  |

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

作成したコンテンツ定義のグループIDを控えておきます。(ここでは`7`)
![Image from Gyazo](https://t.gyazo.com/teams/diverta/8a54874fc8f448f0b039a691b8f1f7ef.png)

### 2. 記事を作成する
[記事一覧](/ja/docs/management/content-structure-topics/)のページから右上の[追加]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/3780203e3397d238f77f5c61895f936d.png)

[記事編集](/ja/docs/management/content-structure-topics/)を参考に下記のように入力し、[追加する]をクリックして記事を作成します。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/4b877fd5a077b051292c2bdee5698350.png)

作成した記事のトピックスIDを控えておきます。(ここでは`3`)  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/e0e6a55349eb14485ca2b09a7d181f9b.png)

### 3. エンドポイントを作成する
APIのページで[新しいエンドポイントの追加]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/f74bf45953dabfbd888e0385842ff4b9.png)

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

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

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

入力後、[追加する]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/a7c9a61ef4438ac9fde4f9f67b9def73.png)

### 4. Swagger UIで拡張項目の構造を確認する
APIのページで[Swagger UI]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/6db88e33453e407b66a18d418a3f092f.png)

先ほど作成したエンドポイントをクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/86f8e4f3eff41ccd3e0ceb665b52ab5d.png)  

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

2で確認したトピックスIDを入力して、[Execute]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/cd306ec697163fb046334b6254dfdafb.png)

Responsesの項目のDetailsを確認します。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/622853db60e957d130b98c47f6e90b4e.png)

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

```
"ext_1": {
  "id": "3_ext_01_0",
  "url": "https://kuroco-*****.g.kuroco-img.app/v=1659513618/files/topics/3_ext_1_0.png",
  "desc": "Kurocoロゴ",
  "url_org": "https://kuroco-*****.g.kuroco-img.app/files/topics/3_ext_1_0.png"
},
```
- 画像のURL: details.ext_1.url  
- 画像の説明: details.ext_1.desc  


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