# 「お気に入り」ボタンの作成方法（レガシービルダー）

{% hint style="warning" %}
**注意：このセットアップはLegacy Mobile Builder向けであり、レスポンシブなAdalo 2.0 Builderでは異なる場合があります。**
{% endhint %}

Adalo Legacyアプリ内でユーザーがアイテムをお気に入りにできる体験を作成したい場合があります。このチュートリアルでは以下をカバーします：

1\) リストにお気に入りトグルを追加する\
2\) 詳細画面にお気に入りトグルを追加する\
3\) ユーザーのお気に入りリストを表示する\
4\) ボタンを使用してアイテムをお気に入りにするための条件付き表示の使用

{% embed url="<https://www.youtube.com/watch?v=e-SvIRQHOfA>" %}

#### データベースの設定

* 「お気に入りの場所」のコレクションを作成し、「名前」（テキストプロパティ）と「画像」（画像プロパティ）を追加し、Adaloが自動的に作成する「ユーザー」コレクションとの関係を作成します。
* この関係は多対多の関係になりますので、複数のユーザーが複数の旅行をお気に入りにし、複数の旅行が複数のユーザーによってお気に入りにされるようにします。
* 次に、さっき追加した「お気に入りの場所」の関係プロパティを「Favorited By」として更新します。これにより、どのユーザーがどの場所をお気に入りにしたかがデータベースでより明確に表示されます。

#### リスト上でアイテムをお気に入りにする

* お気に入りリスト用の新しい画面を作成します
* 次に、カスタムリストをドラッグして好きなようにカスタマイズします
* リストをお気に入りの場所コレクションに接続します
* リストをカスタマイズしたら、コンポーネントパネルに移動してトグルボタンをドラッグします
* 左側のパネルで、「このトグルは何をしますか？」の下で、トグルを現在のお気に入りの場所に接続し、ログインしているユーザーが含まれているかどうかを選択します。これにより、お気に入りのアイテムがログインしているユーザーに接続されます。
* アイコンを「アクティブ」には「Favorite」、非アクティブアイコンには「Favorite\_Border」にカスタマイズします
* そしてプレビューして、アイテムをリスト内でお気に入りにできるようになりました！

#### 詳細画面上でアイテムをお気に入りにする

* 詳細画面用の新しい画面を作成します
* 画面を好きなようにカスタマイズします
* 画面をカスタマイズしたら、コンポーネントパネルに移動してトグルボタンをアプリバーにドラッグします
* 左側のパネルで、「このトグルは何をしますか？」の下で、トグルを現在のお気に入りの場所に接続し、ログインしているユーザーが含まれているかどうかを選択します。これにより、お気に入りのアイテムがログインしているユーザーに接続されます。
* アイコンを「アクティブ」には「Favorite」、非アクティブアイコンには「Favorite\_Border」にカスタマイズします
  * **プロのヒント:** デフォルトの色と同じ場合は、デフォルトの色以外の色に「アクティブ」の色を変更して、アプリバーと同化しないようにします
* アプリバーを選択してShiftキーを押し、お気に入りアイコンも選択します
* 左側のパネルで「グループ化」を選択します
* 次に、スタイルを編集して「固定」の「上」を選択します（これにより、アプリバーが画面の上部に固定されます）
* そして、アプリをプレビューして、詳細画面でアイテムをお気に入りにできるようになりました！

#### お気に入りアイテムをフィルタリングする

* フィルタリングされたお気に入り画面用の新しい画面を作成します
* コンポーネントパネルから、シンプルリストを追加します
* シンプルリストをお気に入りの場所のコレクションにバインドします
* フィルタリングする項目を選択し、フィルタを「ログインユーザー - お気に入りの場所 - すべて」に設定します
* プレビューして、お気に入りアイテムをリスト内でフィルタリングできるようになりました！

#### 条件付き表示を使用してお気に入りボタンを作成する

* お気に入りボタンを含む新しい画面を作成します
* 画面にボタンを追加して複製します
* ボタンを横並びに配置するか、上下に直接配置します
* ボタンにスタイルを適用します（お気に入りとお気に入り済みを選択しました）
* お気に入りとして表示されるボタンを選択します
* 左パネルで、ボタン名の横にある3つの点をクリックします
* 表示を変更するには次のように選択します
  * ときどき表示 - 現在のお気に入りの場所 - お気に入りの場所 - すべて
  * 含まれていない
  * ログインユーザー
* お気に入り済みとして表示されるボタンを選択します
  * ときどき表示 - 現在のお気に入りの場所 - お気に入りの場所 - すべて
  * 含まれる
  * ログインユーザー
* お気に入りボタンにアクションを追加して、現在のお気に入りの場所を更新します
* アクション内で、アクションをスクロールして「ログインユーザーを追加」する
* お気に入り済みボタンに対しては逆の操作を行います。お気に入り済みボタンにアクションを追加して、現在のお気に入りの場所を更新します
* アクション内で、アクションをスクロールして「ログインユーザーを削除」します
* うれしいことに！プレビューして、条件付き表示を使用してお気に入りとお気に入り済みを表示できるようになりました！