ウェブサイトで数式をキレイに表示したい。

ウェブサイト（ホームページ）で数式をキレイに表示するには、いくつかの方法があります。
代表的な方法は、次の通りです。

方法１．数式の画像を作成してアップロードする。
方法２．数式を表示するWebサービス（Webアプリケーション）を利用する。
方法３．数式表示用のMathML（Mathematical Markup Language）を使う。
方法４．HTMLだけで頑張る。

何はともあれ、数式画像を作成してみたいという向きはこちらのページをどうぞ。

方法１．数式の画像を作成してアップロードする。

アップロードの方法は省略します。
数式の画像を作成するには幾つかの方法があります。
  • TeX（LaTeX）を使う。
    画像生成までを一括して行ってくれるアプリケーション（TeX2img）もあります。
  • 数式エディタを使う。
    LibreOfficeやMS-Officeの数式エディタ
    Chromeアプリ
    Webアプリケーション（Webサイト）
  • 記述した数式を画像に変換（生成）してくれるアプリケーション（サービス）を使う。

TeX（LaTeX）のみを使う場合は、コンパイルしてできたDVIファイルをdvipng.exeでPNGに変換します。
＞dvipng -T tight -bg Transparent targetfile.dvi
上記のオプションは、
　・-T tight : 余白を削除する
　・-bg Transparent : 背景を透過にする
です。オプションは引数なしで実行すると表示されます。

TeX2imgは数式モードを宣言する必要がありますが、（pLaTeXをインストールしてあれば？）日本語を含めて画像にすることが可能です。


LibreOfficeの数式エディタでは、ビジュアルに数式を作成することができます。
しかしながら、画像で保存することはできないので、次の方法で入手します。
  • 作成した数式（文書）のスクリーンショットを撮って、ペイントソフト or ドローソフトにペーストする。
  • オブジェクトをペイントソフト or ドローソフトにコピー＆ペーストする。
    ドローソフト（Inkscape）を使うとSVG形式で保存することもできます。

ChromeアプリのDaum Equation Editorは、ビジュアルに数式を作成することができます。また、TeXコードで入力することもできます。結果は、PNG画像に保存することもできます。


Web上には、TeXコードを数式画像に変換してくれるサイトがあります。（2013.10.15現在）
上から３つはビジュアルな入力ができます。
画像は、ブラウザの右クリック（名前を付けて画像を保存）で保存します。


方法２．数式を表示するWebサービス（Webアプリケーション）を利用する。

URLのクエリー部にTeXコードを記述することで数式の画像を表示させるサービスを提供しているWebサイトがあります。（2013.10.15現在）
また、Google Chart APIを使っても可能です。ただし、入力フォームを持たないこと、Googleが本サービスを非推奨に位置づけていることにご注意ください。
なお、URIエンコードは、
などでも可能です。

なお、手入力する向きは、サイトによって使えるTeXコードが異なる点もご注意ください。例えば、\overや\cfrac、\matrixが使えたり使えなかったりします。


また、ブラウザに数式を表示させるライブラリであるMathjaxを使う手もあります。
これを利用する場合は、
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" type="text/javascript"></script>
と（ヘッダ内などに）記述しておく必要があります。
数式はHTML中に数式を表すコード（上記の場合はTeXコード）を直接記述することになります。
Mathjaxについては、くろきげんさんのサイトに詳しい説明があります。
configについては、http://docs.mathjax.org/en/latest/configuration.html#using-a-configuration-fileを参照してください。
HostMathのサーバにあるMathjaxを指定することもできます。その場合は、
<script type="text/javascript" src="http://www.hostmath.com/Math/MathJax.js?config=OK"></script>
でいいようです。
ただし、私の環境（X-Iron30）では、正しく印刷することができませんでした。IE11とFireFox21は大丈夫でした。

  • いずれのサイトを利用する場合でも、そのサイトの利用規約を確認して下さい。
  • 方法２で紹介したサイトで、クエリー部にTeXコードを記述することで画像を生成しているところがありますが、そのような利用を想定しているか不明なので、ご配慮ください。


方法３．MathML（Mathematical Markup Language）を使う。

MathMLの文法を覚えるのは大変なので、グラフィカルに作成できるアプリケーションやサービスを利用するのが良いでしょう。
具体的には、前述のWebサービスのいくつか（WIRIS、HostMath、arachnoid）とLibreOfficeの数式エディタでMathMLコードが作成できます。
MathMLは表示がブラウザに依存している（GoogleChromeは対応していない！）点には注意が必要です。


方法４．HTMLだけで頑張る。

上付き下付きは、<sup></sup><sub></sub>を使います。
分数は、tableでスタイルシートを設定してみます。
スタイルシートはこんな感じです。


<style type="text/css">
.frac {
 display:inline-block;
 text-align:center;
 vertical-align:middle;
 font-size:smaller;
}
td.denominator{/* 分母 */
 border-top:1px solid black;
 vertical-align:top;
}
td.numerator{/* 分子 */
 border:none;
 vertical-align:bottom;
}
</style>



――（使用例）――

・二次関数の解の公式
x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}

貼り付け（PNG）
縦横比がおかしくなってしまいました……。
解の公式　PNG画像


Google Chart API
x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
小さく感じたので\Largeを指定してます。

codecogs


Mathjav
右クリックで、TexコードやMathMLコードを見ることができます。
画像として保存はできません。
\(\LARGE x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}\)
これは、\LARGEを指定しています。

MathML
Chrome系のブラウザでは、 x = − b ± b 2 − 4 a c 2 a  と見えるはずです。
x = − b ± b 2 − 4 a c 2 a

HTMLだけで頑張った。

y=1+
-b±(b2-4ac)
1
2
2a 


y=1+
<span class="frac">
<table>
<tr><td class="numerator">
 -b±(b<sup>2</sup>-4ac)
 <sup>
 <span class="frac"><table><tr><td class="numerator">1</td></tr><tr><td class="denominator">2</td></tr></table></span>
 </sup>
</td></tr>
<tr><td class="denominator" height="35px">
 2a
</td></tr>
</table>
</span>
または、
y=1+
-b±√(b2-4ac)
2a 


y=1+
<span class="frac">
<table>
<tr><td class="numerator">
 -b±√(b<sup>2</sup>-4ac)
</td></tr>
<tr><td class="denominator" height="30px">
 2a
</td></tr>
</table>
</span>


∫
3
4
x dx 

&int;<span class="frac"><table><tr><td>3</td></tr><tr><td>4</td></tr></table></span>x dx


数式画像の作成を試してみたい方はこちらのページにどうぞ。

登録: 投稿 ( Atom )