何を実現したいのかを書きましょう
資産管理アプリを作成しているが、チェックボックスをインラインに配置したいです。
ユーザーがワンクリックするだけで、ユーザー名とワンクリックした時刻を棚卸し実施者（tanaoroshi_executor）と棚卸し時刻（tanaoroshi_timedate）として、即時インライン編集を介することなくキントーンレコードを上書きするようにしたいです。
さらに、✓が入ったレコードをもう一度ワンクリックすると✓が自動的に消去し、チェックボックスを再度表示させたいです。
発生した問題やエラーメッセージを具体的に書きましょう
以前問い合わせてもらったトピックで記述したアプローチだけど、インライン編集と詳細編集に入って上書きするJSスクリプトに下記のコードが組み込まれていました。
今回は上記の機能を別のJSスクリプトとして取り込んでみたものの、以下の問題が発生しています。
＊そもそもチェックボックスが表示されていないことである。
実行したコードをコピー＆ペーストしましょう
(function() {
'use strict';
/**
* チェックボックスをクリックしたときに実行される関数
* @param {boolean} is_checked - チェックが入っているかどうか（true: チェック済み, false: 未チェック）
* @param {HTMLElement} checked_box - クリックされたチェックボックスの要素
* @param {number} index - 行のインデックス
* @param {number} record_id - レコードID
*/
function clickCheckBox(is_checked, checked_box, index, record_id) {
const user = kintone.getLoginUser(); // 現在ログインしているユーザーを取得
const now = new Date(); // 現在の日時を取得
// 更新するレコードデータを定義
const body = {
'app': kintone.getID(), // 現在のアプリIDを取得
'id': record_id, // 更新するレコードのID
'record': {
'tanaoroshi_check': { 'value': is_checked ? ['✔'] : [] }, // チェックボックスの値
'tanaoroshi_executor': { 'value': is_checked ? user.name : null }, // 実施者の名前（チェックを入れた人）
'tanaoroshi_timedate': { 'value': is_checked ? formatDate(now) : null } // 棚卸し日時（現在時刻）
}
};
// キントーンのAPIを使ってレコードを更新
kintone.api(kintone.api.url('/k/v1/record.json', true), 'PUT', body).then((response) => {
console.log('Record updated:', response); // 更新成功時にログを出力
// チェックボックスの表示を更新
checked_box.style.border = is_checked ? 'none' : '1px solid black'; // チェック済みなら枠線を消す
checked_box.textContent = is_checked ? '✔' : ''; // チェックマークを表示または削除
// クリックイベントを更新（トグル動作を実現）
checked_box.onclick = () => clickCheckBox(!is_checked, checked_box, index, record_id);
}, (error) => {
console.error('Error updating record:', error); // 更新失敗時にエラーを表示
});
}
/**
* 一覧画面が表示されたときに実行される処理
*/
kintone.events.on('app.record.index.show', function(event) {
const allRecords = event.records; // 一覧に表示されているすべてのレコードを取得
const unchecked_inventory_list = []; // チェックが入っていない行のインデックスを保存するリスト
// レコードごとに処理を実行
allRecords.forEach((record, index) => {
if (record.tanaoroshi_check.value.length === 0) { // チェックが入っていない行を判定
unchecked_inventory_list.push(index); // 未チェックの行をリストに追加
}
});
// チェックボックスを配置するカラムを取得
const inventory_update_container = document.querySelectorAll(".value-5953336 > div"); // `.value-XXXXX` はフィールドのクラス名
inventory_update_container.forEach((container, index) => {
const record_id = Number(allRecords[index].$id.value); // レコードIDを取得
if (unchecked_inventory_list.includes(index)) {
// 未チェックの行にチェックボックスを追加
const new_checkbox = document.createElement('div');
new_checkbox.style.height = '21px'; // チェックボックスの高さ
new_checkbox.style.width = '21px'; // チェックボックスの幅
new_checkbox.style.margin = 'auto'; // センターに配置
new_checkbox.style.border = '1px solid black'; // 未チェックのときは枠線をつける
container.append(new_checkbox); // チェックボックスをセル内に追加
// クリックイベントを設定（チェックを入れる）
new_checkbox.onclick = () => clickCheckBox(true, new_checkbox, index, record_id);
} else {
// すでにチェック済みの行を取得
const checked_box = container.childNodes[0];
checked_box.style.height = "21px";
checked_box.style.width = "21px";
checked_box.style.margin = "auto";
checked_box.style.border = "1px solid black";
checked_box.textContent = '';
// クリックイベントを設定（チェックを外す）
checked_box.onclick = () => clickCheckBox(false, checked_box, index, record_id);
}
});
});
/**
* 日付を YYYY-MM-DD HH:MM:SS 形式に変換する関数
* @param {Date} date - JavaScript の Date オブジェクト
* @returns {string} フォーマット済みの日付
*/
function formatDate(date) {
const year = date.getFullYear();
const month = ('0' + (date.getMonth() + 1)).slice(-2);
const day = ('0' + date.getDate()).slice(-2);
const hours = ('0' + date.getHours()).slice(-2);
const minutes = ('0' + date.getMinutes()).slice(-2);
const seconds = ('0' + date.getSeconds()).slice(-2);
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
});
