見出し画像

[kintone] 連続登録JavaScriptのコード解説

M橋D輔

こんにちは、キン担ラボの本橋です。

本橋です

前回紹介したJSカスタマイズのコード解説をしてみます。

ここで紹介したコードを素材代わりに、色々といじくってkintoneの動作を学ぶティンカリング学習の起点となるように書いてみました。

いっちょこれからJavaScriptでkintoneをカスタマイズなんぞしてみるか！　みたいなタイミングで参考となれば幸いです。



コードロジックを作文で表現

まずは整理のためにこんな処理を記述していますよ、とロジックを書き下してみました。こうして眺めると2,3番に書いた処理が中心だとわかりますね。

  1. 共通の定数を定義

    • ラジオボタンのフィールドコードと有効状態を表すラジオボタンのラベル値を定義。

  2. レコード追加の完了イベントに対するハンドラー

    • 連続作成モードかどうかを判定。

      • ラジオボタンの値が「有効」でない場合は何もしないで終了。

    • 連続作成モードの場合、以下を実行。

      • 今開いている画面のホスト名と、kintoneアプリIDを取得。

      • 新しいレコード作成画面のURLを構築し、`event.url`に設定。

      • `event`を返して処理終了。（event.urlに設定したURLに遷移します）

  3. レコード追加の画面表示イベントに対するハンドラー

    • GETパラメータ「recreate」を取得。

    • 必要なライブラリが設定されているかをチェック。

      • ライブラリが不足している場合、その旨のエラーメッセージを表示して終了。

    • 必要なフィールドが存在しているかをチェック。

      • フィールドが存在しない場合、その旨のエラーメッセージを表示して終了。

    • 連続作成モードの場合、以下を実行。

      • SweetAlertで「連続作成モード」のダイアログを表示。

      • ラジオボタンの値を「有効」に設定。

      • `event`を返して処理終了。

  4. 必要なライブラリが設定されているかを判定する関数

    • SweetAlertライブラリが設定されているかをチェック。

      • 設定されていない場合、`false`を返す。

      • 設定されている場合、`true`を返す。

  5. 必要なフィールドが存在しているかを判定する関数

    • ラジオボタンフィールドが存在しているかをチェック。

      • 存在しない場合、`false`を返す。

      • 存在する場合、`true`を返す。

単純に連続保存を実現するだけであれば、実は[2]だけあれば動作します。残りはメンテナンス性だったり、使い勝手だったりの味付けと思ってください。

JSカスタマイズをセットアップしようとしている管理者に向けたお知らせ機能を[2]～[4]で実装している形ですね。

コード全体

とても短いコードで半分くらいはコメントです。全体を乗せてしまいます。

(function () {
    "use strict";

    // [1] 共通の定数を定義しておきます。ラジオボタンのフィールドコードやラベルを変更したいときはここを書き換えてください。
    const CONSTANTS = {
        FIELDCODE_RADIO_SERIAL: "radio_serialcreate",
        FIELDVALUE_SERIAL_ENABLED: "有効",
    };

    // [2] レコード追加完了イベントに対するハンドラーです
    kintone.events.on("app.record.create.submit.success", function (event) {

        // 連続作成モードであることを判定します
        const serial = event.record[CONSTANTS.FIELDCODE_RADIO_SERIAL].value;
        if (serial !== CONSTANTS.FIELDVALUE_SERIAL_ENABLED) {
            // 連続作成モードでなければ何もしないでeventを返します
            return event;
        }

        try {
            // 現在のホスト名を取得します
            var hostname = window.location.origin;
            // 現在のアプリIDを取得します
            var appId = kintone.app.getId();
            // レコード追加画面のURLを構築します
            var recordCreateUrl =
                hostname + "/k/" + appId + "/edit?recreate=true";

            // event.urlにレコード追加画面のURLを代入します
            event.url = recordCreateUrl;

            // eventを返します
            return event;
        } catch (error) {
            const msg = "未考慮のエラーが発生しました:"
            console.error(msg, error);
            event.error = msg;
            return event;
        }
    });

    // [3] レコード追加表示イベントに対するハンドラーです
    kintone.events.on("app.record.create.show", function (event) {
        // GETパラメータを取得します
        const url = new URL(window.location.href);
        const recreate = url.searchParams.get("recreate");

        // ライブラリチェックを行います
        if (isValidLibraries() == false) {
            // 問題があれば適切なエラーメッセージを返してユーザーに通知します
            event.error =
                "SweetAlertライブラリのJavaScriptファイル[ https://unpkg.com/sweetalert/dist/sweetalert.min.js ]をこのアプリのカスタマイズに設定してください。";
            return event;
        }

        // フィールドチェックを行います
        if (isValidField(event) == false) {
            // 問題があれば適切なエラーメッセージを返してユーザーに通知します
            event.error = `フィールドコード[${CONSTANTS.FIELDCODE_RADIO_SERIAL}]のラジオボタンをフォームに設置して、[${CONSTANTS.FIELDVALUE_SERIAL_ENABLED}]を選択肢に持たせてください`;
            return event;
        }

        // 連続作成モードの場合はSweetAlertでダイアログを表示します
        if (recreate === "true") {
            swal({
                text: "連続作成モードです",
                icon: "success",
                buttons: false,
                timer: 1200,
            });
            event.record[CONSTANTS.FIELDCODE_RADIO_SERIAL].value =
                CONSTANTS.FIELDVALUE_SERIAL_ENABLED;
        }

        return event;
    });

    // [4] 必要なライブラリが設定されているかどうかを判定する関数です
    function isValidLibraries() {
        // SweetAlertライブラリが設定されているかどうかを判定します
        if (typeof swal !== "function") {
            // SweetAlertライブラリが設定されていない場合はfalseを返します
            return false;
        }
        
        // 問題なければtrueを返して正常(valid)ですよ、と回答します
        return true;
    }

    // [5] 必要なフィールドが存在しているかどうかを判定する関数です
    function isValidField(event) {
        // FIELDCODE_RADIO_SERIAL のフィールド情報を取得します
        const field = event.record[CONSTANTS.FIELDCODE_RADIO_SERIAL];
        // フィールドが存在しない場合はfalseを返します
        if (field === undefined) {
            return false;
        }

        // 問題なければtrueを返して正常(valid)ですよ、と回答します
        return true;
    }
})();

それぞれ説明していきます。

JavaScriptコードの解説

共通の定数の定義（省略）

const CONSTANTS = {
    FIELDCODE_RADIO_SERIAL: "radio_serialcreate",
    FIELDVALUE_SERIAL_ENABLED: "有効",
};

この部分では、共通で使用する定数を定義しています。もしフィールドコードやラベルを変更したくなったとき、定数定義を書き換えれば済むように変更点を冒頭に集約しておきます。

[1] レコード追加完了イベントのハンドラー

    // [1] レコード追加完了イベントに対するハンドラーです
    kintone.events.on("app.record.create.submit.success", function (event) {

        // 連続作成モードであることを判定します
        const serial = event.record[CONSTANTS.FIELDCODE_RADIO_SERIAL].value;
        if (serial !== CONSTANTS.FIELDVALUE_SERIAL_ENABLED) {
            // 連続作成モードでなければ何もしないでeventを返します
            return event;
        }

        try {
            // 現在のホスト名を取得します
            var hostname = window.location.origin;
            // 現在のアプリIDを取得します
            var appId = kintone.app.getId();
            // レコード追加画面のURLを構築します
            var recordCreateUrl =
                hostname + "/k/" + appId + "/edit?recreate=true";

            // event.urlにレコード追加画面のURLを代入します
            event.url = recordCreateUrl;

            // eventを返します
            return event;
        } catch (error) {
            const msg = "未考慮のエラーが発生しました:"
            console.error(msg, error);
            event.error = msg;
            return event;
        }
    });

レコードの追加が完了したときに実行されるイベントハンドラーに対して、コールバック関数を定義しています。

ラジオボタンの値が「有効」であれば、event.urlにレコード作成画面のURLをセットして、イベントを返します。これにより、保存後の画面の遷移先がレコード作成画面になります。

イベントハンドラーの処理を書くときは受け取ったイベントを必ず返すようにしてください。イベントを返さないと他のスクリプトの処理も停止させてしまいます。

[2] レコード追加表示イベントのハンドラー

kintone.events.on("app.record.create.show", function (event) {
    const url = new URL(window.location.href);
    const recreate = url.searchParams.get("recreate");

    if (isValidLibraries() == false) {
        event.error = "SweetAlertライブラリのJavaScriptファイル[ https://unpkg.com/sweetalert/dist/sweetalert.min.js ]をこのアプリのカスタマイズに設定してください。";
        return event;
    }

    if (isValidField(event) == false) {
        event.error = `フィールドコード[${CONSTANTS.FIELDCODE_RADIO_SERIAL}]のラジオボタンをフォームに設置して、[${CONSTANTS.FIELDVALUE_SERIAL_ENABLED}]を選択肢に持たせてください`;
        return event;
    }

    if (recreate === "true") {
        swal({
            text: "連続作成モードです",
            icon: "success",
            buttons: false,
            timer: 1200,
        });
        event.record[CONSTANTS.FIELDCODE_RADIO_SERIAL].value = CONSTANTS.FIELDVALUE_SERIAL_ENABLED;
    }

    return event;
});

レコード追加画面が表示されたときに実行されるイベントハンドラーの定義です。GETパラメータの`recreate`の値の確認、必要なライブラリのチェック、必要なフィールドの存在チェックを行っています。

SweetAlertでダイアログを表示していますが、お好みでそのままalert()でも良いかと思います。

[3] 必要なライブラリのチェック関数

function isValidLibraries() {
    if (typeof swal !== "function") {
        return false;
    }
    return true;
}

SweetAlertライブラリが読み込まれているかを確認しています。読み込まれていれば、globalにswalというオブジェクトがあるはずなのでそれをチェックしていますね。

[4] 必要なフィールドのチェック関数

function isValidField(event) {
    const field = event.record[CONSTANTS.FIELDCODE_RADIO_SERIAL];
    if (field === undefined) {
        return false;
    }
    return true;
}

必要なフィールドが存在しているかどうかを判定します。event.recordオブジェクトの中にこのカスタマイズで使用するフィールドが存在していることを、冒頭で定義した定数を使ってチェックしました。

ここではエラーの判定だけを行って、エラーメッセージなんかは呼び出し元で構築して表示してあげるとよいかと思います。

ティンカリングのベースにどうぞ

ひとまとまりの「動作するコード」に対して少しずつ手を加えて動きを変えていく、という遊びをティンカリングといいます。

kintoneはカスタマイズの容易さが魅力のひとつです。今回のJavaScriptコードをスタート地点として手を加えて、自分好みのJSカスタマイズを作ってみてください。

自分で書いたとおりにプログラムが動作するところを見るのは気持ちが良く楽しい遊びです。おまけにkintoneに機能が増える。たまらんと思います。ぜひカスタマイズを楽しんでみてください！


いいなと思ったら応援しよう！