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

2017年10月18日 (水)

Mathjax が サーバー変更してバージョン指定が煩わしい

ちょっとタイミングを外した話題ですが、 Mathjax の CDN (Content Delivery Network) は今年4月に終了しています。現在は

https://cdnjs.cloudflare.com/ajax/libs/mathjax/バージョン/MathJax.js?config=TeX-AMS_HTML

を利用することになっています。ここにバージョンは MathJax のバージョンです。なお、 XyJax との相性の関係で config は TeX-AMS_HTML にしています。

終了の情報は4月上旬に知っていたのですが、設定は暫くそれまで通りにしておき、数式の整形がエラーになるのを確認してから設定変更することにしていました。しかし、何か月も表示が正常なままなので不思議に思っていたら、今までのサーバーを指定しても、上記サーバーにリダイレクトしているとのことでした。いつまでもリダイレクトという訳にも行かないだろうから、今は上記サーバーに変更しています。

ところで、今までのサーバーだと、 MathJax のバージョンは latest にしておけば自動的に最新バージョンに対応してくれていたのですが、現行のサーバーだと、バージョンを明確に指定しなくてはなりません。サーバーが変更になった時点では、バージョンが 2.7.0 だったのが、現在は 2.7.2 になっています。その都度、アクセス先を修正するのは面倒です。困ったものです。

2016年9月11日 (日)

HTML の <p> は paragraph ではない

HTML のタグ <p> について以前から気になっていることが有ります。この <p> に関する HTML での挙動が、私の期待しているものと違うのです。それは <p>~</p> の間に <div> やリストの <ol> などを入れると、その <div><ol> の直前に </p> が挿入されたのと同じ振る舞いをするということです。その結果 <p>~<p> の範囲が意図と違うものになってしまいます。因みに、このような振る舞いは <p>~</p> にブロック要素を挟むことは出来ないことが原因です。

ところで、この <p> は paragraph から来ているわけですが、 paragraph とはどういうものでしょうか? それについては パラグラフと段落パラグラフの構造 に説明が有ります。それから、ページが変な構造になっていて直接リンクを貼りにくいのですが、 日本語ライティング 内の「パラグラフの重要性と書き方」にも paragraph の説明が載っています。一言で言えば、1つのトピックについて述べた文の集まりが paragraph です。

あるトピックについて述べている paragraph の中でリストを記述したいことが有ったとしても、現状ではそれは出来ません。例えば次のような記述は出来ないのです。


<p>                              <!-- ここから -->
    パラグラフは3つの要素から成っています。
    それは以下の通りです。<br />

    <ol>
        <li>トピックセンテンス</li>
        <li>サポートセンテンス</li>
        <li>コンクルーディングセンテンス</li>
    </ol>

    サポートセンテンスは必要に応じて複数の
    センテンスで成り立っています。コンクルー
    ディングセンテンスは省略されることが
    あります。
</p>                              <!-- ここまでを paragraph としたい -->

<ol> の直前に </p> が挿入され、宙ぶらりんになった最後の </p> の直前にも <p> が挿入されます。これでは、私の意図した paragraph とは違ったものになってしまいます。

残念ながら、 HTML はそういう仕様なのだから、 <p> に対する考え方を変え、 <p> は paragraph ではないとしてブログ等を作成するしかないのでしょう。

ところで、以前は1つの paragraph に複数の空行を入れていたのですが、現在は一塊で表示しています。かつてウェブが世間に広まる前、いわゆるコンピューター通信と言っていたころ(例えば @nifty ではなく、 NiftyServe だったころ)は、コンピュータ画面の解像度があまり高くなく行間が狭かったため、 paragraph を一塊として表示すると窮屈になって読み難いものでした。それで当時は、本来は1つの paragraph になっているトピックについて記述する時でも、小まめに空行を入れて1つの paragraph を複数の塊りに分けることを心がけて書いていました。ある人は、内容に関わらず3行ごとに空行を入れている例も有りました。しかし現在は、印刷物と同程度に行間を空けて表示できるので、私の場合、1つの pargraph は途中に空行を入れずに一塊で表示するようにしています。

2015年6月14日 (日)

XyJax は SVG 表示方式にするとエラー発生

MathJax のレンダリングは HTML-CSS や MathML など幾つか方式が有りますが、それを SVG 方式にして XyJax を使用するとエラーが発生しました。 Chrome のデベロッパーツールでエラーメッセージを確認すると


Uncaught TypeError: Cannot read property 'Get' of undefined
となっていました。また、発生個所は xypic.js の 5208 行目でした。


MathJax.Hub.Register.StartupHook("Device-Independent Xy-pic Require",function () {
    ・・・
    ・・・
  HUB.formatError = function (script, err) {
    if (err.xyjaxError !== undefined) {
      ・・・
      ・・・
    } else {
      throw err;    // ←エラー箇所
      hub_formatError.apply(HUB, [script, err]);
    }
  }

ただし、ここはエラーを throw した箇所なので、本当の発生個所ではありません。エラーメッセージによると、オブジェクトが undefined なので Get を読み込むことが出来ないということです。そこで xypic.js で Get を探したのですが、見つけることが出来ませんでした。これでは、何が undefined なのか判りません。エラーの原因を見つけるには、デベロッパーツールでステップ実行して動作を追跡する必要があります。そのうち気が向いたらすることにして、今日のところは置いておきます。

なお、 XyJax のサイトによると、 SVG 表示方式には対応済みとなっていますが、そうでもなかったということでしょうか?

ところで、 MathJax は、その表示箇所を右クリックして表示方式を変更することが出来るようになっていますが、今回のエラーが発生すると、表示方式の変更が出来なくなります。たとえページを再読み込みしても変更は出来ません。ブラウザーにも依るのかも知れませんが、 Cookie をクリアしないと元の表示に戻りません。

2015年6月 6日 (土)

SVG に MathJax を被せる

球の衝突図

以前に書いた「アニメーション機能の実装、その前に」で png 形式の左図を使用していますが、文字が気に入らないので、これを MathJax で表示することを試してみました。ついでに、画像を SVG で作り直しました。

1
\(v_0\)
\(v_1\)
\(u_1\)
\(\require{color}\textcolor{blue}{\alpha}\)
\(\textcolor{blue}{\beta}\)
それが左図です。


コードの概略は次のようになっています。


<div style="float:left; position:relative; margin-right:5px">
    <svg
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="280"
        height="210"
        viewBox="0 0 200 150">    <!-- width, height が viewBox と異なるのは画像の表示サイズの調整のため -->
        ・・・
        ・・・
    </svg>

    <div style="position:absolute; top:75px; left:110px">\(v_0\)</div>
    <div style="position:absolute; top:110px; left:130px">\(v_1\)</div>
    <div style="position:absolute; top:60px; left:150px">\(u_0\)</div>
    <div style="position:absolute; top:77px; left:185px">\(\require{color}\textcolor{blue}{\alpha}\)</div>
    <div style="position:absolute; top:110px; left:180px">\(\textcolor{blue}{\beta}\)</div>
</div>

ここに図の右側の文章が来る
<br style="clear:left" />
図と文字を合わせて div タグで囲い、 それを position:relative にした後、文字の位置は position:absolute にして次のように指定します。

    <div style="position:absolute; top:75px; left:110px">\(v_0\)</div>
他のサイトで、 foreignObject タグを使用して SVG 内で MathJax の数式を表示している例を見たことが有るのですが、ブラウザによっては対応していないのも有るので、上のような方法にしました。

2014年9月23日 (火)

数式を動的に変える(プレビューの応用)

MathJax の記事を検索していたら、下記のサイト
web 上での数式表示方式の比較
で、 web 上の幾つかの数式表示方式を比較した記事が有りました。その記事では、比較項目の例10「問題や解答の数値を動的に変えること」が MathJax では出来ないとなっていますが、 JavaScript を併用すれば可能です。実際、その例10は MathJax を使って以下のように実装できます。

例10の MathJax による実装

2次方程式の解を求めます.
正負の整数を入力して[解を求める]ボタンを押してください.

\((\) \()x^2+(\) \()x+(\) \()=0\)

\[x=\]

このように、問題や解答の数値を動的に変えることが出来ました。なお、簡単のため、エラー処理などはしていません。また、解の根号内が負のときでも、虚数単位 \(i\) を表示するようにはなっていません。因みに、上記実装はMathJax のプレビュー と同じ手法を使っています。

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] }\]

2013年5月26日 (日)

MathJax で可換図式 -2-

先の記事 で書いた斜め線入りの可換図式は、IEではうまく表示出来ていません。 IEは foreignObject に対応していないのが原因のようです。そこで、次のように書き換えてみました。


\(\require{AMScd}\)
\[
    \begin{CD}
        @. X\\
        @. @VVuV\\
        K @>>j> A @>>f> B
    \end{CD}
\]
<svg style="display: block; margin: -100px auto auto" width="180" height="90" viewBox="0 0 180 90">
    <path d="M70,20 l-40,30 8,-1 m-8,1 l4,-8" style="stroke:#0f0;stroke-width:0.5;fill:none" />
</svg>
<div style="margin:-70px 200px 70px; color:#0f0">
    \(\small{\bar{u}}\)
</div>
この結果がこれ↓です。 \(\require{AMScd}\) \[ \begin{CD} @. X\\ @. @VVuV\\ K @>>j> A @>>f> B \end{CD} \]
\(\small{\bar{u}}\)

2013年5月19日 (日)

MathJax で可換図式

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

MathJax が v2.2 になって、CD環境が使えるようになりました。CDは Commutative Diagrams の略で、これにより可換図式を表示することが出来ます。例えば次のようなものです。
\(\require{AMScd}\) \[ \begin{CD} S^{{\mathcal{W}}_\Lambda}\otimes T @>j>> T\\ @VVV @VV{\operatorname{End} P}V\\ (S\otimes T)/I @= (Z\otimes T)/J \end{CD} \] この機能を使うには、適当な箇所に次のオマジナイを書いておきます。


<script type="text/x-mathjax-config">
    MathJax.Hub.Config({TeX: {extensions: ['AMScd.js']}});
</script>
このスクリプトの代わりに

\(\require{AMScd}\)
を \(\rm\TeX\) コードに入れても同じような効果が得られます。これについては
MathJax v2.2 : Oda 研究室
が参考になりました。

ところで、今回のこの機能、 CD(可換図式)とは言いながら、このCD環境では斜めの線が引けません。これでは満足な可換図式を扱うことが出来ません。\(\rm\TeX\) には \(\xypic\) というものが有って、それは斜め線を引くことが出来ますが、 MathJax に \(\xypic\) は導入されていません。

追記2: MathJax のみでは無理ですが、 \(\xypic\) の MathJax 対応である XyJax を併用すれば、斜め線はもちろん、もっと複雑な図式も扱えます。(当ブログの 状態遷移図を描きたい 参照)

そこで、斜め線の可換図式を書くのに行列を利用してみました。
\[ \begin{array}{ccccc} & & X & & \\ & \small{\bar{u}} \swarrow & \downarrow u & & \\ K & \longrightarrow & A & \longrightarrow & B \\ & \small{j} & & \small{f} & \end{array} \] ただし \(X\) から \(A\) への縦の射線が少しズレています。あまり綺麗とは言えません。

次に、 SVG を使って強引に斜め線を引いてみました。

追記3: タブレットで表示に不具合が生じるため、この部分の可換図式はコメントアウトしました。改良版を「MathJax で可換図式 -2-」で示しています。

この可換図式全体が SVG 画像になっています。コードは次の通りです。なお、射線の位置は、試行錯誤で探りながら決定しました。因みに、 SVG 利用の副産物として、色を部分的に変更することが可能となります。


<svg style="display:block; margin:auto" width="180" height="90" biewBox="0 0 180 90">
<foreignObject x="0" y="0" width="180" height="90">
\(\require{AMScd}\)
\(
    \begin{CD}
        @. X\\
        @. @VVuV\\
        K @>>j> A @>>f> B
    \end{CD}
\)
</foreignObject>
<foreignObject x="40" y="20" width="20" height="20" style="color:#0f0">
\(\small{\bar{u}}\)
</foreignObject>
<path d="M70,20 l-40,30 8,-1 m-8,1 l4,-8" style="stroke:#0f0;stroke-width:0.5;fill:none" />
</svg>

追記1: IEは foreignObject に対応していないのか、 SVG 内では MathJax の表示が出来ないようです。

2012年10月22日 (月)

MathJax v2.1-beta が公開されています

MathJax は10月1日より v2.1-beta が公開されています。

MathJax v2.1-beta now available on the CDN

このバージョンは主にバグ・フィックスを目的としたもののようです。

以前から気になっていたバグに、 Chrome でアクセスするとルート記号の上部の直線が乱れるというのが有りました。これが今回改善されたようです。なお、 SVG 表示ならば今までもルート記号が綺麗に表示されていました。それで設定を SVG 表示にしようとしたのですが、ココログでは自動的に SVG 表示にすることが出来ず、ルート記号は乱れた表示のままでいました。

v2.1 の正式版は2週間ほどでリリースされ、その後 beta 版はリンクが切れるとのことなので、正式版を待っていたのですが、3週間を過ぎても未だ正式版はリリースされません。待ち切れないので、とりあえず beta 版を使用することにしました。現在、ルート記号は綺麗に表示されています。・・・が、文字が汚くなったような気がします。もしかして、正式版が遅れているのはそのせいなのでしょうか?

追記: この翌日に v2.1 が正式公開されたようです。