　re:sweatr: Blogger上でXy-picを動かすのに苦労したからメモるよ

\[ \begin{xy} \xymatrix { U \ar@/_/[ddr]_y \ar@{.>}[dr]|{\langle x,y \rangle} \ar@/^/[drr]^x \\ & X \times_Z Y \ar[d]^q \ar[r]_p & X \ar[d]_f \\ & Y \ar[r]^g & Z } \end{xy} \] ↑こういうカッコイイ図を描きたいな、なんて思ってしまったのが運の尽き。。
まさかここまで苦労するとは。。。

結論

現在動作しているjsはこちら。
（これがXyJaxなのか、Xy-picなのか、という議論は置いておこう→補足へ）
動作を妨げていた原因は恐らく以下3点。
1. Javascript: xypic.jsをHTTPで叩くと、~~ブラウザが~~動作を停止
  ※2020/2月以降の一部のブラウザは、セキュリティ理由で、js等のHTTPS呼び出し必須
2. MathJaxのオプションでConfigを上書いていた
3. xypic.jsが古かった
なお、タイトルに「Blogger上」とあるが、Blogger環境が邪魔した事実はない。（なので、おそらく汎用的に使えるソリューションだと思う。）

動作コード

<script type='text/x-mathjax-config'>
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX","output/HTML-CSS"],
    "HTML-CSS": {
      styles: {".MathJax_Preview": {visibility: "hidden"}}
    },
    tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]},
    TeX: {extensions: ["AMSmath.js","AMSsymbols.js","https://cdn.mathjax.org/mathjax/contrib/xyjax/xypic.js"]},
    displayAlign: "left"
  });
</script>
<script async='async' src='https://cdn.mathjax.org/mathjax/latest/MathJax.js' type='text/javascript'/>

2020/8/21現在、当Blogは上記コードで動作している。
原則、GitHubのREADME.md中のサンプルコードに忠実だが、以下2点が異なる。
1. サンプルコードの「http://sonoisa.github.io/xyjax_ext/xypic.js」が、動作コードでは「https://cdn.mathjax.org/mathjax/latest/MathJax.js」
2. 設定の中に「displayAlign: "left"」を追加。MathJaxを左寄せで表示する設定。

解説

Javascript: xypic.jsをHTTPで叩くと、~~ブラウザが~~動作を停止
※2020/2月以降の一部のブラウザは、セキュリティ理由で、js等のHTTPS呼び出し必須
- ~~ずばり~~この話に関連してると思っていたが、直接の原因ではないかもしれない→「Google Developers Japan: Google Chrome で安全でないダウンロードからユーザーを保護する」「Microsoft Edge と混在したコンテンツのダウンロード | Microsoft Docs」（注意：自分がChromeユーザなもので、前者に自信はあるが、後者(Microsoft側)は、検索結果から浅く拾ってきただけで、怪しい感じ。）
- 自分の環境は「Chrome 84.0.4147.125（Official Build）（64 ビット）」なので、しっかりブロックされていたと思っていたが、違うかもしれない。
- 【8/22追記】上記のように思っていたが、よく考えると、ブラウザではないのかもしれない。なぜなら、MathJax.jsの呼び出しは、httpでも動くではないか…。①今日現在MathJax.js呼び出しはhttpでも通る。②エラーは「unknown environment 'xy'」であり、xypicsの内部エラーっぽい（詳細不明）。③この投稿で確認できる通り、2016年頃から同様の症状があり、昨今のブラウザのミックスドコンテンツ問題ではなさそう。→ということで、結論は、『xypic.jsを呼び出す際はhttpではなく、httpsでないと動かなそう』、としておこう。

MathJaxのオプションでConfigを上書いていた

前半の「MathJax.Hub.Config」内で「TeX: {extensions: ["AMSmath.js", "AMSsymbols.js", "https://cdn.mathjax.org/mathjax/contrib/xyjax/xypic.js"]}」と設定しておきながら、後半のMathJax.js呼び出し時に「TeX-MML-AM_CHTML」という設定でそれを上書きしていた。具体的には「MathJax.js?config=TeX-MML-AM_CHTML」という形でオプション指定していたのだ。

<script type='text/x-mathjax-config'>
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX","output/HTML-CSS"],
      "HTML-CSS": {
      styles: {".MathJax_Preview": {visibility: "hidden"}}
    },
    tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]},
    TeX: {extensions: ["AMSmath.js","AMSsymbols.js","https://cdn.mathjax.org/mathjax/contrib/xyjax/xypic.js"]},
    displayAlign: "left"
  });
</script>
<script async='async' src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML' type='text/javascript'/>

xypic.jsが古かった
- GitHubのREADME.md中のサンプルコードに記載のjsをHTTPSで呼び出すと「Math Processing Error」となった。（なお、HTTPで呼出し時のエラーは「Unknown environment 'xy'」だったので、別理由だとわかる）　　　　　　
```
TeX: {extensions: ["AMSmath.js","AMSsymbols.js","https://sonoisa.github.io/xyjax_ext/xypic.js"]},
```

チェックポイント

もしかしたら、お悩みの皆さんに、役立つかもしれないチェックポイントを挙げておきます。

jsの呼び出しにHTTPSを使っているか（HTTPになってないか）？（なお、MathJax.jsの方は、httpで呼んでも今日現在は動いた。詳細不明。ある日動かなくなるかも。）

TeX: {extensions: ["AMSmath.js","AMSsymbols.js","http://cdn.mathjax.org/mathjax/contrib/xyjax/xypic.js"]},

TeX: {extensions: ["AMSmath.js","AMSsymbols.js","https://cdn.mathjax.org/mathjax/contrib/xyjax/xypic.js"]},

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js" type="text/javascript"/>

<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js" type="text/javascript"/>

MathJax.jsの呼び出し時にCONFIG設定して(「?config=hoge」が付いて)ないか？
せっかく「MathJax.Hub.Config({〜})」でxypic.jsの設定をしても、MathJax.jsのコール時にCONFIGを上書いてしまっては、そりゃ動かんわなぁ、という話。
```
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML" type="text/javascript"/>
```
```
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js" type="text/javascript"/> 
```
そのjsは、今日現在動作するか？
こればっかりは、コミュニティに確認するか、試行錯誤しないとわかりませんが…。
そのコードに、変なスペースが紛れてないか？
「スクリプトキディあるある」→自分のこと(汗)。サイトからコードをコピーした際、ブラウザによっては意図しないスペースになってしまうことがある。例えばSyntaxHighlighterのデフォルト設定のままのサイトから、Chromeでコピペすると、 (半角スペース)が (ノーブランク・スペース＝ ）になってしまう。原因は、SyntaxHighlighterのデフォルトのスペースが だから（実はChromeは忠実）。下のスクリーンは、正常なコード（上段）と異常なコード（下段）の比較。エディタ(VSC)の検索機能で半角スペースをハイライト（明るい茶色の■）しているが、下段のコードは、インデント部分が半角スペースじゃない何か（実際には、 ）になってしまっている。（なお、当ブログではSyntaxHighlighterのスペース設定を にしているので、Chromeでも大丈夫なはず。）

補足

（注意：以下、推測・憶測が多分に含まれております）

MathJaxとXyJax、Xy-picの関係（推測含む）：sonoisaさんが創ったXyJaxは、2014年頃までGitHubで盛り上がり、結果、これがそのままMathJaxとXy-picを繋ぐコントリビュートとなった。実際、動いているjsのURIは「cdn.mathjax.org/mathjax/contrib/xyjax/xypic.js」となっている。つまり、MathJaxに対するコントリビュートであるXyJaxのxypic.js。そしてこのjs作者はsonoisa（Sonobe Isao）さんである。
言いたいのは「これはXyJaxか？xypicか？」といった疑問は横において、とにかく彼と協力者に感謝するのが大事だろうm(_ _)m
冒頭の図は、いわばXy-picの”Hello World図”と言えよう。User's Guideの冒頭にも掲載されている。以下をMathJaxと同じルールで書けば良い。つまり、\[と\]で囲む。インライン表記は\(と\)で囲む。
```
\begin{xy}
\xymatrix {
U \ar@/_/[ddr]_y \ar@{.>}[dr]|{\langle x,y \rangle} \ar@/^/[drr]^x \\
 & X \times_Z Y \ar[d]^q \ar[r]_p & X \ar[d]_f \\
 & Y \ar[r]^g & Z
}
\end{xy}
```
なお、本ブログでは、図形の上で右クリックから「Show Math As」→「TeX Commands」と選べば上記コードが得られる。
苦労した点：ネットに落ちてるxypic情報は、ほとんどが、というか自分が見つけたものは全て、ミックスドコンテンツのデッドライン2020年2月以前のものだったこと。また、それらに「Githubサンプルコードのjsで動作している」と複数記載があったこと。

re:sweatr

META

2020年8月21日金曜日

Blogger上でXy-picを動かすのに苦労したからメモるよ

目次

結論

動作コード

解説

チェックポイント

補足

0 件のコメント:

コメントを投稿