kintone はノーコードでさまざまなものが作れますが、実際はプラグインを利用したり、コードを書かざるを得ない場合があります。弊社サービスを使っていただきたいのはやまやまですが、お客様によってはそもそもプラグインよりもコードを書いた方がいい場合もあるかもしれません。しかし、どこにコードを書けばいいのかわからないという人もいるかと思います。今回は、そんな kintone のカスタマイズの隙間を柔軟に解決するサイボウズが提供するプラグイン JSEdit for kintone をご紹介いたします。
JSEdit for kintone は kintone 上でコードを書くことができるプラグインです。通常、kintone に JavaScript ファイルを登録する際は、ローカルにあるファイルをブラウザでアップロードすることで登録します。しかし、この JSEdit for kintone はブラウザ上でコードを書いて保存すればそのままアプリに適用されます。
今回は例として、サンプルアプリをインストールして、一つフィールドを追加し、JSEdit for kintone プラグインでそのフィールドを操作してみたいと思います。
1.ダウンロードとインストール
zip ダウンロードと kintone へのインストールができましたら次へ進んでください。
2. サンプルアプリ作成
今回は運送業・郵便業の配送依頼アプリをカスタマイズしてみましょう。
アプリの新規作成画面に遷移したら画面左の業種で探すから運送業・郵便業をクリック
配送依頼を選択したら右側のこのアプリを追加をクリックし、確認ポップアップで追加をクリックします。
配送依頼アプリがスペースに追加されたことを確認してください。
3. フィールド追加
次に、配送依頼アプリをクリックしてアプリの設定画面に遷移します。
3.1 レコード番号フィールド追加
アプリのフォームの編集画面でレコード番号をドラッグアンドドロップしてください。
3.2 レコード番号コピーフィールド追加
つぎに、文字列（1行）のフィールドをドラッグし、レコードIDのコピーを保存するフィールドを追加します。
フィールド名を、「フィールドIDコピー」とします。フィールドコードを「record_id_copy」とします。
結果、以下のように二つのフィールドが配置されます。
4. カスタマイズしたいアプリでプラグインを有効化
アプリが作成できましたら、アプリの設定画面に遷移します。設定画面で「プラグイン」をクリックします。
プラグインの一覧に何も追加されていないことを確認し、「追加する」ボタンをクリックします。
インストールされたプラグインの一覧から「JSEdit for kintone」をクリックし、「追加」をクリックします。
プラグインの一覧に「JSEdit for kintone」が出ていることを確認し、「設定」をクリックします。
5. コードの記述・保存
今回は、配送依頼アプリに編集で JSEdit for kintone でレコードを保存した際にレコードIDをフィールドにコピーする処理を定義してみましょう。
5.1 ファイル名の設定
ファイル名は何をやっている処理なのかが分かるようにしておきましょう。
画面左上の「新規作成」ボタンを押し、ファイル名入力のポップアップダイアログが出ます。
今回はレコードIDを指定のフィールドrecord_id_copyにコピーしますので、「record_id_copy」としてみましょう。
PC用のJavaScriptファイルが選択されていることを確認ください。
ポップアップダイアログに入力してOKを押します。
5.2 コードの記述
以下のコードを編集領域に張り付けます。
(function() {
'use strict';
// ----------------------------------------------------------------
// 設定項目
// レコードIDのコピーを書き込むフィールドのフィールドコードを指定してください。
const ID_FIELD_CODE= 'record_id_copy';
// ----------------------------------------------------------------
// レコードの新規保存が成功した後のイベント
kintone.events.on('app.record.create.submit.success', function(event) {
// kintone.app.getId() を使って現在のアプリIDを動的に取得します。
const appId = kintone.app.getId();
// 保存されたレコードのIDを取得します。
const recordId = event.record.$id.value;
const params = {
app: appId, // 取得したアプリIDを設定
id: recordId,
record: {
// 設定項目で指定したフィールドコードを利用します
[ID_FIELD_CODE]: {
value: recordId
}
}
};
// kintone REST API を呼び出して、作成されたレコード自身を更新します。
// Promiseが返されるため、.then() と .catch() で成功/失敗時の処理を記述できます。
return kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', params)
.then(function(resp) {
console.log('「' + ID_FIELD_CODE+ '」フィールドの更新に成功しました。', resp);
return event;
})
.catch(function(error) {
console.error('「' + ID_FIELD_CODE+ '」フィールドの更新に失敗しました。', error);
// 開発者ツールのコンソールでエラー内容を確認できます。
return event;
});
});
})();
張り付けた後、保存を押して完了です。
なお、今回はPC用のJavaScriptファイルを作成しました。モバイルにも適用したい場合は、「スマートフォン用のJavaScriptファイル」とし、 kintone.events.on の第一引数に渡すイベント名を mobile.app.record.create.submit.success にして保存します。
6. 実際の動作確認
アプリのレコードを新規作成してみましょう。値を入れて保存したことにより、「レコードIDコピー」フィールドに値が転記されていることが確認できるかと思います。
以下のようにダミーの値を入れて保存してみます。
以下のようにレコードIDのコピーが作られていることが確認できました。
いかがでしたでしょうか。
今回は、kintone上で直接コードを編集できるプラグイン「JSEdit for kintone」をご紹介しました。 ローカルでファイルを編集してアップロードする、という一手間がなくなるだけで、少し試してみたい、微修正したいといった場合の開発効率が格段に向上します。これまでJavaScriptカスタマイズに少しハードルを感じていた方も、この「JSEdit for kintone」を使えば、より手軽にカスタマイズの世界へ一歩踏み出せるはずです。
まずは今回のサンプルを参考に、あなたの業務に合わせた「ちょっとした改善」から始めてみませんか？