本記事はノーコードアプリ開発について全く知らなかった管理人が独学で勉強し、ここ大事!と感じた部分を記事にまとめています。
本ブログでは新UI画面で内容をまとめています。
新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)
まずはじめに
- テーブルViewで入力値を強調させる方法が知りたい人
- ワンランク上のカラム設定に挑戦したい人
- カラフルなテーブルViewの作成方法
- ifs()関数の基本と&を用いた構文の作り方
今回の記事内容は中級者以上の内容です。
別に知らなくてもアプリ開発には全く影響ありません笑
でも、実装してあげると「すげーっ!」って言われなくもないようなTIPSです。
視覚的にユーザーに訴えることが出来る設定なので、見栄えにこだわる人はぜひ参考に。
それでは勉強していきましょう(^^)
データの下準備
今回用いたデータです。
検証テーブルに名前、性別、年齢、血液型の4つのカラムを用意しました(^^)
それでは早速取り掛かってみましょう!
カラム値強調の方法
今回用いる方法は、以下のサイトを使用します。
- 赤の部分は幅と高さ(100×50)
- 青の部分は背景色(3d4070)
- 緑の部分はテキスト文字(今回の場合は”test”)
ただしこのままの表示イメージでは、決まったイメージ写真しか表示されません・・
そこでifs()関数を用いて汎用性を高めていきます(^^)
カラム値の値を動的に変える
もう一度URLの構成を見てみましょう。
“https://placehold.jp/3d4070/ffffff/100×50.png?text=test“
- 赤の部分は幅と高さ(100×50)
- 青の部分は背景色(3d4070)
- 緑の部分はテキスト文字(今回の場合はtest)
- 黄色下線の部分は文字色(デフォルトはffffffで白色)
次に変更したいカラム値の部分に手を加えてみましょう(^^)
“https://placehold.jp/3d4070/ffffff/100×50.png?text=”&[血液型]
このようにVurtial columnの値を変更すると・・
appsheetでは ” と & を組み合わせて文字列を連結させることが可能です(^^)
文字列をつなげる方法は知っておきましょう
View nameを作成する関数について学べます(^^)
【コピペでOK】データ件数を動的にカウントする方法
カラム値によって背景色を動的に変更する
最後にカラムの値によって背景色を動的に変更し、UIを向上させるように修正を加えていきます(^^)
ifs()関数の特性を活かして、複数の場合分けを考えてみましょう。
“https://placehold.jp/3d4070/ffffff/100×50.png?text=”&[血液型]
背景色を表しているのは青字の部分なので、ここにifs()関数を使用します。
ifs()関数は汎用性の高い関数です
条件分岐で返す値を変えたいときに使用する関数です(^^)
【永久保存版】appsheetで覚えておくべきConditional関数
記事の内容を真似して実践している場合は、以下の構文をコピーしてご利用ください(^^)
“https://placehold.jp/”&ifs([血液型]=A,”3d4070″,[血液型]=B,”3fd98a”,[血液型]=O,”f5f92f”,[血液型]=AB,”f96cb7″)&”/ffffff/100×50.png?text=”&[血液型]
構文の解説どおり、血液型の値が変わるとカラムの背景にセットした色が付いています。
まとめ
以上、カラム値を強調させる方法についての記事でした。
アプリを作成する上で一番重要なのは、ユーザーの視点に立った入力しやすい、分かりやすいアプリであることだと思います。
こういう小技の引き出しがたくさんあるとそれだけ選択肢が広がるので、これからもどんどんと知識を蓄えていきましょう(^^)
記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。
わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです!
勉強お疲れさまでした(^^)
他にも役立つTIPSをまとめています
入力画面に画像を挿入したり、タブで画面を分ける方法が学べます(^^)
【意外と便利?】データタイプShowで出来ること
データ入力の制限をかけることが可能です(^^)
【これで解決!】半角英数字のみ入力を許す方法