いいね❤︎を設定してみる｜toggleの使い方｜初心者のアプリ開発｜Adalo

こんにちは！ゆかゆかです。

インスタとかで見かける良いねアイコンの設定をしてみます！

ポイント！ 

　toggleの設定で良いね機能ができるよ

データベースコレクションの準備

いいね情報を保存するための項目を準備していきます。

写真コレクション

簡単に事前準備を紹介します。

まずは、写真を保存するためのデータコレクションを作成します。

1. Database Collections > 写真用コレクション作成
2. + ADD PROPERTY で項目を作成

• 写真プロパティ：Imageを選択し作成
• いいねUsersプロパティ：Relationship > Users（次に続く）

良いねUsersの設定

1. Relationship > Users

1. 一番下のN対Nを選択
2. DONE を選択

（一番上のUser：写真＝１：NでもOK）

リスト画面設定

データの準備ができたので、続いて画面の方を設定していきます。

画面表示設定

1. + ボタンを選択
2. ADD COMPONENT を選択
3. Lists > Image List を選択し好きなところに配置

1. What is this a list of? > 写真コレクションを選択

1. 表示条件は好みで設定

• Filter：表示する写真をフィルタリングできます。
• sorting：並び順を設定できます。
• Maxmum number of items：最大表示件数を設定できます。

1. Icon Type > Toggle を選択
2. What does this toggle? >いいねUsers includes Logged in Userを設定

toggleって何？ 

　スイッチボタンのようなイメージ。

　ON(Active) / OFF(Inactive) を切り替えられます。

1. Active Icon > ♥ を設定
2. Inactive Icon > ♡ を設定

色は好みで設定します。

ACTION設定（ON）

「いいね」のON に合わせた動作を設定します。

1. Additonal action only when toggle is turned ON > + ADD ACTION を選択
2. Update > Current 写真 を選択

いいねUsersにログイン中のユーザを追加します。

1. いいねUsersを選択
2. Add > Logged in Userを選択

ACTION設定（OFF）

「いいね」のOFF に合わせた動作を設定します。

1. Additonal action only when toggle is turned OFF > + ADD ACTION を選択
2. Update > Current 写真 を選択

いいねUsersにログイン中のユーザを取り除きます。

1. いいねUsersを選択
2. Remove > Logged in Userを選択

動かしてみる！

設定は意外と簡単でしたね。

それでは、いくつか写真を登録して、動かしてみます。

写真の右上に♡マークがあります。

「いいね」してみましょう！

「いいね」できました！

「いいね」情報はユーザプロパティに持っているので、

一度ログアウトしても「いいね」はクリアされません。

まとめ

「いいね」は意外と簡単に設定ができました！

プライベートなSNSなど活用できそうです。

ぜひぜひ、使ってみてくださいね。

最後までご覧いただき、ありがとうございました。

♥･*:.｡ ｡.:*･ﾟ♡･*:.｡ ｡.:*･ﾟ♥

▽ NoCodeアプリ Adalo

www.adalo.com