ウェブページで数式を表現するための1つの解決法

$y=x$ HTML/CSSコーディング

2020.08.212012.04.18

あまり一般的には見かけないかもしれないですけど、数学・物理学等、理数系の解説ページや技術系のページなんかでは数式表現を用いなければならない場面ってありますよね。

ワープロソフト付属の数式エディタで数式作成して、その画面をキャプチャして画像化…というのも1つの方法ではあるんですがちょっと手間がかかります。

調べてみると、「Google Chart API」というものを利用して数式を表現できることを知りました。まだ私もそんなに深く掘り下げてないですが、導入部分についてはなんとなく見えてきたので備忘録として書き残しておきます。

Google Chart APIとLaTeXで

今回紹介する方法はGoogle Chart APIとLaTeXを用いて、ソースコードから数式を生成するというもの。生成されるのは手動でやる場合と同じように画像になってしまうのですが、画像への変換はAPIが自動でやってくれるし、ある一定の記法を知っていればかなり自由度の高い表現が出来ます。また、内容を改変したい場合もソースコードの記述を変えるだけでいいので管理的な側面からも有効に利用できそうです。なお、本記事作成に当たっては以下のブログ・サイトを参考にさせていただきました。 Google Chart APIで、Webページに数式を表示させる。 - 何でも屋さんの備忘録 LaTeXコマンドシート一覧で、内容の解説の前に一応言葉の意味などを確認。

Google Chart API
Google Chart APIとはグーグルが提供しているグラフ作成サービスです。URLにパラメータを指定するだけでグラフをPNG画像として取得できます。その為タグの「src」属性に対してパラメータ付きのURLを指定すれば、ホームページ上に簡単にグラフを表示させることが出来ます。ここではGoogle Chart APIを使ったGoogle Chartの利用方法を確認していきます。

以上、「Google Chart API入門」より。必ずしも数式表現だけじゃないんですね。グラフもかけるのか。

LaTeX
LaTeX（ラテック、ラテフ、レイテック、レイテックス）とは、レスリー・ランポート (英: Leslie Lamport) によって開発されたテキストベースの組版処理システムである。電子組版ソフトウェア TeX にマクロパッケージを組み込むことによって構築されており、単体の TeX に比べて、より手軽に組版を行うことができるようになっている。

以上「LaTeX - Wikipedia」より。こちらも必ずしも数式を書くために作られたシステムって訳ではないですね。組版全体。今回利用するのはその記法の一部ってことですね。

数式表現のためのコーディング

とまぁ上のような言葉の定義は知らなくても、とりあえず数式画像生成すらだけなら難しくないですよ。Google Chart APIを呼び出すのはたった1行のコードだけ。


　　　<img alt="" src="http://chart.apis.google.com/chart?cht=tx&chl= ここにLaTeX記法を用いた数式表現を書く" />

はい、これだけです。簡単でしょ？ imgタグのsrc属性にAPIを呼び出すURL「http://chart.apis.google.com/chart?cht=tx&chl=」を指定し、それあと「」に続けてLaTeX数式表現を入れれば良いのです。では実際にLaTeX記法を用いて記述したサンプルをいくつか見てみましょう。

単純な等式・加減算


　　　<img alt="" src="http://chart.apis.google.com/chart?cht=tx&chl= y=x" />

$y=x$ 一番簡単な一次方程式、y=xです。LaTeX部分にはそのまま「y=x」と書くだけです。まぁこんなものをいちいち画像化する必要もないんですけど、一番単純な例と言うことで。では数式を「y=x+1」にするにはどうすればよいでしょうか。同じようにLaTeX部分を「y=x+1」にすればよい…のですが、URLエンコード内では「+」は予約語（あらかじめ意味を持つ特殊な文字）となっているので、エンコード文字形式の「%2B」に置き換えてやる必要があります。


　　　<img alt="" src="http://chart.apis.google.com/chart?cht=tx&chl= y=x%2B1" />

$y=x+1$ どうでしょうか。ちなみに「+」ではなく「-」の場合は特にエンコード文字形式に置き換える必要はありません。


　　　<img alt="" src="http://chart.apis.google.com/chart?cht=tx&chl= y=x-1" />

$y=x-1$

上付文字（べき乗）・下付文字（添え字）表現

おつぎは「xのn乗」のような上付文字と「複数あるxのn番目」のような下付添え字の表現。


　　　<img alt="" src="http://chart.apis.google.com/chart?cht=tx&chl= y=x^2" />

$y=x^2$ 上付文字は添える文字の直後に「^」を入れて添え字を記入します。下付文字も同様に「^」のかわりに「_」を用いることで表現できます。


　　　<img alt="" src="http://chart.apis.google.com/chart?cht=tx&chl= y=x_1%2Bx_2" />

$y=x_1+x_2$ これらは以下のように、添える対象1つに連続で書くことで同時に上付・下付の添え字を与えることも出来ます。


　　　<img alt="" src="http://chart.apis.google.com/chart?cht=tx&chl= y=x^n_1" />

$y=x^n_1$ また、添え字は必ずしも1文字である必要はありません。「n-1」のような複数文字の場合には、添え字全体を「{}」でくくれば同様の結果を得られます。


　　　<img alt="" src="http://chart.apis.google.com/chart?cht=tx&chl= y=x^{n-1}" />

$y=x^{n-1}$

分数

今までの部分はAPIに頼らずとも頑張ればCSSのフォント指定の工夫で何とかなるかも知れない…といったところですが、さすがに分数となるとそうは簡単にはいきません。ここらあたりからAPIを利用する価値が出てくると思います。


　　　<img alt="" src="http://chart.apis.google.com/chart?cht=tx&chl= y=\frac{3}{7}" />

$y= \frac{3}{7}$ 分数を表現するには「\f rac」に続けて「{}」で分子・分母の順に記述します。もちろんこれも「{}」内が数式のような複数の文字列であってもかまいません。このように。


　　　<img alt="" src="http://chart.apis.google.com/chart?cht=tx&chl= y=\frac{(2a^2%2b7)}{3c}" />

$y= \frac{(2a^2+7)}{3c}$

平方根・累乗根

これも通常CSSだけではほぼ再現不可能な数学的表現ですね。平方根は以下のように記述します。


　　　<img alt="" src="http://chart.apis.google.com/chart?cht=tx&chl= y=\sqrt[]3" />

$y=\sqrt[]3$ 「\sqrt[]」に続けて平方根の中身を書きます。2桁以上や数式の場合はこれを「{}」でくくります。また平方根ではなく累乗根（n乗根）の場合は「[]」にnを記入します。


　　　<img alt="" src="http://chart.apis.google.com/chart?cht=tx&chl= y=\sqrt[3]{x^3%2B3x^2%2b3x%2b1}" />

$y=\sqrt[3]{x^3+3x^2+3x+1}$

まとめ

いかがでしたでしょうか。さしあたって一般的に使われそうな、簡単な数式的表現方法をサンプルを挙げながら紹介してみました。 Google Chart API + LaTeXではこのほかにも総和・極限・積分・ベクトル順列・行列といった、いかにも数学的な記述を表現する方法がたくさんあります。それらのサンプルについてはまた別の記事でまとめて紹介したいと思います。冒頭にも書きましたがこれらをいちいち個別に画像ファイルとして作成することなくコーディングだけで実現できるというのはページ管理上大変有意義だと思います。またGoogle APIの利用ということで特別なスクリプト、PHPやCGI環境といったものを用意することなく実現できると言うのも魅力です。一般的なページではあまり利用機会はないかもしれませんが、技術・専門系のサイトで必要になったときにでも思い出していただければと思います。