ノーコードツール「Click」：お知らせポップアップを作る方法
はじめに
このページではノーコードツール「Click」のTipsを紹介しています。
今回はアプリでよくある 「お知らせポップアップ」 を作る方法を解説します。
絶対に見てほしいお知らせを表示するのに便利な機能です。
↑↑↑完成イメージ↑↑↑
では解説していきます。
①データベースに「既読」項目を用意する
お知らせがずっと表示されていると邪魔になるので、見たら消すようにするために、データベースの User テーブルに 既読 という名前のTrue/False項目を用意します。初期値がFalseでTrueになったら「既読」として表示しないようにします。
②トグルを用意する
ユーザがログインした後に表示するページにトグルと、お知らせ表示用のシェイプを用意します。
画面左側パネルの 「エレメント」にある「アクション」からトグル を選んでページに置きます。
トグルをページに置いたら、初期値を 「Logged In User」→「既読」 に設定します。これで①で用意した 既読 と紐付きました。
③トグルのアクションを設定する
次にトグルのアクションを追加して、①で用意した 既読 のTrue/Falseを切り替えられるように設定します。
ページ上のトグルを選んで、画面右側パネルの 「アクティブ時のアクション」にある「アクションを追加する」 をクリックして、アクションには 「更新」→「Logged In User」 に設定します。
アクションに「User更新」が追加されるので、下の方にある 「既読」を「True」 に設定します。
同じように 「非アクティブ時のアクション」 も設定します。こちらは 「既読」を「False」 に設定します。
これでトグルをクリックする度に、①で用意した 既読 のTrue/Falseが切り替わるようになりました。
④シェイプの表示設定をする
今度はシェイプを①で用意した 既読 のTrue/Falseによって表示/非表示するように設定します。
画面右側パネルの 「表示設定」を「条件により表示」 に変更します。その下に表示された条件を 「Logged In User」→「既読」 に設定します。
さらに「いいえ」を設定して、 既読 がFalse（いいえ）の時に表示されて、 既読 がTrueの時は非表示になるようにします。
⑤動かしてみる1
ここまででお知らせのシェイプがちゃんと消えるか確認してみましょう。
プレビューしてログインしたら下の画面になります。
トグルをクリックするとシェイプが非表示になるはずです。
この時、①で用意した 既読 はTrueに更新されています。
トグルをクリックする度にシェイプが表示/非表示を繰り返します。（ちゃんと動かない場合は、これまでの設定を見直してください。）
⑥お知らせ内容を用意する
シェイプの設定ができたので、シェイプの上にお知らせ内容を用意します。
今回はテキストと画像を置いてみました。
また、お知らせを消すためのアイコンを用意します。
画面左側パネルの 「エレメント」にある「ベーシック」からアイコン を選んでページに置きます。
このアイコンをクリックしたら、①で用意した 既読 をTrueに更新するアクションを設定します。
アイコンを選んで、画面右側パネルの 「アクション」にある「アクションを追加する」 をクリックして、アクションには 「更新」→「Logged In User」 に設定します。
アクションに「User更新」が追加されるので、下の方にある 「既読」を「True」 に設定します。
⑦動かしてみる2
ここまででお知らせがちゃんと消えるか確認してみましょう。
プレビューしてログインしたら下の画面になります。
アイコンをクリックするとお知らせが非表示になるはずですが…
なぜかシェイプだけが消えてしまいました。なぜかというとシェイプの上に乗せたエレメントは、シェイプとは別の動作をするので、シェイプと一緒には消えてくれないのです。ではどうするか…
⑧グループ化する
答えはシェイプに乗っているお知らせ内容やアイコンをシェイプと 「グループ化」 します。
シェイプとアイコンとその他のお知らせ内容エレメントを全部選択します。（キーボードのShiftキーを押しながらエレメントをクリックするとまとめて選択できます。）全部選択したら画面右側パネルに 「グループ化」 が表示されるのでクリックします。これでエレメントがグループ化されました。
このグループ化したものもエレメントと同じように表示設定やアクションが設定できるので、シェイプに設定したものと同じ表示設定をします。
⑨動かしてみる3
これでお知らせがちゃんと消えるようになったはずです。
②で説明したようにトグルはここで削除しておきます。
プレビューでちゃんと動作するか確認してみましょう。
アイコンをクリックしてお知らせが非表示になりました。
こっそりと「完成！」の文字を裏に置いておきました。
お知らせが消えて見えるようになりましたね。
🎉完成！
これで 「お知らせのポップアップ」 が完成しました。
まとめ
本記事では、ノーコードツール「Click」でお知らせポップアップを作る方法を解説しました。
ポイント
- データベースの既読項目で表示設定を制御する。
- グループ化して全体で表示設定をする。
今回はお知らせはひとつだけでしたが、お知らせ自体をテーブルに登録して表示させると、さらに実用的になります。（今後のテーマでも考えてみます。）
ぜひ活用してみてください。
Discussion