Help us understand the problem. What is going on with this article?

kintoneのクライアントアプリ(REST API)に計算フィールド機能を組み込む

はじめに

kintoneとREST APIで通信するクライアントアプリを作成している中で、
計算フィールド機能の組み込みが個人的に難所だったので思考をメモします。

やりたいこと

クライアントアプリの入力フォームに計算フィールドの機能を実装する。

スクリーンショット 2020-02-24 11.38.06.png

上のような入力フォームがあった場合、「数値フィールド」に10が入力されたら「計算フィールド」に12を表示することになります。

つまり、以下のようなExcelと同じ挙動になる

スクリーンショット 2020-02-24 11.23.40.png

前提

以下のように「計算フィールド」は「数値フィールド」の入力値をリアクティブに検知できることとします。

スクリーンショット 2020-02-24 12.03.07.png

AST

ここからが本題で、計算フィールドの演算を処理するためにはフィールドに設定された「演算子/関数」を事前に解析しておく必要があります。
(FieldのGET-APIで取得した時点ではただの文字列)

「excel-formula-ast」というライブラリを使うことに
 https://github.com/psalaets/excel-formula-ast

import {tokenize} from 'excel-formula-tokenizer';
import {buildTree} from 'excel-formula-ast';

const formula = 'SUM(数値フィールド, 2)';
const tree = buildTree(tokenize(formula));

console.log(tree);

文字列の計算式を解析した結果が以下のようなjson形式で取得できます

{
    "type":"function",
    "name":"SUM",
    "arguments":[
        {"type":"cell","key":"数値フィールド"},
        {"type":"number","value":2}
    ]
}

'SUM(SUM(数値フィールド, 4), 2)'のように関数がネストしている場合は解析結果のJSONもツリー状にネストされていきます。

このライブラリが行ってくれるのは解析までなので、SUM関数の処理(引数を加算する処理)は自前で用意する必要があります。サンプルコードを書みていただければ流れがつかめると思います。

サンプルコード:
https://stackblitz.com/edit/formula-test?embed=1&file=src/app/app.component.ts

formula.gif

関数の実装

サンプルコードでいうcalcメソッド内にkintoneの関数(SUM、 IF..)をswitch文に追加実装していくことになります。

private calc(tree, cells: {[code: string] : number}) {
    switch(tree.type) {
      case 'function' :
        switch (tree.name) {
          case 'SUM':
            // calcを再帰的に呼ぶことでネストされた関数も演算できる
            const argValues = tree.arguments.map(arg => this.calc(arg, cells));
            return argValues.reduce((pre, cur) => pre + Number(cur) , 0);
         }
      case 'number' :
        return tree.value;
      case 'cell' :
        return cells[tree.key];
    }
  }

また、excel-formula-astは演算子のパターンがexcel想定なので
kintoneに対応させるためにはソースコードに直接手をいれていく必要があります。
※具体的にはサブプロジェクトのexcel-formula-tokenizerに「!=」を演算子として追加する必要がある

最後に

今回は実装イメージだけで、kintone対応の実装のせるとこまで書けなかったですが、
ソースコード整理できたら「kintone-formula-ast」としてforkしたい!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした