GeoGebraをwebページに埋め込む2つの方法

## iframeを使わずに埋め込む
こちらの方法はwebページ内のボタンなどの外部から操作をしたい時に使います。が、操作が煩雑なので、大抵の場合は後半で紹介する方法をお勧めします。

### 埋め込むファイルを用意する
教材またはプロフィール欄から埋め込みたいアプリを選択し、詳細ボタンを押します。
![スクリーンショット 2021-02-09 15.24.32.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/64e2e9c6-4a0e-5965-7d6a-b1cc60400bf1.jpeg)
規約に同意し、.ggb形式でダウンロードします。
![スクリーンショット 2021-02-09 15.25.08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/efe86ed3-dc73-1fd3-e8e3-f267b8027396.jpeg)

ggb形式では使えないので、[このようなサイト](https://hogehoge.tk/tool/)でBASE64形式に変換します。

### webページを用意する
貼り付けるためのhtmlファイルを用意します。最終的にコピペで動くようにしてあります。
まずは準備。

```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>サンプル</title>
    </head>
    <body>

    </body>
</html>
```
### パラメータを準備する
ツールバーを表示/非表示やズームできる/できない、横幅、縦幅を指定します。

```JavaScript
 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":"/*ここに変換されたファイルをいれる*/"
```
ggbBase64には先ほど用意したファイルを入れます。UEsDBBQACAgIAJVaSVIAAAAAAAAAAAAAAAAXAAAA...みたいなやつ。めちゃくちゃ長いです。

###divタグを準備する
geogebraを埋め込む部分はdivタグのなかに書きます。これをコピペしてパラメータのggbBase64部分だけ変更すれば動きます。

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

### 全体のソースコード

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

## iframeを使って埋め込む
こちらのやり方が公式チックだと感じます。
### ワークシートを編集ページへ移動する
![スクリーンショット 2021-02-09 16.21.18.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/f08c7f40-2168-e249-2f1d-d7cd710c3210.jpeg)

画像のまま。前半のやり方だとここで詳細を選択していました。

### 共有ボタンから埋め込むを選択する
写真の右上のボタンを押下するとウィンドウが表示されるので、「埋め込む」を選択します。
![スクリーンショット 2021-02-09 16.23.39.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/8596194c-0463-d329-6588-1445340e6089.jpeg)
表示されたものをコピーして貼り付けます。

```html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>サンプル</title>
</head>

<body>
    サンプルでーす
    <iframe scrolling="yes" title="格子線ラベル点のみ" src="https://www.geogebra.org/material/iframe/id/rmnrevhy/width/1000/height/1000/border/888888/sfsb/true/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/false/rc/false/ld/false/sdz/false/ctl/false" width="1792px" height="1075px" style="border:0px;"> </iframe>
</body>
</html>
```