WebMatrix で数式を表現する（１）

f:id:daruyanagi:20121116034508p:plain

まず考えられる方法は Google Chart Tools — Google Developers を利用することです。TeX の数式を画像ファイルに変換してくれます。

Mathematical Formulas - Infographics (Deprecated) — Google Developers

Deprecated（非推奨）になっているのが気になりますけれど、まぁ、使えなくなるまで使えばいいんじゃないでしょうか。TeX による数式表現は業界標準（？）でもあるんで、万が一使えなくなってもいろいろ対処法はあるかと。あと、はてな記法でも使えるので覚えておくと使うことがあるかもしれない。

必要なパラメーターは、

cht=tx
chl=DATA

で、DATA は TeX による数式表現を URL エンコードしたものになります。たとえばこんな感じ。

f:id:daruyanagi:20121116035411p:plain

# Default.cshtml

@{
    
}

<!DOCTYPE html>

<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>マイ サイトのタイトル</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    </head>
    <body>
        <img src="http://chart.apis.google.com/chart?cht=tx&chl=@UrlEncode(@"\bar{H}_{n+2}(x) = \sqrt{\frac{2}{n+2}} x \bar{H}_{n+1}(x) \sqrt{\frac{n+1}{n+2}} \bar{H}_n(x)");" />
    </body>
</html>

まぁ、 \bar{H}_{n+2}(x) = \sqrt{\frac{2}{n+2}} x \bar{H}_{n+1}(x) \sqrt{\frac{n+1}{n+2}} \bar{H}_n(x) なんてスラスラ書くのは無理だけど、自分の場合、

\hoge：文字 hoge の埋め込み（\alpha で α）
\hoge{}：引数をとって hoge る（\sqrt{0} なら √ {0}、\frac{0}{1} なら分数 {0} / {1} ）
^{Hoge}：上付き文字（指数とか）
_{hoge}：下付き文字（添え字とか）

の4つだけ覚えている。あとはググる。

ヘルパー化

さて、毎回イメージタグを書くのは不毛なので、これをヘルパー化することを考えましょう。たとえばこんな感じ。

#App_Code\GoogleChart.cshtml

@helper Formula(string tex_expression){
    const string API = "http://chart.apis.google.com/chart?cht={0}&chl={1}";
    var cht = "tx";
    var chl = HttpUtility.UrlEncode(tex_expression);
    <img src="@string.Format(API, cht, chl)" />
}

使い方はこんな感じ。

# Default.cshtml

@{
    
}

<!DOCTYPE html>

<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>マイ サイトのタイトル</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    </head>
    <body>
        @GoogleChart.Formula(@"\bar{H}_{n+2}(x) = \sqrt{\frac{2}{n+2}} x \bar{H}_{n+1}(x) \sqrt{\frac{n+1}{n+2}} \bar{H}_n(x)")
    </body>
</html>