数学 HTML 教材の開発
沼津工業高等専門学校
中学生のための体験授業 2023

2023 年 10 月 15 日
概 要
複雑で難しい設定の関数や図形の問題を解くときに，動かせる幾何（関数のグラフや図形等）の教材があると理解の助けになる．今年度の課題研究（1〜4 年生対象の選択科目：1 単位）「数学 HTML教材の開発」にて，結合型 HTML 教材システム『KeTCindyJS』を用い，動的な数学 HTML 教材を作成している．
本体験授業では，この『KeTCindyJS』に用いられる Cindy スクリプトの入門的解説として，1次関数 y = ax + b の傾き a と切片 b を動かすことができるグラフをの作り方を紹介する．その後は，演習として，2 次関数の動的グラフを，さらに，各々の発想でスマートフォンでも動かすことができる数学 HTML 教材を作る．

10:30 - 10:45
10:45 - 11:05
11:10 - 11:25
11:25 - 11:50
11:50 - 12:00【タイムスケジュール】
はじめに，KeTCindy の解説
Cindy スクリプトの基礎
1 次関数の動的グラフと HTML 化[演習] 2 次関数の動的グラフ，他各自
おわりに，アンケート

C3 谷口葵泉
S1 片山謙信【補助学生】
S2 荒井良斗S2 楠和徳S1 荻野壮（協力）

0. はじめに• 課題研究とは，「教員が設定した課題について，学生が自ら調査・研究・製作等の計画を立て実施し，その学修経験を課題解決に適用するとともに創造的思考力を養成すること」
を目的とした，1〜4 年生の一般科目（選択，1 単位）のこと．

• 本講座で扱う KeTCindy は KeTCindy 開発センターの高遠節夫氏（元 木更津高専教授）が開発したものであり，講座の使用にあたってはその許可をいただいている．

• KeTCindy の詳細については，【KeTCindy Home】（公式サイト，図 1）や【KeTCindy】（旧公式サイト，図 2）で検索を．最新のニュースや使い方，例が載っている他，リファレンス（現在のヴァージョンで 161 ページ）などがある．

図 1. KeTCindy Home

図 2. KeTCindy

1• 用語の解説
テフ– TeX：
くみはん

文書を作成する際に用いられる組版システムで，レイアウトや書式などを指定するマークアップ言語．

∗ 組版：原稿に指定した文字やデザイン，図などを配置する作業．
∗ マークアップ言語：文章の論理的な構造や修飾情報に関する指定を文章とあわせてテキストファイルに記述するための言語．
ケト

シン

ディ– KeTCindy：
動的幾何ソフトウェア Cinderella を利用して，図版を作るプラグイン．TeX 文章に図版（図形や関数のグラフ）を挿入するのは（少し前は）大変な作業であり，それを改善するために 2014 年に開発．高専で使用する数学教科書シリーズ（大日本図書出版）の図版作成に用いられている．

∗ Cinderella：インタラクティブに図を描くことができる幾何ソフトウェア．作図だけでなく関数のグラフや物理シミュレーション，プログラムも可．

∗ Cinderella.2：Cinderella に 3D 機能やプログラム言語 CindyScript を組み込んだシ ン ディもの．Cindyと呼ばれる．他の幾何ソフト（GRAPES, GeoGebra, Cabri など）と同様に幾何画面で図版を作成できるが，これらと大きく異なる点は，エディターにコマンドを打ち込み，スクリプトを書くことで図版を作成する点．

∗ プラグイン：ソフトウェアの機能を拡張するために追加するプログラム．
∗ エディター（editor）：データの作成や編集を行うためのソフトウェア．
∗ コマンド：コンピュータに特定の処理を実行させるための命令語．本日は次の 2つを使用．

· Plotdate· Slider∗ スクリプト (script)：簡易的なプログラミング言語．
∗ プログラミング言語：コンピュータに命令を出すための人工言語．コンパイラ言語（C，C++，Java，Rust など）とスクリプト言語（JavaScript，Python，PHP，Ruby など）の 2 種類がある．
ケ ト シ ン ディジェー エ ス– KeTCindyJS：
KeTCindy で定義されている関数を組み込んだ HTML ファイルを作成するフレーム
ワーク．CindyJS を利用して 2018 年に開発．

∗ HTML ファイル：Web ページの作成に使用されるテキストファイル．Hypertext
Markup Language のルールに従って記述．
∗ フレームワーク：アプリケーションの標準構造（典型的・定型的な処理）を実装するのに使われるクラスやライブラリの集まり．

∗ ライブラリ：作業を簡略化し，開発プロセスを効率化するために利用される定義済みの関数やクラスの集まり．

∗ CindyJS：Cindy で定義されている関数を組み込んだ HTML ファイルを作成するフレームワーク．

2

1. KeTCindy
KeTCindy とは，Cinderella を利用して，図版を作るプラグインである．作成する図の全体像が Cinderella の動的幾何画面（メイン画面）に描画され，スクリプトエディタ画面で Cinderellaのプログラミング言語 CindyScript を基にした KeTCindy プログラムを入力することにより，メイン画面の図を修正することができる（図 3）．

図 3. 教材例（左：動的幾何画面 右：スクリプトエディタ画面）
エンジン（ある特定の処理を行うための機能を提供するひとまとまりになったもの）は，数アール

サイラボ

式処理を安定して速く行える無償の統計処理ソフトウェア R を利用している．R の他，Scilabマ キ シ マやMaximaなどの無償のソフトウェアとも連携して処理結果を取得できるため，例えば，処理時間を要する 3D 投影図も C と連携させることでかなり短縮できる．
また，挿図作成の他に，アニメーションやスライドを作成する機能も持ち合わせるなど，授業やプレゼンテーションに使用する資料の作成までも行うことが可能である．
さらに，2018 年から HTML ファイルを生成できる CindyJS を利用した KeTCindyJS が開発され，Web 上で学生に配布可能な動的 HTML 教材を作成できるようになった（図 4）．

図 4. Rose Curve r = sin aθ（左：a = 1 中央：a = 5 右：a = 10）
これまでに，KeTCindyJS で作成した HTML 教材は Web 上で公開している．

https://user.numazu-ct.ac.jp/ m-suzuki/ketcindy/index.html
今や KeTCindy は，挿図作成だけで用いられているのではなく，TEX によるプリント教材やスライド教材，CindyJS による動的 HTML 教材と様々なタイプの数学教材の作成を支援できるシステムとなっている．

3

2. 教材作成(I) 基礎編(i) デスクトップ上の work フォルダから，exercise.cdy をクリックする．
(ii) 幾何画面の上部メニューのスクリプトをクリックし，さらに，CinsyScript をクリックすると，スクリプト画面が立ち上がる．

図 5. exercise.cdy の作業画面(iii) スクリプト画面の上の Ketinit(); と Windispg(); の間にプログラム（Cindy スクリプト）を書く．右上にある歯車のボタンを押すとプログラムが実行され，下に結果が表示される．なお，エラーは赤字で表示される．

Tips 3 行目は JS 用，4 行目は座標軸を表示する (1) or しない (0) のコマンド．
(iv) コマンド練習
A. Print 関数
構文：Print(表示させたいもの)；例：Print(1+2);

Print(′′ みかん ′′ );1 Print(1+2); を書き，実行ボタン．
⃝
2 下の画面に 3 が出力される．
⃝演算記法
加法 +減法 −乗法 ∗除法 /指数 ^2= 2/332
例：3 = 3^2例：

図 6. Print 関数の例
33Tips 3/2 ∗ 3 は × 3 を表し，3/(2 ∗ 3) はを表す．
22×34

B. Plotdata 関数
構文： Plotdata(′′ グラフの名前 ′′ , ′′ 式 ′′ , ′′ 変数 ′′ , [オプション]);例：Plotdata(′′ 1′′ , ′′ 2 ∗ x′′ , ′′ x′′ );1 Print(′′⃝′′) の前に // をつけるとコメントアウト（実行しない）．

2 座標軸を描くために，Addax(1) とする．
⃝3 スクリプト画面に⃝Plotdata(′′ 1′′ , ′′ 2 ∗ x′′ , ′′ x′′ );と書き，実行する（歯車ボタンを押す）．

Tips y = 2x のグラフを描くときは ′′ 2 ∗ x′′ と ∗ を忘れない．
4 実行結果として，y = 2x のグラフを gr1 として描画，x 軸と y 軸を描画．
⃝
5 幾何画面に y = 2x のグラフが表示．
⃝

図 7. Plotdata 関数の例
6 別のグラフ（例えば y = −2x）を重ねて描きたいときは，⃝Plotdata(′′ 2′′ , ′′ − 2 ∗ x′′ , ′′ x′′ );とグラフの名前（数字）を変える．

Tips グラフの名前を同じにすると最後の行に書かれたものが実行される．
7 オプションは [′′ Num = 200′′ ] などが入る（Num は点の数を意味する）．
⃝Plotdata(′′ 3′′ ,′′ 1/x′′ ,′′ x′′ , [′′ Num = 200′′ ]);曲線を滑らかに描きたいときに用いる．

C. Slider 関数
構文：Slider(点の名前, 端の座標, 別端の座標);
例：Slider(′′ a′′ , [−5, −3], [5, −3]);
1 Print(′′⃝′′) の前に // をつけるてコメントアウト（実行しない）．
2 スクリプト画面に⃝Slider(′′ a′′ , [−5, −3], [5, −3]);5

と書き，実行する（歯車ボタンを押す）．
3 幾何画面に 端点を (−5, −3) と (−5, 3) とするスライダー a を作成．
⃝

図 8. Slider 関数の例

Tips 点の名前.x はスライダーの x 座標を取得する（.y とすると y 座標）．
4 スクリプト画面の Slider 関数 の下に⃝Print(a.x);と書き，実行し，幾何画面のスライダを動かす．
5 出力画面に スライダーの x 座標が表示される．
⃝D. Letter 関数
構文： Letter(座標（点）, 方角, 表示させたいもの);例：Letter(a, ′′ s′′ ,a.x);
1 スクリプト画面の Slider 関数 の下の行に⃝Letter([−5, −3],′′ w′′ ,′′ a′′ );と書き，実行する（歯車ボタンを押す）．
2 スライダーの左端点の西（左側）に a が表示される．
⃝Tips 方角は方位 n(北)，s(南)，w(西)，e(東)，c(中央) を用いる．
3 さらに下の行に⃝Letter(a,′′ s′′ , a.x);と書き，実行する（歯車ボタンを押す）．
4 スライダー上の点 a の南（下側）に a の x 座標の値が表示される．
⃝図 9. Letter 関数の例

6(II) 1 次関数
目標1 次関数 y = ax + b の動的な HTML 教材を作る．
• 傾き a と切片 b をスライダーで変化させ，そのグラフを表示させる．
• 関数の式を表示させる．
• HTML ファイルとして出力する．
(i) デスクトップ上の work フォルダから，seminor work1.cdy をクリックする．
(ii) 幾何画面の上部メニューのスクリプトをクリックし，さらに，CinsyScript をクリックして，スクリプト画面が立ち上げる．

図 10. seminor work.cdy

Tips 幾何画面の今回の主な操作（Cinderella の操作は今回説明しない）．

図 11. Cinderella の操作ボタン(iii) プログラムの確認．
Ketinit();Setketcindyjs([”Sc=1.2”,”Label=[]”,”Color=oﬀwhite”]);
Addax(1);（この間にコマンドを書いていく）

Windispg();7

NE.xy = [7,7];
SW.xy = [-7,-7];・グラフの表示範囲を指定．
・NE.xy は北東の xy 座標，SW.xy は南西の xy 座標を指定．

Slider(”a”,[-5,-3],[5,-3]);
Letter([-5,-3],”w”,”a”);
・a というスライダーを，端点が (−5, −3) と (5, −3) となるように作る．
・(−5, −3) の左側に a を表示する．

Plotdata(”1”,”a.x*x”,”x”);
Letter(NE,”e”,”y=”+a.x+”x”);
・1 という名前で y = (a の x 座標) × x のグラフを描画．
・NE の右側に y = (a の x 座標)x を表示．

Tips 文字を表示するときは ′′ （ダブルクォーテーション） で挟む．数字を表示するときはそのまま．例えば，Letter(NE,”e”,”y=a.x x”); では 「y=a.xx」 が表示されてしまう．文字と数字の足し算は + の記号で繋げる．
演習 1 ：このプログラムに，切片 b を変化させるスライダーを追加し，さらに，そのときの関数を表示させよ（図 12）．

図 12. 演習 1 の幾何画面表示
どうしても分からないときは，補助学生に聞く，もしくは seminor work 1ans.cdy にて確認を．

8

3. HTML 教材の作成(i) 幾何画面上のメニューから，「ファイル」＞「HTML に書き出す」をクリック（図 13）．
(ii) 保存をクリック（図 14）．

図 13. HTML に書き出す

図 14. HTML ファイルの保存(iii) 幾何画面上の青いボタン「KeTjsoﬀ」をクリック（図 16）．
(iv) 1-2 秒程度「Generate：ファイル名 jsoﬀ.html」が表示される．

図 15. jsoﬀ ファイルの作成

図 16. jsoﬀ ファイルが作成(v) work フォルダ内に「ファイル名 jsoﬀ.html」ができているのでそれをクリック（図 17）．
(vi) このファイルをサーバーにアップロードすることで，ネット上のどこからでもアクセス可能となる（図 18）．

図 17. HTML ファイルを確認

図 18. HTML ファイルが完成

9

演習 22 次関数 y = ax2 + bx + c のグラフで a, b, c の値がそれぞれスライダーで変わるよ

うな HTML ファイルを作成せよ（解答例は seminor work 2ans.cdy）．
補足 中学校の学習内容としては，2 次関数ではなく，原点を通る 2 乗に比例する関数として 「y = ax2 」 のみ学習する．これは，2 次関数 y = ax2 + bx + c のうち b = c = 0 とした特別な場合である．なお，沼津高専の数学カリキュラムでは，2 次関数 y = ax2 + bx + c は入学直後の 4 月に学ぶことになる．

図 19. 演習 2 の HTML 教材b+ c のグラフで a, b, c の値がそれぞれスライダーで変わるようx−aな HTML ファイルを作成せよ（解答例は seminor work 3ans.cdy）．
演習 3

分数関数 y =ab」 は分数関数 y =+ c のうち，a = c = 0 とした特別な場
xx−a合である．沼津高専の数学カリキュラムでは，分数関数はG.W 明けには学ぶことになる．
補足 反比例関数 「y =図 20. 演習 3 の HTML 教材

10

4. HTML 教材 -応用編内容が多岐に渡るため，下記サイト

https://user.numazu-ct.ac.jp/ m-suzuki/ketcindy/indexjunior.html『中学生のための体験授業「数学 HTML 教材の開発」』に，• KeTCindy のインストールマニュアル• KeTCindy リファレンス（コマンドの解説：本家「KeTCindy Home」へのリンク）• 本テキスト• 「ボタン」の作り方，「入力窓」の作り方• 講座時のスライドファイルを用意した．興味がある人は参照願う．
今後，本サイトで公開してもよいものができたら，下記メールアドレス宛てに「cdy ファイル」を送っていただければ公開する（名前，中学校名の公表の可否も）．
注意 このサイトは仮で作成したものであるため，消滅する可能性があることを付記する．

5. おわりに2020 年度に新型コロナウィルス感染症が蔓延し，小学校から大学に至るまでオンライン型授業が席巻した．2022 年度以降は対面とオンラインを同時に行うハイブリット型授業も実践されている．そのような背景の中，Giga スクール構想が加速し，スマートフォンやタブレット等の端末機器が普及した現代では，充実したオンライン教材の提供が必須となってきた．アクティ
ブラーニングの重要性も謳われるなかで，自らが積極的に問題を解決できる探求型の教材も求められている．
私たちは，数学の特に図形や関数の単元の理解には動的幾何教材があると理解の助けとなるという考えと，前段の社会的背景を踏まえて，Web 上の動的幾何教材を作成している．本講座
はその導入部分を説明したに過ぎず，この先の活動は多岐に渡る．
本活動に，興味を持った人が居たらお声掛けください．一緒に活動しませんか．最後に，宜しければアンケートにご協力ください（学校としてのアンケートとは別のもの）．

沼津工業高等専門学校 教養科
准教授 鈴木正樹

m-suzuki@numazu-ct.ac.jp

11