💬

コメント機能を作ろう!

SNS や掲示板アプリには、投稿に対してコメントできる機能がよく実装されています。ここでは、基本的なコメント機能の仕組みと作り方を投稿アプリを例に解説していきます。

コメント機能とは?

あるデータに対して「紐付くデータ」を作成する機能です。 SNS では、”投稿に対してコメントを送信する” となります。

基本的な仕組みは ”投稿機能” と一緒!

投稿機能のように
  1. 何を(投稿内容)
  1. 誰が(投稿者 = Users テーブルとの紐づけ)
この2つに加え、「どの投稿に対して」コメントをしたのかを指定します。 つまり ”投稿テーブルとコメントテーブル” を紐づけます。

実際に作っていこう!

Step 1 データベースの設定

コメントが保存されるテーブルを作成して ”投稿・Users” それぞれのテーブルと紐付けを設定していきます。
 
それぞれのテーブルと紐付けを行っていきます。
  • コメント主(投稿者) 投稿テーブルにて、”投稿者の紐づけ” を行うように、コメント主が誰であるかを判別するための紐づけを設定します。
  • 紐付く投稿 ”どの投稿に対してのコメント” であるかを判別するための紐付けを設定します。

Step 2 キャンバスの設定

コメントの表示・投稿機能を実装していきます。 「投稿リスト」押下時に詳細ページへ移動するClickFlowを設定します。
 
詳細ページ内に ”コメントを表示するためのリスト” を配置します。
  1. データベースの選択 > 「コメント」テーブルを選択します。
  1. フィルターを設定します。 Current 投稿 > コメント(紐付くコメント)を選択します。これは、”この投稿に紐付くコメント” のことです。
そして「アクションボタン」押下時に ”投稿ページ” へ移動するClickFlowを設定します。
 
コメント投稿ページには、コメント投稿用のフォームを設置します。
自動入力項目
  1. 投稿者 コメントをした人の設定です。 「Logged in user」を選択します。
  1. 紐づく投稿 この投稿(詳細ページに表示されている投稿)にコメントをするので「Current 投稿」を選択します。
 

自動入力項目とは

自動に保存させる値のことで、ここでは ”投稿者””紐付く投稿” のことを指します。この2つの項目は、ユーザーがコメントを投稿すると自動で保存されます。