Update2025年12月1日

個別採点画面とMathJax数式表示

Electron版の開発で最も苦労した機能の一つが、個別採点画面でのアノテーション機能と数式表示です。本記事では、この機能の実装と、特にMathJaxをPDFに印字するまでの技術的な挑戦について紹介します。

個別採点画面の刷新

一括採点の基本は「同じ設問を一覧で採点する」ことですが、特定の生徒の答案を個別に確認したい場面もあります。 Python版にも個別表示機能はありましたが、ほとんど使い物にならない状態でした。

Electron版では、個別採点画面を一から作り直しました。生徒ごとに答案全体を表示し、各設問の採点状況を確認しながら、必要に応じてその場で採点を修正できます。

また、この画面で答案に直接書き込みができるよう、アノテーション機能を実装しました。

アノテーション機能では、以下の記号を答案に追加できます。

これらは採点時の丸・バツ・三角とは別に、自由に配置できます。「ここの計算ミス」「単位を忘れている」といった具体的なフィードバックを答案上に直接記録できるようになりました。

実装のポイント

アノテーションはHTML5 Canvasで描画しています。ユーザーの操作（ドラッグで線を引く、クリックでテキスト入力など）をリアルタイムで反映し、編集・削除も可能にしています。

テキストアノテーションの一環として、数式を答案に印字する機能を実装しました。数学のテストでは「正しい式はこうです」と示したい場面があるためです。

数式の表示にはMathJaxを使用しています。 MathJaxは、LaTeX形式で書いた数式を美しく表示するためのライブラリです。たとえば、解の公式を入力すると：

$$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$$

LaTeX: x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}

このように美しい数式が表示されます。他にも、積分や行列など様々な数式を表現できます。

$$\int_0^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$$

ガウス積分

$$\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}$$

バーゼル問題

Web上で数式を表示するだけなら簡単です。しかし、その数式をPDFに印字するとなると、一気に難易度が上がりました。

MathJaxで生成した数式をCanvas（画像として扱える領域）に描画しようとすると、数式が表示されないという問題が発生しました。

原因を調べたところ、MathJaxの最適化の仕組みに起因していることがわかりました。 MathJaxは処理速度を上げるため、数式で使うフォントを「共通の保管場所」に一括で保存し、各数式はそこを参照する形になっています。

Web上ではこの仕組みで問題なく動作しますが、数式を画像として取り出そうとすると、参照先が見つからず空っぽになってしまうのです。

いくつかのアプローチを試しましたが、どれもうまくいきませんでした。

最終的な解決策は、数式を画像化する前に、共通保管場所からフォント情報を取り出して数式に埋め込むというものでした。

これにより、数式が「自己完結」した状態になり、外部への参照なしで正しく表示されるようになりました。

技術的な詳細

この問題と解決策については、Qiitaの記事「MathJaxで生成した数式をCanvasに描画する」で詳しく解説しています。

アノテーションと数式を画面上で表示できるようになっても、それをPDFに印字するのはまた別の課題でした。

PDFへの印字には、以下の処理が必要です。

特に数式の処理では、前述の「自己完結化」を行った上で、適切なサイズと位置でCanvasに描画し、PDFに埋め込む必要があります。一連の処理を正しく動作させるまでに、かなりの時間を要しました。

しかし、この機能が完成したことで、採点済み答案をそのまま生徒に返却できるようになりました。数式を含む詳細なフィードバックを答案上に残せることは、特に数学の採点において大きな利点です。

これらの機能はv0.2.10〜v0.2.14で段階的に実装されました。開発中に直面した問題と解決策は、今後の機能開発にも活かされています。

最新版をダウンロードして、採点作業を効率化しましょう。