ユーザーが他のユーザーをフォローできるようにする方法

アプリにユーザー同士がフォローできるソーシャル要素がある場合は、このチュートリアルをご覧ください。

このチュートリアルは、すでに「ユーザーのプロフィールを表示する」画面が作成されていることから始まります。プロフィール画面の作成方法について詳しく知りたい場合は、ユーザーのパブリックプロフィール画面を設定する方法 チュートリアルを参照してください。

データの設定

1) Users テーブルに Following 関係を追加する

1. 左のツールバーでデータベースセクションを開きます。

2. Users データテーブルを展開するためにドロップダウン矢印を選択します。

3. + ADD PROPERTY を選択します。

4. Relationship の上にカーソルを合わせます。

5. Users を選択します。

6. 「ユーザーは複数のユーザーを持つことができます。ユーザーは複数のユーザーを持つことができます」と記載されたオプションを選択します。

7. Done を選択します。

8. 左のツールバーに戻り、Users 関係の赤いボックスで Users. と書かれている Name フィールドを選択します。

9. テキスト Users を削除し、Following と名前を変更します。

10. Save を選択します。

2) Users テーブルに Followers 関係を追加する

1. 左のツールバーでデータベースセクションを開きます。

2. Users データテーブルを展開するためにドロップダウン矢印を選択します。

3. + ADD PROPERTY を選択します。

4. Relationship の上にカーソルを合わせます。

5. Users を選択します。

6. 「ユーザーは複数のユーザーを持つことができます。ユーザーは複数のユーザーを持つことができます」と記載されたオプションを選択します。

7. Done を選択します。

8. 左のツールバーに戻り、Users 関係の赤いボックスで Users. と書かれている Name フィールドを選択します。

9. テキスト Users を削除し、Followers と名前を変更します。

10. Save を選択します。

トグルを使用した Following? の設定

1) テキストラベルの設定

1. コンポーネント追加ボタンを選択します。

2. Text を選択します。

3. テキストを画面に配置します。

4. 左のツールバーで、Enter Text. と書かれた灰色のボックスにカーソルを置きます。

5. テキストを削除します。

6. "Follow?" と入力します。

2) トグルの設定とログイン中のユーザーをフォローしているユーザーに現在のユーザーを追加する

1. コンポーネント追加ボタンを選択します。

2. スクロールして Buttons セクションまで移動し、それを選択してメニューを展開します。

3. Toggle コンポーネントを選択します。

4. トグルを画面に配置します。

5. What does this trigger? の下で、Logged in User > Following > Includes Current User? を選択します。

3) ログイン中のユーザーを現在のユーザーのフォロワーとして追加するアクションの設定

1. Toggle を選択します。

2. 左のツールバーで下にスクロールして Click Actions セクションを選択し、+ ADD ACTION を選択します。

3. Update > Current User を選択します。

4. 左のツールバーに表示された Update セクションで、Followers までスクロールしてドロップダウン矢印を選択します。

5. ADD > Logged In User を選択します。

6. Show Advanced を選択します。

7. When does this happen? の下にある Always と書かれているところのドロップダウンアイコンを選択し、Sometimes に変更します。

8. This Action will only happen if... の下にある Select の隣にあるドロップダウンアイコンを選択します。

9. Current User > Followers > All に設定します。

10. Contains の隣にあるドロップダウンアイコンを選択します。

11. Does not contain を選択します。

12. 条件の最後の値である Empty の隣にあるドロップダウンアイコンを選択し、Logged in User に設定します。

13. Done を選択します。

4) ログインユーザーを現在のユーザーのフォロワーリストから削除するアクションを設定します

1. トグルを選択します。

2. 左側のツールバーで、Click Actions セクションまでスクロールし、+ ADD ACTION を選択します。

3. Update > Current User を選択します。

4. 左側のツールバーに表示された Update セクションで、Followers までスクロールし、ドロップダウンアイコンを選択します。

5. Remove > Logged In User を選択します。

6. Show Advanced を選択します。

7. When does this happen? の下にあるドロップダウンアイコンを選択し、Always から Sometimes に変更します。

8. This Action will only happen if... の下にある Select の隣にあるドロップダウンアイコンを選択します。

9. Current User > Followers > All に設定します。

10. 次のフィールドは自動的に Contains となります。そのままにしておきます。

11. 条件の最後の値である Empty の隣にあるドロップダウンアイコンを選択し、Logged in User に設定します。

12. Done を選択します。

ボタンでユーザーをフォローする設定

1) フォローボタンを追加する

1. 左側のツールバーで、Add Component ボタンを選択します。

2. Button を選択します。

3. 画面に配置します。

4. 左側のツールバーで Text の下にあるテキスト Button を選択して削除します。

5. テキスト Follow を追加します。

2) 現在のユーザーをログインユーザーの Following リストに追加するアクションを設定します。

1. フォローボタンを選択します。

2. 左側のツールバーで Click Actions の下にある + ADD ACTION を選択します。

3. アクションを Update > Logged In User に設定します。

4. 左側のツールバーに表示された Update セクションで、Following までスクロールし、ドロップダウンアイコンを選択します。

5. Add > Current User に設定します。

6. Done を選択します。

3) ログインユーザーを現在のユーザーのフォロワーリストに追加するアクションを設定します

1. フォローボタンを選択します。

2. 左側のツールバーで Click Actions の下にある + ADD ANOTHER ACTION を選択します。

3. アクションを Update > Current User に設定します。

4. 左側のツールバーに表示された Update セクションで、Followers までスクロールし、ドロップダウンアイコンを選択します。

5. Add > Logged In User に設定します。

6. Done を選択します。

4) フォローボタンを条件付きで表示する設定

1. フォローボタンを選択します。

2. ボタンの名前が表示されている左のツールバーで、オーバーフローメニューを選択します。

3. 表示を変更 を選択します。

4. 左のツールバーの 表示 セクションで、常に表示 と表示されている箇所の隣にあるドロップダウン矢印を選択します。

5. 時々表示 に設定します。

6. 表示される条件 の下にあるドロップダウンメニューを選択します。

7. ログインユーザー > フォロー中 > すべて に設定します。

8. 含む と表示されている箇所の隣にあるドロップダウン矢印を選択します。

9. 含まない を選択します。

10. 条件の最後の値で、空 と表示されている箇所の隣にあるドロップダウン矢印を選択し、現在のユーザー に設定します。

11. 完了 を選択します。

5) アンフォローボタンを追加

1. 左のツールバーで、コンポーネント追加ボタンを選択します。

2. ボタン を選択します。

3. 画面上に配置します。

4. テキスト と表示されている箇所の下にある左のツールバーで、ボタン というテキストを選択して削除します。

5. アンフォロー というテキストを追加します。

6. アイコン と表示されている箇所の下にある左のツールバーで、現在設定されているアイコンを削除するための x を選択します。

7. ドロップダウンメニューを選択します。

8. 使用したいアイコンを選択します。この場合、キャンセルアイコンを選択しました。

6) ログインユーザーがフォローしているユーザーリストから現在のユーザーを削除するアクションを設定します

1. アンフォローボタンを選択します。

2. 左のツールバーで、クリックアクション の下にある + アクションを追加 を選択します。

3. アクションを 更新 > ログインユーザー に設定します。

4. 左のツールバーに表示された 更新 セクションで、フォロー中 までスクロールし、ドロップダウン矢印を選択します。

5. 削除 > 現在のユーザー に設定します。

6. 完了 を選択します。

7) ログインユーザーを現在のユーザーのフォロワーリストから削除するアクションを設定します

1. フォローボタンを選択します。

2. 左のツールバーで、クリックアクション の下にある + 別のアクションを追加 を選択します。

3. アクションを 更新 > 現在のユーザー に設定します。

4. 左のツールバーに表示された 更新 セクションで、フォロワー までスクロールし、ドロップダウン矢印を選択します。

5. 削除 > ログインユーザー に設定します。

6. 完了 を選択します。

8) アンフォローボタンを条件付きで表示する設定を行います

1. アンフォローボタンを選択します。

2. ボタンの名前が表示されている左のツールバーで、オーバーフローメニューを選択します。

3. 表示を変更 を選択します。

4. 左のツールバーの 表示 セクションで、常に表示 と表示されている箇所の隣にあるドロップダウン矢印を選択します。

5. 時々表示 に設定します。

6. 表示される条件 の下にあるドロップダウンメニューを選択します。

7. ログインユーザー > フォロー中 > すべて に設定します。

8. 次のフィールドは自動的に 含む と表示されます。そのままにしておきます。

9. 条件の最後の値で、空 と表示されている箇所の隣にあるドロップダウン矢印を選択し、現在のユーザー に設定します。

10. 完了 を選択します。