「kintoneでタスク管理しているけど、一覧が見づらい…」そんなふうに感じたことはありませんか？
今回は、ステータス別にタスクを自動で色分けして、一覧画面を見やすくする設定手順を紹介します。
JavaScriptも“コピペだけ”で簡単に導入できるように解説しているので、ぜひ最後までご覧ください！
準備：タスク管理アプリを用意
まずはタスク管理アプリを作成して、必要なフィールドを配置していきます！
アプリ一覧の画面で「＋（アプリを作成する）」をクリックします。
続いて「はじめから作成」を選択。
アプリ名は分かりやすく 「タスク管理アプリ」 にしておきましょう！
今回使うのは 「文字列（1行）」 と 「ラジオボタン」 の2つです。
これらをドラッグ＆ドロップで、画面の好みの位置に配置してください。
【文字列（1行）】
フィールドにカーソルを合わせて歯車アイコンをクリック。
以下の内容で設定を行いましょう！
| 項目名 | 設定内容 |
|---|---|
| フィールド名 | タスク名 |
| フィールドコード | taskName |
| 必須項目にする |
設定できたら「保存」をクリック。
【ラジオボタン】
同じく歯車アイコンをクリック。
同様に以下の内容で設定を行います！
| 項目名 | 設定内容 |
|---|---|
| フィールド名 | 状態 |
| 項目と順番 | 完了／未完了／保留 |
| 並び | 横並び |
| 初期値 | 未完了 |
| フィールドコード | status |
設定できたらこちらも「保存」してください。
設定したアプリを公開していきましょう！
画面右上の「アプリを公開」をクリック
確認ダイアログが表示されるので「OK」をクリックして公開完了です！
ここまでで準備は完了です。では、いよいよJavaScriptの実装に入っていきましょう！
実装：JavaScriptを反映する
作成したアプリに JavaScript を反映して、一覧画面をさらに見やすくしていきましょう！
サンプルコードをコピー
以下のコードをコピーして、テキストファイルに貼り付けましょう。
(function(){
'use strict';
//一覧画面が表示されたら処理開始
kintone.events.on('app.record.index.show',function(event){
var records = event.records;
//全レコードの行
var rows = kintone.app.getFieldElements('taskName');
if(!rows) return event;
for(var i = 0; i < records.length; i++){
var record = records[i];
var status = record['status'].value
//ステータスが未設定の場合はスキップ
if(!status) continue;
if(status == "未完了"){
var row = rows[i].closest('tr');
if(row){
row.style.backgroundColor = '#f9bdb9';
}
}
}
return event;
});
})();ファイル保存の方法
テキストファイルにコードを貼り付けたら、以下の手順で保存します。
１．「ファイル」→「名前を付けて保存」
２．「ファイルの種類」を すべてのファイル に設定
３．「ファイル名」は task-coloring.js
保存先はデスクトップなど、分かりやすい場所でOKです！
これでJavaScriptファイルの準備は完了です。次はkintoneに読み込んでいきましょう！
JavaScriptファイルをアップロード
作成した task-coloring.jsをkintoneに読み込みます。
１．対象アプリの歯車アイコンの矢印をクリック
２．カスタマイズ／サービス連携をクリック
３．JavaScript／CSSでカスタマイズをクリック
１．「アップロードして追加」をクリック
２．先ほど保存したtask-coloring.jsをダブルクリック
JavaScriptファイルが追加されているかを確認しましょう！
画面右下の「保存ボタン」をクリックしましょう！
右上の「アプリの更新」をクリック
確認画面が出るのでもう一度「アプリの更新」をクリックしましょう！
お疲れさまでした！これで、ステータス別にタスクを自動で色分けできるアプリが完成です。
実際にレコードを追加して、一覧画面がどれだけ見やすくなったか体感してみてください！
※ すぐに反映されない場合は、一覧画面を再読み込みしてみてください。
JavaScriptコード解説
イベントを監視する部分
kintone.events.on('app.record.index.show', function(event) {
var records = event.records;ここでは、レコード一覧画面が表示されたタイミングで処理を開始します。
一覧を開いたとき・再読み込みしたときに自動で実行されます。
一覧行（HTML要素）を取得
var rows = kintone.app.getFieldElements('taskName');
if(!rows) return event;一覧に表示されている タスク名フィールドの行要素 を取得します。
対象フィールドが一覧に含まれていない場合は、エラー防止のため処理を終了します。
レコードを1件ずつチェック
for(var i = 0; i < records.length; i++){
var record = records[i];
var status = record['status'].value;一覧に表示されているレコードを 1件ずつ順番に処理します。
ここで、各レコードのステータス値を取得しています。
ステータスの判定
if(!status) continue;
if(status == "未完了"){ステータスが未設定の場合は、そのレコードの処理をスキップします。
ステータスが 「未完了」 の場合のみ、次の色付け処理を行います。
行の背景色を変更
var row = rows[i].closest('tr');
if(row){
row.style.backgroundColor = '#f9bdb9';
}該当する一覧行（tr要素）を取得し、
背景色を変更することでタスクを視覚的に強調します。
まとめ
本記事では、ステータス別にタスクを自動で色分けし、kintoneの一覧画面を見やすくする方法を紹介しました。
JavaScriptを使うことで、一覧でもタスクの状態をひと目で把握できるようになります。
まずはサンプルコードを動かし、色や条件を調整して自分好みにカスタマイズしてみてください！
コメント