【NoCode】Adaloでフォロー機能を実装する Part ②
皆様こんにちは、taku（@takuNoCode1）です！
平素より格別のご高配を賜り厚く御礼申し上げます。
前回に引き続き、NoCodeツールAdaloでフォロー機能を実装します！
1. 実装するサンプル
今回は、ユーザー詳細画面とそれぞれのユーザーごとの「Following（フォロー中）」及び「Followers（フォロワー）」の一覧表示画面を作成します。
2. ユーザー詳細画面作成
ユーザー詳細画面用の「User Details」を作成し、「Home」の「List」の「Click Actions」に「User Details」への「Link」を設定します。
「User Details」の「App Bar」の「Title」を「Current User > Username」となるように順に選択します。
「Image」は今回使用しませんが、とりあえずそのままにしておきます。
「Text」を「Current User > Username」となるように順に選択し、「Font Size」を「28」に「Alignment」を「中央揃え」に変更します。
さらに「Text」を配置し、「Current User」の「Following」の「Count」を選択します。
「User count」に続いて「Following」と入力します。
「Width」を「150」に「Alignment」を「中央揃え」に変更します。
これにより、現在読み込んでいる「Users」の「データ（Record）」の「Following（フォロー中）」の「数」を表示することができるようになりました。
上記の「Text」をコピーして右隣に配置し、「Current User」の「Followers」の「Count」を選択します。
「User count」に続いて「Followers」と入力します。
これにより、現在読み込んでいる「Users」の「データ（Record）」の「Followers（フォロワー）」の「数」を表示することができるようになりました。
前回作成した「FOLLOW」及び「UNFOLLOW」ボタンと全く同じものを「User Details」に作成します。復習になりますので、省略していただいても問題ありません。
「List」の中から「FOLLOW」及び「UNFOLLOW」ボタンをコピーして「User Details」に配置すると、「Click Actions」及び「Visibility」を、再度設定し直さなければ、機能しませんでしたので注意してください。
3. Following 一覧表示画面作成
「Home」をコピペし、「Name」を「Following」に変更します。
「App Bar」の「Text」を「Following」に変更します。
「Right Icon 2」をオフにします。
「Left Icon」をオンにし、前の「Screen」に戻る「Link」を設定します。
「User Details」のフォロー中の人数を表示する「Text」に「Following」への「Link」を設定します。
「Following」の「List」の「Filter」に「Current User > Following」を選択します。
これにより、現在読み込んでいる「Users」の「データ（Record）」の「Following（フォロー中）」に紐づけられたユーザーの「Username」を一覧として表示することができるようになりました。
4. Followers 一覧表示画面作成
「Following」をコピペし、「Name」を「Followers」に変更します。
「App Bar」の「Text」を「Followers」に変更します。
「User Details」のフォロワーの人数を表示する「Text」に「Followers」への「Link」を設定します。
「Followers」の「List」の「Filter」に「Current User > Followers」を選択します。
これにより、現在読み込んでいる「Users」の「データ（Record）」の「Followers（フォロワー）」に紐づけられたユーザーの「Username」を一覧として表示することができるようになりました。
5. まとめ
以上で今回の実装は完了です。「PREVIEW」ボタンをクリックして、作成したアプリを確認してみてください。
前回から2回に分けて、フォロー機能の実装を行いました。
フォローする側とフォローされる側の関係性を理解するのが少し難しかったですが、実際にコードを書く場合よりも、遥かに簡単に、そして迅速に実装を行うことができました。
引き続きAdaloの理解を深めていきましょう！