Kintoneレコード一覧画面のカスタマイズ方法｜条件に応じたカラフルなハイライトを追加する手順

Kintoneは、誰でも簡単に業務アプリを作成できる便利なクラウドサービスです。でも、たくさんのレコードが一覧に並ぶと、重要な情報を見つけるのが難しくなることがあります。そんな時、レコード一覧画面に色を付けて重要なレコードを目立たせるカスタマイズが役立ちます。この記事では、JavaScriptを使って、Kintoneのレコード一覧画面に条件に応じたカラフルなハイライトを追加する方法を、手順を追ってわかりやすく解説します。

Table of Contents

Kintoneレコード一覧に色を付けるメリット

一覧画面に色を付けることで、次のような効果が期待できます：

重要なレコードがすぐにわかる: 色分けによって、重要なレコードや期限が迫っているタスクがひと目でわかります。
優先順位が明確に: 重要度に応じた色分けで、すぐに対応すべきタスクが明確になります。
作業効率がアップ: 必要な情報をパッと見つけられるので、業務のスピードが上がります。

Kintoneアプリを作成してみよう

まずは、色を付けるためのKintoneアプリを作りましょう。この例では、「タスク管理アプリ」を作成し、優先度に応じて色分けを行います。

ステップ1: 新しいアプリを作成

Kintoneにログイン: Kintoneにログインし、ホーム画面から「アプリ」を選びます。
「＋アプリを作成」ボタンを押して、「フォームから作成」を選び、新しいアプリを作成します。

ステップ2: 必要なフィールドを追加

次に、タスクを管理するためのフィールドを追加します。

タスク名: 「文字列（1行）」フィールドを追加し、「タスク名」と名前を付けます。
優先度: 「ドロップダウン」フィールドを追加し、「優先度」と名前を付けます。選択肢には「高」「中」「低」を設定します。
期日: 「日付」フィールドを追加し、「期日」と名前を付けます。タスクの締め切り日を入力するフィールドです。
ステータス: 「ドロップダウン」フィールドを追加し、「ステータス」と名前を付けます。選択肢には「未着手」「進行中」「完了」を設定します。

ステップ3: フォームを整えて公開

フィールドの配置を整えて、使いやすいレイアウトにしましょう。調整が終わったら、「保存」をクリックして、アプリを公開します。

JavaScriptでハイライトを追加する

次に、JavaScriptを使って一覧画面に色を付ける設定をします。

ステップ1: JavaScriptファイルを準備

以下のコードをコピーして、highlight.jsという名前で保存します。このコードでは、「優先度」に基づいて色を付けます。

(function() {
    kintone.events.on('app.record.index.show', function(event) {
        event.records.forEach(function(record) {
            var priorityField = kintone.app.getFieldElements('優先度')[record.$id.value - 1];

            if (record['優先度'].value === '高') {
                priorityField.style.backgroundColor = '#FF6F61'; // 高優先度は明るい赤
                priorityField.style.color = '#FFFFFF'; // 白い文字
                priorityField.style.fontWeight = 'bold'; // 太字で強調
            } else if (record['優先度'].value === '中') {
                priorityField.style.backgroundColor = '#FFD700'; // 中優先度は金色
                priorityField.style.color = '#000000'; // 黒い文字
                priorityField.style.fontWeight = 'bold'; // 太字で強調
            } else if (record['優先度'].value === '低') {
                priorityField.style.backgroundColor = '#8FBC8F'; // 低優先度は薄緑
                priorityField.style.color = '#FFFFFF'; // 白い文字
                priorityField.style.fontWeight = 'bold'; // 太字で強調
            }
        });
    });
})();

ステップ2: JavaScriptをKintoneに追加

アプリの設定を開き、右上の「歯車」アイコンをクリックします。「アプリの設定」を選びます。
「JavaScript / CSSでカスタマイズ」を選択し、「ファイルを追加」ボタンを押して、highlight.jsファイルをアップロードします。
アップロードが終わったら、「保存」を押し、アプリ設定画面の右上にある「アプリを更新」をクリックして反映させます。

ステップ3: 動作確認

アプリのレコード一覧画面に戻り、「優先度」に応じてレコードが色分けされていることを確認します。これで、重要なタスクがすぐにわかるようになりました！

まとめ｜Kintoneをもっと便利に使おう

Kintoneのレコード一覧画面をカスタマイズすることで、業務効率が大幅にアップします。条件に応じたカラフルなハイライトを追加することで、チーム全体が重要な情報にすぐ気付けるようになり、作業のスピードが向上します。この記事を参考に、Kintoneをさらに効果的に使いこなしてみてください！

このサイトではほかにも、Kintoneの様々なカスタマイズ方法に関する記事も投稿しておりますので、ぜひチェックしてくださいね！

https://arcuss-service.com/knowledge/how-to-auto-day.html

Kintoneレコード一覧画面のカスタマイズ方法｜条件に応じたカラフルなハイライトを追加する手順

Kintoneレコード一覧に色を付けるメリット