【効果あり】カラム値を強調させる方法

本ブログでは新UI画面で内容をまとめています。

新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)

まずはじめに

今回の記事内容は中級者以上の内容です。

別に知らなくてもアプリ開発には全く影響ありません笑

でも、実装してあげると「すげーっ！」って言われなくもないような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では ” と ＆ を組み合わせて文字列を連結させることが可能です(^^)

文字列をつなげる方法は知っておきましょう

カラム値によって背景色を動的に変更する

最後にカラムの値によって背景色を動的に変更し、UIを向上させるように修正を加えていきます(^^)

ifs()関数の特性を活かして、複数の場合分けを考えてみましょう。

“https://placehold.jp/3d4070/ffffff/100×50.png?text=”&[血液型]

背景色を表しているのは青字の部分なので、ここにifs()関数を使用します。

ifs()関数は汎用性の高い関数です

記事の内容を真似して実践している場合は、以下の構文をコピーしてご利用ください(^^)

“https://placehold.jp/”&ifs([血液型]=A,”3d4070″,[血液型]=B,”3fd98a”,[血液型]=O,”f5f92f”,[血液型]=AB,”f96cb7″)&”/ffffff/100×50.png?text=”&[血液型]

結果の確認

構文の解説どおり、血液型の値が変わるとカラムの背景にセットした色が付いています。

まとめ

以上、カラム値を強調させる方法についての記事でした。

アプリを作成する上で一番重要なのは、ユーザーの視点に立った入力しやすい、分かりやすいアプリであることだと思います。

こういう小技の引き出しがたくさんあるとそれだけ選択肢が広がるので、これからもどんどんと知識を蓄えていきましょう(^^)

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！

勉強お疲れさまでした(^^)

他にも役立つTIPSをまとめています