【Kintone JavaScript / CSSカスタマイズ】フォーム上の数字を連携

仕事でKintoneを使う機会がありそうなので、Kintoneで色々とプログラミングをした備忘録を記録しようと思います。
最初にKintoneのJavaScript開発でフォーム上の数字を連携させてみます。

Kintoneとは？

Kintoneとは、Cybozuが提供する業務アプリケーションを作成・運用できるクラウドサービスです。Kintoneを使うことで、コードをほとんど書かずに様々な業務アプリケーションを構築し、業務プロセスを効率化することができます。
また、JavaScriptを使ってカスタマイズすることで、より高度な機能を実装することも可能です。

KintoneのJavaScript開発

KintoneのJavaScript開発では、Kintoneのカスタマイズ機能を利用して、フォームやレコードの表示・動作を制御したり、外部のシステムと連携させたりすることができます。
アプリの設定画面からJavaScriptファイルをアップロードすることでアプリ上で利用可能になります。

Kintoneのフォーム上で数字を連携

まずひな型となるテンプレートを作成します。

今回はシンプルに以下のように「数値」のフィールドコードを2つ並べました。

それぞれフィールドコードを以下のように設定しています。

数値1:
フィールドコード*
int1

数値2:
フィールドコード*
int2

その他、値の制限などの設定は行っていません。

実際のコードは下記になります。

(function() {
    "use strict";

    // レコードの新規作成または編集時に、int1とint2の変更を監視するイベントリスト
    var events = [
        'app.record.create.change.int1',
        'app.record.edit.change.int1',
        'app.record.create.change.int2',
        'app.record.edit.change.int2'
    ];

    // 上記イベントが発生したときに実行される関数を設定
    kintone.events.on(events, function(event) {
        var record = event.record;

        // int1の値が変更された場合、int2の値をint1と同じ値に更新
        if (event.type === 'app.record.create.change.int1' || event.type === 'app.record.edit.change.int1') {
            record.int2.value = record.int1.value;
        }

        // int2の値が変更された場合、int1の値をint2と同じ値に更新
        if (event.type === 'app.record.create.change.int2' || event.type === 'app.record.edit.change.int2') {
            record.int1.value = record.int2.value;
        }

        // 更新されたイベントオブジェクトを返す
        return event;
    });
})();

内容としてはフィールドコードの値の変更を下記で取得

// レコードの新規作成または編集時に、int1とint2の変更を監視するイベントリスト
    var events = [
        'app.record.create.change.int1',
        'app.record.edit.change.int1',
        'app.record.create.change.int2',
        'app.record.edit.change.int2'
    ];

変更された場合に、それぞれの値を更新しています。

 // int1の値が変更された場合、int2の値をint1と同じ値に更新
        if (event.type === 'app.record.create.change.int1' || event.type === 'app.record.edit.change.int1') {
            record.int2.value = record.int1.value;
        }

        // int2の値が変更された場合、int1の値をint2と同じ値に更新
        if (event.type === 'app.record.create.change.int2' || event.type === 'app.record.edit.change.int2') {
            record.int1.value = record.int2.value;
        }

        // 更新されたイベントオブジェクトを返す
        return event;