kintoneの見積書アプリにサブテーブルの四捨五入計算を実装してみる

[kintone Advent Calendar 2018](https://qiita.com/advent-calendar/2018/kintone)の記事です。kintoneカスタマイズを通してkintone愛を語ろうと思います。

#アプリ作成が難しそう？
###アプリストアがあります。
kintoneのアプリを作る時はまずアプリストアで使えるものが無いか探します。
そのまま使えるものも多いので、アプリストアは重宝しています。

今回は[アプリストアの「商品見積書パック」](https://kintone-sol.cybozu.co.jp/apps/054-mitsumori.html)を使って、四捨五入の処理を追加してみました。

#カスタマイズ？無理無理！
###[JSEdit for kintone](https://developer.cybozu.io/hc/ja/articles/205452653-JSEdit-for-kintone)を使って簡単にカスタマイズ出来ます。
kintoneはプログラミングに詳しくなくても、気軽にカスタマイズが試せます。
kintoneをカスタマイズできるプラグインが用意されています。これを使えばJavaScriptやCSSをkintone上で作成して直ぐに結果を見ることが出来ます。
コマンド補完などの機能もあるので、ちょっとしてカスタマイズはJSEditを使って十分出来てしまいます。

# 今回のカスタマイズの完成イメージ
<img width="890" alt="スクリーンショット 2018-12-09 20.45.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/214523/7a1b8fbc-e609-48a6-0af8-603f30a2cbc2.png">

# フォーム画面
サブテーブルに下記のフィールドを追加しています。

| フィールド名       |       種類     |    フィールドコード    |
|:-----------------|:------------------|:------------------:|
| 四捨五入         |  数値         |   四捨五入       |
| 合計金額四捨五入  | 計算          | 合計金額四捨五入 |
| 消費税四捨五入    | 計算          | 消費税四捨五入 |
| 税込合計四捨五入  | 計算          | 税込合計四捨五入 |

# 追加した機能

1. 四捨五入処理
2. フィールドの編集不可設定

# 主な処理の説明

## 1. 四捨五入処理
見積明細サブテーブルに、数値フィールドを追加。四捨五入した計算結果をセットします。
今回はMath.roundを使って、小数点第一位で四捨五入しています。

```javascript
changes.row.value.四捨五入.value = Math.round(event.changes.row.value.単価.value * event.changes.row.value.数量.value);
```

## 2. フィールドの編集不可設定
数値フィールドにセットした計算結果を、編集不可に設定します。
レコードの新規作成、編集、サブテーブルの追加・削除イベント時に処理を行います。

```javascript
kintone.events.on(['app.record.create.show','app.record.edit.show','app.record.create.change.見積明細','app.record.edit.change.見積明細'], function(event) {
        let record = event.record;
        for (let i=0, len = record.見積明細.value.length; i<len; i++) {
            record.見積明細.value[i].value.四捨五入.disabled = true;
        }
        return event;
    });
```

# おまけ

見積書を作ったら、納品書・請求書はそのまま利用できる方が良いですよね。

見積書・納品書・請求書をラジオボタンで選択して、タイトルを切り替えできるようにしてみました。
<img width="767" alt="スクリーンショット 2018-12-09 21.35.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/214523/d38b51cd-8ba6-000b-384a-93d5a3f8868a.png">

```javascript
    kintone.events.on("app.record.detail.show", function(event) {
        let record = event.record;
        let valTitle = record.帳票名.value;
        let fdTitle = kintone.app.record.getSpaceElement("title");
        fdTitle.innerHTML = '<div class="control-gaia control-label-field-gaia " style="box-sizing: border-box; width: 163px; height: auto;"><div class="control-inner-gaia"><span class="control-value-label-gaia"><font size="6"><b>' + valTitle + '</b></font></span></div></div>';
    });
```
<img width="827" alt="スクリーンショット 2018-12-10 20.23.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/214523/b9e5facf-c1c0-0d73-9574-c69ea0276914.png">
ラジオボタンで選択した帳票名のテキストをスペースフィールドにセットしています。

#最後にまとめ
kintoneアプリストアの「商品見積書パック」にちょっとした便利機能を実装してみました。

今回のカスタマイズ内容は、[「cybozu developer network」](https://developer.cybozu.io/hc/ja)に蓄積されている情報を参考にしています。

kintoneはオープンソースではなく、サイボウズさんの製品の１つなのですが、[「cybozu developer network」](https://developer.cybozu.io/hc/ja)や[kintone Café](https://www.kintonecafe.com/)など、ユーザーさんの情報共有の場がオンライン、オフラインで用意されているのは、個人的にとても良いなと感じています。

また来年も[「cybozu developer network」](https://developer.cybozu.io/hc/ja)や[kintone Café](https://www.kintonecafe.com/)を通じて、kintoneの良さを発信していきたいと思っています。