リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript
（著者：kintone エバンジェリスト 村濱 一樹）
題材: レコード一覧とレコード詳細画面で条件書式を設定する
今回は レコード一覧とレコード詳細画面で条件書式を設定する というサンプルプログラムについて学んでいきましょう。
kintone アプリは、kintone アプリストア にある「総務への依頼受付」を使っています。
データの条件に応じて書式を変更したいということはよくあるケースですし、for文とif文の両方を使う必要があるので、今までの腕試しも兼ねてみてみましょう。
プログラム
プログラムは下記です。少しずつピックアップして、内容を解説していきます。
全体の構成
今回のサンプルプログラムは大きく2つのパーツに分けて説明することができます。
一つ目は「レコード一覧画面の表示後イベント」、二つ目は「レコード詳細画面の表示後イベント」です。
それぞれのイベントにステータスごとに書式を変更する操作と、特定の文字と一致する時書式を変更する操作を設定しています。
- レコード一覧画面の表示後イベント app.record.index.show
「レコード一覧画面」が表示されたときに、以下の処理が実行されます。
- レコード詳細画面の表示後イベント app.record.detail.show
「レコード詳細画面」が表示されたときに、以下の処理が実行されます。
レコード一覧画面の表示後イベントのコード
レコード一覧画面の表示後イベントのコードは4つの工程に分けて考えることができます。
- 変数宣言と初期化
- for文を使ってレコード数の分繰り返し処理
- switch文を使って「ステータス」の値に応じて文字の色を変更
- if文を使って「Urgent」の値に応じて文字の色を変更
1.変数宣言と初期化
コードの最初の方で、先にいくつか変数の宣言がされています。
- 背景色の指定
これは背景色を設定しています。 '#fff8dc' というのはカラーコードと呼ばれるもので、16進数(0-9, a-f)で #000000 〜 #ffffff まであります。
カラーコードは必要に応じて好きな値を指定できます。 （カラーコードとは）
- 書式を変更したい部分のElement(要素)の取得
この行は、書式変更したい部分の要素(Element)を取得しています。
kintone.app.getFieldElements(フィールドコード) とすることで要素を取得して、この後のfor文で書式を変更していくような構成になっています。(リファレンス)
2.for文を使ってレコード数の分繰り返し処理
ここでは、すべてのレコードの書式を変更するために、繰り返し処理を使っています。
- for文の繰り返し条件
このfor文は「 elStatus 変数の配列の長さだけ繰り返す」という条件になっていますね。
elStatus 変数には先程取得した要素の配列がはいっているので、画面に表示されているレコード分だけ処理する、ということと同じになります。
3.switch文を使って「ステータス」の値に応じて文字の色を変更
switch文というものを使って、条件分岐処理をしています。
条件分岐は、if文でもできるのですが、条件分岐が多いとswitch文のほうが見やすかったり整理しやすい場合もあるので、状況に応じて使い分けることができます。
下記では、 record['ステータス'].value が'未着手'のときは文字色を「赤」に、'処理中'やそれ以外の場合は文字色「青」にします。
- switch文について
switch文は下記のように書きます。条件分岐が多くなってくるとswitchのほうが見通しがよくなることが多いです。
4.if文を使って「Urgent」の値に応じて文字の色を変更
「Urgent の値に応じて文字の色を変更する」部分の補足ですが、
チェックボックスフィールドの「Urgent」の値の中身は配列であるため、
「Urgent」の値を指定するときは、[0]のように、インデックス番号を指定して配列の要素を取得します（インデックス番号は0始まりです）。
チェックボックスフィールドのフィールド形式や、配列の扱い方の詳細については、リンク先の記事をご参照ください。
レコード詳細画面の表示後イベントのコード
「Urgent」の値が '至急' のときに、太い赤字にします。
一覧画面のときと比べると、for文などで繰り返す必要もなく、サンプルでは「Urgent」の表示のみ変更となってますので、ここはシンプルですね。
まとめ
条件書式のプログラムについて学びました。今回のようにフィールドの要素の取得の方法と繰り返し/条件分岐の処理を使えば自由に色などを変更できるようになります。
次回以降もいくつかのサンプルコードを細かくみていきましょう。
この記事は、2022年6月版 kintoneで確認したものになります。
<< はじめようJavaScript第13回 プログラムを読む（回答の条件によって別フィールドの表示/非表示を切り替える） | はじめようJavaScript第15回 kintone JavaScriptカスタマイズのプログラム実例を学ぼう③（経過年数を表示する）>>
１３回以降ですが、サンプルとして利用しているアプリがわかると助かります。
吉田勉 さま
お世話になっております。
cybozu developer network 運営事務局です。
この記事では、 レコード一覧とレコード詳細画面で条件書式を設定する という記事のサンプルコードを説明しています。
元記事に、「総務への依頼受付」アプリを利用していることを記載しております。
記事をまたいで見る必要があること、失礼いたしました。
コチラの記事にも記載すること、検討させていただきます。
この度はフィードバックくださり有難うございました。
ありがとうございます。
リンクを見逃していたようです。
参考にさせていただきます。
いつもお世話になっております。
非常に基本的な質問となり申し訳ありません。
「4.if文を使って「Urgent」の値に応じて文字の色を変更」での値の指定の仕方について質問させてください。
record['Urgent']['value'][0] という指定の仕方ですが、
[0]となっているのはなぜでしょうか？
record['Urgent']の['value'] のみとしたところ値の指定ができなかったのですが、なぜでしょうか？
ご教授いただけますと幸いです。
何卒よろしくお願いいたします。
岡 有希恵 様
お世話になっております。cybozu developer network 運営でございます。
こちらのコメント欄は記事内容のフィードバック目的となっているため、
技術的なご質問はcybozu developer コミュニティをご活用ください。
よろしくお願い致します。
Haruka 様
お世話になっております。cybozu developer network 運営です。
恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問はcybozu developer コミュニティをご活用ください。
ご質問新規投稿の際「良い質問をするためのガイド」というものが表示されますので、
それに沿ってエラーの詳細などを記載いただくと回答がつきやすくなると存じます。
よろしくお願い致します。
一番上のレコードしか反映しないのですが、そういうものでしょうか？
JUST様
お世話になっております。cybozu developer network 運営でございます。
「総務への依頼受付」アプリを使用して上記のコードのとおりカスタマイズしていただくと、一覧のすべての行で有効になります。
「総務への依頼受付」アプリもフィールドなども変更しておらず、コードも提示のものをそのまま利用しているのにもかかわらず
一部のレコードしか反映ということでしたら、画像添付いただくなど詳細をお教えいただければとおもいます。
もしも一部カスタマイズしているなどあれば、
恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問はcybozu developer コミュニティをご活用ください。
よろしくお願い致します。
すみません、自己解決済です。
ありがとうございました。