WEB上で綺麗な数式を直接表示するのは意外に難しいです。かなり前に、画像で貼り付ける方法を紹介しましたが、これはいかにも面倒です。

そこで、ここしばらくの間、何とか簡単に実現できる方法がないかと探ってきました。その結果、いくつかの実用的な方法がみつかりましたので、紹介しておきます(picture環境などは使えませんけど)。

まずは、サーバ側が対応していなくてもTeXの数式を表示できる方法から。ここはLinuxと関係ないですが。

【CODECOGSを利用】

CODECOGSというサイトの機能を利用すると、TeXのコードを使って数式の画像を表示することができます。

  
コード:
<img src="http://www.codecogs.com/eq.latex?\140dpi \displaystyle \oint \vec{F} \cdot d\vec{s}=0"/ >
eq.latex?\140dpi の後ろの部分にTeXの数式コードを記載します。なお、文字の大きさは\140dpiの数値を変えて変更します。

URLを指定したimgタグを1つ1つ加えなければいけないので面倒ですが、この方法は、普通のブログでも利用できるという大きなメリットがあります。

【Bloggerでjavascriptを利用】

Blogger(Googleのブログサービス)限定ですが、「デザイン」の「ページ要素」で「HTML/Javascript」というガジェットに下記のスクリプトを追加すると、TeXの数式コードが数式の画像に変換できます。

blogger-texページ要素のHTML/Javascriptガジェット

● 追加するスクリプト:2011.6.20 改訂しました
<script src="http://www.watchmath.com/main/cgi-bin/mathtex3.js?" type="text/javascript"></script>
<script type="text/javascript">window.mathPreamble =
'\\usepackage[usenames]{color}\\color{black} \\gammacorrection{1.3}\\png \\normal ';replaceMath( document.body );</script>


mathtex3.jsの置き場がたまに変更される可能性がありますので、
うまく表示されない場合は下記のサイトをチェックしましょう。

Watch Math

● 例:Online-Physics:LaTeXテスト

Bloggerを利用している方はぜひ1度試してみて下さい。

【通常のブログサイトでjavascriptを利用】

通常のブログサイトなどでも、<head>部分に下記のスクリプトを追加すると、TeXの数式フォントに変換できます。[2011.12.23追記]

● 追加するスクリプト:
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]] } });
</script>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
</script>


続いて、サーバ側で処理する方法を考えてみましょう。ここからはLinuxの本領発揮です。

以下の方法は、ほとんどローカルのサーバで試していますが、latex2htmlとjslatexに関しては、FC2の無料サイトを利用して外部向けサーバでも動作することを確認しています。
latex2htmlのサンプルはこちらにあります。

【latex2htmlを利用】

Ubuntuの日本語Remix版(10.04以上)の場合、日本語セットアップ・ヘルパーでTeX関連のパッケージを導入すれば、すぐにLaTeXが使える環境が整います。さらに、latex2htmlというパッケージを追加すると、下記のコマンドで、TeXのソースファイルから数式の画像を含むhtmlファイルを生成することが可能です。

$ latex2html sample.tex
(注意:sample.texはTeXソースのファイル名。適当に置き換えて下さい)

このコマンドで、数式画像を含むフォルダとhtmlファイルができるので、cssなどを利用して自由にレイアウトして、Apacheのドキュメントルートに保存すれば数式入りのページができます。

【jsLaTeXを利用】

jsLaTeXは、TeX形式で記述した数式を画像として出力するjQueryプラグインです。こちらにデモサイトがあります。これは実質的には前出のCODECOGSを利用しているようです。

● jquery.jslatex.jsのダウンロード
下記のサイトから「jquery.jslatex.js_1.txt」をダウンロードして、「jquery.jslatex.js」という名前でTeXコードを加えたhtmlファイルと同じ階層に保存しておきます。

jQuerPLUGINS:Releases for jsLaTeX

● scriptを追加
<html>タグと<body>タグの間に下記の<head>部を加えます。

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.jslatex.js"></script>
<script>
$(function () {
$(".latex").latex();
});
</script>
</head>

● 数式の記述
あとは、本文中で以下のようなTeXのコードを書けば、数式部分が綺麗な画像に変換されます。

<div class="latex">
\int_{0}^{\pi}\frac{x^{4}\left(1-x\right)^{4}}{1+x^{2}}dx =\frac{22}{7}-\pi
</div>

太字が表示したいTeXの数式コードの部分です。

サーバ側で利用できる方法は他にもあります。が、残念ながら、今日中には書けそうもないので、MathJaxを使う方法と、TeXのソースを貼り付けるだけでPDFファイルを作成できるサーバの作り方(Vine Linux 5.2を利用:Vineを使う理由は後ほど…)については、次回に回しましょう。