チャート式の数研出版 Studyaid D.B. 30周年

menu close
伝えたい!数式・グラフ機能の細かすぎるこだわり
第5回
開発者インタビュー

伝えたい!数式・グラフ機能の細かすぎるこだわり

<開発部座談会>
座談会メンバー
松嶋さん

Studyaid D.B. にはオンラインの初期開発から参加。オンライン版のブラッシュアップなどの業務を経て、現在はStudyaid D.B. 関連のシステム開発全体の統括を担当。ベルギービール好き。

おすすめのショートカットCtrl+M→ブラウザ版の予測変換
数式入力のショートカット。ブラウザ版ではこれだけ覚えれば、あとは予測変換でいろんな数式が簡単に入力できます。
菊田さん

開発部のメンバーとして現在最古参。入社時よりStudyaid D.B. のシステム開発に携わり、Studyaid D.B. のデスクトップアプリ版を主に担当。休日はスーパー銭湯巡りが日課。

おすすめのショートカットCtrl+矢印キー
BOX、表のセルのサイズを変更するショートカット。特に高さを変更したい場合に微調整しやすいのでおすすめ。
小野さん

Studyaid D.B. オンライン ブラウザ版の開発を担当。数学科卒なので数学に特化した機能が大得意。数研メルマガでコラム書いてます!

おすすめのショートカットAlt+P
πを入力するショートカット。
探した問題をそのままプリントにできるだけでなく、自分の思うままの数式やグラフが作成できるのもStudyaid D.B. のすごさ!ということで、まずは数式機能について伺えますか。
【菊田】発売当初の1996年の数式機能は、コマンドを入れて数式に変換していく\(\mathrm{\TeX}\)に似た仕様でした。いわゆる「文法入力」です。
ただ、コマンドを覚えないといけないですし、入力を全て終わらないと数式が表示されません。そこで1998年に、メニューから選んでリアルタイムに数式が表示される「簡単入力」を搭載しました。文法入力と、簡単入力と、どちらでもできるようにしたわけです。
※\(\mathrm{\TeX}\): Donald Ervin Knuth氏が製作した組版ソフト。数式を綺麗に表現できる。実際はLeslie Lamport が改良した \(\mathrm{\LaTeX}\) が使われることが多い。
図1
【松嶋】当時 \(\mathrm{\TeX}\) はどのくらい一般的に使われていたんですか?
【菊田】大学で数式を多く扱う学部・学科では \(\mathrm{\TeX}\) が普及していたと思います。実際に、私は \(\mathrm{\TeX}\) で卒業論文を書きましたし。
【松嶋】でも、Studyaid D.B. の数式機能は \(\mathrm{\TeX}\) とは違うものになったんですね?
【菊田】そう、\(\mathrm{\TeX}\) とは微妙に違うんです。どちらかというと関数電卓の方が近いのかな?計算もさせたかったんですよ。
【松嶋】あぁ~~~(納得)。
【菊田】\(\mathrm{\TeX}\) は綺麗なんですけど、組版用、つまり表現のためのコマンドであって、演算ができるような構造ではないんですね。
【松嶋】ゆくゆくは計算もさせたいという展望が当時からあって、Studyaid D.B. は独自のものになったんですね。
簡単入力が搭載されたほかに、機能追加はあったのですか?
【菊田】ユーザーの広がりや教育課程の変化に対応して追加しました。2003年には、中学校の数学にもっと対応しようということで、素因数分解、筆算などが数式の種類に加わりました。
図2
【松嶋】2020年には大学数学にも対応しましたね。これはStudyaid D.B. オンラインの開発と同時期でしたので、よく覚えています。
【菊田】入試関連でいうと、2021年には、大学入学共通テストの問題文に合わせて、二重枠のBOXに対応していますね。
【小野】機能という観点では、2016年のバージョンアップで数式の部分コピーに対応できたのも印象深いです。
【松嶋】その後の大きな変化としては、Studyaid D.B. オンラインのブラウザ版ですね。DVD-ROM版の機能をそのまま載せ替えるだけでなくさらに進化したところもあって。たとえば数式の一部だけ色を変えることができたりと、自由度は増しています。
【菊田】ブラウザ版は一からの開発なので、やりたいことから逆算して、構造的にかなり作り変えました。
数式に関して、苦労話、エピソードなどありますか?
【菊田】苦労話というか失敗談なんですが……、2000年ごろに、数式のバランスを見直したんです。\(n\) 乗根ってありますよね。この \(n\) の位置の調整が結果的に良くなくて。具体例で説明すると、\(\sqrt[3]{2}\) の \(2\) 倍(画像の左の式)は、"\(3\)"の位置が少し左にずれると、\(2^3 \times \sqrt{2}\)(画像の右の式)に見えてしまいますよね。このようなことが起きてしまって。
図3
【小野】微妙なバランスの差で……。
【菊田】それで先生方から続々お問い合わせを頂戴いたしまして。最優先で対応しましたが、根本的なところの修正は結構大変で何年かかかりました。
【松嶋】やはり教育分野ということもあり、とても正確性が求められる世界だということを改めて感じますね。
グラフについてもお話を伺っていきたいと思います。
【松嶋】Studyaid D.B. は、教科書や副教材に書いてある通りの数式を入力すればそのグラフが描画できますが、実はこれ、すごいことなんですよ。
【菊田】そうです。たとえば、\(\sin 2x\) だったら、\(2x\) は \(\sin\) の中に入っていますよね。でも、\(\sin x \cos x\) だったら、これは \(\cos x\) が \(\sin\) の中に入っているわけではなく、\(\left(\sin x\right) \times \left(\cos x\right)\) の \(\times\) が省略されているわけです。Studyaid D.B. は、このあたりをきちんと認識して、入力者の意図に沿ったグラフが描画できるようになっています。
【松嶋】Studyaid D.B. の独自の数式コマンドがここに活かされているわけですね。
【小野】関数電卓だと \(\mathsf{()}\) で囲うなどして人間が補って入力する必要がありますが、Studyaid D.B. はそこをフォローしています。
「書籍との統一」にこだわっているStudyaid D.B. だからこそですね。
【菊田】まだいいですか?グラフの目盛りもちょっと頑張ってるんですよ。弧度法のグラフだと分数表記じゃないですか。だから約分しているんです、ユークリッドの互除法を使って。
【小野】さらには \(\pi\) の位置も一律に右に置くのではなくて数値によって分子に置いたりして、\(\frac{2}{6}\pi\)、\(\frac{4}{6}\pi\) とするのではなく、\(\frac{\pi}{3}\)、\(\frac{2}{3}\pi\) というように調整しています。
【松嶋】ブラウザ版の開発でこれを移植しないといけなくて、ほんと大変でした(笑)。この話に関連して、原点や軸のラベルも細かな作りこみをしていますよね。
図4
【菊田】はい、原点 \(\mathrm{O}\) のラベルは、普通は原点の左下に置きますよね。でもたとえば \(y=x\) のグラフを書くと、グラフと原点 \(\mathrm{O}\) が重なってしまうので、それを避けるために原点 \(\mathrm{O}\) の位置をずらせる設定があります。数研の書籍でも同じように、グラフと原点 \(\mathrm{O}\) の位置はずらしてグラフを読み取りやすくしていますので。
図5
【松嶋】\(x\) 軸、\(y\) 軸を示す軸のラベルも同様で、たとえば軸の近くにあると、反比例のグラフだと重なってしまう。なので、これも位置を変えられるようにしています。
【小野】Studyaid D.B. ではグラフ式を表示する機能もあって、これはグラフを読み取るのに邪魔にならないところに自動的に出るようになっています。
図6
【松嶋】いかに先生方に負担をかけないかは重視しています。こまごまと注意しなくても使えるソフトであることにこだわりたい。気づかれないことが大切なんです。
縁の下の力持ちという感じですね。こまやかな配慮を感じます。
【菊田】グラフは先生方からのご要望をとても多くいただくので。軸のラベルの種類が増えたのも、先生方の声ですね。たとえば三角関数などの分野では、\(\sin x\) ではなく \(\sin \theta\) とすることが多く、そうするとそのグラフで横軸が \(x\) だと都合が悪い。それで、\(\theta\) や \(\alpha\) をはじめ、色々な文字を使えるようにしました。
【小野】軸ラベルの設定とグラフ式表示の設定は連動していて、たとえば横軸を \(x\) から \(\theta\) にすると、グラフ上の式表示も \(\sin x\) から \(\sin \theta\) になるんです。
そして「先生方からのご要望を受けて」といえば、この春の新機能「陰関数グラフ」ですよね。
【菊田】Studyaid D.B. のグラフ機能は、\(y = f(x)\) のいわゆる陽関数と、媒介変数と、極方程式の3つで、陰関数ではグラフ描画ができませんでした。先ほどあれだけ「書籍との統一」といっていましたが陰関数だけは例外で…。たとえば円の \(x^2 + y^2 = 1\) というグラフは、媒介変数で \(x = \cos t, y = \sin t\) と入力していただく必要がありました。数学の先生方はもちろんそれで入力できますが、やはり面倒ですし、陰関数グラフへの要望はずいぶん前から数多くいただいていました。
図7
どうして実現できなかったんですか?
【菊田】技術的な限界で正確に描けないグラフがあり、教科書会社として「いい加減なものは出せない。正確で品質の確かなものを出す必要がある」という思いがあって、それで躊躇していたというのが一番大きな理由です。中途半端なものは出したくなかったんです。
【松嶋】それを今回実現できたのは、周辺技術が良くなったというのがありますね。
【菊田】そうですね、プログラミング言語の処理速度・精度やパソコンの処理速度など、いろいろな性能向上は追い風になりました。複雑な計算が高速でできるようになって道筋がみえてきたと言えます。
【小野】陰関数のグラフ描画についてものすごくシンプルに説明すると、地図の等高線みたいな考え方なわけです。\(z = x^2 + y^2 - 1\) の \(z = 0\) のところで輪切りにすると、この断面が \(x^2 + y^2 - 1 = 0\)、つまり円になるわけです。で、グラフの描画はこの円のところに線を引くのです。
図8
【菊田】一番基本的な考え方だと、座標上をこまかーく縦横に区切って、円にぶつかるところをひたすら見つけていきます。ただ、これをまともにやると処理に時間がかかるので、効率的なやり方を考えて、それを正しい計算で高速に処理できるよう調整して、今回ようやく実現したわけです。
たくさんのご要望があり、応えたい想いがあり、長年の試行錯誤があり、技術の追い風あり、そうやってこの春の陰関数グラフ機能の搭載に至ったわけですね。ありがとうございました!
north