勝手にClickTips:「いいね」機能を実装する

今回はClickを使ったいいね機能の実装方法を解説いたします。

事前にお伝え致しますが、私は本職種は営業でして・・・Tipsや解説といいつつ、データベース設計やリレーショナルの作り方とかが、かなりヤバいので、ご了承ください。

それでは行きましょう！

1．作成するいいね機能の概要について

まず、いいね機能といっても、色々な機能・作り方があります。今回私が作成したいいね機能は、以下のようなものです。

投稿の詳細画面で、いいねを押すことができます。いいね数がカウントされたタイミングで、数字が裏でリアルタイムに更新されるは、ユーザーがクリックした感じが残るので、（我ながら）良かったなと思っています。

以下のようないいね機能ではありませんので、注意してください。ツールの機能・仕様的にできないのか、単に私のスキル不足なだけで実装できないのかはわかりませんが、とりあえず今回は取り扱いません。

＜今回やらない／できないいいね機能＞
✔タイムライン上でいいねをつけていく
✔いいね、超いいね、大切だねなどを組み合わせる
✔いいねした投稿を記録しておく（ずっといいねマークがアクティブになっているようなイメージ）

2．全体処理の流れ

システムの処理の流れは以下のようになっています。

＜事前準備＞

いいねの数を数えるためのいいねテーブルと、ユーザーテーブルに今ユーザーが何件いいねを獲得したのかいいね合計獲得数カラムを用意しておきます。

＜処理の流れ＞

①タイムラインの投稿をクリック、詳細ページが表示される

②トグルボタンがアクティブになったタイミング（＝いいねされたタイミング）で、いいねテーブルへいいね獲得数1を新規レコード作成。またユーザーテーブルのいいね獲得数のレコードを更新します。

③この②の処理に加えてモーダル画面（ポップアップ画面？）を起動させる処理を行います（なぜわざわざモーダルが必要なのかは後述）

④モーダル画面を閉じると、画面上のいいね獲得数のデータが更新されて終了です。

これだけでSEの方はできるではないでしょうか。ここからの解説は、①以前の処理は基本のため解説しません。事前準備事項と②以降のポイントを解説します。

3．事前準備

テーブルはこんな感じで用意します。いいねは数字をカウントするので必ず数字型でつくります。また、usersテーブルとリレーショナルをつくっておき、usersテーブルにはいいねの合計獲得数が入るようになります。

そして、肝心のリレーションの種類ですが・・・

・・・忘れました（笑）

いや本当に忘れました（汗）Clickは、後からリレーショナルを修正したりはもちろん、いまどう設定されているかも確認することができません。もう一度０から作り直せばわかりますけど、そんな面倒なことは絶対したくないいので・・・おそらく一番下であっていると思います。

ちなみに私はプログラミングはもちろんデータベースの知識もほとんどないため（外部結合、内部結合くらいは知っていますが、ただ単語を知っているだけです）、正直、動いたらそれが正解です（笑）

補足8/12
私の環境だけなのかもしれませんが、Create（テーブルの新規登録）が一切動いてないようです。。。なので、無理やりusersテーブルに項目を作って、Usersupdateで処理していることを今思い出しました。
どうりで自分で思い出してみても、変なテーブル設計になってるわけだ(笑)

4.画面を作ろう

ではいよいよ画面です。トグルボタンでアクティブな時がいいね、ノンアクティブな時が灰色で何も押されていないものを準備します。このエレメントのClickflowはこんな感じで用意しましょう。

クリックした時、数字の1を格納するのは、実にSE脳っぽい考え方なので、ここでマスターしましょう（SEではない私が言える立場でもありませんが・・・）。ちなみに、非アクティブ＝いいね取り消しの時は-1のレコードを作るというこれと逆の処理です。

ユーザーテーブルに合計のいいね獲得数を更新するのが今回の大きな関門一つ目です。私はなぜか計算式（NewFormulaでカレントユーザー＞いいね数）を使っています。理由はわかりませんが、ほかの設定ではことごとくusersテーブルに数字を更新することができませんでした。。。普通にカレントユーザー＞いいね数T＞SUMでいいはずなんですが、なぜ？？

あと、いいねを表示する方のテキストボックスはシンプルです。カレントユーザー＞合計いいね数でOKです。

補足１
ちなみに、わざわざusersテーブルに書き込まず、普通にいいね数表示テキストボックスのマジックテキストで直接「いいねSUM関数＋カレントユーザーにフィルターで絞込み」と書くほうが、絶対に簡単だと思うのですが・・・余裕がある方は検証してみてください。
私もやってみたのですが、結果を言うと何度やってもフィルターが機能せず、数字が表示されませんでした。フィルター機能を使わないと無事に数字が表示されますが、それだと、全ユーザーの合計いいね数が全部の投稿に表示されてしまいますので、やはりダメで・・・結局、わざわざよくわからない計算式も使い、ユーザーテーブルにぶち込むという処理をしました。

5.モーダル画面を作る。

これにモーダル画面をつなげていきます。なぜモーダル画面を使うかというと、このままだとトグルボタンを押すと、無事アクティブになり、データベースにもおそらく書き込み成功していると思うのですが、肝心の画面描写がリアルタイムに更新されないはずです。これではいいねをクリックしたユーザーが、実感を感じれないので、かなり試行錯誤して、画面を更新するために処理を考えました。

それがモーダル（ポップアップ画面）です。ちなみに、ほかのボタンパーツを使ったり、別の画面に移動させたり、Clickflowに更新を二重記載とかしても更新されませんので、おそらくこの方法しかないと思います。（これが第２関門。モーダル画面を使うという解決策を思いつくのにこれまた数時間かかりました）

モーダル画面の処理自体は非常にシンプルと思います。

ClickFlowで、注意としては、ClickFlowの処理でモーダル画面の時は、pushではなくModalを選択しましょう。（モーダルってスマホ開発では一般的な用語なんですかね？？）これで、モーダル画面の裏でいいね数が更新されているのが見えるはずです。

補足2
ちなみに、補足1の処理を使うと、リアルタイムに画面描写更新され、数字が変わります。おそらく、カレントユーザーテーブルはシステムデフォルトテーブルなので、他の自分で作ったテーブルとは処理が異なると思われます。つくづく初めから投稿テーブル作成しておけばよかったと後悔・・・

6.まとめ

以上で、設定は終了です。あとは補足ですが、いいね数をキャンセルする場合は、非アクティブ時の動作のところに同じ処理を記載します。いいね数を戻しますので、数字の-1を格納するだけです。あとは表示するモーダル画面も（ほんとは非表示にしたいところですが・・・）キャンセルしたことがわかるようなメッセージにしておきましょう。

また、さらに補足ですが、この場合は、利用者が一度タイムラインに戻ってしまうと、カウント数はもちろん保持されていますが、トグルボタンは非アクティブの表示に戻ってしまいます。。。本当はいいねをどんどん溜めていきたいので、ログインユーザーのいいね押したかいなかを実績を保持できるといいのですが、、、機能的にできないのか、私のスキル不足かもしれません。

皆さんも試行錯誤しながら、やってみましょう～。

以上です。

補足3
8/11現在Slackコミュニティにて、いいねを保持できるような質問やりとりがありました。おそらくできるようです！