普通の入力フォームをエクセルのように数式を登録して計算できるようにする方法

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

WEBページで色々なシステムやサービスを構築していると、「エクセルの数式登録って本当にいい仕組みだな」と考えさせられます。
 

任意のセルの値と別の値を足したり掛けたりして、自由に好きな式を登録して、作った人はなんとなく便利なシステムを自分で作った気分になれるし、実際に非常に便利に使い続けている人も多いことを考えると、世の中のシステムでもっとこうした仕組みを取り入れていかないといけないのでは・・・と考え始めました。
 

ただ、SQLなどに、数値以外の数式を入れる場合は、型が違うとかの理由でシステム構築する際の設計が非常に重要になってくるので、今回は入力フォームで出来るレベルの手軽な方法を簡単なプログラムと一緒にご紹介します。

サンプルコード

 

 

 

使い方

サンプルは全てのファイルをWEBサーバーの同じ場所に設置すると動作するようになっています。
 

index.htmlにアクセスすると、表示されるinput項目に数値または数式を入力するようになります。
数式はエクセルと同じく”=”イコールから始まる文字列にすると、書かれた数式の結果数値が表示され、入力項目にアタッチし直すと、再度数式が現れて編集ができるようになります。
 

エクセルのようにサーバー登録後に何度も数式を編集し直す場合は、データ登録を数式で行う必要がありますが、そうではない場合は計算結果の数値のみサーバーに送る方法もアリです。
 

サンプルでは、送信時に入力フォームを数式の計算結果から数式に入れ替えてサーバーに送るようにしていますが、この辺はシステム全体の仕様に関わるので、サーバー構成で決めてもらえればと思います。

サンプル

See the Pen
Excel-input
by YugetaKoji (@geta1972)
on CodePen.


 

サンプルではphpへのアクセスは出来ないので、「送信」ボタンを押すとエラーになりますが、今回はフロントエンドまでのご紹介という事で、それ以降はご使用に応じてお使いください。
 

ちなみに、この入力フォーム(inputタグ)は、普通に数値登録しても使えるので、アドオン機能として利用することも可能ですよ。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です