WEB上で計算し、その計算式をきれいに表示させる

とある構造屋さんから依頼があったので、エクセルシートをWEBプログラミングで移植しています。ただ困ったことに、筆記上の計算式をWEBで動的に表示させるのは意外と面倒だと言うことです。

通常ならJavascriptで画面上に変数を入力させ、計算ボタンで計算結果をはじき出す!!という簡単な方法でいいのですが、提出用書類となると、計算式がきれいに出ていないといけません。当然Σや√も分数も指数もきれいに出さねばなりません。理想としては、計算式とそのモデル図を出力できれば良く、そのまま印刷、もしくはJPEGで落とす方式がいいそうです。JPEGで落とす方式は以前作りましたが、偽造防止にもいいので、今後使っていきたいです。

数式を表示させるなら、WEBブラウザ上で、MathMLを使うのがプラグインも不要で手軽です。ただし対応していなブラウザもあります。その点MathJaxはJavascriptライブラリで、だいたいのブラウザで動きますので、これがいいかな?なんて思っています。うまくいけば、ストラクチャーさんで無料公開されているJavascriptの構造計算ソースコードとの連動も可能かもしれません(私は開発者じゃないのでそこまでは考えていません)。

しかし大きな問題もあって、MathMLにしろMathJaxにしろ、Javascriptで計算した数式や結果を動的に生成する機能が搭載されていません。せめて関数などを埋め込めれば良いのですが・・・探してみたのですがないみたいですね。方法としては、Javascriptでダイアログに入力されたデータと計算結果をマークアップし(まあ普通に表示するときもしますし・・・)、最後に表示する、という方法しかなさそうです。ただでさえ重いMathJaxなのに更に負荷をかけるのは本意ではないのですが、仕方がありません。

図に関してはCanvasで適当に書きました。こっちは慣れているので簡単でした。まだ計算部分に難があるので来週仕上げようと思います。