ウェブページで数式を利用する(TEX表記)

ウェブページで数式を用いた情報発信を行おうとするとき、いつも問題になるのが式の取り扱いについてです。 HTMLでは複雑な数式を表現することができないため、gifなど図としてHTMLに埋め込むことが一般的に行われます。

その際に問題となるのが「どのようにして図を作るのか」ということです。
自分はこれまで「Equation Magic」というソフトを利用しています。 このソフトの利点は、「TEX表記」で式を出力でき、かつコピーアンドペーストでベクトルデータとして扱える点です。 Illustratorなどのベクトルデータを扱えるソフトと組み合わせることで、数式のあるプレゼン資料などを簡単に作成することができます。
WEBページで利用する場合も、Equation Magicでgifに出力できるので問題は無いのですが、手間がかかることが唯一の欠点でした。
本稿で紹介するのは、HTMLソースに直接TEX表記で式を書くことで、google API が図にしてくれるという google が提供するサービスです。 ブラウザの拡張機能やインストールなどは一切必要ありません。HTMLのimgタグのsrcの特定の箇所にTEX表記で式を書くだけです。 つまり、式の gif 化が一切要らなくなるということです。

上の式が google API を利用したものです。図そのものは google のサーバ上で動的に作られ、それをユーザのブラウザにダウンロードしているという流れです。つまり、ネットに接続されていないローカル環境では、図をダウンロード使えません。 唯一の欠点は、URLの中にTEX表記を埋め込むため、URLエンコーディングが必要となる点です。 下のサンプルでは、PHPを利用してURLエンコーディングを行なっています。

  " alt=""/> 

javascript などでも実現できると思います。 毎回サンプルのような HTML は書きたくないので、次のようにPHPの関数を定義します。

 "; } ?> 

そして、式を埋め込みたいところに

と、TEX表記で式を書くだけです。これで手間が軽減されました。

【参考】
・Google Chart APIを使って数式を埋め込む - Hello, world! - s21g

ウェブページでグラフを利用する(javascript)

グラフも式と同様、科学系の情報発信を行う際には欠かせない要素です。 自分はこれまで、gnuplot で描画した後に gif で出力し、HTML で利用するという手順でした。 本稿で紹介するのは、上の式と同様に google API を利用して、javascriptで動的にグラフを描画することのできるサービスです。

上の図は規格化したエルミート多項式を動的に描画しました。 グラフの上にマウスポインタを持って行くと、座標が表示されるといった具合です。 各座標 x に対して漸化式をjavascriptを用いて計算して、その結果を描画しています。 つまり、数値計算と描画を同時に行える点が魅力的です。

上のサンプルは、google APIの内「Scatter Chart」と呼ばれる散布図を利用しています。 このAPIの欠点は、今のところ科学用のグラフではないことです。 特に横軸や縦軸のメモリの付け方などの自由度が低く、思い通りのグラフに仕上がらない点です。 （例えば、x軸のメモリの刻み幅を変えられないなど） もし、gunuplot 並に指定できればかなり有用なツールとなるでしょう。

【参考】
・Visualization: Scatter Chart - Google Chart Tools - Google Code