---
title: コメント機能に階層構造を追加する
description: アクティビティを利用したコメント機能で、階層構造を持ったコメントの追加とその取得方法について解説します。
---

## 概要
アクティビティを利用したコメント機能で、階層構造を持ったコメントの追加とその取得方法について解説します。  

### 学べること
以下の手順で階層構造を持ったコメントの追加と取得をします。
- [アクティビティ定義を設定する](#アクティビティ定義を設定する)
- [APIを設定する](#apiを設定する)
- [コンテンツに階層構造を持ったコメントを追加する](#コンテンツに階層構造を持ったコメントを追加する)
- [階層構造を持ったコメントを取り出す](#階層構造を持ったコメントを取り出す)

### 前提条件
このチュートリアルでは、コンテンツの作成とSwagger UI を利用した動作の確認までを行います。  

コメントを追加するコンテンツ(お知らせ)は作成済みであることを前提とするので、まだ作成していない場合は以下のチュートリアルを参考に作成ください。  
- [KurocoとNuxt.jsで、コンテンツ一覧ページを作成する](/ja/docs/tutorials/integrate-kuroco-with-nuxt/)

また、フロントエンドへの実装は[コンテンツにコメント機能を追加する](/ja/docs/tutorials/integrate-activity-comment/)を参考に対応をお願いします。


## アクティビティ定義を設定する
ダッシュボードから[アクティビティ定義]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/195c87d69c291c8ee15d85a5cbb112ff.png)

アクティビティ定義一覧が表示されるので[追加する]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/34c6c43ebb885fe2ce45f7cbb9b86f64.png)

以下のように設定します。  

|項目|設定|
|:--|:--|
|モジュール|コンテンツ|
|タイトル|階層付きコメント機能|
|ステータス|運用中|
|APIリクエスト制限|閲覧：閲覧可<br/>投稿：即公開|
|階層機能|有効|

:::tip
権限設定は動作確認のため閲覧可/即公開としていますが、実際の利用の際には制限をかけることをお勧めします。  
:::

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

設定ができたら[追加する]をクリックしてアクティビティ定義の追加は完了です。  
アクティビティ定義一覧の画面に遷移するので、追加したアクティビティ定義のIDをメモしておきます。  

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

## APIを設定する
### APIの作成
未承認ユーザーからの操作を許可するために、新しくAPIを作成します。  
Kuroco管理画面のAPIより「追加」をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/f2923f2c6c82454fb1b961104a3a2393.png)

API作成画面が表示されます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/9757238971ca5ead28886be1d43bf9c6.png)

下記入力し「追加する」をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/a55cac3c189bfcf26acf66fadfd15892.png)

|項目|設定内容|
| :--- | :--- |
|タイトル|Comment depth test|
|版|1.0|
|説明|Comment depth test|

### CORSの設定
次にCORSの設定をします。[CORSを設定する] をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/054d231d742d612294ce446115a4d3ff.png)

CORS_ALLOW_ORIGINSの [Add Origin] をクリックし、下記を追加します。  
- 管理画面URL

CORS_ALLOW_METHODSの [Add Method] をクリックし、下記を追加します。  
- GET
- POST
- OPTIONS

設定できたら[保存する]をクリックし、CORSの設定が完了です。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/be11972925e4580ab57ceb3fca238416.png)

### エンドポイントの作成
エンドポイントを作成します。今回は下記エンドポイントを作成します。

- comment/insert -> コメントの追加用
- comment/list -> コメントの取得用

Comment TestのAPIで「新しいエンドポイントの追加」をクリックし、それぞれ作成します。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/703987df651bd4e91e1f0635e3e772a8.png)

#### comment/insertエンドポイントの作成
comment/insertエンドポイントを下記設定にて作成します。  

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

|項目|設定内容|
| :--- | :--- |
|パス|comment/insert|
|カテゴリー|アクティビティ|
|モデル|Comment|
|オペレーション|insert|
|APIリクエスト制限|**None**|
|id|アクティビティID(35)|

設定完了後、「追加する」をクリックしcomment/insertエンドポイント完成です。 

#### comment/listエンドポイントの作成
comment/listエンドポイントを下記設定にて作成します。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d770fa7b79ec659549b48c1f77647c0e.png)
![Image from Gyazo](https://t.gyazo.com/teams/diverta/57cc8fa0eba8936c0e292342efde3e93.png)

|項目|設定内容|
| :--- | :--- |
|パス|comment/list|
|カテゴリー|アクティビティ|
|モデル|Comment|
|オペレーション|list|
|APIリクエスト制限|**None**|
|id|アクティビティID(35)|
|module_type|topics|

設定完了後、「追加する」をクリックしcomment/listエンドポイント完成です。

## コンテンツに階層構造を持ったコメントを追加する
次にSwagger UIを利用して、コンテンツに階層構造コメントを作成します。   

今回はTopics_ID=12のコンテンツに、以下のサンプルコメントを追加します。  

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

```chart title="サンプルコメント構造"
       1            9       12     13
     /  \          / \            /
    2    3        10 11          14
  / | \  | \
 4  5  6 7  8
```

まずは、1, 9, 12, 13のコメントを追加します。  
以下のデータをpostしていきます。
```json
{
  "module_id": 12,
  "name": "My Name",
  "mail": "email@example.com",
  "note": "CommentN"
}
```
![Image from Gyazo](https://t.gyazo.com/teams/diverta/27a987d5902fc5e527b21682545c36b3.gif)

次に、2,3のコメントを追加するため、親となるコメントのcomment_idを確認します。 

[アクティビティ]->[階層付きコメント機能]でアクティビティ一覧を開き、先ほど追加した[Comment1]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/f716ac6e6c411f26f047642e2f5c8d8f.png)

アクティビティの編集画面が開くので、URLからcomment_idを確認します。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/dc97e7e9d30451d666ed6483ca873416.png)

親になるcomment_idが確認出来たら、またSwagger UIでデータをPostします。  
```json
{
  "module_id": 12,
  "name": "My Name",
  "mail": "email@example.com",
  "note": "CommentN",
  "parent_comment_id": 1
}
```
![Image from Gyazo](https://t.gyazo.com/teams/diverta/17a7ccc0abb98bc21673c390961e4469.gif)

同様に繰り返し、全てのコメントを追加します。  

:::tip
短時間に同じIPアドレスから複数のコメントをPostすると`"短時間に何回もコメントできません。暫くお待ちください。"`のエラーがレスポンスされます。  
その場合は時間をおいて再開ください。
:::


## 階層構造を持ったコメントを取り出す
<!-- textlint-disable -->
<!-- 理由:カンマ区切りの数が多いって事ですが対応難しいので無視 -->
階層構造を持ったコメントを自在に取り出すには、`cnt`,`pageID`,`children_cnt`,`children_pageID`,`root`,`depth`のパラメータを組み合わせて利用します。  
<!-- textlint-enable -->

|項目|説明|
|:--|:--|
|cnt|第一層になるコメントの1ページ当たりの数を指定します。|
|pageID|第一層になるコメントの表示するページを指定します。|
|children_cnt|子コメントの1ページ当たりの数を指定します。|
|children_pageID|子コメントの表示するページを指定します。|
|root|大元になるコメントを指定します。|
|depth|何世代までの子コメントを取得するか指定します。|

### Swagger UIによる動作確認
例として、cnt=2, pageID=1, depth=2 の設定でコメントを取得してみます。  

対象のAPIから[Swagger UI]をクリックします。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/85a13201ca0da24619d74bd9ba903cc9.png)

Comment::list のエンドポイントのTry it Outをクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/0435d8115d5a379001d3edaffc53caa0.png)

以下のようにcnt=2, pageID=1, depth=2, module_id=110 を設定して、[Execute]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/68033448b77d05a85a3559b4b9008b8e.png)
![Image from Gyazo](https://t.gyazo.com/teams/diverta/811db08c4517ecc565fc89adcb946e82.png)
![Image from Gyazo](https://t.gyazo.com/teams/diverta/980f18108809cbae1fcae63790e96a0b.png)
![Image from Gyazo](https://t.gyazo.com/teams/diverta/733fcf5763ce869a5a76ac7912d5d537.png)

コメントのレスポンスが得られるので内容を確認します。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/a567b8b11974e6226a8ebcfb4d5aca6a.png)

以下のようにレスポンスが得られていることが分かりました。  

```json
"list": [
    {
      ・・・,
      "note": "Comment1",
      ・・・,
      "children": [
        {
          ・・・,
          "note": "Comment2",
          ・・・,
        },
        {
          ・・・,
          "note": "Comment3",
          ・・・,
        }
      ]
    },
    {
      ・・・,
      "note": "Comment9",
      ・・・,
      "children": [
        {
          ・・・,
          "note": "Comment10",
          ・・・,
        },
        {
          ・・・,
          "note": "Comment11",
          ・・・,
        }
      ]
    }
]
```

図で見ると以下のようになります。  
```chart title="cnt=2, pageID=1, and depth=2"
      1            9 
     / \          / \ 
    2   3        10 11 
```

コメントの階層機能追加と、Swagger UIでの動作確認は以上となります。  
こちらの動作をフロントエンドで実装することで、様々なタイプのコメント機能を実装できますのでぜひお試しください。

### パラメータと取得できるコメント構造の例
パラメータの設定と、取得できるコメント構造の例をいかに紹介しますので、設定の際の参考にしてください。  

```chart title="All data"
       1            9       12     13
     /  \          / \            /
    2    3        10 11          14
  / | \  | \
 4  5  6 7  8
```

```chart title="cnt=2 and pageID=1"
       1            9 
     /  \          / \ 
    2    3        10 11 
  / | \  | \
 4  5  6 7  8
```

```chart title="cnt=2 and pageID=2"
       12     13
             /
            14
```

```chart title="cnt=2, pageID=1, and depth=2"
      1            9 
     / \          / \ 
    2   3        10 11 
```

```chart title="cnt=2, pageID=1, and root=2"
    2   
  / | \  
 4  5  6 
```

```chart title="cnt=2, pageID=1, children_cnt=1, children_pageID=1"
      1       9 
     /       /   
    2       10 
   / 
  4
```

```chart title="cnt=2, pageID=1, children_cnt=1, children_pageID=2"
     1       9 
      \       \ 
       3      11 
        \
         8
```

## 関連ドキュメント
- [コンテンツにコメント機能を追加する](/ja/docs/tutorials/integrate-activity-comment/)
