MathsOnline ハック（SVG抽出・注入スクリプト）

Tool
MathsOnline ハック（SVG抽出・注入スクリプト）

MathsOnline ハック（SVG抽出・注入スクリプト）

MathsOnline の SVG ベースの出題で、解答ビジュアル（矢印など）を抽出して再注入する Tampermonkey ユーザースクリプト集。JSON レスポンスから直接 SVG を取り出すモードと、スライドの translateX を追跡して位置に応じて SVG を注入するモードの2種類を提供し、複数の配信フォーマットに対応します。（約300字）

https://github.com/mashpotatle/Mathsonline-Hacks

概要

MathsOnline-Hacks は、教育プラットフォーム MathsOnline が配信する SVG ベースのインタラクティブ問題に対して、解答を表現する SVG（矢印や図形）を抽出・注入するための Tampermonkey ユーザースクリプト群です。リポジトリには問題の配信フォーマットに応じた2種類のスクリプトが含まれており、JSON レスポンス内に埋め込まれた SVG を直接抽出する「JSON Mode」と、スライドの translateX（横スライド）を監視して正しい位置に SVG を注入する「TranslateX Mode」を想定した実装が収められています。これにより、MathsOnline の異なる配信方式に柔軟に対応し、視覚的な解答素材を回収・再利用できるように設計されています。

GitHub

リポジトリの統計情報

  • スター数: 1
  • フォーク数: 0
  • ウォッチャー数: 1
  • コミット数: 11
  • ファイル数: 3
  • メインの言語: JavaScript

主な特徴

  • Tampermonkey 用のユーザースクリプトとして提供され、ブラウザ上で動作する
  • JSON レスポンスからの直接抽出（JSON Mode）と、スライド移動をトリガーに注入する（TranslateX Mode）両方に対応
  • SVG を DOM に注入して視覚的に解答を再現・表示できる
  • MathsOnline の異なる配信フォーマット（複数スライド/マスタリーモジュール等）を想定した分岐実装

技術的なポイント

このプロジェクトは、クライアントサイドで動作するスクリプトによって、ページに読み込まれる SVG データの取得と再配置を主目的としています。主に次の二つのパターンに対応する設計になっています。ひとつは、問題データが API の JSON レスポンスに SVG 文字列として含まれている場合に、そのレスポンスを傍受して SVG を抽出・パースし、ページ上の該当コンテナへ挿入する方法（JSON Mode）。もうひとつは、問題がスライド形式で提供され、各スライドの表示は CSS transform（translateX）で行われる場合に、スライドの位置変化を監視して正しいタイミングで SVG を注入・表示する方法（TranslateX Mode）です。

実装上は、fetch/XHR の傍受（XMLHttpRequest.prototype.open/send のオーバーライドや window.fetch のラップ）か、Tampermonkey の API（GM_xmlhttpRequest）を利用してネットワーク応答を取得するアプローチが考えられます。DOM 側では、MutationObserver を使って動的に生成されるコンテナ要素や属性変化（例：style の translateX）を監視し、表示中のスライドを特定してそこへ SVG ノードを差し込む手法が有効です。SVG を注入する際は、座標系や viewBox・CSS スケールの違いに注意し、必要に応じて transform 属性の変換やサイズ調整を行う必要があります。また、動的ロードやタイミングのズレに対処するためのリトライや遅延処理、複数スライドで同一 SVG を使い回す場合のキャッシュ処理も実装上のポイントです。

安全性・互換性面では、コンテンツ・セキュリティ・ポリシー（CSP）やクロスオリジン制約により直接リクエストがブロックされる場合があるため、Tampermonkey 権限やユーザースクリプトのメタデータで必要な許可を宣言することが重要です。さらに、MathsOnline の利用規約や教育機関のルールを踏まえ、不正利用（採点回避や不正解表示の改変など）を避けることが望まれます。

（上記は README の概要に基づく想定される技術設計と実装上の注意点です。リポジトリ内の具体的コードを参照するとより詳細な実装が読み取れます。）

プロジェクトの構成

主要なファイルとディレクトリ：

  • ManyQuestion.js: file
    • 複数問題（Many Question）用のユーザースクリプト。多ページや複数スライドを扱うロジックが入っている想定。
  • MasteryQuestions.js: file
    • マスタリーモジュール向けのユーザースクリプト。問題形式や表示ロジックが異なるケースを扱う。
  • README.md: file
    • プロジェクトとスクリプトの概要、動作モード（JSON Mode / TranslateX Mode）についての説明。

まとめ

MathsOnline の SVG 表示を抽出・注入する軽量な Tampermonkey スクリプト集。学習コンテンツの解析や視覚素材の抽出に便利だが、利用はルールを守って行うこと。