概要

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

注意事項

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

制限事項

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

プラグインの機能

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

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

プラグインのパッケージング

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

STEP1：ソースコードのダウンロード

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

STEP2：パッケージング

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

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

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

SAMPLE_conditionformat2_plugin_v3.2.6.zip

プラグインの設定

STEP1：プラグインの読み込み

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

STEP2：アプリの追加

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

STEP3：プラグインの追加と設定

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 に変更しました。

v2.1.3 からアップデートする場合

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

利用している OSS のライセンス情報

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

• Luxon - MIT License
• jQuery - MIT License
• JsRender - MIT License
• tinyColorPicker and colors - MIT License
• color-paint-brush in config.html
  @fontawesome - CC BY 4.0 License
• 51-modern-default - MIT License