GeoGebraと測定系プロパティ
はじめに
本記事では、GeoGebraの「グローバルJavaスクリプト」において、マウス／タッチイベント発生位置を取得する各種プロパティを参照した場合に、得られる値についてまとめる。あわせて、要素のサイズを取得するブロパティについても確認する。
（前提条件）
GeoGebraのバージョン：6.0.462.0-w (02 May 2018)
検証に用いたwebブラウザ：Chrome 65.0.3325.181（Official Build）（64 ビット）、Safari
検証するプロパティ：
event.offsetX / Y、event.clientX / Y、event.pageX / Y、event.screenX / Y、
element.offsetWidth / Height、element.clientWidth / Height、element.scrollWidth / Height、
window.innerWidth / Height、window.outerWidth / Height
マウスデバイスとタッチデバイスの識別
テキストオブジェクト deviceText = "default"を作成する。
ggbOnInit関数に、以下のメソッドを記述する。
var deviceText = window.ontouchstart===null?"touchdevice":"mousedevice";
ggbApplet.setTextValue("deviceText",deviceText);
1行目は、ブラウザがタッチデバイス対応ならば、変数 deviceText に"touchdevice"
を代入し、マウスデバイスならば、"mousedevice"を代入する。
2行目は、アプレット内のdeviceText オブジェクトに、変数 deviceText の値を書き込む。
これによって、マウスデバイスかタッチデバイスかの区別は、deviceText オブジェクトの表示内容が「mousedevice」か「touchdevice」かによって行うことができる。
各種測定系プロパティの値
アプレット内の赤い目盛は、100ピクセルである。つまりグラフィックスビューのサイズは500×450である。
pageX（Y）の最大値-最小値と、offsetWidth（Height）の値とは、なぜ一致しないのか？
ここで、pageX（Y）の値に着目したい。上記アプレットを、本ブログに埋め込んで表示した場合と、アプレット保管ページで表示した場合とで、pageX（Y）の値がどうなるか、確認してみよう。
ブログで表示したとき
マウスを動かして確認したところ、本ブログに埋め込まれた上記アプレットにおいては、pageXの最大値（最小値）は473（0）、pageYの最大値（最小値）は426（1）であった（下図は最大値がとれたときの画面）。
これは、アプレットのサイズである500×450を、およそ94%縮小した場合にとりうるピクセル数である。
「生徒向けワークシート」のページで表示したとき
これに対して、「生徒向けワークシート」のページ（https://ggbm.at/pdnZpJ3n）に表示されるアプレットを確認すると、pageXの最大値（最小値）は637（135）、pageYの最大値（最小値）は631（179）であった（下図は最大値がとれたときの画面）。
最大値―最小値は、pageXが502、pageYが452である。これは、グラフィックスビューの大きさを500×450ピクセルにしたい場合に、アプレットのアップロード画面中「高度な設定」において設定すべきピクセル数と一致する。この点の詳細は、以下の記事を参照されたい。
グラフィックスビュー1におけるCornerコマンドについて - うしブログ
考察
つまり、ブログで表示した場合には、アプレットが約94%に縮小されて表示されたが、アプレットの保管ページで表示した場合には、原寸で表示されたということであろう。
なお、どちらで表示した場合にも、ページの横幅を狭くしていくと、一定の幅を切ったところで、アプレットが縮小し始め、それに伴ってpageX（Y）の最大値・最小値も変化することが確認された。
上記のうち、挙動に疑問を感じるのは、ブログに埋め込んだ場合である。本ブログにアプレットを埋め込む場合には、iframeタグを利用している。そして、タグ内で「width="502px" height="452px"」と指定もしている。それなのに、（ページ幅がアプレットの幅を十分上回っている場合であっても）、アプレットが約94%縮小されてしまうのである*1。
タッチデバイスでもマウスデバイスでも、同じようにユーザーの操作位置を取得したいとすれば、タッチデバイスに対応していないevent.offsetXYプロパティは使えない。そうすると、event.pageXYを利用していくのが現実的である。（event.clientXYは通常event.pageXYと同じ値をとるし、event.screenXYは、ディスプレイにおけるウインドウの位置によって値が変わってしまうので、使い勝手が悪い。）
そして、iframeタグでブログ等に埋め込んだ場合には、アプレットのサイズが勝手に縮小される仕様のため、event.pageXYの値がブレる。applet_container.offsetWidth / Heightを用いて調節するほかない。
*1:アプレット埋め込みのiframeタグが参照している、下記のページでの、アプレットの表示の挙動を調べたところ、幅がある範囲である場合には、window.innerWidthの値と、event.pageXの最大値ー最小値の値の間には、前者が後者よりも31ピクセルだけ大きいという関係が成り立っていることが確認できた。本記事においては、これ以上詳細な確認はできなかった。https://www.geogebra.org/material/iframe/id/aD2AxFKw/width/500/height/450/border/888888/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/false/rc/false/ld/false/sdz/false/ctl/false
