【画像付き】kintoneで条件付き書式を設定する方法を解説

kintoneで条件付き書式を設定すれば、特定のフィールドの値を色付け・強調できるためデータの視認性が向上します。

「kintoneで条件付き書式を設定したい」「でもやり方がわからない」と悩んでいる方も多いのではないでしょうか。

サイボウズ公式は無償で「条件書式プラグイン」を提供しており、プログラミングの知識がなくても、このプラグインを使えば簡単に条件付き書式を設定できます。

本記事では、プラグインを使った条件付き書式の設定方法を、画像付きでわかりやすく解説します。さらに、プラグインが使えない場合の代替手段も紹介します。

kintoneで条件付き書式を設定する方法2つ

kintoneで条件付き書式を設定する方法は2つあります。

  1. サイボウズ社が提供する条件付き書式プラグインを使う
  2. JavaScriptやCSSでカスタマイズする

それぞれについて説明します。

※プラグイン・JavaScript/CSSを使用したカスタマイズは、kintoneスタンダードコースをご利用の場合のみ利用できます。

1.サイボウズ社が提供する条件付き書式プラグインを使う

サイボウズ社は無償で「条件書式プラグイン」を提供しています。このプラグインを使えば、プログラミングの専門知識がなくても、誰でも簡単に条件付き書式を設定できます。

たとえば、レコード一覧画面や詳細画面で、特定のフィールドの値に応じて、文字色・背景色・文字サイズなどを変更できます。

条件付き書式プラグインの利用は、以下のような場合におすすめです。

  • すぐに手軽に条件付き書式を設定したい
  • プログラミングできる人材がいない
  • シンプルな表示形式の変更で十分

2.JavaScriptやCSSでカスタマイズする

JavaScript/CSSを使ってカスタマイズする方法は、複雑な条件や独自の表示形式にこだわりたい場合に適しています。プログラミングの知識が必要になりますが、自由度の高いカスタマイズが可能です。

ただし、社内にプログラミングの知識を持つ人がいない場合は、外部に開発を依頼する必要があり、コストがかかります。

以下のような方におすすめです。

  • デザインや機能にこだわりたい
  • 複雑な条件や独自の表示形式が必要
  • 予算に余裕がある

kintoneで条件付き書式を設定する2つの方法には、それぞれのメリットとデメリットがあります。自社のリソースや予算に合わせて、最適な方法を選択しましょう。

ここからは、それぞれの設定方法を詳しく説明します。

【4ステップ】プラグインで条件付き書式を設定する方法

サイボウズ社が無償提供しているプラグインを使って、kintoneで条件付き書式を設定する手順は以下のとおりです。

  1. プラグインのダウンロード
  2. プラグインの読み込み
  3. 任意のアプリにプラグインを適用
  4. 条件付き書式を設定

ステップ1.プラグインのダウンロード

サイボウズ社の開発者向けサイト「cybozu developer network」で公開されている、「SAMPLE_crmat2_plugin_v3.2.7」をダウンロードします。

ステップ2.kintoneにプラグインを読み込む

次に、kintoneにプラグインのZIPファイルをアップロードします。

kintoneのホーム画面右上にある歯車アイコン(設定メニュー)をクリックし、「kintoneシステム管理」画面から「プラグイン」を選択します。

画面左上にある「読み込む」ボタンをクリックします。

表示されたダイアログで「参照」ボタンをクリックし、先ほどダウンロードした「SAMPLE_conditionformat2_plugin_v3.2.7」ファイルを選択して、「読み込む」ボタンをクリックします。

プラグインの一覧に「条件書式プラグイン」が追加されます。

ステップ3.任意のアプリにプラグインを適用

次に、ダウンロードしたプラグインを任意のアプリに適用します。

条件付き書式を設定したい任意のアプリを開き、「歯車アイコン(アプリの設定を変更する)」>「設定」>「プラグイン」を選択します。

画面中央にある「+追加する」をクリックし、「条件付書式プラグイン」のチェックボックスにチェックを入れてから、右下の「追加」ボタンをクリックします。

アプリの設定画面に戻り、「アプリを更新」ボタンをクリックしてください。

ステップ4.条件付き書式を設定

最後に、プラグインの設定画面を開き、項目を設定していきます。

アプリの設定画面を開いて、「プラグイン」>プラグイン横にある「歯車マーク」をクリックします。

フィールドに、条件付き書式を設定していきます。

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

条件は、各項目の右側にある「+」「-」ボタンで追加・削除できます。

以下は書式設定の一覧表です。

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

(参考:条件書式プラグイン – cybozu developer network

必須項目が入力されていない行は、保存時に削除されてしまうのでご注意ください。

入力が終わったら左下の「保存」ボタンをクリックします。

最後に、アプリの設定画面に戻って「アプリを更新」ボタンをクリックすれば設定完了です。

問い合わせ管理アプリの視認性向上事例|未対応項目のハイライト表示
以下は、問い合わせ管理アプリの未対応フィールドの背景を黄色、文字色を赤に設定したカスタマイズ事例です。

【プラグインの設定例】

【プラグイン反映前】

【プラグイン反映後】

未対応フィールドをハイライト表示することで、緊急性の高い問い合わせをスピーディに把握し、対応漏れを防げます。

kintoneでJavaScriptを使って条件付き書式を設定する方法

プラグインでは実現できない複雑な条件付き書式が必要な場合は、JavaScriptやCSSを用いたカスタマイズが有効です。

1.JavaScriptコードの作成

まず、メモ帳などのテキストエディタにJavaScriptコードを記述し、ファイルの拡張子を「.js」にして保存します。

下記は、レコード一覧画面で、フィールドの値に応じて文字色を変えるサンプルコードです。

【例1】ステータスが「緊急」の場合にテキストを赤色にする

kintone.events.on(‘app.record.index.show’, function(event) {
var records = event.records;
for (var i = 0; i < records.length; i++) {
if (records[i][‘ステータス’].value === ‘緊急’) {
var statusFieldElement = kintone.app.getFieldElements(‘ステータス’)[i];
if (statusFieldElement) {
statusFieldElement.style.color = ‘red’;
}
}
}
});

【例2】数値フィールドの値が100以上の場合はテキストを緑色にする

kintone.events.on(‘app.record.index.show’, function(event) {
var records = event.records;
for (var i = 0; i < records.length; i++) {
if (records[i][‘数値フィールド’].value >= 100) {
var numberFieldElement = kintone.app.getFieldElements(‘数値フィールド’)[i];
if (numberFieldElement) {
numberFieldElement.style.color = ‘green’;
}
}
}
});

【例3】文字列フィールドの値が「完了」の場合は背景を黄色にする

kintone.events.on(‘app.record.index.show’, function(event) {
var records = event.records;
for (var i = 0; i < records.length; i++) {
if (records[i][‘文字列フィールド’].value === ‘完了’) {
var stringFieldElement = kintone.app.getFieldElements(‘文字列フィールド’)[i];
if (stringFieldElement) {
stringFieldElement.style.backgroundcolor = ‘yellow’;
}
}
}
});

カスタマイズするフィールド名や条件は、アプリに合わせて変更してください。

2.JavaScriptファイルのアップロード

次に、JavaScriptファイルをkintoneにアップロードします。

条件付き書式を設定したい任意のアプリを開き、「歯車アイコン(アプリの設定を変更する)」>「設定」>「JavaScript/CSSでカスタマイズ」を選択します。

PC用のJavaScript/CSSファイルの「アップロードして追加」ボタンをクリックして、先ほど作成したJavaScriptファイルをアップロードします。

最後に「保存」ボタンをクリックして完了です。

まとめ:kintoneの条件付き書式で作業効率を向上させよう

kintoneの条件付き書式を使えば、データを見やすく表示できます。手軽にシンプルな条件付き書式を設定したい場合は、今回紹介したプラグインをご活用ください。

自社にプログラミング知識があり、複雑な条件を設定したい場合はJavaScript/CSSでの設定も検討しましょう。

この記事を参考に、ぜひ自社に合った方法で条件付き書式を試してみてください。


⭐️トヨクモ kintone連携サービスのおすすめポイント⭐️
・kintone標準機能ではできない業務改善を実現
・カンタン・低コストで運用可能
・kintone1ドメインにつき1契約でOK
・10,000契約以上の実績・信頼
・30日間の無料お試しは何度でも可能