« 数式表示 MathJax -1- | トップページ | 数式表示 MathJax -3- »

2012年6月26日 (火)

数式表示 MathJax -2-

MathJax のオマジナイをココログのサブタイトル(キャッチフレーズ)の欄に入れることで数式を表示できるようになった訳ですが、場違いな箇所に書いているのが気に入りません。

また、次の理由からもその方法は好ましくありません。この「SpaceLike のブログ」で数式を使う記事は今までも、これからもほとんど無いでしょう。たまにしか必要としない時のために、ページを開く度にオマジナイを実行するのはトラフィックの無駄です。

そこで、数式を記述する時だけオマジナイを実行することにしました。不慣れなために色々と試行錯誤をしながら辿り着いたのが次のコードです。これを記事の先頭に記述すれば MathJax で綺麗な数式を表示することが出来ます(HTML の記述)。

<script>
<!--
(function (){
    if (!document.defMathJax){
        var s = '<script type="text/x-mathjax-config">\n';
        s += 'MathJax.Hub.Config({ tex2jax: { inlineMath: [["$","$"], ["\\(","\\)"]] } });\n';
        s += '</script>\n';
        s += '<script type="text/javascript" ';
        s += 'src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">\n';
        s += 'document.defMathJax = true;\n';
        s += '</script>\n';
        s += '<meta http-equiv="X-UA-Compatible" CONTENT="IE=EmulateIE7" />\n';
        document.write(s);
        document.close();
    }
})();
// -->
</script>

基本的な考えは、document.defMathJax が定義されていれば既にオマジナイは実行されているとみなすが、document.defMathJax が未定義ならばオマジナイを実行するというものです。ブログには1つのページに複数の記事が表示されることが有りますが、上記コードは同一ページに複数回記述されていても問題は有りません。つまり、記事毎に任意に上記コードを記述できる訳です。(追記: document.defMathJax が排他の役を果たしていません。上記コードの度に MathJax が起動されるようです。数式表示 MathJax -3-, 数式表示 MathJax -4- を参照してください)

このコードが出来るまでには幾つかの失敗が有りました。順不同で挙げて行きます。

まず1つは、document.defMathJax ではなくて defMathJax を使ったために defMathJax が未定義だというエラーが発生したことです。このエラーを回避するために defMathJaxdocument のメンバーとしました。

2つ目は、 <script> 領域の内側を <!--// --> でコメントアウトしなかったことです。このせいでスクリプト内で使われている <> が HTML コードとして解釈されてしまいました。コメントアウトはスクリプト非対応のブラウザの為に行うというのは知っていましたが、スクリプト非対応なら、どうせ MathJax も使えないのだから、まぁいいかと手抜きしていました。しかし、スクリプトのコメントアウトはもっと本質的な処理だった訳です。

3つ目は、

    document.write(s);

    document.all.***.innerHTML = s;
    ・・・
</script>
<div id="***">
</div>
にしていたことです(「***」は有効な文字列を使用)。JavaScript のリファレンスを調べて innerHTML が有ったので、「これかな?」と思って使ってみたのですがダメでした。もっと単純に document.write() が有ったのです。

他にも愚かな間違いを重ねて、やっと上記コードが出来ました。そして、必要な時だけオマジナイを実行して綺麗な数式を表示できるようになりました。

« 数式表示 MathJax -1- | トップページ | 数式表示 MathJax -3- »

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/584699/55055591

この記事へのトラックバック一覧です: 数式表示 MathJax -2-:

« 数式表示 MathJax -1- | トップページ | 数式表示 MathJax -3- »