はじめに
最近GeoGebraやDesmosなどのグラフソフトが流行っています。Twitterで関数アートや○○を可視化した様子にグラフが使われていることもしばしば。さらには、大学受験の共通テスト(旧センターテスト)の模試にそれらが登場することもあるようです。ここでは、グラフソフトによって書かれた曲線などのオブジェクトにその定義を追従させてみようと思います。
GeoGebraをソフトではなくwebページ上に貼り付ける
GeoGebraはhtml上に貼り付けることができます。方法についてはこちらで書いています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<div>
<script src="https://cdn.geogebra.org/apps/deployggb.js"></script>
<script>
var parameters = {
"prerelease": false, "width": 1000, "height": 1000, "showToolBar": true, "borderColor": null, "showMenuBar": false, "showAlgebraInput": false,
"showResetIcon": true, "enableLabelDrags": false, "enableShiftDragZoom": true, "enableRightClick": true, "capturingThreshold": null, "showToolBarHelp": false,
"errorDialogsActive": true, "useBrowserForJS": false,"ggbBase64":"/*ここに変換されたファイルをいれる*/"
var applet = new GGBApplet('5.0', parameters);
window.onload = function () {
applet.inject('applet_container');
}
</script>
<div id="applet_container"></div>
</div>
</body>
</html>
オブジェクトの名前を定義の名前にする関数を定義する
function addListener(objName) {
var descriptionStr = ggbApplet.getDefinitionString(objName);
ggbApplet.renameObject(objName,descriptionStr);
}
getDefinitionString(string)は引数に設定したオブジェクトの定義を返す関数です。
そして、取得した定義をrenameObject(string,string)によってオブジェクト名に設定します。
レファレンスはこちら
GeoGebraにオブジェクトが追加されたことを通知するAPIを追加する
こちらに書かれているvoid registerAddListener(String JSFunctionName)を使うと、貼り付けられたGeoGeobraにオブジェクトが追加されるたびに引数に設定した関数を実行させることができます。
↑を組み合わせる
↑を組み合わせることで、オブジェクトが追加されるたびに定義をオブジェクト名に設定することができます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<div>
<script src="https://cdn.geogebra.org/apps/deployggb.js"></script>
<script>
var parameters = {
"prerelease": false, "width": 1000, "height": 1000, "showToolBar": true, "borderColor": null, "showMenuBar": false, "showAlgebraInput": false,
"showResetIcon": true, "enableLabelDrags": false, "enableShiftDragZoom": true, "enableRightClick": true, "capturingThreshold": null, "showToolBarHelp": false,
"errorDialogsActive": true, "useBrowserForJS": false,"ggbBase64":"/*ここに変換されたファイルをいれる*/"
parameters.appletOnLoad = function(api) {
function addListener(objName) {
var descriptionStr = ggbApplet.getDefinitionString(objName);
ggbApplet.renameObject(objName,descriptionStr);
}
// register add, remove, rename and update listeners
api.registerAddListener(addListener);
}
var applet = new GGBApplet('5.0', parameters);
window.onload = function () {
applet.inject('applet_container');
}
</script>
<div id="applet_container"></div>
</div>
</body>
</html>
完成！