サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年3月18日 14:31
LaTeXの数式が表示できるJavaScriptライブラリの「MathJax」をCocoonに追加して欲しいです。
2020年3月18日 19:45
書き込みだけでは「大変そう」と思ったのですが、
MathJaxは優秀なJavaScriptプラグインのようで、思ったより簡単そうですね。
http://jjoo.sakura.ne.jp/igblog/?p=253
ちなみに、MathJaxプラグインではダメだった理由とかは、ありますか？
https://thunderblog.org/2019/04/howtomathjax.html
「WordPress の最新バージョンに対応していない」と出るからでしょうか。
Topic starter
2020年3月18日 23:21
「MathJax - LaTeX」はダメでした。最新版に対応していないからでしょうか？
ドルマークで挟む使い方→そのまま出力される
latexショートコードで囲む使い方→何も出力されない
と、どちらも数式が表示されないです。
2020年3月19日 11:04
MathJaxを一部のサイトで使用していますが、v3ではかなり柔軟にカスタマイズができるようになっていて、サイトの仕様に合わせてコードを組み込めます。
Gutenbergがmarkdown記法にも対応していることもあって、ブロックエディタと相性がいいのですが、個人的には各自の環境に合わせて導入すべきモジュールだと思うので、Cocoon側で導入するのであれば柔軟性を損なわない形でお願いしたいです。
2020年3月19日 18:16
今回の実装、需要はそこそこかもしれないけど、導入が簡単なタイプの実装です。
なのでデフォルトでは数式表示は当然無効にしておきます。
数式表示を無効にしておけば、スクリプトも読み込まれないので、速度低下への影響はないようになると思います。
2020年3月19日 18:20
一応、実装をしてみました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
Cocoon設定の「コード」タブから数式表示を有効にしてください。
実際使ってみて、日本語にも対応していて株式指標の計算式などの表示などにも便利なので、思ったより需要はありそうな気がします。
2020年3月19日 18:23
1つ思ったのは、「数式番号の扱いをどのようにしたら良いかな？」ということです。
デフォルトだと数式番号「非表示」で、オプションで「表示」にする設定でよいでしょうか？
これは使用されるveilnuiさんにご意見を伺いたいです。
※現在は番号は表示される状態になっており、設定項目も用意しておりません。ご意見を聞いてからと思って。
2020年3月19日 18:24
AMP に対応できるか疑問を感じました。
テーマに実装されるなら、amp-scirpt で使えるか確認が必要かもしれません。
下手をしたら、「AMP で数式になりません」との問い合わせがいくつもくるかも。
わいひら reacted
2020年3月19日 18:27
下手をしたら、「AMP で数式になりません」との問い合わせがいくつもくるかも。
ありえる…
全くAMPのことを考えてなかった…。
2020年3月19日 19:17
おぉぉ！
そのコンポーネントは知りませんでした。
検索しても他に参考になるサンプルがないですね。
https://github.com/ampproject/amphtml/blob/master/examples/amp-mathml.amp.html
わいひら reacted
2020年3月19日 19:47
その他に、TeXでの表記とコンテンツ、エディタ側の記法とのバッティングを調節したりも必要です。
MathJaxをそのまま全ページに当てはめ、デリミタまで書かせる形では意図しない変換が生じます。
AMP対応の参考になるかどうかは分かりませんが、私の場合はSSRでブロックエディタに組み込む形を採っていて、AMPページではAMP用マークアップを生成するようにしています。
わいひら reacted
2020年3月19日 21:04
TeXでの表記とコンテンツ、エディタ側の記法とのバッティングを調節したりも必要です。
#post-29873
補足で、Cocoonのテーマ側での対応の場合はAMP用の置換時にも上記と同様の調節が必要になるのではないかと思われます。
2020年3月19日 21:50
その他に、TeXでの表記とコンテンツ、エディタ側の記法とのバッティングを調節したりも必要です。
例えばといった表記とどういった表記とか例もありますでしょうか。
僕はこれまで使ったことがないものなので、想像がつかなくて。
2020年3月19日 21:54
まだ試作段階ですが、amp-mathml でもAMPで数式表示されることは確認いたしました。
ただ、こちらのstr_replaceを用いた文字列置換方法では、誤置換がありそうなので、あくまで試作です。置換方法は改善する必要があります。
https://github.com/yhira/cocoon/blob/2c4086ec937125977077b3d1454ab10d0e8da76f/lib/amp.php#L241
2020年3月19日 21:58
str_replaceを用いた文字列置換より、preg_replaceを用いた正規表現置換の方が誤置換は防げるかと思います。
ただ、こちらのブロック数式\[..\]の置換はうまくいくんですけど、
https://github.com/yhira/cocoon/blob/2c4086ec937125977077b3d1454ab10d0e8da76f/lib/amp.php#L238
こちらのインライン数式\(...\)の置換がうまくいかない…。
https://github.com/yhira/cocoon/blob/2c4086ec937125977077b3d1454ab10d0e8da76f/lib/amp.php#L237
2020年3月19日 22:04
1つ思ったのは、「数式番号の扱いをどのようにしたら良いかな？」ということです。
デフォルトだと数式番号「非表示」で、オプションで「表示」にする設定でよいでしょうか？
これに関しては、AMP（amp-mathml）では、数式番号は表示されない（表示の仕方が今のところわからない）ようなので、数式表示オプションを追加するかは、今のところわからないです。
2020年3月19日 22:08
今は試験的な実装ですが、あまりにも開発カロリーが高くなるようであればあれば、実装しない可能性もあるのでご了承ください。
2020年3月19日 22:27
例えばといった表記とどういった表記とか例もありますでしょうか。
一番よくあるのが、ソースコード表示内でしょうか。
ソースコード以外でも文字列の並びで指定したデリミタになってしまうことが稀にあります。
不用意にMathJaxの対象範囲を広げると意図しない変換が起こるので、MathJax系のプラグインではショートコードで囲う必要があったり、#post-29873で紹介したように特定のブロック内のみに対象範囲を狭めて、バッティング箇所を限定する方法がよく用いられています。
また、#post-29880だと#post-29876で書いた通り、MathJaxの意図しない置換はそのままAMPでも反映されてしまいます。
CocoonのAMP置換ではマークアップそのものを文字列として扱う分、通常ページでは起こらない誤置換が生じる可能性もあります。
わいひら reacted
2020年3月19日 22:52
一番よくあるのが、ソースコード表示内でしょうか。
なるほど。確かにそれはありそうですね。
不用意にMathJaxの対象範囲を広げると意図しない変換が起こるので、MathJax系のプラグインではショートコードで囲う必要があったり、#post-29873で紹介したように特定のブロック内のみに対象範囲を狭めて、バッティング箇所を限定する方法がよく用いられています。
こちらもなるほどです。そういった手があるんですね。
僕も、ショートコードと数式専用のブロックを作成して、置換箇所を限定するという手法で対処したいと思います。
教えていただき、ありがとうございます！
2020年3月20日 00:13
MathJaxスクリプトで、例えばCSSセレクタを指定して、特定のHTML要素だけ数式化するなんて事はできるのでしょうか？
MathJax.Hub.Configか何かの設定で。
調べてみたものの、それっぽいのは見つけられませんでした。
Topic starter
2020年3月20日 00:25
数式番号の扱いをどのようにしたら良いかな？
僕の使い方では、数式番号は不要です。
デフォルトではOFFで、オプションで、ON・OFFできると良いと思います。
不用意にMathJaxの対象範囲を広げると意図しない変換が起こるので、MathJax系のプラグインではショートコードで囲う必要があったり、#post-29873で紹介したように特定のブロック内のみに対象範囲を狭めて、バッティング箇所を限定する方法がよく用いられています。
動作しなかった、MathJax - LaTeXプラグインでは
- 使う前に「LaTeX」ショートコードを呼び出さないと有効化されない
- それに加えてドルマークで囲む、ショートコードで囲むなどしないと変換されない
（プラグインによっては /[/] や /(/) で囲むものもある）
といった形です。
１番は設定画面でON・OFFすれば良いですが、２番に関しては意図しない変換を防ぐため、数式ブロック or 数式ショートコードとして必要だと思います。
Topic starter
2020年3月20日 00:45
https://stackoverflow.com/questions/5639827/styling-mathjax/25329062
根本的な解決にはなってないと思いますが、一応それっぽいサイトを見つけてきました。
Topic starter
2020年3月20日 01:13
http://docs.mathjax.org/en/latest/input/tex/extensions/html.html
なんかよくわからないけど、とりあえず。
なお、特定のクラスを除外することはできるようです。
Topic starter
2020年3月20日 01:17
何度も連続投稿してごめんなさい。
公式ドキュメントに書いてありました。
本家
http://docs.mathjax.org/en/latest/options/document.html
Google翻訳版
わいひら reacted
2020年3月20日 19:46
僕の使い方では、数式番号は不要です。
デフォルトではOFFで、オプションで、ON・OFFできると良いと思います。
これはAMPページを考慮しなければ、それでも良いと思っていました。
ただ、AMPページでは数式番号が表示されないので、仕様を統一するためにも、オン/オフ機能は、とりあえず付けないでおこうと思います。
※機能を有効化したのに、AMPで表示されないという問い合わせが来そうなので。
不用意にMathJaxの対象範囲を広げると意図しない変換が起こるので、
とりあえず対象範囲をなるべく狭める方法としては、とりあえずは開発コストが一番安い以下のようなショートコード方式をとることにしました。
https://gcbgarden.com/2017/12/25/mathjax-latex-plugin/
Cocoonで数式を利用するには、以下の手順をとる必要があります。
- Cocoon設定「コード」タブから「数式表示を有効にする 」を有効化する
- 投稿するときに本文のどこでも良いので[math]というショートコードを入力する
- ブロック要素の数式を入力するには/[数式/]フォーマットで入力する
- インライン要素の数式を入力するには/(数式/)フォーマットで入力する
※今回$数式$フォーマットでの入力は、採用しませんでした。誤変換が多くなりそうなので。
2020年3月20日 19:47
ダウンロードはこちら。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
2020年3月20日 19:49
ブロック要素の数式の入力例。
\[e^{\pi i} = -1\]
2020年3月20日 19:50
インライン要素の数式の入力例。
右辺の -1 を左辺に移項して \(e^{\pi i} + 1 = 0\) とすることで、0、1、\(e\)、\(\pi\)、\(i\) を全て含む式としてにんまりする人も多いらしいですが、個人的には移項しないシンプルな方が好きです。
2020年3月20日 19:53
[math]ショートコードの投稿への入力例。
※厳密に言えばWordPress的なショートコード機能ではないです。
2020年3月21日 13:26
MathJaxスクリプトで、例えばCSSセレクタを指定して、特定のHTML要素だけ数式化するなんて事はできるのでしょうか？
#post-29893
色々と方法はあるのかもしれませんが、私の場合はv3標準（公式ドキュメント）に則ってサーバーサイドで実装することで実現しています。
GutenbergのSSR時にMathJaxを通せば、作成した数式ブロックを考慮するだけでよくなります。
エディタ上でTeXの表示をリアルタイムでチェックできますし、ブラウザ読み込み時の変換が必要なくなるので高速化にも繋がり、MathJaxから受け取ったマークアップをブロックのマークアップに受け渡す（AMPページではここでAMP化を挟む）ので、ブロック外への影響もありません。
ショートコードは実装していませんが、上記の実装部分をショートコードの実行完了直前までにあるフックから受け渡しを行えばよいのではないかと思います。
Cocoonの実装をざっと確認したところ、
- #post-29925の書き込みのように、数式と合わせてコンテンツとしてのデリミタが使用できない。
- デフォルトとは別のデリミタを設定する場合のAMP対応は、各自で実装しなければならない。
などはテーマ側での判断かと思いますが、少なくとも
- AMP化がパラグラフ内に限定されてしまっている（pタグとdivタグの関係は？機能への移行等でpタグで囲っていない場合は？など）。
- $$ ... $$の場合が考慮されていない。
あたりは修正が必要そうです。
わいひら reacted
2020年3月21日 20:03
ご指摘ありがとうございます。
元々、少ない需要の割には、簡単そうなので実装考えましたが、ちょっとすぐには出来そうにないので、今回の機能は無効化しようと思います。
とりあえず、TODOに入れておこうと思います。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。