アプリの一覧画面や詳細画面を見やすくするため、レコード一覧や詳細画面でフィールドの条件によってセルの背景色や文字色を変えたい時、ありますよね。
今回は、そんな時のカスタマイズをご紹介します！
アプリの確認
今回は例として、kintoneアプリストアにある総務への依頼受付を利用します。
追加したら「総務への受付依頼」アプリを確認してください。
変更は加えず、そのまま利用します。
やりたいこと
レコード一覧画面：
ステータスの背景色を変更する
ステータスが「未着手」の時は文字色を赤色にする
ステータスが「未着手」以外の時は文字色を青色にする
「至急」が表示されている時は文字色を赤色にし、文字を少し大きくして強調する
レコード詳細画面：
「至急」が表示されている時は文字色を赤色にし、文字を少し大きくして強調する
Customineの設定
Customineに「総務への受付依頼」アプリのカスタマイズを追加します。
まずは、レコード一覧画面を表示した時のカスタマイズを行います。
ステータスの背景色を変更する
やること
「フィールド背景色を変更する」を選択します。
対象となるフィールドは「ステータス」です。色にはお好みの色を指定してください。
例では赤：255、緑：248、青：220を指定しています。
条件
一覧画面が表示された時に背景色を変更したいので「一覧画面を表示した時」を選択します。
ステータスが「未着手」の時は文字色を赤色にする
やること
「フィールド文字色を変更する」を選択します。
対象となるフィールドは「ステータス」です。色にはお好みの色を指定してください。
例では赤：255、緑：0、青：0を指定しています。
条件
一覧画面が表示された時に背景色を変更したいので「一覧画面を表示した時」を選択します。
さらに、ステータスのフィールド値が「未着手」の時だけ文字色を変更したいので「フィールド値が特定の値ならば」を選択します。
フィールド値は「ステータス」を指定し、条件は「等しい」、比較値には「未着手」を指定します。
ステータスが「未着手」以外の時は文字色を青色にする
やること
「フィールド文字色を変更する」を選択します。
対象となるフィールドは「ステータス」です。色にはお好みの色を指定してください。
例では赤：0、緑：0、青：255を指定しています。
条件
一覧画面が表示された時に背景色を変更したいので「一覧画面を表示した時」を選択します。
さらに、ステータスのフィールド値が「未着手」以外の時だけ文字色を変更したいので「フィールド値が特定の値ならば」を選択します。
フィールド値は「ステータス」を指定し、条件は「等しくない」、比較値には「未着手」を指定します。
一覧画面で「至急」が表示されている時は文字色を赤色にする
やること
「フィールド文字色を変更する」を選択します。
対象となるフィールドは「至急」です。色にはお好みの色を指定してください。
例では赤：255、緑：0、青：0を指定しています。
条件
一覧画面が表示された時に文字色を変更したいので「一覧画面を表示した時」を選択します。
さらに、「至急」が表示されている時だけ文字色を変更したいので「フィールド値が特定の値ならば」を選択します。
フィールド値は「至急」を指定し、条件は「等しい」、比較値には「至急」を指定します。
一覧画面で「至急」が表示されている時は文字を少し大きくして強調する
やること
「フィールドの文字を拡大縮小する」を選択します。
対象となるフィールドは「至急」です。倍率はお好みでご指定ください。
例では「1.3」を指定しています。
条件
一覧画面が表示された時に文字色を変更したいので「一覧画面を表示した時」を選択します。
さらに、「至急」が表示されている時だけ文字色を変更したいので「フィールド値が特定の値ならば」を選択します。
これでレコード一覧画面の設定は完了です。
続いて、レコード詳細画面を表示した時のカスタマイズを行っていきます。
詳細画面で「至急」が表示されている時は文字を少し大きくして強調する
やること
「フィールド文字色を変更する」を選択します。
対象となるフィールドは「至急」です。色にはお好みの色を指定してください。
例では一覧画面と同様に、赤：255、緑：0、青：0を指定しています。
条件
詳細画面が表示された時に文字色を変更したいので「詳細画面を表示した時」を選択します。
さらに、「至急」が表示されている時だけ文字色を変更したいので「フィールド値が特定の値ならば」を選択します。
フィールド値は「至急」を指定し、条件は「等しい」、比較値には「至急」を指定します。
詳細画面で「至急」が表示されている時は文字を少し大きくして強調する
やること
「フィールドの文字を拡大縮小する」を選択します。
対象となるフィールドは「至急」です。倍率はお好みでご指定ください。
例では「1.3」を指定しています。
条件
アクション「詳細画面で「至急」が表示されている時は文字色を赤色にする」と同じ条件で文字を拡大したいので「他のアクションの実行が完了した時」を選択します。
アクションは「6」を指定します。
これで設定は完了です。
「kintoneアプリへ登録」し、動作を確認してみましょう！
「総務への受付依頼」アプリにレコードを登録し、一覧画面や詳細画面を表示すると、
背景色や文字色が変わっているのが確認できましたでしょうか？
まとめ
アプリを見やすく使いやすくするために、背景色や文字色を変えたい！というケースは多いと思います。
ぜひ色々試してみてくださいね。