ノーコードツール「Click」：状態によって変化するボタンを作る方法
はじめに
このページではノーコードツール「Click」のTipsを紹介しています。
Clickで、データベースの項目の値によって、見た目やアクションが変化するボタンを作ります。
例えば、SNSの「フォロー」ボタンはクリックすると「フォロー中」になって、見た目も変化します。
フォローしていない状態では「フォロー」ボタン、フォローしている状態では「フォロー中」ボタンに変化しています。
このように「ONの状態」と「OFFの状態」で変化するボタンを作ってみます。
でも、Clickではボタンの見た目やアクションは、動作途中で変えられないです。
ではどうするか？
「ONの状態」のボタンと「OFFの状態」のボタンを作って、表示したり非表示にしたりして実現します。
①データベースを用意する
今回は、データベースの Users テーブルに フラグ という名前のTrue/False項目を作って、この フラグ のON・OFFでボタンを変化させていきます。
②ボタンを用意する
ページにONボタンとOFFボタンを用意します。
ボタンはキャンバス左側の エレメントメニューにある「アクション」 から選んでページに置きます。
ボタンを置いたら、変化が判りやすいように色やアイコン、テキストも変えておきましょう。
③ボタンの表示設定をする
それぞれのボタンの表示設定をします。
表示設定はキャンバス右側の メニューにある「エレメント」 タブにあります。
「条件により表示」 を選んで 「Logged In User」→「フラグ」 と選びます。
ONボタンは「フラグがOFF」の時に表示したいので、フラグの条件は「いいえ」を選びます。
同じように、OFFボタンの表示設定を 「フラグがON」 の時に表示されるように「はい」を選びます。
これでフラグの状態によって、ONボタンとOFFボタンが切り替わるようになりました。
でも、これだけではフラグの値をテーブルから直接変えるしかないので、ONボタンをクリックしたらフラグがONに、OFFボタンをクリックしたらフラグがOFFになるように、アクションを設定します。
④アクションを設定する
まずは、ONボタンをクリックした時に フラグ がONになるように、アクションを設定します。
キャンバス右側の メニューにある「アクション」タブから「アクションを追加する」 をクリックして、 「更新」→「Logged In User」 を選びます。
アクションに 「User更新」 が追加されます。
「User更新」 をクリックして開くと Users テーブルの項目が表示されます。
今回は一番下にある フラグ を「ONの状態」にしたいので True に設定します。
同じように、OFFボタンもアクションを追加して Users テーブルの フラグ を False に設定します。
これで、OFFボタンをクリックしたら フラグ がOFFになります。
今回は、本当に フラグ がONやOFFになっているか見た目で判るように、フラグの状態を表示するトグルを追加しておきます。
トグルはキャンバス左側の エレメントメニューにある「アクション」 から選んでページに置きます。
トグルをページに置いたら、初期値を 「Logged In User」→「フラグ」 に設定します。
ONボタンとOFFボタンが違う位置にあるので、クリックするたびにマウスを動かさないといけないですし、なにより1つのボタンが変化しているように見えません。
ONボタンとOFFボタンを重ねて配置しましょう。
⑤動かしてみる
ここまでできたらプレビューで、ちゃんと動くか確認しましょう。
🎉完成！
これで「状態で変化するボタン」が完成しました。
最初に例として挙げた、SNSの「フォロー」ボタンの他にも「スタート・ストップ」ボタンなどにも使えますし、片方の状態はアクションを設定しないことで「ある条件を満たさないとクリックできないボタン」にすることも可能です。（例えば、アンケートフォームで「同意する」にチェックしないとクリックできないボタン）
まとめ
本記事では、ノーコードツール「Click」で状態によって変化するボタンを作る方法を解説しました。
ポイント
- データベースに状態を保持する項目を用意する。
- 「押せるボタン」と「押せないボタン」を用意して、状態によって表示/非表示を切り替える。
- ボタンをクリックする度に状態を切り替える。
この方法を使えば、全て入力しないと押せないボタンや、1度しか押せないボタンなども作ることが可能です。
また、ボタンだけでなく、アイコンや画像でも同じことが可能なので、使い方の幅が広がります。
ぜひ活用してみてください。
Discussion