コメント機能に階層構造を追加する

概要

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

学べること

以下の手順で階層構造を持ったコメントの追加と取得をします。

前提条件

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

コメントを追加するコンテンツ(お知らせ)は作成済みであることを前提とするので、まだ作成していない場合は以下のチュートリアルを参考に作成ください。

また、フロントエンドへの実装はKurocoとNuxt.jsで、コンテンツにコメント機能を追加するを参考に対応をお願いします。

アクティビティ定義を設定する

ダッシュボードから[アクティビティ定義]をクリックします。
Image from Gyazo

アクティビティ定義一覧が表示されるので[追加する]をクリックします。
Image from Gyazo

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

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

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

Image from Gyazo

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

Image from Gyazo

APIを設定する

APIの作成

未承認ユーザーからの操作を許可するために、新しくAPIを作成します。
Kuroco管理画面のAPIより「追加」をクリックします。
Image from Gyazo

API作成画面が表示されます。
Image from Gyazo

下記入力し「追加する」をクリックします。
Image from Gyazo

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

CORSの設定

次にCORSの設定をします。[CORSを設定する] をクリックします。
Image from Gyazo

CORS_ALLOW_ORIGINSの [Add Origin] をクリックし、下記を追加します。

  • 管理画面URL

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

  • GET
  • POST
  • OPTIONS

設定できたら[保存する]をクリックし、CORSの設定が完了です。
Image from Gyazo

エンドポイントの作成

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

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

Comment TestのAPIで「新しいエンドポイントの追加」をクリックし、それぞれ作成します。
Image from Gyazo

comment/insertエンドポイントの作成

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

Image from Gyazo

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

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

comment/listエンドポイントの作成

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

Image from Gyazo Image from Gyazo

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

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

コンテンツに階層構造を持ったコメントを追加する

次にSwagger UIを利用して、コンテンツに階層構造コメントを作成します。

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

Image from Gyazo

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

まずは、1, 9, 12, 13のコメントを追加します。
以下のデータをpostしていきます。

{
  "module_id": 110,
  "name": "My Name",
  "mail": "email@example.com",
  "note": "CommentN"
}

Image from Gyazo

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

[アクティビティ]->[階層付きコメント機能]でアクティビティ一覧を開き、先ほど追加した[Comment1]をクリックします。
Image from Gyazo

アクティビティの編集画面が開くので、URLからcomment_idを確認します。
Image from Gyazo

親になるcomment_idが確認出来たら、またSwagger UIでデータをPostします。

{
  "module_id": 110,
  "name": "My Name",
  "mail": "email@example.com",
  "note": "CommentN",
  "parent_comment_id": 1
}

Image from Gyazo

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

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

階層構造を持ったコメントを取り出す

階層構造を持ったコメントを自在に取り出すには、cnt,pageID,children_cnt,children_pageID,root,depthのパラメータを組み合わせて利用します。

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

Swagger UIによる動作確認

例として、cnt=2, pageID=1, depth=2 の設定でコメントを取得してみます。

対象のAPIから[Swagger UI]をクリックします。 Image from Gyazo

Comment::list のエンドポイントのTry it Outをクリックします。
Image from Gyazo

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

Image from Gyazo Image from Gyazo Image from Gyazo Image from Gyazo

コメントのレスポンスが得られるので内容を確認します。
Image from Gyazo

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

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

図で見ると以下のようになります。

      1            9 
     / \          / \ 
    2   3        10 11 

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

パラメータと取得できるコメント構造の例

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

All data
       1            9       12     13
     /  \          / \            /
    2    3        10 11          14
  / | \  | \
 4  5  6 7  8
cnt=2 and pageID=1:
       1            9 
     /  \          / \ 
    2    3        10 11 
  / | \  | \
 4  5  6 7  8
cnt=2 and pageID=2:
       12     13
             /
            14
cnt=2, pageID=1, and depth=2:
      1            9 
     / \          / \ 
    2   3        10 11 
cnt=2, pageID=1, and root=2:
    2   
  / | \  
 4  5  6 
cnt=2, pageID=1, children_cnt=1, children_pageID=1:
      1       9 
     /       /   
    2       10 
   / 
  4
cnt=2, pageID=1, children_cnt=1, children_pageID=2:
     1       9 
      \       \ 
       3      11 
        \
         8

関連ドキュメント

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