Processing math: 0%

META


2020年8月21日金曜日

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} ↑こういうカッコイイ図を描きたいな、なんて思ってしまったのが運の尽き。。
まさかここまで苦労するとは。。。
目次
結論
  1. 現在動作しているjsはこちら。
    （これがXyJaxなのか、Xy-picなのか、という議論は置いておこう→補足へ）
  2. 動作を妨げていた原因は恐らく以下3点。
    1. Javascript: xypic.jsをHTTPで叩くと、ブラウザが動作を停止
      ※2020/2月以降の一部のブラウザは、セキュリティ理由で、js等のHTTPS呼び出し必須
    2. MathJaxのオプションでConfigを上書いていた
    3. xypic.jsが古かった
  3. なお、タイトルに「Blogger上」とあるが、Blogger環境が邪魔した事実はない。（なので、おそらく汎用的に使えるソリューションだと思う。）
動作コード
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<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を左寄せで表示する設定。
解説
  1. 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でないと動かなそう』、としておこう。
  2. 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」という形でオプション指定していたのだ。 　　　　　　
    ?
    MathJax.Hub.Configが?config=hogeで上書きされるNGコード
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <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'/>
  3. xypic.jsが古かった
    ?
    Githubサンプルコードの設定→【NG】Math Processing Error
    1
    TeX: {extensions: ["AMSmath.js","AMSsymbols.js","https://sonoisa.github.io/xyjax_ext/xypic.js"]},
チェックポイント
もしかしたら、お悩みの皆さんに、役立つかもしれないチェックポイントを挙げておきます。
  1. jsの呼び出しにHTTPSを使っているか（HTTPになってないか）？ （なお、MathJax.jsの方は、httpで呼んでも今日現在は動いた。詳細不明。ある日動かなくなるかも。）
    ?
    xypic.jsの設定がhttp→【ＮＧ】ブラウザによっては動作しない
    1
    TeX: {extensions: ["AMSmath.js","AMSsymbols.js","http://cdn.mathjax.org/mathjax/contrib/xyjax/xypic.js"]},
    ?
    xypic.jsの設定がhttps→◯動作する
    1
    TeX: {extensions: ["AMSmath.js","AMSsymbols.js","https://cdn.mathjax.org/mathjax/contrib/xyjax/xypic.js"]},
    ?
    MathJax.jsの呼び出しがhttp→△実は今日現在は動く！
    1
    <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js" type="text/javascript"/>
    ?
    MathJax.jsの呼び出しがhttps→◯動作する
    1
    <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js" type="text/javascript"/>
  2. MathJax.jsの呼び出し時にCONFIG設定して(「?config=hoge」が付いて)ないか？
    せっかく「MathJax.Hub.Config({〜})」でxypic.jsの設定をしても、MathJax.jsのコール時にCONFIGを上書いてしまっては、そりゃ動かんわなぁ、という話。
    ?
    ?confｉｇ=HOGE→【ＮＧ】動作しない
    1
    <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML" type="text/javascript"/>
    ?
    ?confｉｇ無し→◯動作する
    1
    <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js" type="text/javascript"/>
  3. そのjsは、今日現在動作するか？
    こればっかりは、コミュニティに確認するか、試行錯誤しないとわかりませんが…。
  4. そのコードに、変なスペースが紛れてないか？
    「スクリプトキディあるある」→自分のこと(汗)。サイトからコードをコピーした際、ブラウザによっては意図しないスペースになってしまうことがある。例えばSyntaxHighlighterのデフォルト設定のままのサイトから、Chromeでコピペすると、&#32;(半角スペース)が&#160;(ノーブランク・スペース＝&nbsp;）になってしまう。原因は、SyntaxHighlighterのデフォルトのスペースが&nbsp;だから（実はChromeは忠実）。下のスクリーンは、正常なコード（上段）と異常なコード（下段）の比較。エディタ(VSC)の検索機能で半角スペースをハイライト（明るい茶色の■）しているが、下段のコードは、インデント部分が半角スペースじゃない何か（実際には、&#160;）になってしまっている。（なお、当ブログではSyntaxHighlighterのスペース設定を&#32;にしているので、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と同じルールで書けば良い。つまり、\[と\]で囲む。インライン表記は\(と\)で囲む。
    ?
    1
    2
    3
    4
    5
    6
    7
    \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で動作している」と複数記載があったこと。
時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)