みなさん、こんにちは。
いしかわつかさです。
今回はWordpressのフォーム上で計算を自動でやる方法を紹介したいと思います。
仕事であったらいいなと思った事が発端で、シンプルで導入しやすいという理由から
「Calculated Fields Form」を選択しました。
複雑な計算も出来そうなので、Excelに似た使い勝手です。全て英語なのでそこはちょっと慣れが必要ですが。
テスト用に作ったのは左図です。
サイズをドロップダウンで選択し、数を入力したら、結果に金額が表示されるというシンプルなモノです。
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の延長戦上にあるような計算式の記述の仕方なので、これはみんなが使いやすいと感じた。
こんな簡単にプラグインで実装出来るので、ほんまに便利。こういうことって本来もっと難しいはず。
主に仕事での利用になると思いますが、色々使っていきたいです。
コメント