【Calculated Fields Form】WordPressのフォーム上で計算をさせよう！

みなさん、こんにちは。
いしかわつかさです。

今回はWordpressのフォーム上で計算を自動でやる方法を紹介したいと思います。

仕事であったらいいなと思った事が発端で、シンプルで導入しやすいという理由から
「Calculated Fields Form」を選択しました。

Calculated Fields Form インストール

まずはCalculated Fields Form をインストールしましょう。WordPressのダッシュボードから、プラグイン → 新規追加 → 右上の検索窓で「Calculated Fields Form」と検索します。
インストールした後、有効化します。

「Calculated Fields Form」の設定

①の設定画面から、②で新規作成をおこないます。
③に追加されますので、④で設定を行っていきます。
⑤はショートコードとなっており、完成後ここをコピーして使用します。

インストール時点では、サンプルフォームが5つ用意されていますのでそれで動作確認を行い、
理解するのもいいと思います。

フォーム編集画面

新規作成して「Settings」をクリックすると「Add a Field」画面が開きます。
これから①~⑤の手順で簡単なテストデータを作成していきます。

Field Settings　フォームコントロールの編集

①のタイトルを編集してみます
ここでは、From Name を「テスト用　計算式」と入力し、
Description は空白にしました。

Field　を編集する

②のfieldを編集していきます。
ここは、数字の入力フィールドになります。
この　fieldname2　というのは、計算時に必要な情報になります。
Field Label ですが、変更しなくても良いのですが、
テストなので「数」に変更します。

Separaorを編集する

③のセパレーターを編集します。
②と同じようにField Settingで編集します。
点線のセパレーターの下に文字が入っていますが、今回は不要なのでそこをさくじょします。

Dropdown を追加する

Add a Field に移動し Dropdown をクリックして追加します。
Fieldname3 が追加されるので、それをドラッグして Fieldname2 の上に移動させます。

Dropdown を編集する

④Dropdown を編集します。ラベルは「サイズ」とします。

その下の方にあるChoicesで情報を追加編集します。
Text はリスト上に表示される名称になり、
Valueは実際の計算に使う数値となります。

計算をさせる

⑤Field Labelを「結果」に変更します。
そして、「Set Equation」に計算式を入力します。今回はシンプルに掛け算です。
「fieldname2 * fieldname3」

最後に Preview のボタンが設定画面下と右上にあるので挙動を確認しましょう。

計算結果に任意の文字を表示したい場合は、「Symbol to display at the end of calculated field」を編集して下さい。
今回の場合「円」にしています。

バグ？？計算結果がおかしい。

設定が終わって動作確認をしていると、何やら様子がおかしい。
今回試した数式は非常に簡単。だがしかし、ありえない結果が出た。

計算式　0.6×6

3.5999999999999996

になりました。なぜ？？
と思いながらも、深く考えずに小数点第3位を四捨五入して切り上げる事で解決する事にしました。

具体的には関数で　prec　を使用しました。
これは指定した小数部分の位になるように四捨五入してくれます。

計算式　prec (0.6×6 , 2)

3.60

結果としては解決しました。

が、納得できなかったので、色々調べた結果、
どうやらJavaScriptの仕様のようです。　←　間違っていたら教えて下さい。

JavaScriptでは、小数を四則演算すると微妙な誤差が生じるようで、結果的には解決しませんでした。
正確には解決方法はあります。decimal.js をなんやするようで、現段階ではそんな難しい計算はさせないので良しとしました。avaScriptの数値型はIEEE754　倍精度浮動小数点数(double)の1種類のみで、どうしても誤差が出るようです。浮動小数点数の仕様であり、コンピューターで小数を表そうとする限り避けようのない問題みたいです。

問題は、小数で計算をさせない事なので、試しに、

計算式　(60 x 6 ) / 100

3.60

上記のように、正しく計算がされました。

もっといろいろな計算をするタイミングが来るとともうので、来るかな？その時にこの問題も解決したいと思います。

Calculated Fields Formで使える関数と条件式

複雑な計算をさせるつもりなので、その時の為にまとめておきます。

よく使いそうな関数

sum (x, y, z, ….)	パラメータによって渡された値の 合計を返します	sum (3, 10, 11) は 24 を返します
average (x, y, z,….）	パラメータによって渡された値の 平均を返します	average (3,10,11) は 8 を返します
concatenate (x, y, z, ….)	すべてのパラメータが連結された テキストを返します	concatenate (1, 2, 3) は 123 を返します
prec (x, y)	x を y で指定した小数点以下の 桁数になるように四捨五入して 返します	prec (10.3365, 2) は 10.34 を返します prec(10,2) は 10.00 を返します
floor (x)	xを返し、最も近い整数に 切り捨てられます	fieldname1の値が1.6の場合 floor (fieldname1) の結果は1 floor (2.6、0.5 ) =2.5 になります
remainder (x, y)	余りを返します 余りは、ある整数を別の整数で除算して 整数商を生成した後に残った整数です	remainder（7,2）は 1 を返します
abs (x)	xの絶対値を返します	fieldname1の値が-7.25の場合 abs (fieldname1) の結果は 7.25 になります
ceil (x)	最も近い整数に切り上げられた xを返します	fieldname1の値が1.4の場合 ceil (fieldname1) の結果は2 ceil (2.3, 0.5) = 2.5 になります
max (x, y, z, … n)	値が最も大きい数値を返します	fieldname1の値が5で fieldname2が10の場合 max (fieldname1, fieldname2) の 結果は 10 になります
min (x, y, z, … n)	最小値の数値を返します	fieldname1の値が5で fieldname2が10の場合 min (fieldname1, fieldname2) の 結果は 5 になります
random ()	0 から 1 の間の乱数を返します
round (x)	xを最も近い整数に丸めます。	ieldname1の値が2.5の場合 round (fieldname1) の結果は3 round (2.3, 0.5) = 2.5になります
cdate (x, y)	日付のようにフォーマットされた 数値xを返します 2番目のパラメーターは 出力日付のフォーマット ( ‘mm / dd / yyyy’ , ‘dd / mm / yyyy’ )を 定義します 数字は1970年1月1日からの 日数を表します	fieldname1が日付フィールドであり その値が2013年11月3日の場合 cdate (fieldname1 + 10) は 2013年11月13日になります

他の記号を知りたい方はこちら（英語）
※Equations and operations – Mathematical operations

使用出来る条件式

IF (条件, trueの場合は値, falseの場合は値)	条件が満たされているかどうかを確認し、trueの場合は1つの値を返し、falseの場合は別の値を返します。 IF( logical_test, value_if_true, value_if_false)	fieldname1の値が10で、fieldname2の値が20の場合、結果は次のようになります。 IF (fieldname1 <fieldname2、fieldname1, fieldname2) は10になります
AND (x, y, z, ….)	すべての引数がtrueであるかどうかを確認し、すべての値がtrueの場合はtrueを返し、別の方法ではfalseを返します。 AND (logical1, logical2, …)	fieldname1、fieldname2、fieldname3の3つのフィールドがあり、それぞれ値が10, 20, 30であるとします。 AND (fieldname1 <100, fieldname2 <100, fieldname3 <100) はtrueになります しかし AND (fieldname1 <100, fieldname2 <100, fieldname3 <25) は falseです。これは, fieldname3が25より大きいためです。
OR (x, y, z, ….)	引数のいずれかがtrueであるかどうかを確認し、いずれかの値がtrueの場合はtrueを返し、すべての値がfalseの場合はfalseを返します。 OR (logical1, logical2, …)	fieldname1, fieldname2, fieldname3の3つのフィールドがあり、それぞれ値が10、20、30であるとします。 OR (fieldname1 <100, fieldname2 <100, fieldname3 <25) はtrueです。これは、3番目の条件が失敗した場合を含め、少なくとも2つの初期条件がtrueであるためです。 しかし OR (fieldname1 <5, fieldname2 <5, fieldname3 <25) は、3つの条件が失敗するため、falseです。
NOT (x)	falseをtrueに、またはtrueをfalseに変更します。NOT (論理)	NOT (true) falseを 返す NOT (false) true を 返します
IN (x, [x, y, z, ….])	用語が2番目の引数に含まれているかどうかを確認します。2番目の引数は文字列または文字列配列の場合があります。 IN (用語、文字列/配列)	IN (10, [10,20,30,40]) true を 返す IN (‘world’, ‘hello world’) true を 返す

まとめ

Excelの延長戦上にあるような計算式の記述の仕方なので、これはみんなが使いやすいと感じた。
こんな簡単にプラグインで実装出来るので、ほんまに便利。こういうことって本来もっと難しいはず。
主に仕事での利用になると思いますが、色々使っていきたいです。