kintoneで開発を進める中で、どうしても使い勝手が悪くてJavascriptでカスタマイズする必要が出てくる場合があります。
がっつり開発ではなくすこし良くしたい時に使えるプラグインを紹介します。
kintoneでJavascriptが編集できるようになるプラグイン『JSEdit for kintone 』
kintone開発者は、基本機能での実装を推奨しています。
毎月のようにkintoneはアップデートされるため、独自のカスタマイズをしていると動かなくなる可能性があるからです💦
基本的には、
- 基本機能で実装
- プラグインで実装
- Javascript等でカスタマイズ
この順番で検討するとよいでしょう。
勘違いしてほしくないのは、『カスタマイズ＝悪』ではありません。
『JSEdit for kintone 』をインストールする
まずは、公式サイトからファイルをダウンロードします。
サイトにある、ZIPファイルをダウンロードします。
kintoneにアップロードする
ダウンロードしたプラグインをkintoneにアップロードしていきます。
kintoneのポータルサイトの右上にある設定ボタンをクリックします。
クリックするとメニューが表示されるので、『kintoneシステム管理』をクリックします。
kintoneシステム管理の中にある『プラグイン』をクリックします。
左上にある『読み込む』ボタンをクリックします。
『参照』をクリックした、先ほどダウンロードしたZIPファイルを選択します。
Zipファイルの名前が表示されたら、『読み込む』ボタンをクリックします。
正常終了するとプラグイン一覧に『JSEdit for kintone』が表示されます。
これでアップロードは完了です。次はアプリでプラグインが使えるように設定します。
アプリにプラグインが使えるように設定する
kintoneではアプリごとに使うプラグインを指定することができます。
アプリ画面を開きます。
『設定』の中にある『カスタマイズ/サービス連携』にある『プラグイン』をクリックします。
左上にある『プラグインの追加』をクリックします。
『JSEdit for kintone』にチェックをいれて『追加』ボタンをクリックします。
追加が完了するとメッセージが表示されます。
JSEdit for kintoneでカスタマイズしてみる
では、実際にJSEdit for kintoneでカスタマイズをしてみましょう！
編集画面は、設定ボタンから遷移することができます。
新規作成ボタンを押下してファイル名をつける
ファイル名はなんでも大丈夫です。目的や処理の名前をつけることが一般的です。
『新規作成』ボタンを押下して、『ファイル名』をつけます。
Javascriptを実際に書いていく
今回は、郵便番号フィールドについて、数字7文字で入力されていない場合に、エラーメッセージを表示していきます。
(function() {
'use strict';
});
})();
use strict は厳格モードということで、公式サイトでもおまじないと思えばよいとされています。
なので、気にせず次を書いていきましょう！
郵便番号チェックの変数を宣言
アロー関数型で入力していきます。
(function() {
'use strict';
// 郵便番号の入力チェック
const postCodeCheck = (event) => {
// 処理
}
});
})();eventの引数をわたすと、// 処理のところが実行されることになります。
const は再代入できない変数を意味しています。なので定数とはまた違うことらしいです。
郵便番号用の正規表現チェックを作成
正規表現は、よく入力チェックで使われる形式チェックをするためのプログラム（？）です。
『サルにもわかる正規表現入門』というサイトに解説があります。
自分でややこしいのは作れない私は、サルに負けているのかもしれません…(´;ω;｀)
郵便番号のチェックとして、半角数字7桁であることをチェックする正規表現を作成します。
const postCodePattern = /^\d{7}$/;あー出た！この表現（笑）
プログラミング教室で初めて習った時には、拒絶反応を脳みそが起こしたことを思い出した（笑）
eventレコードを取得する
kintoneで入力している画面のレコード値を取得するには、event.recordで取得するとこができます。
入力中のレコードを変数『rs』に代入します。
const rs = event.record;郵便番号のエラー値にNullを代入する
入力チェックを行うまでは、エラーかどうかはわからないので、エラーにはNullを代入しておきます。
rs.郵便番号.error = null;入力されている郵便番号を取得する
画面で入力されている郵便番号を定数『postCode』に代入する。
const postCode = rs.郵便番号.value;先ほど取得したrs（レコード）の郵便番号フィールドの値を取得しているということになります。
postCodeに値があり、文字数がゼロ以上の時にチェックを実行する
チェックは未入力状態で行っても仕方がないので、postCodeがTrueを返してくる時で、文字数の長さがゼロ以上の時にチェックを実行するようにします。
if (postCode) {
// 郵便番号の文字の数が0以上であれば
if (postCode.length > 0) {
// 郵便番号の正規表現でチェックする
}
}郵便番号を正規表現でチェック
正規表現にマッチすれば、半角数字7桁だからOK。
そうでなければ、半角数字7桁で入力するようにエラーメッセージを表示するようにします。
if (!(postCode.match(postCodePattern))) {
// Falseである場合は、エラーメッセージを代入する
rs.郵便番号.error = '半角数字で7桁で入力して下さい';
}これで、入力チェックするための変数を用意することができました。
全体はこちらです。
(function() {
'use strict';
// 郵便番号の入力チェック
const postCodeCheck = (event) => {
// 郵便番号のチェック7桁半角数字のみ
const postCodePattern = /^\d{7}$/;
// event からレコード取得
const rs = event.record;
// エラーメッセージをNullにする
rs.郵便番号.error = null;
// postCodeに郵便番号フィールドの値を代入
const postCode = rs.郵便番号.value;
// postCodeがTrueであれば
if (postCode) {
// 郵便番号の文字の数が0以上であれば
if (postCode.length > 0) {
// 郵便番号の正規表現でチェックする
if (!(postCode.match(postCodePattern))) {
// Falseである場合は、エラーメッセージを代入する
rs.郵便番号.error = '半角数字で7桁で入力して下さい';
}
}
}
};
})();郵便番号フィールドチェック実行設定
郵便番号フィールドが変更された時、レコードの登録時、レコードを修正登録時にチェックが実行されるように設定します。
APIのイベント一覧は、下記に記載があります。
レコード追加画面の入力変更時にイベントを発火させる
用意した、郵便番号チェックをイベントで発火させるように設定することで、チェックが実施されるようになります。
レコード追加画面に設定を追加します。
// 郵便番号フィールドイベント
// レコード追加画面フィールド値変更
kintone.events.on(['app.record.create.change.郵便番号',
], (event) => {
// postCodeCheckを発火させる
postCodeCheck(event);
return event;
});レコード編集画面フィールド値変更時に発火させる
レコード編集画面でのフィールド変更時にチェックがかかるように追加します。
// 郵便番号フィールドイベント
// レコード追加画面フィールド値変更
kintone.events.on(['app.record.create.change.郵便番号',
// レコード編集画面フィールド値変更
'app.record.edit.change.郵便番号',
], (event) => {
// postCodeCheckを発火させる
postCodeCheck(event);
return event;
});
レコード一覧画面フィールド値変更時に発火させる
レコード一覧画面でのフィールド変更時にチェックがかかるように追加します。
// 郵便番号フィールドイベント
// レコード追加画面フィールド値変更
kintone.events.on(['app.record.create.change.郵便番号',
// レコード編集画面フィールド値変更
'app.record.edit.change.郵便番号',
// レコード一覧画面フィールド値変更
'app.record.index.edit.change.郵便番号'], (event) => {
// postCodeCheckを発火させる
postCodeCheck(event);
return event;
});全体のコード
それでは、今までのコード全体を見てみましょう。
(function() {
'use strict';
// 郵便番号の入力チェック
const postCodeCheck = (event) => {
// 郵便番号のチェック7桁半角数字のみ
const postCodePattern = /^\d{7}$/;
// event からレコード取得
const rs = event.record;
// エラーメッセージをNullにする
rs.郵便番号.error = null;
// postCodeに郵便番号フィールドの値を代入
const postCode = rs.郵便番号.value;
// postCodeがTrueであれば
if (postCode) {
// 郵便番号の文字の数が0以上であれば
if (postCode.length > 0) {
// 郵便番号の正規表現でチェックする
if (!(postCode.match(postCodePattern))) {
// Falseである場合は、エラーメッセージを代入する
rs.郵便番号.error = '半角数字で7桁で入力して下さい';
}
}
}
};
// 郵便番号フィールドイベント
// レコード追加画面フィールド値変更
kintone.events.on(['app.record.create.change.郵便番号',
// レコード編集画面フィールド値変更
'app.record.edit.change.郵便番号',
// レコード一覧画面フィールド値変更
'app.record.index.edit.change.郵便番号'], (event) => {
// postCodeCheckを発火させる
postCodeCheck(event);
return event;
});
})();最後に、『保存』ボタンを押下してコードを保存します。
実際にエラーメッセージが表示されるか確認しよう！
数字以外を入力した場合にエラーメッセージが表示されるか試してみましょう！
エラーメッセージが表示されました！正しく動いていることが確認できました。
コメント