【kintone】ステータス別にタスクを自動色付けする設定手順

「kintoneでタスク管理しているけど、一覧が見づらい…」そんなふうに感じたことはありませんか？

今回は、ステータス別にタスクを自動で色分けして、一覧画面を見やすくする設定手順を紹介します。

JavaScriptも“コピペだけ”で簡単に導入できるように解説しているので、ぜひ最後までご覧ください！

準備：タスク管理アプリを用意

まずはタスク管理アプリを作成して、必要なフィールドを配置していきます！

STEP

アプリを作成する

アプリ一覧の画面で「＋（アプリを作成する）」をクリックします。

続いて「はじめから作成」を選択。

アプリ名は分かりやすく 「タスク管理アプリ」 にしておきましょう！

STEP

フィールドを追加する

今回使うのは 「文字列（1行）」 と 「ラジオボタン」 の2つです。

これらをドラッグ＆ドロップで、画面の好みの位置に配置してください。

STEP

フィールドを設定する

【文字列（1行）】

フィールドにカーソルを合わせて歯車アイコンをクリック。

以下の内容で設定を行いましょう！

項目名	設定内容
フィールド名	タスク名
フィールドコード	taskName
必須項目にする

設定できたら「保存」をクリック。

【ラジオボタン】

同じく歯車アイコンをクリック。

同様に以下の内容で設定を行います！

項目名	設定内容
フィールド名	状態
項目と順番	完了／未完了／保留
並び	横並び
初期値	未完了
フィールドコード	status

設定できたらこちらも「保存」してください。

STEP

アプリを公開する

設定したアプリを公開していきましょう！

画面右上の「アプリを公開」をクリック

確認ダイアログが表示されるので「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;
    });
})();

ファイル保存の方法

テキストファイルにコードを貼り付けたら、以下の手順で保存します。

保存先はデスクトップなど、分かりやすい場所でOKです！

これでJavaScriptファイルの準備は完了です。次はkintoneに読み込んでいきましょう！

JavaScriptファイルをアップロード

作成した task-coloring.jsをkintoneに読み込みます。

STEP

設定画面を開く

１．対象アプリの歯車アイコンの矢印をクリック

２．カスタマイズ／サービス連携をクリック

３．JavaScript／CSSでカスタマイズをクリック

STEP

対象ファイルをアップロード

１．「アップロードして追加」をクリック

２．先ほど保存したtask-coloring.jsをダブルクリック

JavaScriptファイルが追加されているかを確認しましょう！

STEP

設定を保存

画面右下の「保存ボタン」をクリックしましょう！

右上の「アプリの更新」をクリック

確認画面が出るのでもう一度「アプリの更新」をクリックしましょう！

お疲れさまでした！これで、ステータス別にタスクを自動で色分けできるアプリが完成です。

実際にレコードを追加して、一覧画面がどれだけ見やすくなったか体感してみてください！

※ すぐに反映されない場合は、一覧画面を再読み込みしてみてください。

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を使うことで、一覧でもタスクの状態をひと目で把握できるようになります。

まずはサンプルコードを動かし、色や条件を調整して自分好みにカスタマイズしてみてください！

あわせて読みたい

【kintone開発】ノーコードでカレンダータイトルを自動生成する方法 「カレンダーで予定をパッと把握したい…」「でも毎回タイトル手入力するのは面倒すぎる！」 そんな方に向けて、この記事では kintoneだけで予定タイトルを自動生成する…