ノーコードツール「Click」：上限のあるカウントを作る方法
はじめに
このページではノーコードツール「Click」のTipsを紹介しています。
ボタンを押すとカウントアップする、またはカウントダウンする機能は簡単ですが、1～3までカウントアップしたら次はまた1に戻るような、上限のあるカウントを作ります。
①データベースを用意する
今回は、データベースの Users テーブルに count という名前の数値項目を作って、ボタンをクリックするとカウントアップするアクションを作ります。また count が 3 の時にボタンをクリックすると 1 に戻るようにします。
②テキストとボタンを用意する
ページに count を表示するテキストとカウントアップするボタンを用意します。
テキストはキャンバス左側のエレメントメニューにある「ベーシック」から選んでページに置きます。
ボタンは同じく エレメントメニューにある「アクション」 から選んでページに置きます。
③テキストを設定する
テキストとボタンを置いたら、テキストに count を表示するように設定します。
キャンバス右側の メニューにある「エレメント」タブの「テキスト」 を設定します。
Users テーブルの count の値を表示するには 「変数を追加」 をクリックして、 「Logged In User」→「count」 と選びます。
「Logged In User」 とは、アプリにログインしているユーザ、つまりアプリを操作している人のことです。
設定するとページに置いたテキストに「count」と表示されます。
これでアプリを動かした時には Users テーブルの count の値が表示されます。
④ボタンのアクションを設定する
次に、ボタンをクリックしたらカウントアップするように、アクションを設定します。
ただし count が 3 の時にボタンをクリックしたら 1 に戻るようにします。
キャンバス右側のメニューにある「アクション」タブから「アクションを追加する」をクリックして、 「更新」→「Logged In User」 を選びます。
アクションに 「User更新」 が追加されます。
「User更新」 をクリックして開くと Users テーブルの項目が表示されます。
今回は一番下にある count をカウントアップするので count + 1 を設定します。
単に「+1」とだけ設定してもカウントアップされないので、まずは count の値を表示します。
count の下にある 「変数を追加」 をクリックして、 「Logged In User」→「count」 と選びます。
count の欄に表示されたら、その後ろに「+1」をキーボードで追加します。
これでカウントアップするようになりましたが count が 3 になってもカウントアップされ続けてしまうので、「countが3以下の場合」という条件を追加します。
count の下に 「常に動作」 と表示されているドロップダウンがあるので 「条件により動作」 に変更します。
条件を設定できるようになるので、 「Logged In User」→「count」が「3」「以下」 となるように設定します。
今度は count が 3 の時にボタンをクリックしたら 1 に戻るように設定します。
先ほど追加した 「User更新」 とは別にもう1つ 「User更新」 のアクションを追加します。
count を 1 に設定して 「条件により動作」 を 「Logged In User」→「count」が「3」「より大きい」 に設定します。
⑤動かしてみる
ここまでできたらプレビューで、ちゃんと動くか確認しましょう。
🎉完成！
これで「上限のあるカウント」が完成しました。
カウントにアイコンを紐付けて表示・非表示を切り替えて、信号機みたいなこともできます。
Discussion