.bubbleでいいね機能を実装しよう！
こんにちは！NoCode学生会運営の岩田史門（しもん）です！
今回は.bubbleでのいいね機能の実装方法について説明していきます！.bubbleでSNSなどを開発する際には必須の技術になるので、楽しみながら学んでいきましょう(^▽^)/
0.はじめに
今回いいね機能実装を学ぶにあたり、勉強しやすいように簡易的な教材用のアプリを作成しました！エディタを公開しておくので、ぜひ学習の参考にしてみてくださいね(^▽^)/
https://twitter-clone-by-shimon.bubbleapps.io/version-test?debug_mode=true
これは、ノーコードラボさんのTwitterクローンが作れればできるレベルのアプリです！
まだ読んでいないという方はとても参考になるので、こちらも是非読んでみてくださいね。下に貼っておきます(*^▽^*)
1.いいね機能実装（デザイン編）
それでは、早速いいね機能の実装をしていきます！
まずはいいね機能に必要なハートマークといいねがいくつ付いているのか見えるようにするためのカウントの設置からやっていきます！
1.1.ハートマークの設置
それではまずは.bubbleを開いて、Designタブを開いてください！
まずはハートマークを設置します！
Designタブで、Visual elementsの欄からIconをドラック＆ドロップします。iconの検索窓で「heart」と検索するとハートの形のアイコンが選択できます！今回は中塗りされていないハートアイコンを選択します！
1.2.カウントの設置
次にいいねの数を表示するためのカウントを設置します。Visual elementsの欄からTextを選択し、Iconの隣にドラック＆ドロップで挿入します。
ハートマークとカウントの設置後のイメージは下の写真を参考にしてください(^▽^)/
これでデザイン編は終了です！お疲れ様でした！
2.いいね機能実装（データベース編）
このチャプターでは、いいね機能のデータベース（データを記録するところ）の設定をしていきます(^▽^)/
だれがいいねを押したのか、いいねが何回押されたのかなどを記録していくために必要なステップなのでしっかり学んでいきましょう！
2.1.いいねを押したユーザーのデータベース設計
まずは、どのユーザーがいいねを押したのかというデータを記録するためのデータベース設計を行います！
Dataタブをクリックして、DesignタブからDataタブに移動しましょう！
DataタブのData typesが選択されていることを確認し、その中のTweet dataに新しいフィールドを作成します。Create a new fieldをクリックしましょう！
Field nameをLikeUsers、Field typeをUser、This field is a list (multiple entries)にチェックを入れ、CREATEをクリックし作成します。
2.2.いいねを押した回数のデータベース設計
次に何回いいねが押されたかをカウントした結果を記録するためのデータベース設計を行います！
やり方は先ほどの2.1.のチャプターでやったやり方と同じです！
同様に進めていきましょう！
まずは、create a new fieldをクリックし、Tweet dataにフィールドを追加します。Field nameをLikeCount、Field typeをnumberにします。This field is a list (multiple entries)にチェックはいりません。
最後にdefaultを0にしましょう。
これで、データベース設計は完了です！お疲れ様でした！
完成後のデータベースは下の写真を参考にしてみてください！
3.いいね機能実装（ハートマーク追加設定編）
次にこのチャプターでは、ユーザーがいいねボタン（ハートマーク）を押したときに、ハートマークが塗りつぶされるように設定していきます！
今回は、ハートマークのconditionalを設定して変更をします。
conditionalでは、elementを条件に合わせて表示したり、文字サイズを大きくしたりなど様々な設定をすることができます。
まずは、heart iconのeditorを開きconditionalタブをクリックします。conditionalタブの場所は下の写真を参考にしてください。
すると、+ Define another conditionが表示されるので、クリックします。
whenの隣にあるClickと表示されている箇所に条件を設定していきます。
今回は、「ログインしているユーザーが、このTweetのLikeUsersデータに含まれているとき」というのを条件にします。
Bubbleでは、「Parent group's Tweet's LikeUsers contains Current User」というのが条件になります！下の写真を参考にして設定してみましょう(^▽^)/
次に、この条件でクリックされた時にハートマークを塗りつぶされた状態に変更する設定をします！
先ほど条件を設定した場所の下にある、Select a property to change when trueをクリックし、Iconを選択します。
Choose an iconをクリックし、設定した条件の時にクリックされた際に表示したいiconを選択します。今回は、塗りつぶされたハートアイコンを選択します。
これで設定完了です！この設定により、ハートマークがクリックされると、色が変わり塗りつぶされたハートマークへと変化します！
ハートマークの設定の完了画面は下の写真を参考にしてください(^▽^)/
4.いいね機能実装（ワークフロー編）
ここからは、ハートマークを押した時の処理を実装していきます！
今回実装するのは、ハートマークを押した時に、
・押したユーザーの情報をTweet dataに記録すること
・カウントのデータを変更すること
・もう一度ハートマークを押したときにいいねを解除すること
の3点です！それでは一緒にやっていきましょう(⌒∇⌒)
4.1.いいねを押したユーザーのデータを記録する
まずはいいねを押したユーザーのデータを記録する処理から実装していきます！
ハートマークの編集画面からStart/Edit workflowをクリックし、ハートマークがクリックされたときのWorkflowを設定していきましょう。
Data(Things)→Make changes to things...を選択し、
Thing to changeにParent group's Tweetを選択します！
その後、+Change another fieldをクリックし、fieldを選択していきます！ハートマークを押したユーザーの情報を記録するため、LikeUsersを選択します！LikeUsers add Current Userに設定できたら完了です(^▽^)/
これでハートマークを押したユーザーの情報をLikeUserに追加するWorkflowを設定することができました！お疲れ様でした！
4.2.いいねのカウントを記録する
このチャプターでは、いいねの押された回数、すなわちカウントを記録し変更して表示する処理を設定していきます！
このWorkflowは、先ほどの4.1.同様にデータを変更できれば良いため、先ほどのMake changes to things...に+Change another fieldをクリックしてfieldを追加していきます！
fieldはLikeCount を選択し、Parent group's Tweet'sを選択して、LikeCountの数値を+1します。
下の写真を参考にして、LikeCount = Parent group's Tweet's LikeCount + 1 に設定できていればOKです！
そしてデザイン編で配置したカウントを表示する用のTextにカウントした数値を表示します！
Designタブに戻り、ハートアイコンの隣に配置したTextの編集editorを開き、Insert dynamic dataをクリックします！
そして、Parent group's Tweet's LikeCountに設定します！
これで、いいねの押された回数をカウントし表示する処理が実装できました！お疲れ様でした！！
4.3.いいねを解除する
このチャプターでは、既にハートマークが押されて、塗りつぶされている状態で、もう一度押すと、いいねが解除されて元の状態に戻るように設定していきます！
この設定を行うことで、ハートマークが無限に押され続けてしまうことを防ぐことができます！それでは実際にやっていきましょう！
いいねを解除するために4.1.、4.2.で行った設定の逆の設定をしていきます！
先ほどWorkflowタブで設定した「ハートマークが押されたとき」という条件に加えて、TweetデータのLikeUserのデータの中に現在のユーザーが含まれているかという条件を設定します。
まずは4.1.で作成したハートマークが押されたときのWorkflowに条件を加えていきます！
下の写真の赤丸で囲まれている場所をクリックし、設定ページを開きます。その後、Only whenに条件を書いていきます。
今回は、「このTweetのLikeUserデータにログイン中のユーザーが含まれていない」という条件を設定したいので、「Parent group's Tweet's LikeUsers doesn't contain Current User」と設定します！
次にユーザーがLikeUsersのデータに含まれているときの条件を作ります！
先ほど作成した、含まれていないという条件から含まれるに変更するだけなので一緒にやっていきましょう！
まず、Workflowの複製を行います。
先ほど設定した、ハートマーク（icon いいね）のWorkflowを右クリックして、Copyをクリックします。
コピーしたら、Clik here to add an event...のところで右クリックをしてPasteをクリックします。これで複製が完了しました！
複製したものは含まれていないときの条件なので、Only whenに書いてある条件のdoesn't containをcontainsに変更します！
これで、含まれているときの条件に変更されました！
次に、ハートマークが押された時のカウントの処理も変更します！
現状は「LikeUsers add Current User」と「LikeCount = Parent group's Tweet's LikeCount + 1」の処理になっています。
これを「LikeUsers remove Current User」と「LikeCount = Parent group's Tweet's LikeCount - 1」に変更します！
変更後は下の写真を参考にしてみてください！
これでいいね機能のワークフローの設定がすべて完了しました！
お疲れ様でした！！
5.さいごに
今回の内容はいかがでしたでしょうか。
いいね機能を実装するタイミングはかなり多いと思うので、ぜひ役立てて頂ければ嬉しいです！
今後も役立つ記事をアップしていくので、ぜひ一緒にNoCodeを勉強していきましょう(^▽^)/
わかりやすかった！っと思っていただけたら、いいねを押していただけると嬉しいです！
最後まで読んでくださりありがとうございました！
この記事が気に入ったらサポートをしてみませんか？