WebでLaTeXを使う

HOME>>メモ>>ソフト>>TeX>>WebでLaTeXを使う

HTMLにLaTeXコマンドを使って数式を埋め込む方法についていくつか調べてみました。 TeX Wikiの MimeTeXのページにもいろいろ書いてあるけど、その中からレンタルサーバでもできそうなものだけまとめておきます。

codecogsを使う

codecogsと言うサイトで提供している Online LaTeX Equation Editor を使った方法です。外部サービスを使うので、気軽に利用できます。

使い方は「http://latex.codecogs.com/png.latex?」の後に数式を書いて、 imgタグのsrcに書くだけ。ただし、記号はURLエンコードする必要があります。 pngのところをgif,svg,pdf,swf,emfに書き換えると対応する形式で出力されます。

GIF形式	$F(s)=\int_0^\infty f(t)e^{-st}\mathrm{d}t$
PNG形式	$F(s)=\int_0^\infty f(t)e^{-st}\mathrm{d}t$
SVG形式
SWF形式
PDF形式	ダウンロード

導入も簡単、図もきれいなのでいい感じ。 SVGやSWFで読み込めば、拡大してもきれいなままです。でも、外部サービスを使うのでいつまでも使えるの？ってところでちょっと不安な気もします。

mimeTeXを使う

MimeTeXはTeXのサブセットです。数式をGIF画像として出力することができます。

まずは、mimeTeXからmimetex.zipをダウンロード
- Precompiled Binaries...から使っているOS用のコンパイル済みファイルをダウンロードすると楽
mimetex.zipを解凍
解凍したフォルダの中のmimetex.cgiをサーバにアップロード
mimetex.cgiに実行権限(705 or 755)を与える

あとはmimetex.cgiの後に?を付けてその後にTeXの数式を書けばOKです。ただし、記号はURLエンコードする必要があります。

実行例
$F(s) = \int_0^\infty f(t)e^{-st}\mathrm{d}t$

コンパイル済みファイルを使えば割と簡単にインストールできるので簡単。 mimeTeXを使ったWikiプラグインがたくさんあるので、Wiki内で数式を使いたい場合は使いやすい。

だた、いろいろとフォントを削ってあるので、あまりきれいとはいえないですね。

MathJaxを使う

MathJaxはAJAXを使った数式描画ソフトです。 MathJaxを読み込んだ状態で、 HTML文章の中にTeXの数式を書いてくと勝手に変換してくれます。

sourceforgeのMathJaxからMathJax-beta2.zipとMathJax-webfonts-beta2.zipをダウンロード
MathJax-beta2.zipを解凍
その中にMathJax-webfonts-beta2.zipを解凍
testフォルダの中のHTMLファイルをブラウザで開いて正常に表示されればOK
後はサーバ上にアップロード

使うときは、HTMLのヘッダ部分に

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript" src="/MathJax.js">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX","output/HTML-CSS"],
    "HTML-CSS": {
      availableFonts:[],
    }
  });
</script>

と書いておき、後は本文に普通のTeXのように数式を書いておきます。

\[
F(s) = \int_0^\infty f(t)e^{-st}\mathrm{d}t
\]

\[ F(s) = \int_0^\infty f(t)e^{-st}\mathrm{d}t \]

この方法なら外部サービスに頼らず、割ときれいな数式が簡単に作れます。埋め込みフォントに対応しているブラウザなら、ベクター形式で表示されるので、拡大してもすごくきれいです。

ただ、問題がフォントのためのPNGファイルがやたらと多いこと。一つ一つは1kBも無い小さなファイルですが、これが3万個近くあるので意外と容量を食います。個数が多いのでアップロードも大変です。

最近のブラウザならば画像フォントではなく、ベクター形式のフォントを自動的に読み込んで使用してくれます。そのため、大量のPNGファイルは必要ありません。オプションで強制的に画像を使用しないようにすることができます。

/config/MathJax.jsの315行目に「imageFont: "TeX",」と書かれた行があるので、ここを「imageFont: null,」と書き換えましょう。これで、画像フォントを使用しなくなるらしいです。

しかし、これをするとIE6以上, Chrome, Safari 3.1以上, Firefox 3.5以上, and Opera 10以上が必要になるそうです。 2010年1月現在のブラウザシェアを見ると、シェア上位のほとんどはすでに対応済みなので、ほとんど実害は無いかもしれません。でも、某大学のコンピュータルームのPCに入っているのはFireFox1.5という現実・・・(2010年度現在)

サイトトップへ