こんにちは、齋藤です。
みなさん、kintoneの計算フィールドは利用されていますか？
たとえば「価格×個数＝合計金額」のような簡単な計算や、IF関数を利用した複雑な計算など、使いこなせると大変便利です。実はこの計算フィールド、PC版ではレコード編集画面で計算結果が即時反映されるのに対して、モバイル版では表示されません。実際にモバイル版ではフィールドの入力値を変更しても、その場では計算結果が更新されず、レコードを保存してからでないと正しい値が見えないのです。
そこで、モバイル版でも計算結果がリアルタイムで表示されるようにカスタマイズしてみました！
弊社では初回開発無料の定額39万円でkintoneアプリを開発する定額型開発サービス「システム３９」を提供しております。kintoneの導入やアプリ開発でお困りの方は、お気軽にご相談ください。
＊Webでの打ち合わせも可能です。
PC版とモバイル版のイベントの違い
kintoneでJavaScriptカスタマイズを行う際、PC向けとモバイル向けではイベントの名前が異なることをご存じでしょうか？
例えば、レコードの編集画面を開いた時に発火するイベントは、PC版ではapp.record.edit.show、モバイル版ではmobile.app.record.edit.showとなります。この違いを意識せずにPC版だけを想定してコードを書いてしまうと、モバイル版ではカスタマイズがうまく動かないことがありますが、逆に言えば、意識して使い分けることでPC版とモバイル版でカスタマイズを分けることも出来ます。今回はモバイル版のみのカスタマイズを想定しているので、PC版のイベントは利用しません。
どのタイミングで計算結果を反映させるの？
今回は「価格×個数＝合計金額」という計算式で作成しています。モバイル版のレコードの編集及び追加画面で、「価格」か「個数」の値が変わった際に「合計金額」が即時計算され表示されるようにしました。指定したフィールドの値が変わった際にイベントを発火させるという仕組みです。
// 価格または個数が変更されたときに再計算
const changeEvent = [
'mobile.app.record.edit.change.価格',
'mobile.app.record.create.change.価格',
'mobile.app.record.edit.change.個数',
'mobile.app.record.create.change.個数',
];
kintone.events.on(changeEvent, (event) => {
// 変更後の入力値を取得
const price = event.record.価格.value;
const quantity = event.record.個数.value;
changeEventでまとめるとスッキリしますね。
変更後の値を計算式に当てはめる
取得した価格と個数の値を、計算式の関数に当てはめ再計算します。
ただこの書き方は計算式が「価格×個数」に固定されてしまいます。他のアプリでも応用する場合は、kintone REST APIを実行し自動計算フィールドの計算式を取得する方法が良いかと思います。
ただ今回のカスタマイズではそこまで踏み込まず、シンプルな方法で作成しています。
// 計算式に変更後の値を渡して計算
const newTotal = price*quantity;
// スペースフィールドに結果を表示
const spaceField = kintone.mobile.app.record.getSpaceElement('space');
if (spaceField) {
spaceField.innerHTML = '';
const div = document.createElement('div');
div.textContent = newTotal;
spaceField.appendChild(div);
}
計算結果は、アプリ内に配置したスペースフィールドに表示させるように設定しました。スペースフィールドを取得する関数は、イベントと同様に、ここでもPC版とモバイル版で異なります。モバイル版はkintone.mobile.app.record.getSpaceElement(‘フィールド名’)です。
※PC版はkintone.app.record.getSpaceElement(‘フィールド名’)
モバイルの編集画面を開いてみると…！
計算結果が表示されるようになりました！やったー！！
ちなみに…
本当は計算フィールドに表示できたらかっこいいのですが…kintoneでは非推奨なカスタマイズのため今回はグループの中に入れて隠しています。
まとめ
今回は、モバイル版のレコード編集画面でも計算結果を即時反映する方法を紹介しました。
実は私自身、カスタマイズは全くの初心者のため、ChatGPTや社内の先輩に相談したり、cybozu developer networkで確認したりと試行錯誤を重ねました。
こうして少しずつ理解が深まり形になるものが作れると、本当に嬉しいですね。
このブログを通して、学んだことや活用アイデアをシェアし、成長できればいいな〜と思います！
ジョイゾーでは、アプリの対面開発だけでなく、JavaScriptを活用したコーディング開発も行っています。
「こんなことができるかな？」「もう少し効率化を図りたい」など、カスタマイズに関する疑問や相談がありましたら、ぜひお気軽にご相談ください！
弊社では初回開発無料の定額39万円でkintoneアプリを開発する定額型開発サービス「システム３９」を提供しております。kintoneの導入やアプリ開発でお困りの方は、お気軽にご相談ください。
＊Webでの打ち合わせも可能です。
