【kintone JS】日付から曜日を自動表示＆土日を色分けする方法
kintoneで日付と一緒に曜日も管理したい。そう感じたことはありませんか？
この記事では、kintoneで日付入力時に曜日を自動表示するカスタマイズ方法を分かりやすく解説します。
- 日付から曜日を自動表示する方法
- JavaScriptファイルの基本的な追加手順
- 土日を自動で色分けする実装方法
- URL指定でJSを読み込む実践例
曜日表示アプリを作成
まずは曜日表示アプリを作成し設定をしていきます。
アプリから＋マーク（アプリを作成する）をクリックします。
「はじめから作成」を選択します。
アプリ名は「曜日表示アプリ」にします。
今回は以下の2つのフィールドを使用します。
これらをドラッグ＆ドロップで、画面の好みの位置に配置してください。
| フィールド名 | 用途 |
|---|---|
| 日付 | 日付を選択する |
| 文字列(1行) | 選択した日付から曜日を自動表示する |
設置した2つのフィールドをそれぞれ設定します。
日付：日付の設定
日付フィールドにカーソルを合わせて歯車アイコンをクリック。
以下の内容で設定を行いましょう。
| 項目名 | 設定内容 |
|---|---|
| フィールド名 | 日付 |
| フィールドコード | date |
設定できたら「保存」をクリック。
文字列(1行)：曜日の設定
文字列(1行)フィールドにカーソルを合わせて歯車アイコンをクリック。
以下の内容で設定を行いましょう。
| 項目名 | 設定内容 |
|---|---|
| フィールド名 | 曜日 |
| フィールドコード | weekday |
設定できたら「保存」をクリック。
設定したアプリを公開します。
画面右上の「アプリを公開」をクリック
確認ダイアログが表示されるので「OK」をクリックして公開完了です。
ここまでで準備は完了です。では、いよいよJavaScriptの実装に入っていきましょう！
JavaScriptファイルを追加
Javascriptファイルをkintoneに読み込みます。
1.対象アプリの歯車アイコンの矢印をクリック
2.カスタマイズ／サービス連携をクリック
3.JavaScript／CSSでカスタマイズをクリック
1.「URL指定で追加」をクリック
2.以下のURLをコピーして入力欄に貼り付けます。
https://cdn.jsdelivr.net/gh/ryuucodeBlog/kintone-customize@v1.0.3/set-weekday.js
3.右側の「保存」をクリックして保存します。
1.再度「URL指定で追加」をクリック
2.以下のURLをコピーして入力欄に貼り付けます。
https://cdn.jsdelivr.net/gh/ryuucodeBlog/kintone-customize@v1.0.3/color-weekday.js
3.右側の「保存」をクリックして保存します。
1.画面右下の「保存」をクリックします。
2.「アプリを更新」をクリックします。
3.確認ダイアログが表示されるので再度「アプリを更新」をクリックします。
お疲れさまでした！これで、日付から曜日を自動表示＆土日を色分けするアプリが完成です。
実際にレコードを追加して使いやすさを体感してみてください！
JavaScriptファイル簡単解説
曜日表示アプリでは2つのJavascriptファイルを使用しています。
それぞれのファイルについて簡単に解説します。
曜日を自動表示するJavaScript
(function () {
'use strict';
// 設定
const DATE_FIELD = 'date'; // 日付フィールドコード
const WEEKDAY_FIELD = 'weekday'; // 曜日フィールドコード
const WEEKDAYS = ['日', '月', '火', '水', '木', '金', '土'];
function setWeekday(record) {
const dateValue = record[DATE_FIELD].value;
if (!dateValue) {
record[WEEKDAY_FIELD].value = '';
return;
}
const date = new Date(dateValue);
record[WEEKDAY_FIELD].value = WEEKDAYS[date.getDay()];
}
kintone.events.on(
[
'app.record.create.show',
`app.record.create.change.${DATE_FIELD}`,
`app.record.edit.change.${DATE_FIELD}`
],
function (event) {
setWeekday(event.record);
return event;
}
);
})();このJavaScriptでできること
このJavaScriptは、日付フィールドに入力された日付から曜日を自動で判定し、曜日フィールドに表示するためのカスタマイズです。
レコードの新規作成時・編集時のどちらでも、自動で曜日が更新されます。
処理の流れ
このファイルでは、以下の流れで処理を行っています。
- 日付フィールドの値を取得
- 日付が未入力の場合は曜日を空にする
- 日付から曜日を計算
- 曜日フィールドへ自動入力
詳しいポイント解説
フィールドコードを変数で管理
const DATE_FIELD = 'date';
const WEEKDAY_FIELD = 'weekday';日付・曜日のフィールドコードを変数として定義しています。
曜日を日本語で表示する仕組み
const WEEKDAYS = ['日', '月', '火', '水', '木', '金', '土'];JavaScriptでは曜日が 0（日）〜6（土） の数値で取得されます。
この配列を使うことで、数値を日本語の曜日に変換しています。
日付未入力時の安全対策
if (!dateValue) {
record[WEEKDAY_FIELD].value = '';
return;
}日付が未入力の場合は、曜日を空にして処理を終了します。
これにより、日付を削除したときに曜日だけ残るといった不具合を防いでいます。
曜日が自動更新されるタイミング
app.record.create.show
app.record.create.change.date
app.record.edit.change.date- 新規作成画面を開いたとき
- 日付を変更したとき（新規・編集）
これらのタイミングで曜日が自動更新されるため、手入力の必要がありません。
曜日を色分けするJavaScript
(function () {
'use strict';
//設定
const WEEKDAY_FIELD_CODE = 'weekday'; // 曜日フィールドのフィールドコード
//共通：色付け処理
function applyColor(element, value) {
if (!element) return;
if (value === '土') {
element.style.color = 'blue';
} else if (value === '日') {
element.style.color = 'red';
}
}
//一覧画面
kintone.events.on('app.record.index.show', function (event) {
event.records.forEach(function (record, index) {
const value = record[WEEKDAY_FIELD_CODE].value;
const cell = kintone.app.getFieldElements(WEEKDAY_FIELD_CODE)[index];
applyColor(cell, value);
});
return event;
});
//レコード詳細画面
kintone.events.on('app.record.detail.show', function (event) {
const value = event.record[WEEKDAY_FIELD_CODE].value;
const element = kintone.app.record.getFieldElement(WEEKDAY_FIELD_CODE);
applyColor(element, value);
return event;
});
})();このJavaScriptでできること
このJavaScriptは、曜日フィールドの値に応じて文字色を変更するためのカスタマイズです。
土曜日は青、日曜日は赤で表示され、一覧画面・レコード詳細画面の両方に対応しています。
処理の流れ
このファイルでは、以下の流れで処理を行っています。
- 曜日フィールドの値を取得
- 曜日の値に応じて色を判定
- 一覧画面・詳細画面それぞれで色を適用
詳しいポイント解説
色付け処理を共通関数にまとめている
function applyColor(element, value) {色を変更する処理を関数としてまとめています。
これにより、一覧画面・詳細画面の両方で同じ処理を使い回すことができます。
土日だけ色を変更
if (value === '土') {
element.style.color = 'blue';
} else if (value === '日') {
element.style.color = 'red';
}曜日が「土」「日」の場合のみ文字色を変更しています。
平日は色を変えないため、視認性が高くなります。
一覧画面での色付け
app.record.index.show一覧画面では、表示されているレコードを1件ずつ処理し、
該当する曜日フィールドのセルに対して色を適用しています。
レコード詳細画面での色付け
app.record.detail.showレコード詳細画面では、曜日フィールドの要素を取得し、
同じ色付け処理を適用しています。
注意点
フィールドコードは固定
- 日付フィールド：
date - 曜日フィールド：
weekday
const DATE_FIELD = 'date';
const WEEKDAY_FIELD = 'weekday';フィールドコードは必ず同じにしてください。
曜日フィールドは「文字列（1行）」を使用
曜日フィールドは 文字列（1行）フィールド を使用してください。
他のフィールドタイプ（数値・ドロップダウン等）では
正しく表示されない、またはエラーになる可能性があります。
→ 曜日フィールドは 表示専用 として使うのがおすすめです。
日付変更時に曜日は自動で上書きされる
日付フィールドを変更すると、曜日フィールドは 自動で再計算 されます。
- 日付が未入力の場合 → 曜日は空
- 手動で曜日を入力しても → 日付変更時に上書き
これは エラー防止のための仕様です。
まとめ
今回は日付から曜日を自動表示＆土日を色分けする方法について解説しました。
日付と合わせて曜日も管理できる＋色付けで視認性もUpできる優れもの機能。
ぜひ今後のアプリ作成に活用してみてください！
コメント