kintoneで条件付き書式を設定すれば、特定のフィールドの値を色付け・強調できるためデータの視認性が向上します。
「kintoneで条件付き書式を設定したい」「でもやり方がわからない」と悩んでいる方も多いのではないでしょうか。
サイボウズ公式は無償で「条件書式プラグイン」を提供しており、プログラミングの知識がなくても、このプラグインを使えば簡単に条件付き書式を設定できます。
本記事では、プラグインを使った条件付き書式の設定方法を、画像付きでわかりやすく解説します。さらに、プラグインが使えない場合の代替手段も紹介します。
>【回数制限なし】kintone連携サービス30日間の無料お試しはこちら
kintoneで条件付き書式を設定する方法2つ
kintoneで条件付き書式を設定する方法は2つあります。
- サイボウズ社が提供する条件付き書式プラグインを使う
- JavaScriptやCSSでカスタマイズする
それぞれについて説明します。
※プラグイン・JavaScript／CSSを使用したカスタマイズは、kintoneスタンダードコースをご利用の場合のみ利用できます。
1.サイボウズ社が提供する条件付き書式プラグインを使う
サイボウズ社は無償で「条件書式プラグイン」を提供しています。このプラグインを使えば、プログラミングの専門知識がなくても、誰でも簡単に条件付き書式を設定できます。
たとえば、レコード一覧画面や詳細画面で、特定のフィールドの値に応じて、文字色・背景色・文字サイズなどを変更できます。
条件付き書式プラグインの利用は、以下のような場合におすすめです。
- すぐに手軽に条件付き書式を設定したい
- プログラミングできる人材がいない
- シンプルな表示形式の変更で十分
2.JavaScriptやCSSでカスタマイズする
JavaScript／CSSを使ってカスタマイズする方法は、複雑な条件や独自の表示形式にこだわりたい場合に適しています。プログラミングの知識が必要になりますが、自由度の高いカスタマイズが可能です。
ただし、社内にプログラミングの知識を持つ人がいない場合は、外部に開発を依頼する必要があり、コストがかかります。
以下のような方におすすめです。
- デザインや機能にこだわりたい
- 複雑な条件や独自の表示形式が必要
- 予算に余裕がある
kintoneで条件付き書式を設定する2つの方法には、それぞれのメリットとデメリットがあります。自社のリソースや予算に合わせて、最適な方法を選択しましょう。
ここからは、それぞれの設定方法を詳しく説明します。
【4ステップ】プラグインで条件付き書式を設定する方法
サイボウズ社が無償提供しているプラグインを使って、kintoneで条件付き書式を設定する手順は以下のとおりです。
- プラグインのダウンロード
- プラグインの読み込み
- 任意のアプリにプラグインを適用
- 条件付き書式を設定
ステップ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での設定も検討しましょう。
この記事を参考に、ぜひ自社に合った方法で条件付き書式を試してみてください。
