« 2014年4月 | トップページ | 2014年9月 »

2014年6月

2014年6月23日 (月)

MathJax のプレビュー

\(\def\xypic{\mathrm{X\!_{\Large Y}\!{\tiny \boldsymbol -}pic}}\)

MathJax で数式を書く時は、試験的に簡単なページを書いてファイルに保存し、それをブラウザで表示して確認するということをしていました。しかし、複雑な式だと何度も修正して、その度にファイルに保存することになり、あまり気が進みません。インターネット上には、プレビュー用のページが幾つか公開されていますが、それらは XyJax (\(\xypic\)) には対応していません。そこで、それらを参考にして、プレビュー用のページを自作することにしました。自作したページをローカルに置いて、そこへアクセスして数式をプレビューします。

参考にしたページでは jQuery を使用しているのですが、あまりライブラリは使用したくないので(もちろん MathJax や XyJax は別です)素の JavaScript で作成しました。それが下記です。


<html>
<head>
  <title<MathJax Preview>/title>
  <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: { inlineMath: [['\\(','\\)']]},
      TeX: {extensions: ['XyJax の URL']}
    });
  </script>
  <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
  <script>
    function makePreview(){
      preview.innerHTML = code.value.replace(/</g, "&lt;").replace(/>/g, "&gt;");
      MathJax.Hub.Queue(["Typeset", MathJax.Hub, "preview"]);
    }
  </script>
</head>

<body>
  <span style="font-weight:bold">MathJax コードを入力して、変換ボタンをクリックして下さい。</span><br />
  <textarea id="code" cols="80" rows="20">\[&#10;&#10;\]</textarea><br />
  <button type="button" onclick="makePreview()">変換</button><br />
  <div id="preview"></div>
</body>
</html>

textarea に MathJax コードを入力して [ 変換 ] ボタンをクリックすると、そのボタンの下( preview 領域)に整形された数式が表示されます。

textarea に入力したデータを参照するのに、始めは code.innerHTML を試したのですが、うまく行きませんでした。いろいろ検索をして、 code.value で参照できることが分かりました。逆に、 previewpreview.value ではダメでした。

code.value.replace() しても、 code.value 自体は replace されないようです。したがって


      code.value.replace(/</g, "&lt;");
      code.value.replace(/>/g, "&gt;");
      preview.innerHTML = code.value;
のように3行に分けて書いたらダメで、 preview.innerHTML には replace() の戻り値を代入しないといけないようです。

2014年6月15日 (日)

状態遷移図を描きたい

\(\def\xypic{\mathrm{X\!_{\Large Y}\!{\tiny \boldsymbol -}pic}}\)

このブログで採り上げている FlatTable は SVG で作成していますが、 SVG 版以前に Flash 版が出来ていました。その Flash 版では、ダブルクリックの判定を自前で行っています。これをプログラミングする時、状態遷移の把握が難しくてプログラミングがはかどらないので、 Excel で状態遷移図を作成し、それを利用していました。その1つが下図です。

状態遷移図

その後、これを状態遷移図としてもっとマシなものにしたくて状態遷移図ツールを探したのですが、気に入る物が見つかりませんでした。

しばらくして MathJax で CD (可換図式)が書けるようになりました。しかし、CD 環境では斜めの射線が引けないので、斜め射線に対応しているものを探したところ MathJax で使える \(\xypic\) 拡張として XyJax というものの有ることが分かりました。この XyJax (即ち \(\xypic\)) は斜め射線だけでなく曲線も引けます。これを使えば状態遷移図が描けそうです。ただし、 XyJax は MathJax の正式な機能ではないので、アクセス先を MathJax とは別に用意しなければなりません。将来、 XyJax が MathJax に取り込まれた場合の変更が煩わしいので、 MathJax で正式に取り込まれるのを待っていたのですが、待ち切れなくて XyJax を利用することにしました。 XyJax は以下から入手できます。

http://sonoisa.github.io/xyjax/xyjax.html

XyJax を使って作成した状態遷移図は以下の通りです。

\[\xymatrix{ & & & & *+[F:<3pt>]\txt{null\\MakeArw\\Accept} \ar@/_10pt/[llld]^<>(0.4){Accept,stopDrag}_<>(0.6){[move]} \ar@/_40pt/[llld]^<>(0.3){MakeArw,stopDrag}_-{[release]}\\ \ar[r]^<{[start]} & *+[F=:<3pt>]\txt{Press\\(*)\\null} \ar[rrr]^-{[press]}_-{Press,startDrag} & & & *+[F:<3pt>]\txt{(Press)\\Release\\MvDetect} \ar[u]^-{[release]}_-{Release} \ar[d]^-{MvDetect}_-{[move]}\\ & & & & *+[F:<3pt>]\txt{(Press)\\Accept\\null} \ar@/^20pt/[lllu]^-{Accept,stopDrag}_{[release]} }\]

因みに、 XyJax のサイトには次のような状態遷移図の例が載っていました。

\[\xymatrix { *\txt{start} \ar[r] & *++[o][F-]{0} \ar@(r,u)[]^b \ar[r]_a & *++[o][F-]{1} \ar[r]^b \ar@(r,d)[]_a & *++[o][F-]{2} \ar[r]^b \ar `dr_l[l] `_ur[l] _(.2)a[l] & *++[o][F=]{3} \ar `ur^l[lll] `^dr[lll]^b [lll] \ar `dr_l[ll] `_ur[ll] [ll] }\]

« 2014年4月 | トップページ | 2014年9月 »