条件書式プラグイン

Index

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

注意事項

• サンプルプラグインは、その動作を保証するものではありません。
• サンプルプラグインの技術的なサポート等は行っていません。
• 本プラグインをv2.1.3以前のプラグインからアップデートする場合、プラグインの設定画面より設定の再保存を行ってください。
• kintoneプラグインはスタンダードコースでのみご利用いただけます。ライトコースではご利用いただけませんのでご注意ください。

概要

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

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

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

設定画面

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

レコード一覧画面

レコード詳細画面

 

プラグイン を利用する

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

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

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

1. アプリ管理画面の「設定」＞「プラグイン」を開き、条件書式プラグインの歯車マークをクリックします。
2. 各項目を設定します。（太字は2017/03/31アップデートにより追加された項目です。 ）
   

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

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

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

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

サンプルプラグイン

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