webappで画面表示をコントロールするスクリプトの試作

webappのアプレット作成画面では、グラフィックスビューだけでなく、数式ビューやプロパティ画面などを同時に開いていることが多いです。

そのまま保存すると、「生徒向けワークシート」ページやアプレット埋め込みページでも、数式ビューやプロパティ画面が、グラフィックスビューと一緒に表示されてしまいます。保存前にグラフィックスビュー以外の画面を非表示にすれば良いのですが、面倒くさいと思うこともあります。

また、仮にグラフィックスビュー以外の画面を非表示にしたとしても、「生徒向けワークシート」ページやアプレット埋め込みページで採用されるアプレットサイズは、保存時のグラフィックスビューのサイズそのものです。そのため、アプレット作成は大きな画面でやりたいけれど、アプレットを公開するときは、その一部だけ見せればよい、というときには、保存前にいちいち、ウインドウを調節しなければならず、これが案外面倒くさいです。

そこで、「生徒向けワークシート」ページ、「編集」ページ、または埋め込みページにおいて、画面をグラフィックスビューに限定し、かつ画面を左上Corner[4]〜右下（任意の点、下記では点B）の領域に限定するためのスクリプトを試作しました。

※下記スクリプトは試作品です。

※「編集」ページの「高度な設定」で画面サイズを指定して保存した場合は、そちらの設定が優先されるようです。その後、点Bの位置を変えた場合には、「編集」ページの「高度な設定」にアクセスして、保存し直さなければ、縮尺が正常に更新されないようです。しかし、アプレット作成画面で、保存前にいちいちグラフィックスビュー以外の画面を非表示にしたり、画面サイズを調節するよりは、数段楽だと思います。

function ggbOnInit() {
  designForShow('B');
}

function designForShow(pointName){
  if(!window){return;}
  var dataArray = location.pathname.split('/');
  var appType = dataArray[1];
  console.log('appType：'+appType);
  if(appType == 'm' || appType == 'material'){
    setSizeByPoint(pointName);
    ggbApplet.showResetIcon(false);  //リセットアイコンの表示・非表示
    ggbApplet.enableShiftDragZoom(false);  //シフトドラッグズームの可否
    ggbApplet.setAxesVisible(false, false);  //軸
    ggbApplet.setGridVisible(false);  //グリッド
  }
  console.log('func designForShow is done.');
}

//画面表示をCorner[4]〜pointNameの領域のみに限定する
function setSizeByPoint(pointName){
  ggbApplet.setPerspective('G');  //画面をグラフィックスビューのみに限定する
  var fullWidth = ggbApplet.getValue('x(Corner[5])');
  var fullHeight = ggbApplet.getValue('y(Corner[5])');
  var userWidth = ggbApplet.getValue('round(x(Corner[5]) (x('+pointName+') - x(Corner(1))) / (x(Corner(2)) - x(Corner(1))))');
  var userHeight = ggbApplet.getValue('round(y(Corner[5]) (-y('+pointName+') + y(Corner(4))) / (y(Corner(4)) - y(Corner(1))))');
  ggbApplet.setSize(userWidth, userHeight);  //画面サイズを変更
  console.log('width and height successful.');
  var xmin = ggbApplet.getValue('x(Corner(4))');
  var xmax = ggbApplet.getValue('x('+pointName+')');
  var ymin = ggbApplet.getValue('y('+pointName+')');
  var ymax = ggbApplet.getValue('y(Corner(4))');
  ggbApplet.setCoordSystem(xmin, xmax, ymin, ymax);  //画面右下にpointNameが来るように画面をスライド
  console.log('func pointName is done.');
}