■[hatex:tex式]の提案

5/6にはてなの[tex:tex式]に改訂がありました。

5/6にはてなの[tex:tex式]に改訂がありました。これにより[hatex:tex式]の存在価値はなくなりましたのでここに提案を取り下げるものといたします。せっかくですので記事は残しておきますが、内容自体は既に古いものとお考え下さい。

[hatex:tex式]とは

[hatex:tex式]は、[tex:tex式]の代替として考えられた、はてなダイアリー等での数式表示を画像として出力する為の機能です。

はてなダイアリーヘルプ#数式表示では、画像として数式を表示する為に[tex:tex式]という記法が示されています。これは非常に有用でありますが、欠点もありました。その欠点を克服し、かつ、ユーザによる記法が簡易であることを目標に[hatex:tex式]の仕様を考えて見ました。

従来の記法[tex:tex式]の欠点

ごく簡単な不等式、たとえば"5>3"のようなものを素直にTeX記法に従って[tex:5>3]と記した時に、WindowsIEでは大丈夫なのに、NetscapeOperaなど少なくないブラウザでは期待されない誤った表示をしてしまいます。サーバに送信するURL文字の取り扱い方がブラウザによって異なるからです。余談ですが興味深いことにNetscapeOperaなどのほうがブラウザとしては正しい挙動を示しており、そのせいで"5>3"を見る事ができないのです。

これを回避する方法もなくはないのですが、やや巧妙な技法を必要としますので、素直で簡明なTeX記法は使えません。

たとえば、上の例では、[tex:formdata=5%3E3]とする工夫がありますが、たとえTeX記法に熟知していてもこの表現を使うことは手間ですし直観に反しています。formdata=5%3E3

[hatex:tex式]の大筋の意味あいについて

詳細部分で微妙に異なりますが、大筋において[hatex:tex式]を捉えるならば以下のようになります。

[hatex:tex式]=[tex:formdata=tex式をURLエンコードしたもの]

これにより、ブラウザごとに異なる表示を得てしまったりすることもなく、mimeTeXの普通の記法をそのまま記述可能ですので有用度はかなり上がります。たとえば先の例では次ように考える事が出来ます。

[hatex:5>3]=[tex:formdata=5%3E3]

これならば簡明に記述が可能で、得られる数式画像はブラウザを選びません。

[hatex:tex式]のHTMLへの展開について

[hatex:tex式]を編集画面で記述した時には、以下のようなimg要素が生成されるものとします。

<img src="http://d.hatena.ne.jp/cgi-bin/mimetex.cgi?formdata=URLエンコード済みtex式" class="tex" alt="文字参照済みtex式">

URLエンコード済みtex式、文字参照済みtex式、については微細な要求仕様がありますので以下に述べます。

src属性に使うURLエンコード済みtex

URLエンコードには実装上、いろいろなパターンがありえますので悩ましいところですが、もっともキツイエンコードをすることとします。

空白関連で特別な取り扱いをします。まず、『 + 』は『 %2B 』へ、空白『   』は『 + 』へとエンコードすることとします。

空白関連、そして『 . 』『 _ 』『 - 』『 * 』の4文字を除き、全てURLエンコードし、『%XX』の形にします。

当然のことながら上で示したやりかたでは『 % 』も『 %25 』とエンコードされます。

クエリー文字列が対象ですのでRFC2396 3.4 (Query Component)を参考にし、エンコードすべきものを洗い出しました。また上記RFCで触れていなくとも、代表的なブラウザでエンコードされているものもエンコード対象にしています。このため、javascriptなどのescape()とは異なる実装になっています。実際、『 @ 』などはかなり悩ましいところです。

私はmimeTeX本家のサイトの例題でチェックをしました

なお、セキュリティー上の留意について述べておきます。従来の記法[tex:tex式]では、img要素への展開にあたって、src属性にXSS脆弱性対策の為の文字参照を施していますが、これは本稿で提案の[hatex:tex式]では不要です。むしろ誤動作のもとです。一方、img要素に展開する前のtex式に印刷不可能な文字(制御文字や%7F相当、%80〜%FF)が含まれていたならば、これらを事前に、空白(%20)に読みかえるものとします。編集画面で入力されたものをURLエンコードするのだ、それ以外は空白にするぞ、ということで。

alt属性に使う文字参照済みtex

alt属性のために用意されるtex式はURLエンコードされるとわけがわかりません。そこで、XSS脆弱性対策の為だけに単純に最低限必要な文字のみ文字参照します。ただし、URLエンコードの説明のところで示した制御文字等は事前に空白に差し替えられているものとします。文字参照すべき文字は、『 < 』『 > 』『 " 』『 ' 』『 & 』の5文字とします。

ところで、実装方法が見当もつかないので「はてな」開発陣にご相談なのですが、alt属性については、日記編集画面で手で設定できたほうがユーザービリティーアクセシビリティーの面で優れているかと思います。既定値は、tex式から生成されるとしても、やはりそれ以外のalt属性のほうがどうみても相応しい場合がありそうです。たとえば、[hatex:tex式][hatexalt:数式画像の代替テキスト表示]のようなオプションは欲しいところです。

tex式中の『 ] 』

tex式中の『 ] 』が、はてな省略記法の終了符号『 ] 』と一致します。tex式中では、『 \] 』とエスケープして書くようにユーザにお願いをするという特別な運用をします。このエスケープは、img要素への展開の前に解釈され、とりのぞかれます。

はてなダイアリーへの要望

以上、はてなダイアリーへの要望として正式に提案をいたします。5/6にはてなの[tex:tex式]に改訂がありました。これにより[hatex:tex式]の存在価値はなくなりましたのでここに提案を取り下げるものといたします。