【NoCode】Adaloでフォロー機能を実装する Part ①

taku

2020年9月24日 20:13

皆様こんにちは、taku（@takuNoCode1）です！
平素より格別のご高配を賜り厚く御礼申し上げます。

今回は、NoCodeツールAdaloでフォロー機能を実装します！

1. 実装するサンプル

今回は、「Twitter」や「Facebook」などのSNSで使用される、フォロー機能を実装していきます。

2. データベース設計及びテストデータ挿入

2-1. データベース設計

今回は、「Users」という「Collection」に「Following（フォロー中）」及び「Followers（フォロワー）」という2種の「Relationship（リレーションシップ）」を追加します。

「Users」の「ADD PROPERTY」をクリックし「Relationship」から「Users」を選択します。

フォロー及びフォロワーの関係性は厳密に理解するともっと複雑なのですが、ここではあまり深く考えずに、以下のような関係をイメージします。

・「User」は複数の「User」をフォローできる
・「User」は複数の「User」からフォローされる

特定のユーザーが、誰か1人だけに属することは無く、それぞれのユーザー同士が同等に複数の関係を持つことができます。

このような関係のことを一般的に「多対多」と呼びます。

上記の関係性から、3つの選択肢のうち1番下を選択し「DONE」ボタンをクリックします。

・ A User can have multiple Users
・ A User can have multiple Users

「Name」を「Following」に変更し、「SAVE」ボタンをクリックします。

上記と全く同じ手順で、「Followers」を追加します。

以上で、「Users」に「Following（フォロー中）」及び「Followers（フォロワー）」という2種の「Relationship（リレーションシップ）」を追加することができました。

Following
フォローした「User」の「データ（Record）」を紐づける

Followers
フォローされた「User」の「データ（Record）」を紐づける

現段階では、あまり理解できないかもしれませんが、後ほど詳しく解説いたしますので、先に進みます。

2-2. テストデータ挿入

テスト用に４人のユーザーを作成します。
今回は「Full Name」は使用しないので、「空データ」でOKです。

3. ユーザー表示画面作成

「Home」の「App Bar」の「Title」を「All users」に変更します。

「ADD COMPONENT」の「Lists」から「Custom List」を「Home」にドラッグアンドドロップして配置します。

「What is this a list of ?（何のリストですか？）」に、「Users」という「Collection」を選択します。

これにより、「Users」に保存されている「データ（Record）」を順番に読み込んでいくことができるようになりました。

「Subtitle」は削除し、「Title」を「Current User」の「Username」に変更します。

これにより、「Users」から順番に読み込んだ「データ（Record）」の「Username」を表示することができるようになりました。

「EDIT STYLES」をクリックし、「Width」を「130」に「Font Size」を「24」に変更します。

「FOLLOW」及び「UNFOLLOW」2つのボタンを作成します。「Custom List」の枠からはみ出さないように注意してください。

後ほど2つのボタンの表示切り替えを行うのですが、少しだけ交わるように配置すると、うまく切り替えができますので、下図の通りになるように注意して配置してください。

4. フォロー及びフォロー解除機能実装

フォロー及びフォロー解除機能を実装するにあたり、以下の2つの立場から「Action」を追加していきます。

・フォローするのは「Logged in User（ログインしているユーザー）」
・フォローされるのは「Current User（読み込まれているユーザー）」

4-1. フォロー機能

まずは「Logged in User（フォローする側のユーザー）」の立場で考えます。
「FOLLOW」ボタンの「ADD ACTION」をクリックし、「Update」から「Logged in User」を選択します。

「Following」をクリックし、「Add」から「Current User（フォローされる側のユーザー）」を選択します。

これにより、「FOLLOW」ボタンをクリックすると、「Logged in User（フォローする側のユーザー）」の「データ（Record）」の「Following」に、「Current User（フォローされる側のユーザー）」の「データ（Record）」を追加することができるようになりました。

次に「Current User（フォローされる側のユーザー）」の立場で考えます。
「ADD ANOTHER ACTION」をクリックし、「Update」から「Current User」を選択します。

「Followers」をクリックし、「Add」から「Logged in User（フォローする側のユーザー）」を選択します。

これにより、「FOLLOW」ボタンをクリックすると、「Current User（フォローされる側のユーザー）」の「データ（Record）」の「Followers」に、「Logged in User（フォローする側のユーザー）」の「データ（Record）」を追加することができるようになりました。

ここで、実際に「User1」でログインして「User2」をフォローしてみます。

・フォローするのは「Logged in User（User1）」
・フォローされるのは「Current User（User2）」

「Users」を確認すると、以下のようになります。

「User1（Logged in User）」は「User2（Current User）」をフォローしたので、「Following（フォロー中）」という「Relationship」の中に「User2（Current User）」の「データ（Record）」を紐づけています。

逆に、「User2（Current User）」は「User1（Logged in User）」からフォローされたので、「Followers（フォロワー）」という「Relationship」の中に「User1（Logged in User）」の「データ（Record）」を紐づけています。

以上で、それぞれのユーザーが誰をフォローし、誰にフォローされているのかを管理することができるようになりました。

4-2. フォロー解除機能

フォロー解除機能を実装するためには、「UNFOLLOW」ボタンをクリックした際に、「Following（フォロー中）」及び「Followers（フォロワー）」に、紐づけたユーザーを削除する「Action」を追加すればOKです。

まずは、「Logged in User（フォロー解除する側のユーザー）」の立場で考えます。
「UNFOLLOW」ボタンの「ADD ACTION」をクリックし、「Update」から「Logged in User」を選択します。

「Following」をクリックし、「Remove」から「Current User（フォロー解除される側のユーザー）」を選択します。

これにより、「UNFOLLOW」ボタンをクリックすると、「Logged in User（フォロー解除する側のユーザー）」の「データ（Record）」の「Following」から、「Current User（フォロー解除される側のユーザー）」の「データ（Record）」を削除することができるようになりました。

次に「Current User（フォロー解除される側のユーザー）」の立場で考えます。
「ADD ANOTHER ACTION」をクリックし、「Update」から「Current User」を選択します。

これにより、「 UNFOLLOW」ボタンをクリックすると、「Current User（フォロー解除される側のユーザー）」の「データ（Record）」の「Followers」から、「Logged in User（フォロー解除する側のユーザー）」の「データ（Record）」を削除することができるようになりました。

ここで、先程と同様に「User1」でログインして「User2」をフォロー解除してみます。

・フォロー解除するのは「Logged in User（User1）」
・フォロー解除されるのは「Current User（User2）」

「Users」を確認すると、以下のようになります。「Following」及び「Followers」に紐づけられたデータが削除されています。

5. FOLLOW 及び UNFOLLOW ボタンの表示切り替え

「FOLLOW」ボタンの「Visibility」を「Sometimes Visible」に変更し、「Will be visible if」に「Current User」の「Followers」から「All」を選択します。

「Does not contain」「Logged in User」となるように順に選択します。

これにより、「Current User（フォローされる側のユーザー）」の「Followers（フォロワー）」に「Logged in User（フォローする側のユーザー）」が含まれない場合のみ、「FOLLOW」ボタンを表示することができるようになりました。

上記と全く同じパターンで、「UNFOLLOW」ボタンには、逆の意味を持つ「Contain」を選択します。

これにより、「Current User（フォローされる側のユーザー）」の「Followers（フォロワー）」に「Logged in User（フォローする側のユーザー）」を含む場合のみ、「UNFOLLOW」ボタンを表示することができるようになりました。

以上で、「FOLLOW」及び「UNFOLLOW」ボタンの切り替えは完了です。

6. FOLLOW 及び UNFOLLOW ボタンの非表示

今の状態では、「Logged in User（ログインしているユーザー）」が自分自身をフォローできてしまうため、修正を行います。

「FOLLOW」及び「UNFOLLOW」ボタンをシフトキーを押しながら選択し、「MAKE GROUP」をクリックし、グループ化します。

「Visibility」を「Sometimes Visible」に変更し、「Will be visible if」に「Current User > Email」「is not equal to」「Logged in User > Email」となるように順に選択します。

これにより、「Current User（フォローされる側のユーザー）」の「Email」と「Logged in User（フォローする側のユーザー）」の「Email」が一致しない場合のみ「FOLLOW」及び「UNFOLLOW」ボタンを表示することができるようになりました。