アプリのレコード一覧表にタイマー表示機能を実装する！

kintoneのレコード一覧に「残り時間」をリアルタイム表示するタイマー機能を追加しよう！

レコード一覧表のヘッダースペースを有効活用

「作業に集中していると、ついつい時間を忘れちゃう…」という経験はありませんか？
気がついたら締切時間ギリギリで慌ててしまった、という経験は誰にもあると思います。

特に、企画書やレポート作成などに集中していると時間を忘れて作業に没頭しがちです。
また、工場の現場では、作業ごとに定められた時間を厳守することが求められます。
しかし、これらの作業に集中していると、時間管理がおろそかになりがちです。

そんなkintoneユーザーの方に、レコード一覧のヘッダー部分に、締切までの残り時間をリアルタイムでカウントダウンしてくれるタイマーを表示できるカスタマイズをご紹介します。

kintoneアプリの運用において、レコード一覧表は最も頻繁に表示される画面の一つです。
このカスタマイズは、そのレコード一覧表という、常に目に触れる機会が多いスペースを有効活用する点が大きなポイントです。

デモ画面

タイマーの設定時刻は、JSコードの中で、”YYYY-MM-DDTHH:MM”の書式で設定します。
タイマー設定時刻までの残り時間をリアルタイム更新で表示します。
残り時間が24時間以上の場合は、“dd日 HH:MM:SS”の書式で表示します。
残り時間が指定した時間（分）より少なくなると、時刻の色を変えて表示することもできます。

このカスタマイズでできること

この機能の最大の特徴は、一目で残り時間が分かることです。

作業中に別のウィンドウを開いたり、時計アプリを確認したりする必要はありません。
仕事で毎日利用するアプリ（例えば作業日報アプリなど）を開けば、常にタイマーが視界に入り、時間を意識しながら作業を進めることができます。

リアルタイム更新のタイマー表示:
締切までの残り時間を、秒単位でリアルタイムにカウントダウンします。残り時間が24時間以上の場合は「残り日数＋時間（HH:MM:SS）」で表示されます。
視覚的なアラート機能:
残り時間が少なくなると、タイマーの色が変わって警告してくれます。例えば、残り時間が１時間（60分）以下になると、タイマーの色が警告色の赤に変わるように設定できます。
簡単な実装:
アプリの設定内容を一切参照していないので、指定のJavaScriptコードをアップロードするだけで簡単に実装できます。

デモ画面では「2025-08-30 11:00の締切まで」というメッセージとともに、残り時間が「1日 00:09:10」のように表示されています。締切が迫ると「1日 00:00:10」のように表示され、色が変化します。

実装方法

この機能は、JavaScriptファイルを1つアップロードするだけで簡単に導入できます。

1. 設定のカスタマイズ
タイマーの表示メッセージ、締切日時、文字の大きさ、色などを自由に設定できます。

2. ファイルのアップロード
設定を終えたコードを「UTF-8」形式で保存し、kintoneアプリの「JavaScript / CSSでカスタマイズ」のページからアップロードするだけです。

もっと便利に！「autoモード」の追加

「毎日、就業時間までの残り時間を表示したいけど、JSコードを毎日設定変更するのは面倒…」という声に応えて、autoモードを追加しました。

autoモードでは、あらかじめ設定した複数の時刻（例：09:00, 12:00, 13:00, 17:00）の中から、現在時刻より未来の最も近い時刻を自動で判断し、その時刻までの残り時間をタイマー表示します。これにより、毎日手動で設定を変える手間が省けます。

まとめ

このカスタマイズは、アプリ側のフィールド設定に依存しないため、どのアプリでも共通で利用できるのが大きなメリットです。

このタイマー機能を活用することで、工場内の各作業の所要時間を意識しやすくなり、作業効率の向上にもつながります。タイマーを有効活用して、タスクの締切管理を効率化し、日々の作業をよりスムーズに進めてみませんか？

🔨 自分でカスタマイズしてみたい方へ

以下のNote記事で本記事のカスタマイズ事例を紹介しています。
記事内で紹介しているカスタマイズコードは、無料で利用できるので是非挑戦してみて下さい。

「note:アプリ活用研究会（キン活）」は、当サイトのメンバーが執筆しています。

アプリの一覧表にタイマーを表示する｜アプリ活用研究会（キン活）

やりたいこと kintoneアプリのレコード一覧表の見出しにタイマー（残り時間）を表示したい。作業に集中していると時間を忘れるので、目立つ場所にリマインダーしておきたい日時までの残り時間をタイマー表示する機能が欲しい、というご要望です。日時を表示するだけなら簡単ですが、今回は「タイマー」機能なので、秒単位でリアルタイム更新する機能を持たせます。デモ画面実装後のデモ画面です。タイマー表示をリアルタイムで更新します。リマインダー日時までの「残り時間」を毎秒計算し、残り時間...

🧩 プラグインのご紹介

当社が開発した、関連レコード集計プラグインをご紹介します。
Javascriotカスタマイズは、少しハードルが高いです💦　という方はこちらもご検討下さい。

🏫 kintone人材育成研修

この様なカスタマイズを自分で出来る様になりたい方は、当サイトの「Kintome人材育成」上級コースの受講をご検討して下さい。当サイトのTIPSで紹介しているカスタマイズ例のテンプレートを使えば、簡単に実装出来ます！
上級コースの受講者には、特典で当サイトのカスタマイズテンプレート（3種類まで）と３か月のサポート契約を無償でご提供しています。

研修目的を「カスタマイズテンプレートのアプリ導入」とする研修メニューもご提案可能です。

📣カスタマイズ・導入支援いたします！

本記事の様な「kintoneアプリのカスタマイズ」をご希望の企業様へ
kintoneを便利に活用できるカスタマイズと運用支援は、ぜひ当社にご相談ください！

お問い合わせはこちらからどうぞ！

#kintone #Javascript #カスタマイズ

Tips