こんにちは、ジョイゾーでkintoneプラグインの開発エンジニアをやっている川嵜です。
「kintoneをもっと使いこなしたい！」「ちょっとしたカスタマイズに挑戦してみたい！」
そう思いながらも、何から始めていいのか分からず、手をつけられていない方も多いのではないでしょうか。
そんな方におすすめなのが、「kintoneのJavaScript API」を使ったシンプルなカスタマイズです。
難しい外部APIや複雑なライブラリを使わなくても、kintoneが標準で提供しているイベントの仕組みを活用することによって、ちょっとした工夫で普段の業務をグッと便利にすることができます！
この記事では、JavaScript APIとイベントの組み合わせだけでできる、手軽なカスタマイズを紹介します。
弊社では初回開発無料の定額39万円でkintoneアプリを開発する定額型開発サービス「システム３９」を提供しております。kintoneの導入やアプリ開発でお困りの方は、お気軽にご相談ください。
＊Webでの打ち合わせも可能です。
kintone JavaScript APIとは
「そもそも kintone の JavaScript API ってなに？」と感じた方もいるかもしれません。
名前だけ聞くと難しそうに感じますが、
これは kintoneの画面上の操作にあわせて、処理を追加できる仕組みのことです。
たとえば、kintone ではレコードの追加・編集・保存・削除など、
ユーザーの操作に応じて JavaScript を使った処理を差し込むことができます。
このとき使われるのが「イベント」と呼ばれる仕組みです。
kintone JavaScript API
どんなイベントがあるの？
具体的には、次のような操作のタイミングがイベントとして用意されています。以下のような「操作の瞬間」をトリガーとして、JavaScriptで自由に処理を追加していくことができるようになります。
- レコード追加画面を表示したとき
- 特定のフィールドの値が変更されたとき
- 保存ボタンが押下されたとき
などがあり、ここに記載したもの以外にも様々なイベントが存在します！
カスタマイズでこんなことができます！
では、実際にどんなことができるのか、具体例を見てみましょう。
kintoneのJavaScript APIを活用すると、日常の業務でよくある
「こんな機能があったらいいな」を簡単に実現できます。
- 選択肢に応じて、フィールドの表示・非表示の切り替え
- 保存ボタン押下後に、最終確認用のポップアップを表示
- 入力内容に応じて、フィールドの背景色やラベルを変える
- 入力ミスを防いだり、入力を手間なく進められるように補助する処理
上記はあくまで一例なのですが、様々なカスタマイズが可能です！
このような機能を実装することで、業務をスムーズに、ストレスなく行えるようになります。
次は、実際のコードの例も交えながら、
３つ便利なカスタマイズを紹介していきますので、ぜひ参考にしてください！
すぐに試せる！
3つのJavaScriptカスタマイズ紹介
ここからは、すぐに試せるカスタマイズを 3 つご紹介します。
どれもシンプルなコードで実装できて、日々の作業をちょっと便利にしてくれるものばかりです。
今回は、kintoneアプリストアの営業支援パック内に存在する「案件管理」アプリをベースに、それぞれのカスタマイズを実装していきます。
カスタマイズをする際のコードの適用方法については、kintone ヘルプで詳しく紹介されています。
JavaScriptやCSSの適用方法が分からない方は、以下リンクをチェックしてみてください。
JavaScriptやCSSでアプリをカスタマイズする
フォームは以下のような構成になっています。
それでは、1つ目のカスタマイズ「選択肢に応じて、フィールドの表示・非表示の切り替え」から見ていきましょう！
1. 選択肢に応じて、フィールドの表示・非表示の切り替え
アプリ内の「提案プラン」というドロップダウンフィールドには、
「Aプラン」「Bプラン」「Cプラン」「その他」という4つの選択肢が存在します。
そのうち、「その他」を選択したときだけ、
複数選択フィールドの「オプション」を非表示にしたいケースです。
不要な入力欄を隠すことで、ユーザーの迷いや入力ミスを減らし、スムーズな入力を利用者に促すことができます。
(function () {
"use strict";
const events = [
'app.record.detail.show',
'app.record.create.show',
'app.record.edit.show',
'app.record.create.change.提案プラン',
'app.record.edit.change.提案プラン'
];
const planFieldCode = '提案プラン';
const optionFieldCode = 'オプション';
kintone.events.on(events, function (event) {
const record = event.record;
if (!record[planFieldCode]) {
console.warn(`「${planFieldCode}」が見つかりませんでした`);
return event;
}
const value = record[planFieldCode].value;
const shouldHideOption = (value === 'その他');
kintone.app.record.setFieldShown(optionFieldCode, !shouldHideOption);
return event;
});
})();
「提案プラン」で「その他」が選択されている場合に、
「オプション」を非表示にするというコードを書いてみました。
これで不要な入力欄を隠すことが可能となり、利用者の入力ミスや混乱を防ぐことができました。
次は、入力内容に応じてフィールドの背景色を変えて、重要な情報を強調する方法をご紹介します。
2. 入力内容に応じて、フィールドの背景色を変更
アプリ内の「確度」というドロップダウンフィールドには、
「0%」「20%」「40%」「60%」「80%」「100%」という選択肢が存在し、
そのうち、80%または100%を選択したときに、フィールドの背景色を薄い赤に変えて、注意を促したいケースです。
(function () {
'use strict';
const events = [
'app.record.detail.show',
'app.record.index.show'
];
const fieldCode = '確度';
kintone.events.on(events, function (event) {
if (event.type === 'app.record.detail.show') {
// 詳細画面用の処理
const record = event.record;
if (!record || !record[fieldCode] || record[fieldCode].value === undefined) {
console.warn(`「${fieldCode}」の値が取得できませんでした`);
return event;
}
const value = record[fieldCode].value;
if (value === '80%' || value === '100%') {
const el = kintone.app.record.getFieldElement(fieldCode);
if (el) {
el.style.backgroundColor = '#ffcccc';
}
}
} else if (event.type === 'app.record.index.show') {
// 一覧画面用の処理
const records = event.records;
if (!records || !Array.isArray(records)) {
console.warn('一覧のレコードが取得できませんでした');
return event;
}
records.forEach(function (record, index) {
if (!record[fieldCode] || record[fieldCode].value === undefined) {
console.warn(`${index}行目の「${fieldCode}」の値が取得できませんでした`);
return;
}
const value = record[fieldCode].value;
if (value === '80%' || value === '100%') {
const els = kintone.app.getFieldElements(fieldCode);
if (!els || !els[index]) {
console.warn(`${index}行目の要素が取得できませんでした`);
return;
}
const el = els[index];
el.style.backgroundColor = '#ffcccc';
el.style.color = '#000000';
}
});
}
return event;
});
})();
上記のようなコードを書いて、各画面を確認してみると、、、
一覧画面・詳細画面で、確度が「80%」「100%」の背景色が赤く表示され、
確度が高い案件が一目でわかるようになり、視覚的に対応する際の優先順位がつけやすくなりました！
最後に、保存操作の際に確認のポップアップを表示させて、
誤操作やうっかりミスを防ぐカスタマイズをご紹介します。
3. 保存ボタン押下後に、ポップアップを表示させる
アプリ内の計算フィールド「合計費用」が150万円以上になる場合、保存ボタンを押した後に確認のポップアップを表示して、
特に高額な案件や費用に注意を促したいケースです。
(function() {
'use strict';
const events = [
'app.record.create.submit',
'app.record.edit.submit'
];
const totalCostField = '合計費用';
kintone.events.on(events, function(event) {
const record = event.record;
if (!record || !record[totalCostField] || record[totalCostField].value === undefined) {
console.warn(`「${totalCostField}」フィールドの値が取得できませんでした`);
return event;
}
const totalCost = record[totalCostField].value;
if (totalCost >= 1500000) {
const confirmMessage = '合計費用が150万円以上です。\nこのまま保存してもよろしいでしょうか？';
if (!confirm(confirmMessage)) {
return false;
}
}
return event;
});
})();
こちらもコードを書いてみて、
「合計費用」が150万円を超えるレコードで保存ボタンを押下し、
動作を確認してみると、、、
「本当に保存してもよろしいでしょうか？」と確認ポップアップが表示されるようになりました！
これにより、合計費用が高額の場合の保存ボタン押下後に、ポップアップが表示されて担当者が保存ミスや不注意を防ぎやすくなります！
おわりに
今回は、kintone JavaScript APIを使ったカスタマイズを3つご紹介しました！
「kintoneのカスタマイズに挑戦してみたいけど、難しそう…」という方も、
まずは今回のようなシンプルなカスタマイズから始めてみるのがおすすめです。
ちょっとした工夫で業務の効率を上げられる一方で、業務アプリにカスタマイズを加える際は、
不具合発生時のリスクや保守の負担といった面も意識する必要があります。
「安心して使えること」は、業務アプリにおいてとても重要な要素です。
だからこそ、カスタマイズだけに頼るのではなく、用途に応じてプラグインやプロのサポートも活用しながら、
kintoneをより便利に、そして安心して使える環境にしていきましょう。
弊社では初回開発無料の定額39万円でkintoneアプリを開発する定額型開発サービス「システム３９」を提供しております。kintoneの導入やアプリ開発でお困りの方は、お気軽にご相談ください。
＊Webでの打ち合わせも可能です。
