カテゴリー内の他の記事

新デザイン版 条件書式プラグイン

Index

注意事項

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

概要

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

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

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

設定画面

new_conditionformat_1.PNG

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

new_conditionformat_2.png

レコード一覧画面

new_conditionformat_3.PNG

レコード詳細画面

 new_conditionformat_4.PNG

プラグイン を利用する

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.4.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を公開しました:使用している外部ライブラリーのファイルをプラグイン内にバンドル化しました。

制限事項

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

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

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

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

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

Avatar
tktktk

こちらのプラグインは

今月だったら という条件は付けられないのでしょうか?

 

納期が今月だったら 背景:黄色、文字色:赤

レコード登録日が今月だったら 背景色:緑

Avatar
cybozu Development team
tktktk様
 
お世話になっております。cybozu developer network 運営事務局です。
このプラグインは何日前・何日後という条件設定のみ対応しております。
 
任意の条件を増やしたい場合は「サンプルプラグイン」の項にあるソースコードをダウンロードし、ご自身でJavaScriptの修正をしていただくことになります。
 
また、こちらのコメント欄は、記事通りに試したが動かない等の記事へのフィードバック用となります。
試してみてわからないなどあれば、ぜひコミュニティをご活用ください。
https://developer.cybozu.io/hc/ja/community/topics
Avatar
Dar

お世話になっております

13%より小さい数値を赤色に変更するよう設定しましたが、10%未満の数値に対して色が変わりません

10%より小さい数値を赤色に変更の場合は、全て色が変わりません

9%より小さい数値に対して変更の場合は、全ての数値が赤色になります

ご確認宜しくお願い致します

 

 

Darにより編集されました
Avatar
s_yaha

Darさん

対象となっているフィールドは、数値ですか?文字列ですか?

たぶんなんですけど、数値フィールドで、数値だけを条件で入力しないと、やりたいことが実現できないのでは、、、と思っています。

Avatar
Dar

s_yahaさん

そういうことなんですね!現状では使えないようで残念です…

ご教示いただきありがとうございましたm(_ _)m

Avatar
mis0koba

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

チェックボックスの条件指定を行いたいのですが、指定方法が分かりません。

チェックボックスで項目が3つあり、すべての項目にチェックがある場合は背景を緑、そうでない場合は背景を赤としたいのですが、

どのような指定をしたら良いでしょうか?

Avatar
cybozu Development team

mis0koba 様

お世話になっております。cybozu developer network 運営事務局です。
 
このプラグインは、「すべての項目にチェックがある場合」のような条件指定を対応しておりません。
任意の条件を増やしたい場合は「サンプルプラグイン」の項にあるソースコードをダウンロードし、ご自身でJavaScriptの修正をしていただくことになります。
 
また、こちらのコメント欄は、記事通りに試したが動かない等の記事へのフィードバック用となります。
試してみてわからないなどあれば、ぜひコミュニティをご活用ください。
https://developer.cybozu.io/hc/ja/community/topics
Avatar
naker

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

こちらのプラグインを利用させて頂いているのですが、今までは問題なかったのですが、

詳細画面で書式が適用されなくなりました。

どうしたら詳細画面でも適用されるようになるのでしょうか。

Microsoft Edgeを利用しています。

Avatar
cybozu Development team

naker 様

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

詳細画面でブラウザの開発者ツールを開き、コンソールにエラーが出ていないかご確認いただけないでしょうか。
Edge での開発者ツールの開き方:https://docs.microsoft.com/ja-jp/microsoft-edge/devtools-guide

また、プラグインを適用しているアプリに、他のカスタマイズや他のカスタマイズが設定されているか、ご確認いただけないでしょうか。
もしそうであれば、それらの実装次第では、条件付き書式プラグインの挙動に影響を与える可能性があります。
よくあるパターンとしては、イベントハンドラーの処理の最後で return event してないと、他のプラグインやカスタマイズが動かないといったことがありえます。

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

Avatar
naker

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

詳細画面を開いた場合にのみコンソールにエラーが表示されます。

他のプラグインも使用していますが、昨日までは問題なかったのですが、他にも原因があるのでしょうか。

Avatar
cybozu Development team

naker 様

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

エラーメッセージが表示されているということは、そのエラーによって動作しないものだと思われます。
コンソールに表示されているエラーメッセージを貼り付けていただけないでしょうか。

Avatar
中塚 智子

お世話になっております。
現在、本プラグインについて利用していたところ、作成者のアカウント以外で条件書式が情報が反映されない事象が発生してしまいました。
作成した当初は正しく動作していたのも確認しております。

なお、心あたりとして編集した際に、一度有効、無効ボタンを触ってしまったことはありました。

解決策などをご教授していただけると助かります。

Avatar
cybozu Development team

中塚 智子 様

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

管理者かそうでないかによって挙動が変わる類のプラグインではないため、
なにか別の要因でそのようになっていることが考えられます。

本プラグイン以外のプラグインやJavaScriptをご利用で、処理が競合してしまっている場合、
またはそれらの処理が何らかの理由でエラーになってしまっている場合、
各種環境固有の問題などがありえます。

一度デバッグをしてみてエラーが何かでていないか、確認してみるとなにかわかるかもしれません。

また、恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
デバッグしてみたがわからないなど、さらなるご質問はcybozu developer コミュニティをご活用ください。

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

Avatar
吉見 保紀

フィードで日付欄も空白を条件認識しますか?

Avatar
cybozu Development team

吉見 保紀 様

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

「日付フィールドでも空欄による条件式が動作するか?」というご質問でよろしいでしょうか?
確認いたしましたところ、現状ですと、日付フィールドでは空欄の比較ができない状態となっております。
申し訳有りません。

チームにはフィードバックさせていただきます。

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

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