数式表示機能が欲しい | 要望 | Cocoon フォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

また、問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な返信があった場合は「いいね!」リンクもご活用ください。返信者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
数式表示機能が欲しい
 
Share:
Notifications

[固定] 数式表示機能が欲しい  


veilnui
(@veilnui)
Trusted Memberサイト
参加: 7か月 前
投稿: 56
2020年3月18日 14:31  

LaTeXの数式が表示できるJavaScriptライブラリの「MathJax」をCocoonに追加して欲しいです。


引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年3月18日 19:45  

書き込みだけでは「大変そう」と思ったのですが、
MathJaxは優秀なJavaScriptプラグインのようで、思ったより簡単そうですね。
http://jjoo.sakura.ne.jp/igblog/?p=253

ちなみに、MathJaxプラグインではダメだった理由とかは、ありますか?
https://thunderblog.org/2019/04/howtomathjax.html
「WordPress の最新バージョンに対応していない」と出るからでしょうか。


返信引用
veilnui
(@veilnui)
Trusted Memberサイト
参加: 7か月 前
投稿: 56
2020年3月18日 23:21  

「MathJax - LaTeX」はダメでした。最新版に対応していないからでしょうか?

ドルマークで挟む使い方→そのまま出力される
latexショートコードで囲む使い方→何も出力されない

と、どちらも数式が表示されないです。


返信引用
ロコ
(@lococo)
Honorable Member
参加: 2年 前
投稿: 536
2020年3月19日 11:04  

MathJaxを一部のサイトで使用していますが、v3ではかなり柔軟にカスタマイズができるようになっていて、サイトの仕様に合わせてコードを組み込めます。

Gutenbergがmarkdown記法にも対応していることもあって、ブロックエディタと相性がいいのですが、個人的には各自の環境に合わせて導入すべきモジュールだと思うので、Cocoon側で導入するのであれば柔軟性を損なわない形でお願いしたいです。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年3月19日 18:16  

今回の実装、需要はそこそこかもしれないけど、導入が簡単なタイプの実装です。
なのでデフォルトでは数式表示は当然無効にしておきます。
数式表示を無効にしておけば、スクリプトも読み込まれないので、速度低下への影響はないようになると思います。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年3月19日 18:20  

一応、実装をしてみました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
Cocoon設定の「コード」タブから数式表示を有効にしてください。

実際使ってみて、日本語にも対応していて株式指標の計算式などの表示などにも便利なので、思ったより需要はありそうな気がします。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年3月19日 18:23  

1つ思ったのは、「数式番号の扱いをどのようにしたら良いかな?」ということです。
デフォルトだと数式番号「非表示」で、オプションで「表示」にする設定でよいでしょうか?
これは使用されるveilnuiさんにご意見を伺いたいです。
※現在は番号は表示される状態になっており、設定項目も用意しておりません。ご意見を聞いてからと思って。

This post was modified 2週間 前 2 times by わいひら

返信引用
Akira
(@akira)
Reputable Memberサイト
参加: 2年 前
投稿: 498
Akira - FacebookAkira - Twitter
2020年3月19日 18:24  

AMP に対応できるか疑問を感じました。

テーマに実装されるなら、amp-scirpt で使えるか確認が必要かもしれません。

下手をしたら、「AMP で数式になりません」との問い合わせがいくつもくるかも。


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年3月19日 18:27  
投稿者:: @akira

下手をしたら、「AMP で数式になりません」との問い合わせがいくつもくるかも。

ありえる…
全くAMPのことを考えてなかった…。

This post was modified 2週間 前 by わいひら

返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年3月19日 18:56  

これでちょっと模索してみます。
https://amp.dev/documentation/components/amp-mathml/


Akira 件のいいね!
返信引用
Akira
(@akira)
Reputable Memberサイト
参加: 2年 前
投稿: 498
Akira - FacebookAkira - Twitter
2020年3月19日 19:17  

おぉぉ!

そのコンポーネントは知りませんでした。

検索しても他に参考になるサンプルがないですね。

https://github.com/ampproject/amphtml/blob/master/examples/amp-mathml.amp.html


わいひら 件のいいね!
返信引用
ロコ
(@lococo)
Honorable Member
参加: 2年 前
投稿: 536
2020年3月19日 19:47  

その他に、TeXでの表記とコンテンツ、エディタ側の記法とのバッティングを調節したりも必要です。
MathJaxをそのまま全ページに当てはめ、デリミタまで書かせる形では意図しない変換が生じます。

 

AMP対応の参考になるかどうかは分かりませんが、私の場合はSSRでブロックエディタに組み込む形を採っていて、AMPページではAMP用マークアップを生成するようにしています。


わいひら 件のいいね!
返信引用
ロコ
(@lococo)
Honorable Member
参加: 2年 前
投稿: 536
2020年3月19日 21:04  

TeXでの表記とコンテンツ、エディタ側の記法とのバッティングを調節したりも必要です。
#post-29873

補足で、Cocoonのテーマ側での対応の場合はAMP用の置換時にも上記と同様の調節が必要になるのではないかと思われます。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年3月19日 21:50  
投稿者:: @lococo

その他に、TeXでの表記とコンテンツ、エディタ側の記法とのバッティングを調節したりも必要です。

例えばといった表記とどういった表記とか例もありますでしょうか。
僕はこれまで使ったことがないものなので、想像がつかなくて。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年3月19日 21:54  

まだ試作段階ですが、amp-mathml でもAMPで数式表示されることは確認いたしました。
ただ、こちらのstr_replaceを用いた文字列置換方法では、誤置換がありそうなので、あくまで試作です。置換方法は改善する必要があります。
https://github.com/yhira/cocoon/blob/2c4086ec937125977077b3d1454ab10d0e8da76f/lib/amp.php#L241

This post was modified 2週間 前 by わいひら

返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
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


返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年3月19日 22:04  
投稿者:: @yhira

1つ思ったのは、「数式番号の扱いをどのようにしたら良いかな?」ということです。
デフォルトだと数式番号「非表示」で、オプションで「表示」にする設定でよいでしょうか?

これに関しては、AMP(amp-mathml)では、数式番号は表示されない(表示の仕方が今のところわからない)ようなので、数式表示オプションを追加するかは、今のところわからないです。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年3月19日 22:08  

今は試験的な実装ですが、あまりにも開発カロリーが高くなるようであればあれば、実装しない可能性もあるのでご了承ください。


返信引用
ロコ
(@lococo)
Honorable Member
参加: 2年 前
投稿: 536
2020年3月19日 22:27  

例えばといった表記とどういった表記とか例もありますでしょうか。

一番よくあるのが、ソースコード表示内でしょうか。
ソースコード以外でも文字列の並びで指定したデリミタになってしまうことが稀にあります。

不用意にMathJaxの対象範囲を広げると意図しない変換が起こるので、MathJax系のプラグインではショートコードで囲う必要があったり、#post-29873で紹介したように特定のブロック内のみに対象範囲を狭めて、バッティング箇所を限定する方法がよく用いられています。

 

また、#post-29880だと#post-29876で書いた通り、MathJaxの意図しない置換はそのままAMPでも反映されてしまいます。
CocoonのAMP置換ではマークアップそのものを文字列として扱う分、通常ページでは起こらない誤置換が生じる可能性もあります。


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年3月19日 22:52  
投稿者:: @lococo

一番よくあるのが、ソースコード表示内でしょうか。

なるほど。確かにそれはありそうですね。

投稿者:: @lococo

不用意にMathJaxの対象範囲を広げると意図しない変換が起こるので、MathJax系のプラグインではショートコードで囲う必要があったり、#post-29873で紹介したように特定のブロック内のみに対象範囲を狭めて、バッティング箇所を限定する方法がよく用いられています。

こちらもなるほどです。そういった手があるんですね。
僕も、ショートコードと数式専用のブロックを作成して、置換箇所を限定するという手法で対処したいと思います。

教えていただき、ありがとうございます!


返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年3月20日 00:13  

MathJaxスクリプトで、例えばCSSセレクタを指定して、特定のHTML要素だけ数式化するなんて事はできるのでしょうか?
MathJax.Hub.Configか何かの設定で。
調べてみたものの、それっぽいのは見つけられませんでした。


返信引用
veilnui
(@veilnui)
Trusted Memberサイト
参加: 7か月 前
投稿: 56
2020年3月20日 00:25  

数式番号の扱いをどのようにしたら良いかな?

僕の使い方では、数式番号は不要です。
デフォルトではOFFで、オプションで、ON・OFFできると良いと思います。

不用意にMathJaxの対象範囲を広げると意図しない変換が起こるので、MathJax系のプラグインではショートコードで囲う必要があったり、#post-29873で紹介したように特定のブロック内のみに対象範囲を狭めて、バッティング箇所を限定する方法がよく用いられています。

動作しなかった、MathJax - LaTeXプラグインでは

  1. 使う前に「LaTeX」ショートコードを呼び出さないと有効化されない
  2. それに加えてドルマークで囲む、ショートコードで囲むなどしないと変換されない
    (プラグインによっては /[/] や /(/) で囲むものもある)

といった形です。
1番は設定画面でON・OFFすれば良いですが、2番に関しては意図しない変換を防ぐため、数式ブロック or 数式ショートコードとして必要だと思います。


返信引用
veilnui
(@veilnui)
Trusted Memberサイト
参加: 7か月 前
投稿: 56
2020年3月20日 00:45  

https://stackoverflow.com/questions/5639827/styling-mathjax/25329062

根本的な解決にはなってないと思いますが、一応それっぽいサイトを見つけてきました。


返信引用
veilnui
(@veilnui)
Trusted Memberサイト
参加: 7か月 前
投稿: 56
2020年3月20日 01:13  

http://docs.mathjax.org/en/latest/input/tex/extensions/html.html

なんかよくわからないけど、とりあえず。

 

https://stackoverflow.com/questions/39935447/is-there-any-way-to-exclude-mathjax-processing-from-certain-html-elements

なお、特定のクラスを除外することはできるようです。


返信引用
veilnui
(@veilnui)
Trusted Memberサイト
参加: 7か月 前
投稿: 56
2020年3月20日 01:17  

何度も連続投稿してごめんなさい。

公式ドキュメントに書いてありました。

 

本家

http://docs.mathjax.org/en/latest/options/document.html

Google翻訳版

http://translate.google.com/translate?hl=ja&sl=auto&tl=ja&u=http%3A%2F%2Fdocs.mathjax.org%2Fen%2Flatest%2Foptions%2Fdocument.html


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年3月20日 19:46  
投稿者:: @veilnui

僕の使い方では、数式番号は不要です。
デフォルトではOFFで、オプションで、ON・OFFできると良いと思います。

これはAMPページを考慮しなければ、それでも良いと思っていました。
ただ、AMPページでは数式番号が表示されないので、仕様を統一するためにも、オン/オフ機能は、とりあえず付けないでおこうと思います。
※機能を有効化したのに、AMPで表示されないという問い合わせが来そうなので。

不用意にMathJaxの対象範囲を広げると意図しない変換が起こるので、

とりあえず対象範囲をなるべく狭める方法としては、とりあえずは開発コストが一番安い以下のようなショートコード方式をとることにしました。
https://gcbgarden.com/2017/12/25/mathjax-latex-plugin/

Cocoonで数式を利用するには、以下の手順をとる必要があります。

  1. Cocoon設定「コード」タブから「数式表示を有効にする 」を有効化する
  2. 投稿するときに本文のどこでも良いので[math]というショートコードを入力する
  3. ブロック要素の数式を入力するには/[数式/]フォーマットで入力する
  4. インライン要素の数式を入力するには/(数式/)フォーマットで入力する

※今回$数式$フォーマットでの入力は、採用しませんでした。誤変換が多くなりそうなので。

This post was modified 2週間 前 by わいひら

返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年3月20日 19:47  

ダウンロードはこちら。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------


返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年3月20日 19:49  

ブロック要素の数式の入力例。

\[e^{\pi i} = -1\]

返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年3月20日 19:50  

インライン要素の数式の入力例。

右辺の -1 を左辺に移項して \(e^{\pi i} + 1 = 0\) とすることで、0、1、\(e\)、\(\pi\)、\(i\) を全て含む式としてにんまりする人も多いらしいですが、個人的には移項しないシンプルな方が好きです。

返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年3月20日 19:53  

[math]ショートコードの投稿への入力例。
※厳密に言えばWordPress的なショートコード機能ではないです。

This post was modified 2週間 前 by わいひら

返信引用
ロコ
(@lococo)
Honorable Member
参加: 2年 前
投稿: 536
2020年3月21日 13:26  

MathJaxスクリプトで、例えばCSSセレクタを指定して、特定のHTML要素だけ数式化するなんて事はできるのでしょうか?
#post-29893

色々と方法はあるのかもしれませんが、私の場合はv3標準(公式ドキュメント)に則ってサーバーサイドで実装することで実現しています。

GutenbergのSSR時にMathJaxを通せば、作成した数式ブロックを考慮するだけでよくなります。
エディタ上でTeXの表示をリアルタイムでチェックできますし、ブラウザ読み込み時の変換が必要なくなるので高速化にも繋がり、MathJaxから受け取ったマークアップをブロックのマークアップに受け渡す(AMPページではここでAMP化を挟む)ので、ブロック外への影響もありません。

ショートコードは実装していませんが、上記の実装部分をショートコードの実行完了直前までにあるフックから受け渡しを行えばよいのではないかと思います。

 

Cocoonの実装をざっと確認したところ、

  • #post-29925の書き込みのように、数式と合わせてコンテンツとしてのデリミタが使用できない。
  • デフォルトとは別のデリミタを設定する場合のAMP対応は、各自で実装しなければならない。

などはテーマ側での判断かと思いますが、少なくとも

  1. AMP化がパラグラフ内に限定されてしまっている(pタグとdivタグの関係は?機能への移行等でpタグで囲っていない場合は?など)。
  2. $$ ... $$の場合が考慮されていない。

あたりは修正が必要そうです。


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年3月21日 20:03  

ご指摘ありがとうございます。

元々、少ない需要の割には、簡単そうなので実装考えましたが、ちょっとすぐには出来そうにないので、今回の機能は無効化しようと思います。
とりあえず、TODOに入れておこうと思います。


返信引用
veilnui
(@veilnui)
Trusted Memberサイト
参加: 7か月 前
投稿: 56
2020年3月22日 00:16  

ありがとうございます。


わいひら 件のいいね!
返信引用

返信する


許可された最大ファイルサイズ 5MB

 
Preview 0 Revisions Saved
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:1年8ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/6/30まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:1年6ヶ月

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:16年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:4年

Cocoon
タイトルとURLをコピーしました