今回は簡単にスマホアプリを作成できるノーコードツール「adalo」の小ネタを紹介します。紹介するのは・・・言葉よりも画面でみていただいた方がわかりやすいと思いますので画面で紹介です。
adaloはこちら：https://www.adalo.com/
何をやるのか？
野球の試合を記録するアプリ（正確にはピッチャーが何球投げたかを数えるアプリ）にて、ピッチャーが交代する際に使用する機能なのですが、簡単に言いますと最初は画面上には「投手交代」というボタンしかなくて、画面上の「投手交代」を押したら、控え投手の一覧が表示されるというものです。実際のアプリで見てみると・・・
①これは通常使用する投球数を記録する画面です。ここで「タイム」を押します
②「広島カープの投手交代」を押します
③リリーフ投手が表示されます
どうやって？
Adaloには、画面に配置した部品を条件によって表示非表示を決めることができます。また、画面でユーザーが何かしらのアクション（ボタンを押すとか）を起こしたときに画面上の入力項目に値をセットすることができます。この２つを組み合わせて実現します。
実際の設定画面
今回使用するコンポーネントは①投手交代のラベル項目、②制御用のテキスト項目、③控え投手を表示するリスト項目の３つとなります。※制御用テキスト項目はユーザーには表示されません
処理方法
①の投手交代のラベル が押されたときに、②の制御用テキスト項目に「1」を設定します。③のリストには②の値が「1」の時だけ表示するというルールにしておけばOKです。
具体的な設定方法
①ラベル項目への設定
ラベル項目の「Action」の設定を行います。下図のとおりClickアクションにて”Change Input Value”を選択し、input=input、Value=1と設定します。
②制御用テキスト項目の設定
こちらは特に制御に関する設定は必要ないのですが、ユーザーには見せる必要がない項目ですので、”常に見えない設定”を行います。
まずは、項目名の右側の点々をクリックして「Change Visibility」を選択し、「Sometimes Visible」(=条件に一致した時だけ表示する)を選択します。
次に条件を指定するのですが、常に見せないという条件にしたいのでここはみなさんの作るアプリの項目名を選択して、絶対に満たさない条件をセットしてください。
例えば私のアプリの例で行くと、コレクションにある「イニング」という項目には必ず１以上の数字が入っていますので、条件を「イニング＝０」と設定しています。
③控え投手を表示するリスト項目の設定
こちらは「② 制御用テキスト項目の設定 」でも行った、 「Sometimes Visible」(=条件に一致した時だけ表示する)機能を使用します。
このリストの場合は、①の投手交代ラベルを押したとき、つまり②の制御用テキスト項目の値が１の時のみ表示とすればOKですので以下の画像のように設定します。
まとめ
以上のように簡単な仕組みで、ユーザーが画面を操作したのをきっかけにリストの表示／非表示を切り替えてインタラクティブな画面にみせることができます。
是非お楽しみください。
その他adalo記事→ https://kenta89.com/?p=365
最後にこの小技を利用するきっかけとなった「野球の試合で投球数を数えるだけのアプリ」です。※ただしこの動画の段階では今回の制御は入れていないので控え投手は最初から表示されちゃいます。あしからず。。。