カテゴリー内の他の記事

条件書式プラグイン

作成日2016年02月26日 05:01
更新日2022年09月29日 23:16

Index

注意事項
概要
プラグインを利用する
サンプルプラグイン
制限事項
利用している OSS のライセンス情報

注意事項

サンプルプラグインは、その動作を保証するものではありません。
サンプルプラグインの技術的なサポート等は行っていません。
本プラグイン内では、一部の処理にDOM操作を含んでいます。アップデートの影響をうける可能性がある実装となっており、参考にする際はご注意ください。
本プラグインをv2.1.3以前のプラグインからアップデートする場合、プラグインの設定画面より設定の再保存を行ってください。
kintoneプラグインはスタンダードコースでのみご利用いただけます。ライトコースではご利用いただけませんのでご注意ください。

概要

サンプルで公開している「レコード一覧で条件書式を設定する」のJavaScriptプログラムをプラグイン化させましたので紹介します。
kintoneアプリにこのプラグインを追加すると、レコード一覧、レコード詳細画面の表示時にフィールドの条件によって文字色、背景色、文字の大きさを変更することができます。

▼主要なアップデート情報

2017/03/31：設定項目に行の追加/削除ボタンを追加しました。その他追加機能は「更新履歴」より参照ください。

設定画面

設定画面（筆アイコンクリック時のカラーピッカー　※画像はChromeの場合）

レコード一覧画面

レコード詳細画面

プラグインを利用する

STEP1:アプリにプラグインを追加する

アプリに条件書式プラグインを追加します。プラグインの追加方法は、kintone ヘルプを参照してください。

STEP2:プラグインを設定する

アプリ管理画面の「設定」＞「プラグイン」を開き、条件書式プラグインの歯車マークをクリックします。

各項目を設定します。（太字は2017/03/31アップデートにより追加された項目です。）

項目名	必須	説明
書式条件フィールド	必須	条件を比較するフィールドを選択します。文字や数値の条件を比較する場合は「文字条件書式」項目、日付の条件を比較する場合は「日付条件書式」項目より設定可能です。下記のフィールドを選択することができます。＜文字条件書式＞文字列（1行）数値計算ラジオボタンドロップダウンレコード番号文字列（複数行）チェックボックス複数選択ステータス(プロセス管理)（※レコード一覧画面のみ反映）日付日時作成日時更新日時＜日付条件書式＞日付日時作成日時更新日時 ※チェックボックス、複数選択は項目のうち一つでも条件を満たすと書式が変更されます。
条件式	必須	比較条件式に次の値をドロップダウンから選択できます。対象フィールドの値が数字の場合、数字の大小で比較されます。＜文字条件書式＞条件値を含む条件値を含まない =(等しい) ≠(等しくない) ≦(以下) <(より小さい) ≧(以上) >(より大きい) ＜日付条件書式＞ =(等しい) ≠(等しくない) ≦(以前) <(より前) ≧(以後) >(より後)
条件値		書式条件フィールドの値と比較する値を入力します。＜文字条件書式＞どちらも半角数字の場合、数値データとして条件比較を行います。書式条件フィールドで選択したフィールドの種類が下記の場合、「未入力」を条件とすることはできません。日付日時作成日時更新日時＜日付条件書式＞今日からカウントする日付を整数で入力し、「前・後」をドロップダウンで選択します。今日の日付に設定する場合は 0 (ゼロ) を入力します。
書式変更フィールド	必須	書式を変更するフィールドを選択します。「書式条件フィールド」に記載されている全てのフィールドを選択できます。
文字色		書式変更フィールドの文字色に設定するカラーコードを入力します。筆のアイコンをクリックするとカラーピッカーが表示され、選択した色のカラーコードを同じ行の「文字色」に追加します。
背景色		書式変更フィールドの背景色に設定するカラーコードを入力します。背景色を変更しない場合は「#」を入力します。筆のアイコンをクリックするとカラーピッカーが表示され、選択した色のカラーコードを同じ行の「背景色」に追加します。
文字サイズ		書式変更フィールドに設定する文字の大きさを次のドロップダウンから選択できます。変更なし小さいやや小さいやや大きい大きい
文字装飾		書式変更フィールドに設定する文字の装飾を次のドロップダウンから選択できます。変更なし太字下線打ち消し線
「＋」ボタン		クリックした行の下に新しい行を追加します。
「ー」ボタン		クリックした行を削除します。

[保存]をクリックします。
※必須項目（書式条件フィールド、条件式、書式変更フィールド）が全て設定されていない行は無効な行と見なし、保存時に削除されます。
「アプリの設定」画面で[設定完了]をクリックすると、プラグインの設定がアプリに反映されます。

STEP3:プラグインを利用する

レコードを登録します。
レコード一覧画面及びレコード詳細画面にて設定内容に応じて対象フィールドの書式が変更されます。

サンプルプラグイン

GitHubにアクセスしてフォルダごとダウンロードしてください。そのフォルダ内の「examples/conditionformat2」に、今回のファイル群があります。
「conditionformat2」配下のファイル構成は次のとおりです。

conditionformat2/ 
       css/
        -51-modern-default.css
        -config.css
 html/ 
  -config.html
       image/
        -icon.png
       js/
        -config.js
        -desktop.js
       manifest.json

こちらの手順を参考にパッケージングします。

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

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

SAMPLE_conditionformat2_plugin_v3.2.5.zip

更新履歴

2016/02/26 v2.0を公開しました
2016/03/17 v2.1.0を公開しました：背景色を指定できるようになりました
2016/06/09 v2.1.1を公開しました：アイコンと名称を変更しました。ゲストスペース対応及びステータス選択時の不具合修正を行いました。
2016/11/08 v2.1.2を公開しました：「条件値」項目に空文字が入力できるように修正しました。数値を判断するロジックに修正を行いました。
2016/12/12 v2.1.3を公開しました：下記の不具合の修正を行いました。

プロセス管理を有効化していないアプリで「書式条件フィールド」、「書式変更フィールド」に「ステータス」を選択した際にエラーが出る不具合
レコードが0件の一覧を開いたときにエラーが出る不具合

2017/03/31 v3.0.0を公開しました：下記の機能を追加しました。

設定項目に行の追加/削除ボタンを追加
設定項目のローカライズ対応（英語、中文）
設定に太字、打消し線、下線を追加
カラーピッカー対応(Firefox, Chromeのみで利用可)
日付条件書式の条件値の設定方法変更
設定画面でのプロセス管理の「ステータス」項目の設定値の名称を「ステータス(プロセス管理)」に変更
プロセス管理が有効でない場合、「ステータス(プロセス管理)」項目を選択できない処理に変更
一覧画面で背景色変更時にborderの枠線を追加
その他CSS・ロジック変更等軽微な修正

2017/06/29 v3.1.0を公開しました：下記の機能を追加しました。

文字条件書式「書式条件フィールド」の対象項目として、日付、日時、作成日時、更新日時フィールドを追加
日付条件書式「書式変更フィールド」の対象項目として、「ステータス(プロセス管理)」を追加
書式変更フィールドでチェックボックス、複数選択フィールドを選択した場合、条件未設定で動作するよう修正
日付条件書式の条件値が未入力の場合エラーを表示
CSSファイルを51-modern-default.cssに差し替え
設定画面の一部文言変更（英語版のみ）
その他ロジック変更等軽微な修正

2017/08/02 v3.1.1を公開しました：下記の機能を追加しました。

v2.1.3以前からv3.1.1 にアップデートした際の互換性対応を追加。以下詳細。
- v3.1.1 でプラグインの設定画面を開いた際にv2.1.3以前で設定した初期値が設定される。
- v2.1.3以前で設定された設定のままでも条件書式が適用される。
その他軽微な修正

2018/07/20 v3.2.0を公開しました：下記の対応を行いました。

文字色と背景色の設定で利用するカラーピッカーの種類を変更し、Chrome、Firefox以外でも動作するように変更。
設定画面の一部文言変更（英語版のみ）

2018/10/11 v3.2.1を公開しました：下記の対応を行いました。

文字条件書式「書式条件フィールド」に日付フィールドを設定したとき、
レコード内の日付フィールドが値を持たない場合にそれ以降の条件書式が適用されない不具合を修正しました。

2018/10/17 v3.2.2を公開しました：プラグインの説明文（中国語のみ）を修正しました。

2019/05/10 v3.2.3を公開しました：一覧画面で値を保存後も条件書式が適用されるように変更しました。

2021/08/24 v3.2.4を公開しました：使用している外部ライブラリーのファイルをプラグイン内にバンドル化しました。

2022/09/06 v3.2.5を公開しました：

JavaScriptソースコードをES6以降の記法に書き換えました。
プラグイン名や説明から「新デザイン版」の表記を削除しました。

制限事項

IE8では本プラグインはご利用いただけません。
スマートフォンでは、使用することができません。
複数条件を満たす場合は下の行が優先され、文字条件書式と日付条件書式では日付条件書式が優先されます。
ただし背景色については、上の行に設定があり、下の行に設定がない場合は、上の行の設定が適用されます。
レコード一覧の表示形式が表形式の一覧のみ対応しています。カレンダー形式の一覧、カスタマイズの一覧では動作しないことがあります。

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

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

Moment.js - 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

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

MIO 2018年06月28日 08:25

お世話になります。

初めて質問させて戴きます。

conditionformat2_plugin_v3.1.1.zipをプラグインインストールし

フィールド名『ステータス区分』によって書式を設定させて戴いております。

一覧表示も詳細表示も設定どおりに正常に表示されるのですが

一覧表示の中で、『ステータス区分』を抽出条件に含んでいるものに関しては

設定書式が反映されません。

解決方法をご教授いただけませんでしょうか？

どうぞよろしくお願い致します。

MIO

MIO 2018年06月29日 01:31

お世話になります。

自己解決しました。

一覧表示で年齢計算をしているJSを削除したところ

抽出条件付一覧でも書式設定が反映されました。

JSに問題があったのかもしれません。

取り急ぎ、ご報告させて戴きます。

どうもありがとうございました。

MIO

s_yaha 2018年10月01日 01:59

文字条件書式 ⇒　書式変更フィールド　の一覧に日時フィールドが表示されないのは、私だけでしょうか。

＞＞書式変更フィールド

＞＞書式を変更するフィールドを配置します。「書式条件フィールド」に記載されている全てのフィールドを選択できます。

この表現が正直読み取れないのですが、これをそのまま受け取ると、日時も対象になっていると思われ、表示される認識です。

やりたいこと

日時欄がブランク(空白)　日時フィールドの色を変えたい

日付比較ではないため、「文字条件書式」を使用する認識です。

ちなみに使用しているバージョンは「バージョン：3」と表示されています。(会社の環境で、私の管理下ではないです)

cybozu Development team 2018年10月02日 02:34

s_yaha 様

お世話になっております。cybozu developer network事務局です。

STEP1に記載しております通り、文字条件書式と日付条件書式はそれぞれ選択可能なフィールドが異なります。

日時フィールドは日付条件書式でのみ選択可能です。

ご希望に添えず申し訳ございません。

こちらのプラグインは、サンプルとしてソースコードを公開し、自由にカスタマイズを加えてご利用いただけるようになっておりますので、

IT部門の方にカスタマイズをご依頼いただく等の対応をご検討ください。

また、記事の記載がわかりにくいという点につきましては、早急に見直しをさせていただきます。

今後ともよろしくお願いいたします。

TAKE 2019年05月12日 14:00

お世話になります。

ご教授頂けますと助かります。

文字条件書式の方はきちんと動作してくれているのですが、

日付条件書式のほうが反応してくれません。

下記のような設定をしております。

顧客管理リストとして使用しておりますが、

各レコード更新日より10日・20日・30日段階的に経過しても

更新されない場合に色を変えたいと思っているのですが、

設定自体間違っているのでしょうか。それとも、こういった設定は無理なのでしょうか。

初歩的質問かもしれませんが、初心者ですのでご勘弁ください。

よろしくお願いいたします。

cybozu Development team 2019年05月14日 01:37

TAKE 様

お世話になっております。cybozu developer network事務局です。

ご提示いただいた設定ですと、以下の条件になっております。

（例）「今日」＝「2019/5/14」の場合

更新日時が「今日から10日後」以後：2019/5/24 より後
更新日時が「今日から20日後」以後：2019/6/3 より後
更新日時が「今日から30日後」以後：2019/6/13 より後

更新日から10日／20日／30日以上経過したもの、に対して書式を設定したいということでしたら、以下のご設定でお試しいただけますでしょうか。

どうぞよろしくお願いいたします。

TAKE 2019年05月14日 07:31

ありがとうございました。解決いたしました。

条件式の意味が理解できておりませんでした。

今後とも宜しくお願い致します。

ma-kato 2019年07月18日 05:02

お世話になっております。

こちらの条件書式、プロセス管理でのステータスのフィールドで使用しております。

アプリの設定を変更したわけではないのですが、条件書式が反映されなくなっていることに本日気が付きました。

複数のアプリで使用していますが、条件書式が有効となっているものもあれば無効となってしまっているものもあります。

対処方法について教えていただけますと幸いです。

よろしくお願いいたします。

cybozu Development team 2019年07月18日 07:00

ma-kato様

お世話になっております。
cybozu developer network 運営局です。

アプリに他のプラグインやカスタマイズを適用している場合、うまく動かないことは考えられるのですが、いかがでしょうか？

また、お手数おかけいたしますが、以下をご確認いただけないでしょうか。

プラグインの設定画面で設定されていること
プラグイン設定の保存

ma-kato 2019年07月18日 08:01

お世話になっております。

ご確認ありがとうございます。

下記のプラグイン設定を行っており、最近追加したものではなく以前から新条件書式プラグインと一緒に利用しておりました。

ご確認の程よろしくお願いいたします。

ma-katoにより編集されました 2019年07月18日 08:28

cybozu Development team 2019年07月18日 08:24

ma-kato様

お世話になっております。
cybozu developer network 運営局です。

申し訳ございませんが、他のプラグインから受ける影響については、こちらでは調査しかねます。

また「新条件書式プラグイン」もサンプルプラグインのため、注意事項に記載させていただいているとおり、動作保証はしておりません。
ご了承ください。

ma-kato 2019年07月18日 08:28

承知しました。

ありがとうございます。

しまっと 2019年10月05日 06:27

初歩的な質問ですみません！！！

一覧をカレンダー形式にしている場合は、こちらの設定は有効にならないのでしょうか？

表形式の一覧表は問題なく設定できたのですが。。。

cybozu Development team 2019年10月07日 01:35

海老原様

お世話になっております。
cybozu developer network 運営局です。

制限事項にある通り、表形式の一覧表のみに対応しているため、カレンダー形式の一覧では有効になりません。
> レコード一覧の表示形式が表形式の一覧のみ対応しています。カレンダー形式の一覧、カスタマイズの一覧では動作しないことがあります。

よろしくお願いいたします。

Kobayashi 2019年10月15日 01:53

お世話になります。

このプラグインではフィールド単位で背景色を変更することは可能のようですが、

一覧のレコード（1行）を変更するこは可能でしょうか。

もし行う場合はフィールド一つ一つ設定する方法になりますでしょうか。

また、当方windows10(1803)のIE11(11.0.125)を使用していますが、

プラグインの設定画面で筆のアイコンをクリックしてもカラーピッカーが表示されません。

IE11は対象外でしょうか。

なお、Google Chromeでは表示されます。

以上です。ご確認お願いいたします。

cybozu Development team 2019年10月15日 05:38

Kobayashi 様

お世話になっております。
cybozu developer network 運営局です。

＞一覧のレコード（1行）を変更するこは可能でしょうか。もし行う場合はフィールド一つ一つ設定する方法になりますでしょうか
　行毎に色を設定することはできません。
　フィールドを一つずつ設定しても、条件によって同じの行でもフィールド毎に色が変わります。
　ご希望に添えずに申し訳ございません。

＞IE11は対象外でしょうか
　弊社の環境（IE11.0.130）で確認したところ、カラーピッカーが正常に表示されます。
　もう一度ご確認いただけますでしょうか

Kobayashi 2019年10月15日 05:53

cybozu developer network運営局　各位

ご回答ありがとうございました。

行単位で設定できない件、承知いたしました。

また、IEでカラーピッカーが表示されない件、Maicrosoft EdgeでもNGでした。

運営局の環境ではOKとのことですので、こちらの環境の性の可能性が高いです。

とりあえずはChromeを使用することで対応いたします。

ありがとうございました。

cybozu Development team 2019年10月17日 00:51

Kobayashi 様

お世話になっております。
cybozu developer network 運営局です。

ご確認いただきありがとうございます。
Microsoft Edge 44.18362.1.0でカラーピッカーが表示されることを確認いたしました。

ご自身の環境に依存するもののようで、申し訳ございませんが、こちらでは対応しかねます。

takahashi 2019年12月25日 02:35

文字条件書式を30件ほど登録しているアプリで、保存・キャンセルのボタンが動かなくなる事象が起きています。

他のアプリで条件の登録が５件くらいのものは問題なく動いているので、登録数が多すぎる状態でしょうか？

（アプリを削除したら、問題なく動いております）

cybozu Development team 2019年12月25日 05:32

takahashi 様

お世話になっております。cybozu developer network 運営局です。

こちらで動作の確認をいたしましたところ、文字条件書式を30件以上登録しても
保存・キャンセルのボタンが動かなくなることはありませんでした。

当記事の新条件書式プラグイン以外にカスタマイズや他のプラグインは適用していませんでしょうか？
適用されているようであれば、カスタマイズや他のプラグインが競合して、
保存・キャンセルのボタンが動かなくいることが考えられます。

takahashi 2019年12月25日 06:17

cybozu developer network 運営局

ご担当者様

お世話になっております。

早速のご回答ありがとうございます。

ご指摘の通り、他のプラグインを複数使っているので競合していそうですね。

これまで数年にわたり問題なく使えていたので、アップデートなどに対応できていなかったりしているのかもしれません。

動作保証がない、技術サポートがない旨は承知しております。

ご回答いただき、ありがとうございました。

kiku 2020年03月12日 01:37

新デザイン版条件書式プラグインを利用させていただいています。

最近、本プラグインを利用していると他のプラグインがうまく動かない現象が発生しています。

consoleには

「DevTools failed to parse SourceMap: https://js.cybozu.com/jquery/2.1.4/jquery.min.map」

と表示されています。

プラグイン内部で参照しているjQueryのバージョンを上げていただくことは可能でしょうか。

kikuにより編集されました 2020年03月12日 01:37

cybozu Development team 2020年03月12日 04:44

kiku 様

お世話になっております。
cybozu developer network 運営でございます。

申し訳ありませんが、プラグイン自体のバグではないため、 GitHub にソースコードを公開しておりますので、
ご自身でバージョンアップ、再パッケージングをお願いいたします。

申し訳ありませんがよろしくお願いいたします。

kiku 2020年03月12日 08:28

cybozu developer network 運営局　ご担当者様

早速のご確認ありがとうございます。

再パッケージング、やってみます。

potara 2020年03月14日 05:20

このメッセージはCybozu CDNにSourceMapが存在しないのが原因だと思います。
> 「DevTools failed to parse SourceMap: https://js.cybozu.com/jquery/2.1.4/jquery.min.map」

SourceMapが存在するCDNに変更してみたらwarningがなくなりました。
（SourceMapはデバッグ時に利用されるものなので利用者には影響ないと思いますが、確かに気になるので）

developer networkの条件書式プラグインに機能追加したプラグインを公開しているのでもしよければ使ってください。
（SourceMapのwargningにも対応しています）
https://qiita.com/potara/items/551cd1f13f5f248322ce
※違ったプラグインとして認識されるのでバージョンアップはできず、再設定が必要です

※こういった書き込みがNGであれば削除してください

kiku 2020年03月14日 05:43

potara様

ありがとうございます。利用させていただきます。

YUJU 2020年03月18日 09:00

いつもお世話になっております。

以下の設定ができなくて、とても困っております。

「提出期限」日付型

提出期限1ヵ月前であれば赤、2ヵ月前であれば黄色、その他は色の変更なし設定して頂けますと幸甚でございます。

ぜひご教授お願い致します。

よろしくお願いいたします。

cybozu Development team 2020年03月19日 00:10

YUJUさま

お世話になっております。
cybozu developer network 運営でございます。

＞提出期限1ヵ月前であれば赤、2ヵ月前であれば黄色、その他は色の変更なし
この設定につきましては、下記の条件でお試しいただけますでしょうか。

・設定画面

・プラグイン適応後の一覧画面（イメージ）

また、本コメント欄は、記事へのフィードバックを目的としており、サポートの場ではありません。
以後、記事に直接関係のない、または技術的なご質問はcybozu developer コミュニティをご活用ください。

よろしくお願いいたします。

masuto 2020年05月08日 13:23

一覧画面では設定した条件付き書式が反映されているのですが，

詳細画面だと反映されていません。

なぜですか？

cybozu Development team 2020年05月12日 05:28

masuto様

お世話になっております。
cybozu developer network 運営でございます。

>一覧画面では設定した条件付き書式が反映されているのですが，
>詳細画面だと反映されていません。

ブラウザの開発者ツールなどでエラーメッセージ等は出ていますでしょうか？
もしエラーメッセージ等が確認できるのであれば、なぜ詳細画面で反映されていないか推測することができます。

エラーメッセージの確認方法、デバッグの方法については以下の記事を参考にしていただければと思います。

また、本コメント欄は、記事へのフィードバックを目的としており、サポートの場ではありません。
以後お手数をおかけいたしますが、記事に直接関係のない、または技術的なご質問はcybozu developer コミュニティをご活用ください。

よろしくお願いいたします。

サインインしてコメントを残してください。

Index

注意事項

概要

▼主要なアップデート情報

プラグイン を利用する

STEP1:アプリにプラグインを追加する

STEP2:プラグインを設定する

STEP3:プラグインを利用する

サンプルプラグイン

制限事項

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

記事に関するフィードバック

プラグインを利用する