【GASで数学】「JSXGRAPH」を使って数式をダイナミックなグラフで可視化する：ITを活用した数学教材「かんたん２次関数体感アプリ」の試み〔解説編〕
Googleが無料で提供するサービス、Google Apps Script（GAS）の魅力のひとつに、「テンプレート」とよばれるフォームの存在があります。
この「テンプレート」は、HTML（WEBページ用のタグ付き文書）やJavaScript（ブラウザのマクロ言語）を記述しておくと、一般のWEBページとして公開できるという特徴があります。
JavaScriptにの大きなメリットのひとつに、ソースへのリンクを貼るだけで利用可能なライブラリ（JSライブラリ）が数多く公開されている点が挙げられます。れを利用すると、高度な機能を実装したWEBページが簡単に作成できます。そして（非公式ながら）テンプレート内でも、いくつかのライブラリは利用可能です。
今回はそんなテンプレート内で利用可能なJSライブラリの１つ、「JSXGraph」を取り上げてみました。
このライブラリは、「パラメータを含んだ数式を、ユーザがパラメータを変えられる動的グラフとして表示させる」というちょっと変わった機能があり、このライブラリで簡単な「２次関数のグラフ表示」アプリ作ってみました。
数式の中に含まれる「ａ」「ｂ」などのパラメータが、グラフにどう影響するのか、いろいろ触って確かめることができます。また、WEBページとして公開できるので、リンクを紹介するだけで、スマートフォンなどの端末からだれにでも使用可能です。
上記ページはアプリとも呼べない簡単なWEBページではありますが、「かんたん２次関数体感アプリ」と称することにします。
リアルな世界では「数式を変化させて、都度グラフを表示する」などということはなかなか面倒ですが、このアプリなら簡単で、数学教材として何がしかの役に立つかもと考え、ご紹介することにしました。
今回の記事は、上記を実装するための、Google Apps Script（GAS）のコードについてご説明します。
GASのプロジェクトファイルを用意する
「かんたん２次関数体感アプリ」は、テンプレート上にHTMLおよびJavaScriptコードを表記し、これをスクリプトを使ってWEBページ化するだけの簡単な仕組みです。
まずは、GASを利用するため、Googleドライブ内に、「プロジェクト」を新規作成し、ついで、テンプレートを「INDEX.html」の名称で１つ追加します。スクリプトファイルはデフォルトで１つあるものを、そのまま利用します。
ここまでの手順を簡単に以下に表示します。
スクリプトとテンプレートを用意する
この画面で、「コード.gs」「INDEX.html」にコードを記載していきます。
ちなみに、この画面全体を「プロジェクト」といいます。Googleドライブを見ると、「無題のプロジェクト」というファイルが１つ作成されています。
以降コードを編集する際は、Googleドライブから、このファイルをクリックすることで、いつでも編集することができます。（ファイル名は変えても結構です）
スクリプトのコードを入力する
ついで、スクリプト「コード.gs」に、以下のコードを記載します。
元のコードはすべて削除した上で、以下のコードを貼り付けます。（最後にメニューバーにある「保存」をクリックして、保存するのを忘れないでください）
//-----------------------------------------
//----２次関数を動的グラフに表示する------------
//---著作：Particlemethod-2024年10月27日-----
//---使用は自由ですが著作権は作成者に帰属します---
//-----------------------------------------
//=====アクセス時に実行する関数======
function doGet() {
//HTMLファイルのテンプレートをファイル名を指定して取得
var myHTML = HtmlService.createTemplateFromFile('INDEX');
//HTMLファイルをホスティング｜メタタグを指定してスマホ表示に対応
return myHTML.evaluate().addMetaTag("viewport", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0");
}簡単な説明
ここに表記されているコードは「Googleスクリプト（Gスクリプト）」と呼ばれる、Googleドライブ内で働くマクロ言語の一種です。（MSオフィスのVBAのようなものです）
文法は、JavaScriptとほとんど同じで、関数も似たものが使えますが、専用の関数も多数ありますので、詳しくはネットなどで調べてみてください。
スクリプト中には、関数が１つだけあります。この関数doGet( )は、紐づけされているURLを介してプロジェクトにアクセスすると、自動的に実行される関数です。
function doGet( ) {
・・アクセス時に自動実行・・
}
URLの紐づけを「デプロイ」といいますが、これは後述します。
この関数の中には、２つの関数があります。
１つは createTemplateFromFile（）です。この関数は、引数で指定したテンプレートファイルを、以降はWEBページのオブジェクトとして型として扱いますよと宣言する（インスタンスを作る）関数です。
//WEBページのオブジェクト myHTML を用意する
var myHTML = HtmlService.createTemplateFromFile('INDEX')
もう１つは、evaluate( ) です。これは、親となっているテンプレートをWEBページとしてレスポンスする関数です。（まだ後ろにコードが続きますが、割愛します）
//アクセス者にmyHTMLをWEBページとしてレスポンスする
return myHTML.evaluate( )
今回のスクリプトは、テンプレートをWEBページとしてレスポンスするだけの機能であり、短いですが、説明は以上です。
テンプレートのコードを入力する
次は、テンプレートのコードです。「INDEX.html」を開き、元のコードを削除した上で、以下のコードを貼り付け、保存してください。
<!doctype html>
<!-- ---------------------------------------
//----２次関数ｙ＝ａｘ2+ｂxを動的グラフに表示する---
//---著作：Particlemethod-2024年10月27日-----
//---使用は自由ですが著作権は作成者に帰属します---
//--------------------------------------- -->
<html>
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<!-- 動的グラフ用ライブラリ：JSXGraph -->
<link href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js" type="text/javascript" charset="UTF-8"></script>
<!-- 必要に応じて利用するライブラリ：MathJax -->
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script" async></script>
</head>
<body>
<p>２次関数 ｙ=ａｘ<sup>２</sup>＋ｂｘのグラフ</P>
<div id="jxgbox" class="jxgbox" style="width:500px; height:400px;"></div>
</body>
<script>
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10, 7, 10, -7], axis: true});
var a = board.create('slider',[[-5,-2],[5,-2],[-5,1,5]],{name:'a'});
var b = board.create('slider',[[-4,-3],[4,-3],[-4,0,4]],{name:'b'});
board.create('functiongraph', [function(t){ return a.Value()*t*t+b.Value()*t; }],{strokeColor:'#ff0000'});
board.create('text',[-5, 3, function(){ return 'y='+(a.Value()).toFixed(2)+'x<sup>'+2+'</sup>'+"\+"+(b.Value().toFixed(2))+'x';}]);
</script>
</html>
こちらは、スクリプトに比べて少し長めです。テンプレートのコードは以下のような構造になっています。
<head>
・・初期設定など・・
</head>
<body>
・・WEBページ本体のHTML文書を記述・・
</body>
<script>
・・WEBページ内で使うJavaScriptコードを記述・・
</script>
順にそれぞれの部分（セクション）に分けてご説明します。
<head>セクション
ここには、「JSXGraph」のライブラリを記述しています。
このライブラリは、リンクを貼るだけでプログラム中に導入することができる大変便利なもので、以下の記述で導入しています。
<link href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js" type="text/javascript" charset="UTF-8"></script>
これだけで、ライブラリが提供する関数などを利用できるようになります。
<body>セクション
このセクションには、WEBページに表示させたい文字などの要素をHTMLコードで記述します。
今回は、タイトル文字と＜DIV＞要素が１つずつ有るだけです。
タイトル文字
<p>２次関数 ｙ=ａｘ<sup>２</sup>＋ｂｘのグラフ</P>
幅と高さを指定した<DIV>要素
<div> id="jxgbox" class="jxgbox" style="width:500px; height:400px;"></div>
＜DIV＞要素は、内部に色々な要素を含められる要素で、JSXGraphで生成したグラフは、この中に表示させます。
<script>セクション
今回、関数のグラフを表示させるためのコードのほとんどは、scriptセクションに記載されています。書かれたコードの内容を、順を追ってご説明します。
１）グラフ領域の設定
まずinitBoardという、JSXGraphライブラリが提供する専用関数を用いて、グラフ領域を設定します。代表的な使い方は以下の様なものです。
設定できたグラフ領域は、何等かの変数で受けるようにしておきます。
グラフ領域＝JXG.JSXGraph
.initBoard（DIV要素名、｛領域の指定、座標軸の表示有無｝）
２）次いで、グラフ領域に表示させる要素を生成します。生成は、前記のグラフ領域の子関数、create（）関数でおこないます。
・文字
create関数を使って、以下のようなコードで生成させます。
グラフ領域.create('text',[X座標,Y座標,function( ){ return '文字式';}]);
・スライダー
create関数を使って、以下のようなコードで生成させます。生成結果は何らかの変数で受ける様にしておきます。
スライダー＝グラフ領域.create('slider', [左端、右端、最小-初期-最大値]);
スライダーの値は、これを受けた変数を用いて、以下のコードで取り出すことができます。
スライダー.Value( )
・関数グラフ
create関数を使って、以下のようなコードで生成させます。
グラフ領域.create('functiongraph', [function(変数){ return 変数を含む式 }]);
”変数を含む式”は、今回は変数をｔとして、以下のような式を記述しています。
スライダ１.Value()*t*t+スライダ２.Value()*t
以上のような簡単なコードで、ユーザがスライダーを操作すると、都度数式グラフに反映されるような、動的グラフが生成されます。
以上、GASを使って、数式を動的なグラフで表示する方法のご紹介でした。
←前の記事はこちら
GASのエディタで作成したコードにURLを紐づけて、WEBページとして参照するためには、「デプロイ」という手続きが必要です。
GASのプロジェクトファイルのメニューバーから「デプロイ」を選ぶことで対処できます。
なお、今回のご紹介事例では、Googleスプレッドシートなど他のGoogleアプリとの連携は行っていませんが、Googleスプレッドシートなどと組み合わせることで、簡単なWEBアプリがアマチュアでも作成可能です。
プロジェクトファイル作成から、デプロイまでの一連の流れを含めた拙本がありますので、ご興味の方は手に取ってみてください。（Amazon読み放題なら無料だと思います）