■

■mimeTeXをはてなで使う

はてなのmimeTeXは本稿記述後5/6に改訂されました。

はてなのmimeTeXは本稿記述後5/6に改訂されました。従いまして以下の記述の大部分が古い内容になりました。万歳！。当初続きを書く予定でしたが、このままでは続編も書けるわけもなく、中断したままといたします。ご了承下さい。

はてなでmimeTeXを使う。マニュアルでの説明

http://d.hatena.ne.jp/help#texでは、はてなダイアリーにおいてmimeTeXを通じて数式などを画像として閲覧者に提供する方法が書かれています。以下、長めですが引用させて頂きます。

数式の表示

日記およびキーワード文中において、TeXの記法により数式を表示させる事ができます

[tex:x^2 + y^2 = z^2]
[tex:e^{i\pi} = -1]

と記述すると

x^2 + y^2 = z^2
e^{i\pi} = -1

と表示されます。

数式表示機能は、mimeTeXの機能を利用しています。詳しくはmimeTeXサイトの説明をご覧下さい。

なお、mimeTeXはTeXライクな記法にて数式などの画像をユーザに提供できます。純粋なTeXそのものではありませんのでTeXに慣れた方には不満を感じる点が多々あるかもしれません。ちょっとした数式ですと充分な能力があるような気も致します。ただし、視覚ブラウザを使わない人々には画像だけでは情報を伝えていないことに留意すべきでしょう。TeXを「てふ」と読む日本人も多いと思いますが、アメリカなどでは「テック」と読むようです。

数式中に閉じ角括弧『 ] 』を使えますか

mimeTeXのはてな版省略記法は以下のように『 [ 』『 ] 』を使っています。

[tex:数式]

数式中に『 ] 』を使いたいときにはどうしたらよいのでしょう。数式中で『 ] 』が登場するとはてなのシステムは、そこまでで数式は終わってしまうと解釈します。ですから下記のように書くと、おかしなことになってしまいます。ちなみに、化学式でジアンミン銀(１)イオンを表現しようとしています。

[tex:[Ag(NH_3)_2]^+]

上のように編集した際にはてなシステムがmimeTeXであると認識する部分を下記にstrong要素で強調表示してみます。強調した部分が太字に見えるブラウザもあることでしょう。設定いかんです。

[tex:[Ag(NH_3)_2]^+]

上のように強調した部分だけが画像に変換されますので、本来最後につけたかった『 ^+ 』が画像から欠落ます。イオンの表記の画像としてはアヤシゲなものになってしまいます。以下に本来期待される画像(上)と失敗した画像(下)とを対比してみます。失敗時には『 ^+] 』がmimeTeXの処理対象にならずにテキストとして取り残されていることに留意してください。

  • [Ag(NH_3)_2]^+
  • [Ag(NH_3)_2^+]

この困った現象はid:Jehoshaphatさんにより見出され、はてなは次のような解決策を提示しました。すなわち、数式の中の『 [ 』『 ] 』は、『 \ 』でエスケープすることとします。はてなシステムはエスケープされた『 ] 』を見てもそこで数式が直ちに終了とはみなさないことになります。なお、これはmimeTeX本来の文法ではありません。あくまではてなのmimeTeX省略記法におけるローカルルールです。そこで、ジアンミン銀(Ⅰ)イオンでは次のように書き換えれば良いということになります。

[tex:\[Ag(NH_3)_2\]^+]

数式中に『 " 』を使えますか

数式中で『 " 』を使った場合については、id:sheepmanさんにより指摘され、はてなサイドにてシステムの修正を入れて頂いたことと思われます。mimeTeXのはてな版省略記法についての注意点であり、mimeTeX本体には直接的な関連はありません。

[tex:数式]

上のように省略記法を使いますと、閲覧者に提供されるHTMLには以下のようにmimeTeXが生成する画像がimg要素にて埋め込まれます。mimetex.cgiに数式を引き渡すと結果がimageとして返ってくるのでimg要素で表示してやることとなります。

<img src="http://d.hatena.ne.jp/cgi-bin/mimetex.cgi?数式">

ただし、上では説明の簡明さの為に、class属性とalt属性を省略しました。以下同様とします。

では、以下のように数式中に『 " 』がはいったらどうなるのでしょう。

[tex:数"式]

HTMLでは、以下のようになってしまうのでしょうか。

<img src="http://d.hatena.ne.jp/cgi-bin/mimetex.cgi?数"式">

もしも上のようになるのであれば、HTMLの文法上、まずいことになります。src属性が、『 " 』で分断されてしまいます。多くのブラウザがsrc属性としてみなす部分を解りやすく強調表示してみます。

<img src="http://d.hatena.ne.jp/cgi-bin/mimetex.cgi?数"式">

これでは、得られる画像は『数』の部分だけに相当し、以下は欠落するほか、HTML上でも問題があることになります。セキュリティー上の心配すら出てくるのです。この問題への対処の為、はてなシステムは以下のようにHTMLにimg要素を出力します。

<img src="http://d.hatena.ne.jp/cgi-bin/mimetex.cgi?数&quot;式">

すなわち、『 " 』は文字参照にて『 &quot; 』としてからsrc属性に使われます。これによりsrc属性の分断は発生いたしません。

ところで、mimetex.cgiの引数として、『 数&quot;式 』を引き渡しているように見えます。これで期待される画像が得られるのでしょうか。結論から言えばWindowsIEでは大丈夫なのです。しかし、多くの他のブラウザでは、大丈夫ではありません。このことはmimeTeXを使う上で、良く理解しておくべきと思われます。はてな以外の世界においてもよく見られる光景ですが、WindowsIEでのみ画像出力の結果を確認して安心してしまわないようにするべきです。さて、説明を容易にするため、例題を提示いたします。日記編集画面で以下のように記述したものとします。

[tex:123"45]

そうしますと、HTML上で生成されるimg要素は以下のようになります。

<img src="http://d.hatena.ne.jp/cgi-bin/mimetex.cgi?123&quot;45">

これをWindowsIEで閲覧した時の画像およびに、手元にあるOpera、Netscapeで閲覧した時の画像とを以下に対比してみます。

WindowsIEで閲覧
123"45と表示されている
Opera,Netscapeで閲覧
123%2245と表示されている

閲覧者のブラウザの種類によって得られる画像が異なるならばこれは非常に困った事です。これではせっかくの記述を閲覧者に見て頂く事が出来なくなりますし、ヘタをすると勘違いから意思疎通の面でトラブルが発生するかもしれません。おおげさなことを言えば権威ある機関が経済指標に対する数学的な分析をmimeTeXを使ってWEB上で公表した時に、その機関の意図したものでないものを閲覧者が見てしまい、風評被害にてパニックになってしまったらどうでしょう？困りますね。しかしそもそもmimeTeXとはこんなにも不便なのでしょうか？id:sheepmanさんはこのことに対する回避策をお持ちのようです。私なりに吸収して試したものを、この日記にて後述したいと思います。ここでは、もう少し問題点を探っていきましょう。

ブラウザによって異なる画像を見てしまうワケ

ブラウザによって異なる画像を見てしまう理由を探って行きます。さて、先の例題に立ち帰ります。以下のようなHTML記述があったのでした。

<img src="http://d.hatena.ne.jp/cgi-bin/mimetex.cgi?123&quot;45">

まず、src属性に書いてある通り、文字参照をデコードしないままのURLでブラウザのアドレスバーに直接入力して見ましょう。以下をブラウザがどのように処理するか確認してみてください。

http://d.hatena.ne.jp/cgi-bin/mimetex.cgi?123&quot;45
URLアドレス欄に直接入力にてWindowsIE,Opera,Netscapeで閲覧
123&amp;quot;45と表示されている

このように、文字参照したままのURLをアドレスバーに入力すると、WindowsIEであれ、Operaであれ、Netscapeであれ同一の画像が得られ、文字参照したまま、そのままの画像がmimeTeXから返ってきます。

ではimg要素のsrc属性で記述すると何ゆえ違う画像が得られるのでしょう。実は、WindowsIEであれ、Operaであれ、Netscapeであれ、src属性に文字参照が含まれていると、サーバに画像を要求する時にはこの文字参照をデコードしてからになります。すなわち、欲しい画像はコレですよ、とサーバに示すURLは以下のようなものと考えるのです。

http://d.hatena.ne.jp/cgi-bin/mimetex.cgi?123"45

余談ながらこの事実は非常に興味深いものです。WEBアプリケーションを作成する人達には常識となるべきです。このことを失念してアプリケーションを作成すると予期しない結果をユーザに与える事があります。ウェブログ・日記・WEBMAILなどで、ユーザにある程度の自由を与えて記述を許す場合には特に留意しなければいけません。しばしばXSS脆弱性対策のサニタイズを無効化・回避してしまう場合があります。インジェクション系にも影響が出る可能性もあります。

さて、WindowsIEでは、以下のままでサーバに要求します。

http://d.hatena.ne.jp/cgi-bin/mimetex.cgi?123"45

WindowsIEにてimg要素から要求すると文字参照はデコードされ、結果として、mimeTeXは、以下の画像を返すのでした。これはアドレスバーに直接、デコード済みの上のURLを入力した場合と結果が一致します。

WindowsIEで閲覧
123"45と表示されている

さて、OperaやNetscapeでは、やや事情が異なります。まず、以下のURLをアドレスバーに直接手で入力して画像が返ってきたら、その時のアドレスバーの内容を確認してください。入力したものと異なるアドレスに変化しているはずです。

http://d.hatena.ne.jp/cgi-bin/mimetex.cgi?123"45

以上をアドレスバーに入力すると、以下のようにアドレスが自動的に書き換わります。ここがWindowsIEと根本的に異なるところです。

http://d.hatena.ne.jp/cgi-bin/mimetex.cgi?123%2245

そして、表示される画像は以下のようになります。書き換わったあとのアドレスにて要求された通りの画像がmimeTeXから返ってきます。

Opera,Netscapeで表示される画像
123%2245と表示されている

以上を鑑みてOperaやNetscapeで起きたことを振りかえります。以下のようなHTML記述があったのでした。

<img src="http://d.hatena.ne.jp/cgi-bin/mimetex.cgi?123&quot;45">

そして、これを見てブラウザは、文字参照をデコードし以下のアドレスを内部的に作成します。

http://d.hatena.ne.jp/cgi-bin/mimetex.cgi?123"45

OperaやNetscapeは、さらに、『 " 』を『 %22 』に差し替えます。URLエンコードのようです。該当するASCII文字のコードに『 % 』を付与しているのですね。

http://d.hatena.ne.jp/cgi-bin/mimetex.cgi?123%2245

かくして、上で作られたアドレスでもってサーバに要求しますので、得られる画像は期待したものではなく以下のようになるというわけです。

Opera,Netscapeで表示される画像
123%2245と表示されている

WindowsIEはきちんと動いているのにOperaやNetscapeは駄目なのか？

実はそうではないようなのです。ブラウザの動きとしてよりマシなのは、むしろ、OperaやNetscapeのほうかも知れません。WindowsIEは手抜きをしているのでしょう。そのせいでタマタマ期待した画像を得られていると考えてもよさそうなのです。詳細な根拠をRFCから引用してしっかりと提示する能力は私にはありませんが、どうもそのような感じがいたします。mimeTeXを使う者にとっては皮肉なことです。

ＯＫ、『 " 』だけ諦めました。どうせあまり使わないよ。

残念ながら『 " 』だけを諦めれば済む問題ではありません。数式でひんぱんに使われる重要な記号群もまた、ブラウザによっては上手に画像を得られない事があるのです。特に私がガッカリしたのは不等号でした。普通に記述しても、OperaやNetscapeでは化けてしまうのです。WindowsIE以外のユーザが一生懸命mimeTeXを利用しようとしてもなかなか期待した画像が得られない場合もありますし、逆にWindowsIEのユーザが利用すると簡単に期待した画像が得られるように見えながら実は、多くのブラウザにとってみれば意味をなさない数式の画像であったりすることもあります。これは困った事です。

不等号で失敗

以下のような画像を得たいと思ったとします。

不等式の例
1~+~3^2~+~4^2~&gt;~5^2

はてなの省略記法を使い、編集画面で以下のように簡単に書いてみましょう。

[tex:1~+~3^2~+~4^2~>~5^2]

生成されるHTMLは以下のようになります。alt属性とclass属性は省略します。『 > 』が『 &gt; 』と文字参照されますがこれは期待される正しい挙動です。実際、省略記法を使わずに手書きでダイレクトに、mimeTeXを利用する為のimg要素を書くときも文字参照をするべきです。これは文法上の要請です。

<img src="http://d.hatena.ne.jp/cgi-bin/mimetex.cgi?1~+~3^2~+~4^2~&gt;~5^2">

しかしながら、これを各ブラウザで閲覧すると以下のようになってしまい期待した画像を得られないケースがあることがわかります。このことを私に教えてくれたのは、id:nobodyさんです。ありがとうございます。

WindowsIEでの見え方
Netscape on Win,Opera on Win,Firefox 0.8 on GNU/Linux

理由は『 " 』のケースと全く同じです。多くのブラウザは『 > 』をURLエンコードした『 %3E 』をサーバに要求しますし、その場合には期待した不等号の画像は得られません。mimeTeXを使う者はこれらのことを熟知していなければユーザに意図した画像を提供できないことになります。

仮にmimeTeXで不等号など重要な記号群（複数）にて意図した画像を閲覧者に提供できないとするならばかなり困った事態となります。

この項はまだ書きかけです。解決編までたどり着けるといいなぁ。

以下作業中文書です。

first example: taylor series for e^x at various font sizes
formdata=1%24e%5Ex%3D%5CBigsum_%7Bn%3D0%7D%5E%5Cinfty%7E%5Cfrac%7Bx%5En%7D%7Bn%21%7D
formdata=2%24e%5Ex%3D%5CBigsum_%7Bn%3D0%7D%5E%5Cinfty%7E%5Cfrac%7Bx%5En%7D%7Bn%21%7D
formdata=3%24e%5Ex%3D%5CBigsum_%7Bn%3D0%7D%5E%5Cinfty%7E%5Cfrac%7Bx%5En%7D%7Bn%21%7D
formdata=4%24e%5Ex%3D%5CBigsum_%7Bn%3D0%7D%5E%5Cinfty%7E%5Cfrac%7Bx%5En%7D%7Bn%21%7D
formdata=4%24e%5Ex%3D%5Crelstack%7B%5Crm%7Elim%7D%7B2%24n%5Crightar%5Cinfty%7D%5C%281%2B%5Cfrac%7Exn%5C%29%5En
second example:
formdata=4%24%5Cfrac%7Bdv%5Em%7D%7Bds%7D%3D-%5CGam%5Em_%7B%5C0%5C0%7Dv%5E%7B%5C0%5E%5C2%7D%3D-g%5E%7Bmn%7D%5CGam_%7Bn%5C0%5C0%7Dv%5E%7B%5C0%5E%5C2%7D%3D%5Cfrac12g%5E%7Bmn%7Dg_%7B%5C0%5C0%2Cn%7Dv%5E%7B%5C0%5E%5C2%7D
third example:
formdata=4%24%5Cvareps%3D%5CBigsum_%7Bi%3D%5C1%7D%5E%7Bn-%5C1%7D%5Cfrac1%7B%5CDel%7Ex%7D%5CBigint_%7Bx_i%7D%5E%7Bx_%7Bi%2B%5C1%7D%7D%5C%7B%5Cfrac1%7B%5CDel%7Ex%7D%5Cbig%5B%28x_%7Bi%2B1%7D-x%29y_i%5E%7B5%24%5Cstar%7D%2B%28x-x_i%29y_%7Bi%2B1%7D%5E%7B5%24%5Cstar%7D%5D-f%28x%29%5C%7D%5E%5C2dx
fourth example: solution to quadratic
formdata=5%24x%3D%5Cfrac%7B-b%5Cpm%5Csqrt%7Bb%5E2-4ac%7D%7D%7B2a%7D
fifth example: continued fraction
formdata=5%24f%3Db_%5C0%2B%5Cfrac%7Ba_%5C1%7D%7Bb_%5C1%2B%5Cfrac%7Ba_2%7D%7Bb_2%2B%5Cfrac%7Ba_3%7D%7Bb_3%2Ba_4%7D%7D%7D
sixth example: demonstrating \left\{ ... \right.
formdata=5%24%5Ctilde%7Ey%3D%5C%7B%5Catop%7B%5Cbar%7Ex%5Crm%7E%7Eif%7Ex%7Eodd%7D%7B%5Chat%7Bx%2B1%7D%5Crm%7E%7Eif%7Eeven%7D%5C.
seventh example: demonstrating \overbrace \underbrace
formdata=4%24%5Coverb%7Ba%2C...%2Ca%7D%5E%7B%5Crm%7Ek%7Ea%5E%2Cs%7D%2C%5Cunderb%7Bb%2C...%2Cb%7D_%7B%5Crm%7El%7Eb%5E%2Cs%7D%5Chspace%7B10%7D%7B2%24%5Cunderb%7B%5Coverb%7Ba...a%7D%5E%7B%5Crm%7Ek%7Ea%5E%2Cs%7D%2C%5Coverb%7Bb...b%7D%5E%7B%5Crm%7El%7Eb%5E%2Cs%7D%7D_%7Bk%2Bl%5Crm%7E%7Eelements%7D%7D

ここまで作業中文書です。

作業中文書は清書されてUPされる予定です。若干はてなのTeXモジュールに不思議な挙動がありますので作業を停止中です。

mimeTeXに改造がはいりました。

はてなのmimeTeXは本稿記述後5/6に改訂されました。従いまして本日の記述の大部分が古い内容になりました。万歳！。当初続きを書く予定でしたが、このままでは続編も書けるわけもなく、中断したままといたします。ご了承下さい。

■はてなmimeTeXの不具合

はてなmimeTeXには不具合があるようです。

以下、5/6に全て修正完了にて不具合はなくなっております。

mimeTeX配布元のmimetex.cgiとはてなのmimetex.cgiとを、動作比較をしてみました。その結果、いくつか不一致点が見出され始めています。

\large \atop の動きが違う

\large \atop の動きが異なるようですので、以下に対照比較してみました。

mimeTeX本家
http://www.forkosh.dreamhost.com/cgi-bin/mimetex.cgi?\LARGE~y=\{{u\atop~d}\}
はてな
http://d.hatena.ne.jp/cgi-bin/mimetex.cgi?\LARGE~y=\{{u\atop~d}\}

\largeによってフォントが大きくなっていません。また、\atopでは、正しくdの上にuがレンダリングされていません

\hspace{10}がきかない

mimeTeX本家
http://www.forkosh.dreamhost.com/cgi-bin/mimetex.cgi?a\hspace{10}b
はてな
http://d.hatena.ne.jp/cgi-bin/mimetex.cgi?a\hspace{10}b

以上は5/6に修正完了となりました。ありがとうございます。＞はてな様