interprism's blog

インタープリズム株式会社の開発者ブログです。

Concrete5にMathjaxを入れてみた

concrete5 mathjax

この投稿は インタープリズムの面々が、普段の業務に役立つ記事を丹精込めて書き上げる！ Advent Calendar 2016 - Qiitaの18日目 の記事です。

はじめに

ここ数年、当社( https://www.interprism.co.jp/ )の社員のうち、数学科出身の社員の割合が年々増えてきたため、数学を趣味で続けたいという人向けに、純粋数学に関するサイトを構築することにしました。だれでも気軽に編集できるようにCMSとしてConcrete5(5.8)を採用し、数式表現用にMathjaxを使うためMathjaxのアドオンを導入しました。この構成でサイトを構築するのは、実はこれが２回目で、前回も同じようなところでハマった記憶があるのですが、遠い昔のことで忘れてしまっていたので、今回は作業記録を残すことにしました。

アドオンの導入

concrete5でmathjaxを使うにはアドオンを追加する必要があります。

www.concrete5.org

まずは 管理画面 - concrete5を拡張 - 機能追加 を選択して、アドオンの機能追加画面に行きます。

ここでコミュニティに接続ボタンをクリックして、まず最初の問題にぶち当たります。

画面は真っ白になり、先に進めません。このサイトをhttps前提で構築していたため、httpsのページ内にhttpのconcrete5アドオンページをロードしようとしていることが原因でした。

コミュニティ接続がうまくいかない場合 :: concrete5 Japan 日本語公式サイト に解決方法が載っていたのでその方法で、Concrete5のコミュニティサイトにアクセスして、Load MathJax, for 5.7 をダウンロードすると、難なくmathjaxアドオンを追加することに成功しました。

Mathjaxブロックの追加

そのページ内でMathjaxを使いたい場合、数式編集に先立ち、そのページにMathjaxスクリプトを読み込ませておかなければなりません。 早速、新規でページを作成しブロックを追加からMathjaxを選択してMathjaxブロックをページに追加したところThe use statement with non-compound name 'Page' has no effectというエラーメッセージがでて、ページを表示することができない。

f:id:interprism:20170120171332j:plain

そこで、サーバー上のレポートからログを見たところ以下のような例外が発生していた。

Exception Occurred: /path/to/concrete5-8.0.3/packages/gnt_mathjax/blocks/gnt_mathjax/view.php:13 The use statement with non-compound name 'Page' has no effect

どうやら名前空間として定義されていないPageを13行目でuse Pageとしてインポートしていたための警告だったようだ。

f:id:interprism:20170120171337j:plain

該当するphpのソースファイル view.php を開いて、

f:id:interprism:20170120171343j:plain

//use Page

としてコメントアウトして、実際に使われている16行目の

$c = Page::getCurrentPage();

を

$c = \Page::getCurrentPage();//←Linuxではバックスラッシュを追加

にしてこの警告は出ないようになった。

修正前 f:id:interprism:20170120171347j:plain

修正後 f:id:interprism:20170120171352j:plain

数式の編集

しかし、それでもMathjaxで数式は表示されない。

latexコマンドがそのまま表示されてしまっている f:id:interprism:20170120171357j:plain

そこで、Chromeブラウザで表示していたためF12キーでjavascript実行ログを確認したところ、以下のライブラリ呼び出しで失敗していた。

http://cdn.mathjax.org/mathjax/latest/MathJax.js

f:id:interprism:20170120171406j:plain

「アドオンの導入」 のところでも述べたとおり、このサイトはhttpsを前提に構築していたため、この「http」を「https」変えたらうまくいくのではと思い、以下のコマンドをConcrete5のドキュメントルートで実行し、該当箇所を探してみたところ2件ヒットしました。

grep -rnw . -e "cdn.mathjax"

その中で、

./packages/gnt_mathjax/src/MathjaxAsset.php:110

が怪しいと思い、ソースファイルを開いて、該当箇所を確認したところ、確かに

http://cdn.mathjax.org/mathjax/latest/MathJax.js

があったので

https://cdn.mathjax.org/mathjax/latest/MathJax.js

と修正し保存しました。

修正前 f:id:interprism:20170120171410j:plain

修正後 f:id:interprism:20170120171414j:plain

「今度こそ」と思ってブラウザを再描画させてみたところ、無事数式が表示されました！

f:id:interprism:20170120171401j:plain

めでたし、めでたし。

インライン数式の区切り文字変更

人間とは欲深い生き物で、１つの目標をクリアすると、それに満足せず、「もっと、もっと」何かが欲しくなってしまうようです。 数式が表現できるだけでは飽き足らず、インライン数式の区切り文字を変更したくなってしまいました。 インラインで数式を使用したい時、デフォルトでは”\(” が開始文字として認識され”\)”が数式終了文字として認識されますが、これを"$“で開始して、同じく”$“で終了するようにしたいと思いググったところ、Mathjaxのスクリプトを読み込むところ以下のように変えればよいとのこと。

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    processEscapes: true
  },
  CommonHTML: { matchFontHeight: false }
});
</script>
<script async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
</script>

そもそもこのConcrete5のMathJax用プラグインでもグローバル設定を使わず、頑張れば、同じようなカスタマイズが可能のようですが、このプラグインの設定方法を調べるのが面倒というのと、グローバル設定で、手っ取り早く設定できるようにしたいので、プラグインのソースをいじって実現する方に挑戦することにしました。

(グローバル設定以外を使う場合の設定ダイアログ) f:id:interprism:20170126151535p:plain

なれないphpのソースコードを読んでトライ＆エラーで思考錯誤した結果、以下の修正で実現することができました。

まず、デフォルトのconfig=TeX-AMS-MML_HTMLorMML-fullの記述をconfig=TeX-AMS_CHTMLに変えます。(後から気づいたことですが、実はこの設定は推奨の設定であって、必須ではないみたいでした。)

Concrete5のインストールディレクトリ内にあるpackageフォルダにgnt_mathjaxというフォルダがあります。そのフォルダ内にcontroller.phpというファイルがあるので、これをエディタで開き、63行目あたりにある

$co->save("template.default", "TeX-AMS-MML_HTMLorMML-full" );

を

$co->save("template.default", "TeX-AMS_CHTML" );

に変えます。 ところが、これだけでは修正は反映されません。このfunction名がinstall()となっていたので、もしやと思い、一回プラグインをアンインストールして再びインストールしたら、うまく反映されるようになりました。(この際くれぐれもパッケージディレクトリを削除するのチェックボックスにチェックをいれないよう気をつけて下さい！)

(./packages/gnt_mathjax/controller.php before) f:id:interprism:20170126151541p:plain

(./packages/gnt_mathjax/controller.php after) f:id:interprism:20170126151545p:plain

次に本命の区切り文字を変更するためのスクリプトタグを挿入する部分ですが、それは、

./packages/gnt_mathjax/src/MathjaxAsset.php

の131行目に以下のコードを追加します。

} else {
$str .= '<script type="text/x-mathjax-config">' . "\n";
$str .= 'MathJax.Hub.Config({ tex2jax: { inlineMath: [["$","$"], ["\\\\(","\\\\)"]] } });' . "\n";
$str .= "</script>\n";

こちらは即時反映されるので、プラグインの再インストールの必要はありません。

(./packages/gnt_mathjax/src/MathjaxAsset.php before) f:id:interprism:20170126151549p:plain

(./packages/gnt_mathjax/src/MathjaxAsset.php after) f:id:interprism:20170126151552p:plain

これで、インラインの数式も"$“で素早く入力できるようになりました。

最後に

やっとの思いで構築した、このサイト（インタープリズム数学部）では、数学者の道は選ばなかったけど、数学は趣味で続けたいという社員を募って、純粋数学の定義・定理・証明をひたすら書いていこうと考えています。

ソフトウェアエンジニアをしながら趣味で数学を続けたいという方で、このサイトの編集を手伝っていただける方が、いらっしゃいましたら、是非、当社にご応募ください m(_ _)m

インタープリズムの面々が、普段の業務に役立つ記事を丹精込めて書き上げる！ Advent Calendar 2016 - Qiitaの19日目の記事

PAGE TOP