106
Moodle KaTeX filter1
神戸大学・人間発達環境学研究科 長坂 耕作
Kosaku Nagasaka

Graduate School of Human Development and Environment,
Kobe University1

はじめに学習管理システムとして幅広く使われている Moodle では,古くから数式表示のためのフィルタ機能が備わっていた。しかしながら,Moodle 2.7になる前のフィルタ機能は,丁自 で記述された式を画像ファイルに変換して表示するだけであった。Moodle 2.7からは,現在では至る所で数式表示のために使用されるようになったMathJax を利用したフィルタが備わり,ブラウザ内で JavaScript を使用して,リアルタイムに数式がレンダリングされるようになっている。

本報告のタイトルにも含まれている KaTeX は,MathJax の代替ライブラリとして開発が進められているもので,MathJax に比べてレンダリング速度が速いという特徴を持っている (詳しくは,https: // khan.github. io/Ka TeX/ を参照されたし) 。本報告では,
Moodle に備わっている MathJax を使用するフィルタを代替し得る,Moodle 上の数式表示に KaTeX を使用可能とするフィルタの開発について取り上げる。最終的な成果物としてのフイルタは,http://wwwmain.h.kobe‐u.ac.jp/~nagasaka/research/xml‐quiz/から入手して利用可能である。

なお,本フィルタは実際に神戸大学公式の Moodle サイトにて,平成30年度の神戸大学全学共通授業科目の線形代数2で使用し,安定的な動作をしていることを確認した。

2

開発の経緯

科学研究費補助金の研究課題 「気づきと深い学びを誘発する大学数学用スマートフォ
ン適応型反転学習教材の開発と検証」 (研究代表者 : 吉冨先生,大阪府立大) の研究打
ち合わせにおいて,Moodle 上で教材を提示したりテストなどを行う際に,数式表示の遅さが問題となり得るという議論があり,MathJax でなく KaTeX を使用可能にすることの検討を担当することになった。

詳細は後で述べるが,2018年6月に試みた方法 (MathJax フィルタのMathJax 部分を単純に KaTeX に置き換える方法) は失敗した。原因を調査した上で,7月には,KaTeX のビルドオプションとコードを修正することで,一応の動作はするようになったが,InternetExplorer (IE) で動作しなかった。最終的に,同7月に,CDN 版の KaTeX で動作するフイルタを完成させ,https://moodle.org/mod/forum/discuss.php? d=358050 にもその旨のメッセージを投稿した,というのが開発に関する経緯である。
1This work was supported by JSPS KAKENHI Grant Number 18K02941.

107
3

KaTeX フィルタの技術的な解説
Moodle に備わる MathJax フィルタは,設定等に関する 「settings.php」 , CDN 版のMathJax などをロードする 「filter.php」 , 実際の数式レンダリングの関数を呼び出す 「 yui/src/loader/js/ loader. js 」などから構成されている。なお,最後のファイルは,開発が終了している 「YUI: Yahoo! User Interface Library」 に依存している。
Moodle における処理は,ページの基本要素が完成したところでフィルタが呼び出され,オンデマンドの読み出し命令を 「filter. php 」で設定し,ページ表示時にオンデマンドにレンダリングが 「loader. js 」の内容で実行される , という流れになる。

3.1

失敗事例1 :MathJax をKaTeX に単純置換

MathJax もKaTeX もCDN で公開されているため,その URL などを適宜変更することで,MathJax フィルタをKaTeX フィルタに修正可能と思われた。この方法は,MathJaxとKaTeX のライブラリとしての形式が異なることにより失敗した。

MathJax フィ]レタは,YUI を川いて MathJax ライブラリをロードしており,JavaScfiptのmodule ではなく,広域変数に全てを格納している MathJax と相性が良い。しかしながら,KaTeX は,CommonJS とAMD のmodule 形式に対応した UMD (Universal ModuleDefinition) を標準のビルドターゲットにしており,YUI を用いてのロードでは,うまく動作せず,この方法は失敗に終わった。

3.2

失敗事例2 :無理やり KaTeX をロードざせる

失敗事例1の結果から,KaTeX の形式を UMD でなく,広域変数に格納する形式に変更すれば良いと判明した。KaTeX はビルドのために 「webpack」 をbundler として使っており,libraryTarget を rd から var に変更することで,求める形式の KaTeX をビルドできる。この変更で,KaTeX 本体はロードされるようになった。
しかしながら,MathJax と同じように数式をレンダリングするためには,contrib にある auto‐render スクリプトも使用する必要があるが,このスクリプトはUMD を前提にしているようで,そのままでは動作しなかった。動作させるには,全ての export やimport を削除したり,Const やlet などを従来の var に変更する必要があった。
これらの結果,KaTeX をMoodle 上で使用するフィルタはできたものの,Internet Ex‐plorer (IE) では動作せず,かつ,CDN 版の KaTeX でないため汎川性に欠けるものとなってしまった。

3.3

成功事例 :Moodle のフレームワークを正しく使う

2つの失敗事例を踏まえ,MathJax フィルタとKaTeX への切り替えにおける課題を整理すると,次の2つ溝を埋める必要に尽きることがわかる。
\bulletMathJax フィルタは,広域変数に格納するライブラリが前提108\bulletKaTeX は,UMD 形式 (CommonJS, AMD) のmodule として存在

この課題を無理やり MathJax フイルタが採用している Moodle のJavaScriptのフレームワークである YUI で解決しようとして失敗したのが事例2である。しかし,MoodleのJavaScriptのフレームワークは,Moodle 2.9より前までは確かに rYUI 」 であったが,Moodle 2.9からは rAMD +JQuery 」 になっている (YUI も使用可能) 。つまり,MathJax フィルタはMoodle 2.7で導入されたので YUI を採用しているが,KaTeX フィルタを作るにあたり,わざわざ古い YUI を使う必要はなかった。

本報告の最初に紹介した完成版の KaTeX フィルタでは,Moodle のAMD のフレームワークを用いて,CDN 版の KaTeX をロードしている。目的は同じフィルタであるが,基本的なフィルタ設計で共通する部分を除けば,MathJax フィルタとKaTeX フィルタはだいぶ異なっているので,興味のある方は比較して欲しい。

4

最後に

Moodle を用いて数式を伴う学習を実施する場合,そのレンダリング速度が遅いことは学習者の意欲を削ぐ可能性がある。これは特に短い時間で行う小テストなどで顕著に発生すると思われる (大量に行列などの数式が含まれる線形代数の場合には,避けられない状況である)。今回開発した KaTeX フィルタは,オンラインでの数学学習において,その効果を高めると考えられ,様々な教育機関の Moodle で利用されていくことを期待している。

なお,本報告で取り上げた KaTeX フィルタは,いまのところ公式な Moodle サイトには登録されていない (登録にはバグの連絡窓口の設置などいくつか条件があるため) 。
今後,更なる改善を KaTeX フィルタに行うことができれば,公式サイトへの登録について検討したいと考えている。