トグル
いいね機能などで使われ、アクティブ状態と非アクティブ状態それぞれに動作を設定することができます。トグルを使用する際は、 タイプの項目や、テーブル間のリレーションを予め設定する必要があります。
▼目次
トグルエレメントを用いた〔いいね機能〕の実装 サンプルアプリ（クローン可能）データベースの設定投稿内容を保存するためのテーブルと項目を作成Usersテーブルとリレーションの設定いいね機能で使用するリレーション投の設定キャンバスの設定カスタムエレメント（リスト）の設定トグルエレメントの設定トグルの初期値を設定アクティブ/非アクティブ 時のアイコンを設定ページの自動更新アクションの設定「アクティブ/非アクティブ 時の動作」を設定する動作確認を行う
トグルエレメントを用いた〔いいね機能〕の実装
サンプルアプリ（クローン可能）
‣
データベースの設定
投稿内容を保存するためのテーブルと項目を作成
データベースに移動し、投稿内容を保存するためのテーブルと項目を作成します。〔テーブルを追加〕から〔投稿テーブル〕を作成します」
〔Name〕項目の名前を〔投稿内容〕に変更する。
Usersテーブルとリレーションの設定
投稿者が誰なのか分かるように〔Users〕テーブルとリレーションを組みます。投稿テーブルの〔項目の追加〕から〔データの紐付け > Users〕をクリックし、テーブル投稿にテーブルをUsersを紐づけるとポップアップが表示されますので、項目名を〔投稿者〕とつけてください。
投稿は1つのUsersに属しています。
Usersは複数の投稿を持っています。
を選択して下さい。
いいね機能で使用するリレーション投の設定
投稿テーブルの〔項目の追加〕から〔データの紐付け > Users〕をクリックし、項目名に〔いいね〕と記入してください。
〔投稿〕と〔Users〕の関係性は一番右に表示される選択肢〔投稿は複数のUsersを持っています。Userも複数の投稿を持っています。〕を選択してください。
Users テーブルに移動し〔レコード追加〕から確認用のユーザーデータを作成してください。
投稿テーブルに戻り、〔レコードの追加〕から投稿データを作成する。〔投稿者〕には先ほど作成したユーザーデータを選択してください。
キャンバスの設定
カスタムエレメント（リスト）の設定
キャンバス画面に戻り、〔アウトプット＞カスタム〕エレメントを配置してください。右側パネルから〔カスタム〕タブを開き、データベースの選択を〔投稿〕にしてください。
カスタムリスト内のシェイプを選択し、テキストが入りやすいように、広げてください。
〔Title〕と書かれているテキストエレメントを選択し、カスタムテキストの右パネルから〔変数を追加>Current 投稿 > 投稿者 > Username〕を選択してください。
〔Subtitle〕と書かれているテキストを選択し、カスタムテキストの右パネルから、〔変数を追加>Current 投稿 > 投稿内容〕を選択してください。
トグルエレメントの設定
〔トグル〕エレメントをカスタムエレメント（リスト）内に配置してください。
トグルの初期値を設定
トグルエレメントを選択した状態で、右パネルの〔Current 投稿 > いいね > includes Logged in User?〕を選択します。
これは『”投稿” の紐付け（いいね）に ”Logged in User” が紐づいている場合にアクティブと認識する』という設定です。
アクティブ/非アクティブ 時のアイコンを設定
アクティブ時はスイッチがオンの時、非アクティブ時はオフの時であり、どちらもハートのアイコンを設定してください。
右側パネル〔スタイル〕タブを開き、アイコンの色を変更する。〔アクティブ時の色〕を赤に変更する。
ページの自動更新
ページの左上テキストを選択し、右側パネル〔ページ〕タブを表示させてください。
必ず更新タブの自動更新をONにしてください。
アクションの設定
「アクティブ/非アクティブ 時の動作」を設定する
トグルエレメントを選択した状態で、〔アクション〕タブを開き〔+ アクションを追加する〕をクリックし、〔更新 > Current 投稿〕を選択する。
〔投稿更〕タブを開き、〔いいね〕のドロップダウンに〔Add > more… > Logged in User〕を選択する。
〔非アクティブ時の動作〕タブを開き〔+ アクションの追加〕をクリックし、〔更新 > Current 投稿〕を選択する。
〔投稿更新〕タブを開き、〔いいね〕ドロップダウンに〔Remove > more… > Logged in User〕を選択します。
※〔Add〕は追加、〔Remove〕は削除を意味します。
動作確認を行う
プレビュー画面を開き、動作確認を行ってください。
最終更新日：2025/02/12