このページでは、「JSXGraph」というオープンソースのJavaScriptライブラリパッケージを使って、手でオブジェクトを描くのではなくJavaScriptのコードでプログラミング的（？）にInscapeのキャンバス上にオブジェクトを描く方法についてまとめていきたいと思います。
- Contents
はじめに
Inkscapeで関数（数学上の関数）のグラフをきれいに描くにはどうしたらいいだろう？ベジエ曲線などで工夫すれば描けるのだろうか？というテーマについて考えていて、「JSXGraph」というソフトを使うとJavaScriptのコードでグラフ化したい関数を記述すれば自動的にそれをグラフ化したパスオブジェクトを生成してくれることを知り、「JSXGraph」についてもっと調べてみようとなりました。
元々Inkscapeには関数のグラフを描いてくれるエクステンションが組み込まれていますが、使い方を教えてくれるコンテンツが見つからず、試行錯誤ではどうにもならなかったのでグラフの描画については放っておいたのです。
「JSXGraph」を使えばJavaScriptの初歩的な文法を押さえるだけで関数のグラフはもちろん、いろんなタイプの絵図をSVG形式のオブジェクトとして生成してくれるので、手書きではなくプログラミングの要領でオブジェクトを描きたいときに便利なのではないかと考えています。
手始めに「関数のグラフを描く」のほうに、代表的な関数（３次関数や三角関数）をJSXGraphでグラフ化してInkscapeにインポートする手順についてまとめてみました。
JSXGraphについて
「JSXGraph」はJavaScriptのライブラリです。
「JSXGraph」はオープンソースソフトウェアの１つで、自身もJavaScriptを使って書かれています。
HTMLで記述したWebページの中で、<script>タグを使ってJSXGraphの「.js」ファイルをインポートするよう指示しておき、同じWebページ内でJavaScriptを使って描きたい絵図（描きたいオブジェクト）の位置や形などを指示すると、その絵図を中身が空のHTMLエレメント（<div>エレメント）の中に描いてくれます。
どうやって描いているかと言うと、JavaScriptのコードで指示したパラメータに沿って絵図を表すSVG形式データ（<svg>エレメント）を生成し、それを中身が空の<div>エレメントに挿入します。
JSXGraphの基本的な機能ではそこで挿入されるSVG形式データを例えばファイルに保存することはできないようですが、「関数のグラフを描く」で紹介している方法を使えばファイルに保存した上でInkscapeにインポートすることが可能です。
JSXGraphの解説コンテンツ
Inkscapeと事情は似ていて（？）、JSXGraphについてもある程度まとまっている解説コンテンツがなかなか見つかりません。
結局「JSXGraphの公式サイト」を見に行っていろいろ調べるという作業になっています。
また「JSXGraph Wiki」もあります。
JSXGraphを使ったHTMLコード
JSXGraphを使ったHTMLコードがどんな構造になっているのかを示します。
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JSXGraphを使った最低限のHTMLコード</title>
/* JSXGraphのスタイルシート部分を読み込む */
<link rel="stylesheet" type="text/css" href="https://jsxgraph.org/distrib/jsxgraph.css" />
/* JSXGraphのJavaScript部分を読み込む */
<script type="text/javascript" src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
</head>
<body>
<h1>JSXGraphを使った最低限のHTMLコード</h1>
<!-- 生成したSVGコードの挿入先にするエレメント -->
<!-- 適当な幅と高さを指定しておく -->
<div id="aaaaa" class="jxgbox" style="width:500px; height:500px;"></div>
<!-- 絵図を描く先のBoardオブジェクトを生成する -->
<!-- SVGコード挿入先のHTMLエレメント（'aaaaa'）を指定する -->
<!-- そのHTMLエレメントの上下左右の座標値を指定する -->
<!-- 自動的に座標軸を描くように指定する（axis:true） -->
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('aaaaa', {boundingbox: [-10, 10, 10, -10], axis:true});
</script>
<!-- Board上に１本直線を描く -->
<!-- 'line'というエレメントタイプを指定し、さらにその直線が通る２つの点を配列で指定する -->
<script>
board.create('line', [[0,1],[-1,0]]);
</script>
</body>
</html>
このHTMLコードを基本として、Boardの座標値（上下左右の座標値）を変更したり、'line'以外のエレメントタイプのオブジェクトもcreateしたりして任意の絵図を描いていきます。
いろいろなオブジェクトを描く
あとは描くオブジェクトの種類（エレメントタイプ）ごとにどんなJavaScriptコードを書けばいいのかをまとめていきたいと思います。
座標値を指定したほうが描きやすい図形（例えば関数のグラフ）であれば、直接Inkscapeのツールを使って手で描くよりも簡単に描ける場合もあるかと思います。
個々のタイプを描くときにどんな属性を指定できるのかはJSXGraphのAPIリファレンスを読んで、各タイプごとのJavaScriptのクラスの属性（Attribute）などを調べればある程度わかります。（ある程度、というのはクラス間で継承されている属性とか、固定の文字列だけ設定可能な属性など、リファレンスだけでは分かりにくい面もあるからです。）
 |
 |
 |
 楕円
|
 弧
|
|||
 |
 正多角形
|
 平行四辺形
|
 各種スプライン
|
||||
 外心
|
 内心
|
 ３点で円弧
|
 内接円
|
 平行線
|
 角の二等分線
|
||
 交点
|
 垂線
|
 接線
|
 直交する線
|
 反射
|
 射影
|
 鏡像
|
 差分
交差 統合 |
 |
 |
 導関数
|
 双曲線
|
 陰伏曲線
|
|||
 角度
|
 積分
|
 チャート
|
 箱ひげ図
|