よくある質問 | Clickマニュアル/📚Click操作マニュアル/👍いいね機能を実装しよう
👍

いいね機能を実装しよう

※ キャンバス > トップメニューがアップデートされました。 詳しくはこちら
 
SNS アプリなどでよく使われる「いいね機能」。このロジックを利用すると「お気に入り機能」やユーザーの「フォロー・フォロワー機能」なども実装することができます。
ここではいいね機能の仕組みと作り方を SNS アプリを例に解説していきます。
目次

いいね機能とは？その仕組について

いいね機能ってなに？

「この投稿いいな！」と思う投稿のハートマークを押すと、ハートマークの色が赤くなり、いいねの数が 1 増える機能です。逆に赤色の状態のハートマークを押すと、ハートマークは灰色に戻り、いいねの数が 1 減ります。
1つの投稿に対してたくさんいいねをすることは出来ませんが、「いいな！」 と思った投稿が他にもある場合は、その投稿にも いいね！することができます。

いいね機能の仕組み

アプリの裏側ではこの ”いいね機能” がどのように処理を行っているのか… いいね機能の仕組みを解説していきます。
 
投稿の ”いいねボタン” を押すと、その「投稿」と押した「ユーザー」が結びつくようになっています。つまりデータベースを構築する際に、”データの紐づけ” 機能を使ってデータベース内にある「Users テーブル」と「投稿用のテーブル」を紐付けています。
 

データの紐付け とは

あるテーブルが他のテーブルと関連している場合は「データの紐付け」機能を使用することでテーブル同士を紐づけることが出来ます。その際、Click ではテーブル同士の ”関係性” を指定しなければなりません。
ここでは ”データの紐付け” 方法と、関係性のタイプについて説明していきます。

データの紐付け方法

紐付けたいテーブルを選択して、「+ 項目の追加」> ”データの紐付け” から紐付けたいテーブルを選択します。

テーブル同士の関係性（タイプ）について

画像のようにタイプは 3つ あります。説明文は2行構成になっており、互いのテーブルそれぞれの目線から紐付け先のテーブルを見たときの関係を示しています。 このタイプの関係性を
  • 1 対 複数（1：N）
  • 複数 対 1（N：1）
  • 複数 対 複数（N：N）
と呼びます。それぞれ説明していきます。

1 対 複数（1：N）

図にするとこのようになります。
「Aさんは複数の投稿を所有できるが、投稿は一人のユーザーとしか紐付かない」
  • SNS アプリだと、いつ使うの？ まさにこの紐付けタイプは「投稿者」を判別するために使用します。 ”投稿” に対して ”投稿者（ユーザー）” は一人しか存在し得ないのでこのタイプになります。

複数 対 1（N：1）

これは、ひとつ前で説明した「1：複数」と変わりません。 主語（目線）が ”投稿 テーブル” なのか ”Users テーブル” どちらなのかによって「1：複数 or 複数：1」が変わります。つまり、”データの紐付け” 機能は、紐付けたい2つのテーブルどちらを起点にしても同じように設定することが出来ます。

複数：複数（N：N）

図にするとこのようになります。
「ユーザーは複数の投稿と紐付くことができ、投稿も複数のユーザーと紐付くことができる」
  • SNS アプリだと、いつ使うの？ まさに ”いいね機能” がこの紐付けタイプです。 ユーザーは複数の投稿を いいね！ することができ、投稿も複数のユーザーから いいね！ されることができます。つまり、２つのテーブルは互いに複数と紐付くことができます。

いいね機能を実装しよう！

ここからは、いいね機能を実装するには Click でどのように設定すれば良いのかを解説していきます。

データベースの設定

いいね用のデータの紐付けを作成します。
 
”投稿 テーブル” と ””Users テーブル” を紐付けます。 投稿テーブルを開き「+ 項目の追加」> データの紐付け > Users を選択します。
 
紐付けのタイプを選択して紐付けを作成します。
  • タイプ 一番下の選択肢である ”複数：複数” を選択します。
  • 名前 任意のものを設定してください。わかりやすい・管理のし易い名前にすると良いです。 今回は「いいねの紐付け」と設定し、進めていきます。

いいね機能のロジック

ハートマークを押すと「”投稿” と ”ユーザー”」が紐付くように設定をします。 実際に行われる処理は以下のようになります。
「ハートマークを押すと、その投稿の ”いいねの紐付け” に押したユーザーを追加する」
そして、ハートマークには「トグル」エレメントを使用します。
 
  • トグルってなに？ トグルエレメントは電気のスイッチのようなものです。 電気のスイッチに ON と OFF があるように、トグルにも アクティブ時 と 非アクティブ時 があり、それぞれの状態のときの動作が設定できます。
    • 初期値 なにのスイッチなのかを指定します。 家の中にもたくさんのスイッチがあると思います。テレビのスイッチ・パソコンのスイッチ・スマホのスイッチ…
    • アクティブ時 非アクティブ時 ”ON にした時” ”OFF にした時” の動作をそれぞれ設定します。

トグルの設定

実際にトグルエレメントの設定をしていきます。
 
投稿を表示するリスト内に ”トグル” エレメントを配置します。 投稿と同じリスト内に配置することで、この投稿に関連する要素を切り替えるためのスイッチとして使用できます。
アイコンの種類は任意のものに変更してください。
  • ”輪郭のみ表示” とは？ このスイッチを ON にするとアイコンの中でも、外枠のみに色の付いたアイコンだけが選択肢として表示されます。 画像は「Heart」の検索結果です。このような違いがあります。

初期値の設定

このトグルが いいね機能 で使用するものであることを設定します。
初期値のドロップダウンから「Current 投稿 > いいねの紐付け > includes Logged In User?」を選択してください。
これを翻訳するとすれば… 「このトグルは、”この投稿” の ”いいねの紐付け” の値を切り替えるためのものであり、そこに ”トグルを押したユーザー” を含めますか？」 このようになります。
  • 初期値の選択肢に画像と同じものが表示されない時は… データベースの設定に誤りがあるかもしれません。具体的にはデータの紐付けのタイプが間違っていることが多いです。もう一度設定し直してみましょう！

トグル ClickFlowの設定

ON にした時、OFF にした時 の動作を設定していきます。

アクティブ時の設定

スイッチが ON になった時を指します。いいね機能では ”いいねした時” の動作のことです。
「トグルを押した人がその投稿のいいね紐付け欄に追加される」ように設定します。 つまり、Current 投稿の更新を行います。
 
更新する項目は「いいねの紐付け」のみです。 ドロップダウンを開き、「Add > Logged In User」を選択します。
  • ”Add” と ”Remove” ってなに？ ”加える” と ”削除する” です。 いいね機能の中では、「いいねした時 = Add」「いいねを取り消す時 = Remove」を使用します！

非アクティブ時の設定

スイッチが OFF の時を指します。いいね機能では ”いいねを取り消す時” の動作のことです。 そのため、アクティブ時の設定との違いは「Add → Remove」に変わるだけです。
アクティブ時の設定と同じように「投稿更新」を設定します。 更新する項目も同じく「いいねの紐付け」です。 ドロップダウンを開き「Remove > Logged In User」を選択します。

いいね数を表示する

ここには「何人がいいねしたのか」を表示します。 いいねした人数というのは「この投稿といいねの紐付けで紐付いているユーザー数」のことです。
テキストエレメントを配置します。 表示される情報をカスタムテキストから設定します。
 
「Current 投稿 > いいねの紐付け > Count」を選択します。 これは「”この投稿” と、”いいねの紐付け” によって紐付いているデータの ”数”」のことを指します。つまり、いいね数のことです。
 
 
いいね機能の設定は以上となります。 プレビューを開いて実際に動作を確認してみましょう！