見出し画像

Kintoneアプリにボタン操作で現在日時を記録したい

Kintoneのカスタマイズ要望のお話です。
よくある相談事に「アプリの日時フィールドに現在日時を自動セットするボタンを追加したい」という要望があります。
【結論】
Kintoneの標準機能では実現できません。
Kintoneの標準機能には、Excelで使える「Today関数」や「Now関数」が実装されて無いからです(2023/09/09 現在)
しかし、Javascriptによるカスタマイズ機能で「実現可能」です。

現在日時の登録ボタン

Javascriptカスタマイズのソースコード例を以下に示します。
前提条件として、以下の準備が必要です。

Kintoneアプリのフォーム日時フィールドの「フィールドコード」設定
Kintoneアプリのフォームにボタンを配置するスペースと要素ID設定
CDNにある日付処理ライブラリ(Luxon)のURLを利用する

https://cybozu.dev/ja/kintone/sdk/library/cybozu-cdn/

CDNライブラリのluxonを使用する方法は、以下のページをご覧ください。

現在日時ボタン設置のJavascriptコード

2023年10月31日 変数宣言にVarを使わない形式にコードを修正しました。

/*  現在日時入力ボタン   */
(function() {
    'use strict';

    // 初期設定 フィールドコードとボタンのスペースIDの設定
    const my_field_code = 'Now_datetime';
    const my_space_ID = 'button_space'; 

    // 新規登録と編集画面でイベント発火
    const events = [
        'app.record.create.show',
        'app.record.edit.show'
    ];

    kintone.events.on(events, function(event) {
        const record = event.record;

        // ボタンの作成
        const startButton = document.createElement('button');
        startButton.innerText = '打刻ボタン';
        startButton.onclick = function() {
            const currentDatetime = new Date().toISOString();
            record[my_field_code].value = currentDatetime;
            kintone.app.record.set(event);
        };

        // ボタンをフォームに追加
        kintone.app.record.getSpaceElement(my_space_ID).appendChild(startButton);

        return event;
    });
})();

上記のJavascriptコードの利用で、現在日時を打刻するボタンをフォーム上に設置できます。
カスタマイズするアプリのフィールドの設定内容を、上記Javascriptコードの初期設定と合わせて下さい。
const my_field_code = 'Now_datetime'; //現在日時のフィールドコード
const my_space_ID = 'button_space'; // ボタン設置スペースの要素ID

日時フィールドの設定
スペースの要素IDの設定

現在日時ボタンのアプリテンプレート(有料)

どうしても自力でカスタマイズするのが難しい方のために、「開始時間」と「終了時間」の2つのボタンで現在日時をセットするアプリのテンプレート(有料版)を作成しました。
必要最小限の部品(フィールド)だけを配置しているアプリテンプレートですので、好きなフィールドを追加すれば、日報アプリ等の作成に利用できると思います。

デモ画面

現在日時ボタン2つのデモ画面

上記アプリのテンプレートのダウンロードと設定方法については、以下の有料記事に記載しています。
本アプリテンプレートは、note有料記事の購読料金だけでご利用いただけますが、以下の注意事項にご留意ください。

【ご注意事項と免責事項】

  • 本アプリテンプレートは、Javascriptでカスタマイズされていますので、利用するには「kintoneスタンダードコース」の契約とkintoneシステム管理者権限が必要です。

  • 本アプリテンプレートは、PCデスクトップ版とモバイル版の両方で動作確認済です。

  • 本アプリテンプレートは1つのドメインでのみご利用ください。

  • 本アプリテンプレート購入後のサポートは行っていませんので、予めご承知おき下さい。

  • 本アプリテンプレートの導入で生じたいかなる損害にも、当方は一切の責任を負いません。自己責任でご利用ください。

ここから先は

3,776字 / 4画像 / 1ファイル

¥ 3,000

期間限定 PayPay支払いすると抽選でお得に!

よろしければサポートお願いします! いただいたサポートは、note記事制作の活動費に使わせていただきます!