ボタンワンクリックでログインユーザーの出欠登録

やりたいこと

アプリのフォームにある「ユーザー選択」フィールドにボタン一発で自分を登録したい。社内会議や会社行事のお知らせレコードに自分の名前を出席者として追加したいときに便利です。
既存レコードの「ユーザー選択」フィールドに自分を登録するには、編集モードにして名前検索または選択ボタンから自分を探すという手間がかかりますが、それをレコード詳細画面からボタン一発で行う方法です。

デモ画面１

レコード詳細画面の「ユーザー選択」フィールド横に「自分を追加」ボタンを設置して、ボタンクリックで自分（ログインユーザー）を追加します。
もし既に登録済の場合はAlertで「既に登録されています」というメッセージを表示します（デモ画面ではCSSカスタムメッセージで表示しています）

デモ画面１

デモ画面２

フォームに「タイトル」や「開始日時」を追加すれば、イベントの出席登録をワンクリックで済ませるアプリが作れます。
欠席者のメッセージは、コメント機能を活用すればいいでしょう。

デモ画面２

フォームの設定

アプリのフォームに「ユーザー選択」フィールドとボタン設置用の「スペース」を配置します（）内はフィールドコード、スペースは要素IDです。
ユーザー選択（ユーザー選択）
　スペース（要素ID：ButtonSpace）
その他のフィールドの追加は自由です。

フォーム設定

サンプルJavascriptコード

以下のサンプルコードをコピーして、初期設定のUSER_FIELD_CODEとBUTTON_SPACE_CODEの設定値をフォームの設定と合わせます
好きな名前で文字コードUT-8で保存します（大切です！）
アプリの設定＞設定＞JavaScript / CSSでカスタマイズでアップロードして設定を完了させます。

/* ボタンワンクリックでログインユーザーの出欠登録
 * Sample Program
 * Distributor: https://note.com/appgroup
 * Copyright (c) 2024 Application Utilization Study Group
 * Licensed under the MIT License
 ------------------------------------------------------------*/
'use strict';

(function () {
    // 初期設定
    const USER_FIELD_CODE = 'ユーザー選択'; // ユーザー選択フィールドのフィールドコード
    const BUTTON_SPACE_CODE = 'ButtonSpace'; // ボタン表示スペースフィールドのフィールドコード

    // ログインユーザーがユーザー選択フィールドに含まれているか確認
    function isUserAlreadyAdded(userFieldValue, loginUserName) {
        return userFieldValue.some(user => user.name === loginUserName);
    }

    // ユーザー選択フィールドにログインユーザーを追加
    async function addLoginUserToField(record, loginUserName) {
        const userFieldValue = record[USER_FIELD_CODE].value || [];

        // 既にログインユーザーが登録されている場合
        if (isUserAlreadyAdded(userFieldValue, loginUserName)) {
            alert(`${loginUserName}さんは既に登録されています。`);
            return;
        }

        // ログインユーザーを追加
        userFieldValue.push({
            code: kintone.getLoginUser().code,
            name: loginUserName
        });

        // レコードを更新
        const params = {
            app: kintone.app.getId(),
            id: kintone.app.record.getId(),
            record: {
                [USER_FIELD_CODE]: {
                    value: userFieldValue
                }
            }
        };

        try {
            await kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', params);
            alert(`${loginUserName}さんを追加しました。`);
            location.reload(); // 更新後にページをリロード
        } catch (error) {
            console.error('エラーが発生しました:', error);
            alert('エラーが発生しました。操作を再試行してください。');
        }
    }

    // レコード詳細画面にボタンを追加
    kintone.events.on('app.record.detail.show', function (event) {
        const loginUserName = kintone.getLoginUser().name;
        const record = event.record;

        // ボタンが既に存在する場合は何もしない
        if (document.getElementById('addUserButton')) {
            return;
        }

        // ボタンを作成
        const button = document.createElement('button');
        button.id = 'addUserButton';
        button.textContent = '自分を追加';
	    button.style.marginTop = '30px'; // トップマージンを追加
        button.onclick = function () {
            addLoginUserToField(record, loginUserName);
        };

        // ボタンをスペースフィールドに追加
        const spaceElement = kintone.app.record.getSpaceElement(BUTTON_SPACE_CODE);
        if (spaceElement) {
            spaceElement.appendChild(button);
        }
    });
})();

終わりに

「ユーザー選択」フィールドは「オブジェクト型」であり、他のフィールドと違って、フィールドの値（Value）を参照したり値を追加（Push）するには、オブジェクト型としての操作が必要です。
詳しくは以下の記事にまとめていますので参考にしてください。

文字コードに注意

「ユーザー選択」のフィールドコードは、初期値で「ユーザー選択」という漢字のダブルバイト文字です。日本語が入力できるエディタ（メモ帳など）の文字コードはSHIFT-JISなので、Javascriptファイルの文字コードをUTF-8に変更してから保存しないと、フィールドコードが内部で文字化けを起こして「フィールドが未定義（undefined）です！」というエラーになります。

私はこの失敗を過去に何度も繰り返しているので、皆さんはご注意ください。
Visual Studio Codeの様な高機能のエディタを利用することをお勧めします。

今回も最後まで読んで頂きありがとうございました。

---

参考：ボタンで出欠登録&人数カウント

レコード詳細画面のヘッダーに「出席」と「欠席」ボタンを設置し、ボタンクリックだけで出席者や欠席者のリストにログインユーザーを追加できる様にカスタマイズすることも工夫次第で出来ます。

デモ画面３

レコード詳細画面のヘッダー領域に「出席」と「欠席」ボタンを表示して、ボタンクリックでログインユーザーを出席者や欠席者のリストに追加します。出席と欠席の人数も自動カウントします。

デモ画面３

出席登録済のユーザーが「欠席」ボタンを押すと出席者から削除されて欠席者に追加されます。逆パターン（欠席から出席）も同じ動作をします。

既に出欠登録しているユーザーがボタンを押すと「〇〇さんは登録済です」とのカスタムメッセージを表示します。

レコード編集画面で「ユーザー選択」フィールドの人数を操作した場合でも出席者と欠席者の人数を自動更新します。

なお、ユーザー選択フィールドの人数をカウントするカスタマイズ方法は、以下の記事でも紹介していますので参考にしてください。

---

アプリテンプレート（有料）

デモ画面３の様なカスタマイズを自力でを行うのが難しい方のために、アプリテンプレート（有料）を用意しました。
社内会議やパーティなどのイベントの出欠確認等に活用できると思います。

なお、レコード一覧表画面のインライン編集には対応していません。
カスタマイズはPC画面のみで、モバイルアプリは非対応です。

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

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

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

• 本アプリテンプレートは、PCデスクトップ版でのみ動作確認済です。

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

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

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

---