動的幾何環境でオブジェクトに定義を追従させる

## はじめに
最近GeoGebraやDesmosなどのグラフソフトが流行っています。Twitterで関数アートや○○を可視化した様子にグラフが使われていることもしばしば。さらには、大学受験の共通テスト(旧センターテスト)の模試にそれらが登場することもあるようです。ここでは、グラフソフトによって書かれた曲線などのオブジェクトにその定義を追従させてみようと思います。

![スクリーンショット 2021-09-23 10.36.13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/1822110d-3c6c-606a-3685-d42ebcf75973.jpeg)

## GeoGebraをソフトではなくwebページ上に貼り付ける
GeoGebraはhtml上に貼り付けることができます。方法については[こちら](https://qiita.com/Hyperbolic_____/items/40e317d0d9bfd8e06be6)で書いています。

```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>
```

## オブジェクトの名前を定義の名前にする関数を定義する

```javascript
function addListener(objName) { 
        var descriptionStr = ggbApplet.getDefinitionString(objName);
        ggbApplet.renameObject(objName,descriptionStr);
}
```

`getDefinitionString(string)`は引数に設定したオブジェクトの定義を返す関数です。
そして、取得した定義を`renameObject(string,string)`によってオブジェクト名に設定します。
レファレンスは[こちら](https://wiki.geogebra.org/en/Reference:GeoGebra_Apps_API)

## GeoGebraにオブジェクトが追加されたことを通知するAPIを追加する
[こちら](https://wiki.geogebra.org/en/Reference:GeoGebra_Apps_API)に書かれている`void registerAddListener(String JSFunctionName)`を使うと、貼り付けられたGeoGeobraにオブジェクトが追加されるたびに引数に設定した関数を実行させることができます。

## ↑を組み合わせる
↑を組み合わせることで、オブジェクトが追加されるたびに定義をオブジェクト名に設定することができます。

```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":"/*ここに変換されたファイルをいれる*/"
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>
```

完成！