フィールドの値に応じて、フィールドの文字色や背景色などの書式を適用するプラグインです。
この記事では、サンプルとして公開している レコード一覧で条件書式を設定する のJavaScriptプログラムをプラグインファイルにする手順を紹介します。

• サンプルプラグインに関するお問い合わせは、APIサポート窓口へのお問い合わせの対象外です。
• kintoneプラグインは、スタンダードコース以上で利用できます。

• モバイル用のブラウザーおよびkintoneモバイルには対応していません。
• レコード一覧の表示形式が「表形式」の一覧のみ対応しています。
• 設定した条件を複数満たす場合には、背景色を除いて下の条件行の書式が適用されます。 「文字条件書式」項目と「日付条件書式」項目の条件をどちらも満たす場合、「日付条件書式」の書式が優先されます。
  背景色については、上の行に設定があり、下の行に設定がない場合は、上の行の設定が適用されます。

レコード一覧画面で、フィールドの値によって文字色、背景色、文字のサイズなど書式が変わります。

レコード詳細画面でも、条件に応じたフィールドの書式が適用されます。

プラグイン化の手順の詳細は kintoneプラグイン開発手順 を参照してください。

GitHub にアクセスしてフォルダーごとダウンロードしてください。
「examples/conditionformat2」が、このプラグインのソースコード一式です。

ファイルの構成

「examples/conditionformat2」配下のファイル構成は次のとおりです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

examples/conditionformat2
├── README.md
├── css
│   ├── 51-modern-default.css
│   └── config.css
├── html
│   └── config.html
├── image
│   └── icon.png
├── js
│   ├── config.js
│   └── desktop.js
├── manifest.json
└── thirdparties
    ├── jqColorPicker.min.js
    ├── jquery.min.js
    └── jsrender.min.js

plugin-packer の手順を参考にパッケージングします。

パッケージングしたサンプル

このプラグインはプラグイン開発のためのサンプルで、サポート対象外です。
ご理解の上、ダウンロードしてください。

SAMPLE_conditionformat2_plugin_v3.2.7.zip

kintoneシステム管理画面で、パッケージングしたファイル（zipファイル）を読み込みます。
ファイルからプラグインを読み込む

1. アプリを追加します。
2. 必要に応じて、アプリにフィールドを追加します。

1. アプリの設定画面を開き、プラグインを追加します。
   アプリにプラグインを追加する

2. プラグインの設定画面を開き、項目を設定します。

   

   文字や数値で条件を設定する場合は「文字条件書式」項目、日付で条件を設定する場合は「日付条件書式」項目で設定します。

   項目名	必須	説明
   書式条件フィールド	必須	条件を比較するフィールド 「文字条件書式」項目 文字列（1行） 数値 計算 ラジオボタン ドロップダウン レコード番号 文字列（複数行） チェックボックス 複数選択 ステータス（レコード一覧画面のみ） 日付 日時 作成日時 更新日時 「日付条件書式」項目 日付 日時 作成日時 更新日時 チェックボックスと複数選択では、項目のうちひとつでも条件を満たすと書式が変更されます。
   条件式	必須	比較条件式 「文字条件書式」項目 条件値を含む 条件値を含まない =（等しい） ≠（等しくない） ≦（以下） <（より小さい） ≧（以上） >（より大きい） 「日付条件書式」項目 =（等しい） ≠（等しくない） ≦（以前） <（より前） ≧（以後） >（より後）
   条件値	必須	「書式条件フィールド」の値と比較する値 「文字条件書式」項目 「書式条件フィールド」と「書式変更フィールド」の値がどちらも半角数字の場合、数値データとして条件比較を行います。 「書式条件フィールド」で選択したフィールドが以下に当てはまる場合、必ず入力してください。 日付 日時 作成日時 更新日時 日付条件書式 今日からカウントする日付を整数で入力し、「前・後」をドロップダウンで選択します。 今日の日付に設定する場合は0 （ゼロ） を入力します。
   書式変更フィールド	必須	書式を変更するフィールド 「書式条件フィールド」と同じフィールドの種類をフィールドを選択できます。
   文字色	省略可	「書式変更フィールド」の文字色に設定するカラーコード 色を選択するUIを使って色を選択することも可能です。
   背景色	省略可	「書式変更フィールド」の背景色に設定するカラーコード 背景色を変更しない場合は「#」を入力します。 色を選択するUIを使って色を選択することも可能です。
   文字サイズ	省略可	「書式変更フィールド」に設定する文字の大きさ 変更なし 小さい やや小さい やや大きい 大きい
   文字装飾	省略可	「書式変更フィールド」に設定する文字の装飾 変更なし 太字 下線 打ち消し線

   条件は【+】【-】で条件の行を追加または削除できます。
   必須項目が設定されていない行は、保存時に削除されます。

3. 【保存】をクリックします。

4. 「アプリの設定」画面で、【設定完了】をクリックします。

• 2016年2月26日v2.0を公開
• 2016年v2.1.0を公開
  • 背景色が指定できるようになりました。
• 2016年6月v2.1.1を公開
  • アイコンと名称を変更しました。
  • ゲストスペース対応およびステータス選択時の不具合を修正しました。
• 2016年11月8日v2.1を公開
  • 「条件値」項目に空文字が入力できるように修正しました。
  • 数値を判断するロジックを修正しました。
• 2016年12月12日v2.1を公開
  • プロセス管理を有効化していないアプリで「書式条件フィールド」、「書式変更フィールド」に「ステータス」を選択した際にエラーが出る不具合を修正しました。
  • レコードが0件の一覧を開いたときにエラーが出る不具合を修正しました。
• 2017年3月31日v3.0を公開
  • 設定項目に行の追加/削除ボタンを追加しました。
  • 設定項目のローカライズ対応（英語、中文）を実施しました。
  • 設定に太字、打消し線、下線を追加しました。
  • カラーピッカー対応（Firefox, Chromeのみで利用可）
  • 日付条件書式の条件値の設定方法を変更しました。
  • 設定画面でのプロセス管理の「ステータス」項目の設定値の名称を「ステータス（プロセス管理）」に変更しました。
  • プロセス管理が有効でない場合、「ステータス（プロセス管理）」項目を選択できない処理に変更しました。
  • 一覧画面で背景色変更時にborderの枠線を追加しました。
  • その他CSS・ロジック変更等軽微な修正を実施しました。
• 2017年6月29日v3.1を公開
  • 文字条件書式「書式条件フィールド」の対象項目として、日付、日時、作成日時、更新日時フィールドを追加しました。
  • 日付条件書式「書式変更フィールド」の対象項目として、「ステータス（プロセス管理）」を追加しました。
  • 書式変更フィールドでチェックボックス、複数選択フィールドを選択した場合、条件未設定で動作するよう修正しました。
  • 日付条件書式の条件値が未入力の場合エラーを表示するようにしました。
  • CSSファイルを51-modern-default.cssに差し替えました。
  • 英語のみ、設定画面の一部文言を変更しました。
  • その他ロジック変更等軽微な修正を実施しました。
• 2017年8月2日v3.1を公開
  • v2.1.3以前からv3.1.1にアップデートした際の互換性対応を追加しました。
    次のように修正しています。
    • v3.1.1でプラグインの設定画面を開いた際にv2.1.3以前で設定した初期値が設定される。
    • v2.1.3以前で設定された設定のままでも条件書式が適用される。
  • その他軽微な修正を実施しました。
• 2018年7月20日v3.2を公開
  • 文字色と背景色の設定で利用するカラーピッカーの種類を変更し、Chrome、Firefox以外でも動作するように変更しました。
  • 設定画面の一部文言変更（英語版のみ）
• 2018年10月11日v3.2を公開
  • 文字条件書式「書式条件フィールド」に日付フィールドを設定したとき、レコード内の日付フィールドが値を持たない場合にそれ以降の条件書式が適用されない不具合を修正しました。
• 2018年10月17日v3.2.2を公開
  • プラグインの説明文（中国語のみ）を修正しました。
• 2019年5月10日v3.2.3を公開
  • 一覧画面で値を保存後も条件書式が適用されるように変更しました。
• 2021年8月24日v3.2.4を公開
  • 使用している外部ライブラリーのファイルをプラグイン内にバンドル化しました。
• 2022年9月6日v3.2を公開
  • JavaScriptソースコードをES6以降の記法に書き換えました。
  • プラグイン名や説明らから「新デザイン版」の表記を削除しました。
• 2023年6月22日v3.2.6を公開
  • 利用しているOSSのMoment.jsをLuxonに変更しました。
• 2023年11月9日v3.2.7を公開
  • プラグインのhomepage_urlを修正しました。

プラグインをv2.1.3からアップデートする場合、プラグインの設定画面で設定を再保存してください。

このプラグインで利用しているOSSのライセンスは次のとおりです。

• Luxon
  • Author: JS Foundation and other contributors
  • Lisense: MIT License
• jQuery
  • Author: jQuery Foundation, Inc.
  • License: MIT License
• JsRender
  • Author: Boris Moore
  • License: MIT License
• tinyColorPicker and colors
  • Author: Peter Dematté
  • License: MIT License
• color-paint-brush in config.html @fontawesome
  • Author: Dave Gandy
  • Lisense: CC BY 4.0 License
• 51-modern-default
  • Author: Cybozu, Inc.
  • License: MIT License