LaTeX Generator
ブラウザ上で動作するJavaScriptによる簡易LaTeX
ソースコード生成装置「LaTeX Generator」を作ってみた。
最初に作ったときは、JavaScriptで新たなHTMLページを生成していたが、
Google Chromeでは、戻るボタンで戻ることが出来ず、
ページを毎回更新する必要があって、使い難かった為、
新たにテキストエリアに生成する方針で作り直し中
(現在、零、壱、弐、参が完成)。
「LaTeX Generator」は、コードを書くコードなので、
狭義には、メタプログラムの一種であるといえるかもしれないが、
どちらかといえば、「自動プログラミング」と言った方がより正確かも知れない。
因みに、AIや人工知能の領域には及んでいない。
※テキストエリア内、及び、<pre>~</pre>タグ内は、
EdgeとIEでは、バックスラッシュになるが、
ChromeとFirefoxでは、半角の円記号で表示されるようだ…。
プログラムはこちら
零
壱
弐
参
肆
伍
陸
漆捌玖拾
ソースコードはこちら
零
壱
弐
参
肆
伍
陸
漆捌玖拾
零. LaTeX文書の生成
(解説) クラスオプション、クラスファイル(必須)、タイトル、著者名、日付を入力し、
使用するパッケージのチェックボックスをチェックした後、
「生成する」ボタンを押すと、LaTeX文書が生成される。
壱. 箇条書き(記号付き・番号付き・見出し付き)
(解説) 項目数を入力後、ラジオボタンで、
「記号付き箇条書き」か「番号付き箇条書き」か「見出し付き箇条書き」かを選択し、
「生成する」ボタンを押すと、それぞれ、itemize環境、enumerate環境、description環境の
ソースコードがその数だけ、生成される。
弐. 表の生成
(解説) 行数、列数を入力後、セルの左右中央揃えをラジオボタンで選択し、
「生成する」ボタンを押すと、表が生成される。
参. Table Convertor
(解説) ファイルから、入力データをテキストエリアの入力欄にコピーして貼り付ける。
入力データの形式は、CSV(半角コンマ区切り)、SSV(半角スペース区切り)、
TSV(タブ区切り)にのみ対応している。即ち、入力データの行(レコード)は、
改行ごとに区切られ、列(カラム、フィールド)は、選択された上記のデリミタ(区切り文字)
によって、区切られる。但し、最終行の後は絶対に改行してはならない。
【サンプルデータ】
1,2,3
4,5,6
7,8,9
10,11,12
肆. ギリシア文字の生成
(解説) 各ギリシア文字(ギリシャ文字)のボタンを押すと、
該当するギリシア文字(ギリシャ文字)のLaTeXコマンドが生成される。
伍. 数式コマンドの生成
(解説) 数式を選択後、「生成する」ボタンを押すと、LaTeXの数式コマンドが生成される。
数式を選択する度に、改行とともに、LaTeXの数式コマンドが出力欄に加算されていく。
陸. 行列・行列式の生成
(解説) 行数、列数を入力後、「生成する」ボタンを押すと、行列・行列式が生成される。
但し、必ず数式モードで使用すること。また、変数名の「mord」は、
独逸語で、「殺人」を意味するらしいが、
これは英単語「mode」の綴りの誤植ではなく、ここでは、「matrix」or「determinant」の略である。
漆. 行列式の生成
(解説) 行数、列数を入力後、「生成する」ボタンを押すと、行列式が生成される。
但し、必ず数式モードで使用すること。
捌. 縦ベクトルの生成
(解説) 成分の数を入力後、「生成する」ボタンを押すと、縦ベクトルが生成される。
但し、必ず数式モードで使用すること。
玖. 場合分けの生成
(解説) 分岐の数を入力し、array環境を使うか、case環境を使うか、
1列にするか、2列にするかを選択することが出来る。
選択したボタンを押すと、場合分けが生成される。
但し、必ず数式モードで使用すること。
拾. 参考文献リスト
(解説) 項目数を入力後、「生成する」ボタンを押すと、thebibliography環境が生成される。
ソースコード
零. LaTeX文書の生成
HTMLサイド
<form><!-- getElementByIdを使用する為、name属性を指定しない -->
<table border="5" frame="void" rules="none">
<tr>
<td style="text-align:right">クラスオプション:</td>
<td style="text-align:left"><input type="text" id="classoption"></td>
</tr>
<tr>
<td style="text-align:right">クラスファイル(必須):</td>
<td style="text-align:left"><input type="text" id="classfile"></td>
</tr>
<tr>
<td style="text-align:right">使用するパッケージ:</td>
<td style="text-align:left">
<label for="amsmath"><input type="checkbox" id="amsmath">amsmath (複雑な数式を使う)</label><br>
<label for="amssymb"><input type="checkbox" id="amssymb">amssymb (AMSFontsを使う)</label><br>
<label for="braket"><input type="checkbox" id="braket">braket (ブラケット記法を使う)</label><br>
<label for="color"><input type="checkbox" id="color">color (色を使う)</label><br>
<label for="colortbl"><input type="checkbox" id="colortbl">colortbl (色のついた表)</label><br>
<label for="graphicx"><input type="checkbox" id="graphicx">graphicx (グラフィックスを使う)</label><br>
<label for="latexsym"><input type="checkbox" id="latexsym">latexsym(latexsymで定義されている文字を使う)</label><br>
<label for="longtable"><input type="checkbox" id="longtable">longtable (ページをまたぐ表)</label><br>
<label for="multicol"><input type="checkbox" id="multicol">multicol (多段組にする)</label><br>
<label for="tabularx"><input type="checkbox" id="tabularx">tabularx (横幅の定まった表)</label><br>
<label for="ulem"><input type="checkbox" id="ulem">ulem (下線を引く)</label>
</td>
</tr>
<tr>
<td style="text-align:right">LaTeX文書のタイトル:</td>
<td style="text-align:left"><input type="text" id="title"></td>
</tr>
<tr>
<td style="text-align:right">著者名:</td>
<td style="text-align:left"><input type="text" id="author"></td>
</tr>
<tr>
<td style="text-align:right">日付:</td>
<td style="text-align:left"><input type="text" id="date"></td>
</tr>
<tr>
<td style="text-align:center" colspan="2"><hr>
<input type="button" value="生成する" onclick="LaTeXGenerator0()"><!-- 関数名は、「LaTeXGenerator0」 --><br>
<textarea id="output0" cols="50" rows="20"></textarea><!-- 出力のみなので、テキストエリア名は、「output0」 -->
</td>
</tr>
</table>
</form>
|
JavaScriptサイド
var input0; // テキストエリア「output0」へ入力する為の変数
var LaTeXGenerator0 = function(){
var classoption = document.getElementById("classoption").value; // クラスオプションを取得
var classfile = document.getElementById("classfile").value; // クラスファイルを取得
var flagamsmath = document.getElementById("amsmath").checked; // amsmathパッケージ使用フラグ
var flagamssymb = document.getElementById("amssymb").checked; // amssymbパッケージ使用フラグ
var flagbraket = document.getElementById("braket").checked; // braketパッケージ使用フラグ
var flagcolor = document.getElementById("color").checked; // colorパッケージ使用フラグ
var flaggraphicx = document.getElementById("graphicx").checked; // graphicxパッケージ使用フラグ
var flaglatexsym = document.getElementById("latexsym").checked; // latexsymパッケージ使用フラグ
var flaglongtable = document.getElementById("longtable").checked; // longtableパッケージ使用フラグ
var flagmulticol = document.getElementById("multicol").checked; // multicolパッケージ使用フラグ
var flagulem = document.getElementById("ulem").checked; // ulemパッケージ使用フラグ
var title = document.getElementById("title").value; // LaTeX文書のタイトルを取得
var author = document.getElementById("author").value; // 著者名を取得
var date = document.getElementById("date").value; // 日付を取得
input0 = ""; // 出力用変数に空文字列を代入して初期化
input0 += "\\documentclass[" + classoption + "]{" + classfile + "}\n\n";
if (flagamsmath) {
input0 += "\\usepackage{amsmath}\n";
} // amsmathパッケージ使用フラグがONなら出力
if (flagamssymb) {
input0 += "\\usepackage{amssymb}\n";
} // amssymbパッケージ使用フラグがONなら出力
if (flagbraket) {
input0 += "\\usepackage{braket}\n";
} // braketパッケージ使用フラグがONなら出力
if (flagcolor) {
input0 += "\\usepackage[]{color}\n";
} // colorパッケージ使用フラグがONなら出力
if (flaggraphicx) {
input0 += "\\usepackage[]{graphicx}\n";
} // graphicxパッケージ使用フラグがONなら出力
if (flaglatexsym) {
input0 += "\\usepackage{latexsym}\n";
} // latexsymパッケージ使用フラグがONなら出力
if (flaglongtable) {
input0 += "\\usepackage{longtable}\n";
} // longtableパッケージ使用フラグがONなら出力
if (flagmulticol) {
input0 += "\\usepackage{multicol}\n";
} // multicolパッケージ使用フラグがONなら出力
if (flagulem) {
input0 += "\\usepackage{ulem}\n";
} // ulemパッケージ使用フラグがONなら出力
input0 += "\n\\title{" + title + "}\n";
input0 += "\\author{" + author + "}\n";
input0 += "\\date{" + date + "}\n";
input0 += "\n\\begin{document}\n";
input0 += "\\maketitle\n\n\n\n";
input0 += "\\end{document}\n";
document.getElementById("output0").value = input0; // テキストエリア「output0」へ出力する
};
|
壱. 箇条書き(記号付き・番号付き・見出し付き)
HTMLサイド
<form><!-- getElementByIdを使用する為、name属性を指定しない -->
項目数:<input type="text" id="item"><br>
<label for="itemize"><input type="radio" name="listtype" id="itemize">記号付き箇条書き</label><br>
<label for="enumerate"><input type="radio" name="listtype" id="enumerate">番号付き箇条書き</label><br>
<label for="description"><input type="radio" name="listtype" id="description">見出し付き箇条書き</label><br>
<input type="button" value="生成する" onclick="LaTeXGenerator1()"><!-- 関数名は、「LaTeXGenerator1」 --><br>
<textarea id="output1" cols="50" rows="20"></textarea><!-- 出力のみなので、テキストエリア名は、「output1」 -->
</form>
|
JavaScriptサイド
var input1; // テキストエリア「output1」へ入力する為の変数
var LaTeXGenerator1 = function(){
var listtype; // 【ラジオボタン】箇条書きのタイプを指定
var item = parseInt(document.getElementById("item").value); // 項目数の値を取得
if(isNaN(item)==true){ // 項目数の値が半角の数値ではない場合に
alert("項目数は、半角の数値を入力して下さい"); // アラートを表示して
return false; // 処理を中断する
}
// 【ラジオボタン】箇条書きのタイプを指定
if(document.getElementById("itemize").checked == true){ listtype=0; } // 記号付き箇条書き
if(document.getElementById("enumerate").checked == true){ listtype=1; } // 番号付き箇条書き
if(document.getElementById("description").checked == true){ listtype=2; } // 見出し付き箇条書き
input1 = ""; // 出力用変数に空文字列を代入して初期化
switch(listtype){
case 0:
input1 += "\\begin{itemize}\n";
for(i=0;i<item;++i){
input1 += " \\item \n";
}
input1 += "\\end{itemize}\n";
break;
case 1:
input1 += "\\begin{enumerate}\n";
for(i=0;i<item;++i){
input1 += " \\item \n";
}
input1 += "\\end{enumerate}\n";
break;
case 2:
input1 += "\\begin{description}\n";
for(i=0;i<item;++i){
input1 += " \\item[] \n";
}
input1 += "\\end{description}\n";
break;
default: break;
}
document.getElementById("output1").value = input1; // テキストエリア「output1」へ出力する
};
|
弐. 表の生成
HTMLサイド
<form><!-- getElementByIdを使用する為、name属性を指定しない -->
行数:<input type="text" id="tablerows" value="3">
列数:<input type="text" id="tablecols" value="3">
<br>
セル:
<label for="lcrleft"><input type="radio" name="lcr" id="lcrleft">左揃え</label>
<label for="lcrcenter">
<input type="radio" name="lcr" id="lcrcenter" checked>中央揃え(センタリング)
</label><!-- デフォルト -->
<label for="lcrright"><input type="radio" name="lcr" id="lcrright">右揃え</label>
<br>
<input type="button" value="生成する" onclick="LaTeXGenerator2()"><!-- 関数名は、「LaTeXGenerator2」 --><br>
<textarea id="output2" cols="50" rows="20"></textarea><!-- 出力のみなので、テキストエリア名は、「output2」 -->
</form>
|
JavaScriptサイド
var input2; // テキストエリア「output2」へ入力する為の変数
var LaTeXGenerator2 = function(){
var tr = 3; // 行数を表す変数trを初期値3と共に宣言
var tc = 3; // 列数を表す変数tcを初期値3と共に宣言
var lcr; // セルの左右中央揃えを表す変数lcrを宣言
tr = parseInt(document.getElementById("tablerows").value); // 行数を取得して更新
tc = parseInt(document.getElementById("tablecols").value); // 列数を取得して更新
input2 = ""; // 出力用変数に空文字列を代入して初期化
if(isNaN(tr)==true){ // 行数の値が半角の数値ではない場合に
alert("行数は、半角の数値を入力して下さい"); // アラートを表示して
return false; // 処理を中断する
}
if(isNaN(tc)==true){ // 列数の値が半角の数値ではない場合に
alert("列数は、半角の数値を入力して下さい"); // アラートを表示して
return false; // 処理を中断する
}
// セルの左右中央揃えを表す変数lcrの値をラジオボタンの選択で代入
if(document.getElementById("lcrleft").checked == true){ lcr="l"; } // 左揃え
if(document.getElementById("lcrcenter").checked == true){ lcr="c"; } // 中央揃え(センタリング)
if(document.getElementById("lcrright").checked == true){ lcr="r"; } // 右揃え
input2 += "\\begin{center}\n";
input2 += "\\begin{tabular}{|";
for(i=0;i<tc;++i){
input2 += lcr + "|";
}
input2 += "} \\hline\n";
for(i=0;i<tr;++i){
for(j=0;j<tc-1;++j){
input2 += " \& ";
}
input2 += " \\\\ \\hline\n";
}
input2 += "\\end{tabular}\n";
input2 += "\\end{center}\n";
document.getElementById("output2").value = input2; // テキストエリア「output2」へ出力する
};
|
参. Table Convertor
HTMLサイド
<form><!-- getElementByIdを使用する為、name属性を指定しない -->
<table border="1">
<tr>
<td style="text-align:right;">入力欄(必須):</td>
<td style="text-align:left;"><textarea id="input3" cols="50" rows="20"></textarea></td>
</tr>
<tr>
<td style="text-align:right;">入力データ形式(必須):</td>
<td style="text-align:left;">
<label for="csv"><input type="radio" name="separator" id="csv" checked>半角コンマ</label>
<label for="ssv"><input type="radio" name="separator" id="ssv">半角スペース</label>
<label for="tsv"><input type="radio" name="separator" id="tsv">タブ</label>
</td>
</tr>
<!-- 「program2」と重複しないようにするため、idを「tablecols」→「table2cols」に変更 -->
<tr>
<td style="text-align:right;">列数(必須):</td>
<td style="text-align:left;"><input type="text" id="table2cols" value="3"></td>
</tr>
<!-- 「program2」と重複しないようにするため、idとnameを「lcr」→「lcr2」に変更 -->
<tr>
<td style="text-align:right;">セル:</td>
<td style="text-align:left;">
<label for="lcr2left"><input type="radio" name="lcr2" id="lcr2left">左揃え</label>
<label for="lcr2center">
<input type="radio" name="lcr2" id="lcr2center" checked>中央揃え(センタリング)
</label><!-- デフォルト -->
<label for="lcr2right"><input type="radio" name="lcr2" id="lcr2right">右揃え</label>
</td>
</tr>
<tr>
<td style="text-align:center" colspan="2">
<input type="button" style="width:200px;height:40px" value="上記の条件で生成する" onclick="LaTeXGenerator3()">
<!-- 関数名は、「LaTeXGenerator3」 -->
</td>
</tr>
<tr>
<td style="text-align:center;" colspan="2"><hr></td>
</tr>
<tr>
<td style="text-align:center" colspan="2">
<textarea id="output3" cols="80" rows="20"></textarea><!-- 出力のみなので、テキストエリア名は、「output3」 -->
</td>
</tr>
</table>
</form>
|
JavaScriptサイド
var input3; // テキストエリア「input3」から入力されたデータを読み込む為の変数
var output3; // テキストエリア「output3」へ出力する為の変数
var LaTeXGenerator3 = function(){
var cols = parseInt(document.getElementById("table2cols").value);
// 列数を表す変数colsを宣言し、テキストフィールド:「table2cols」の欄から値を取得して整数化して代入
var lcr; // セルの左右中央揃えを表す変数lcrを宣言
var record; // 改行文字で読み込んだデータを各行に分解して代入するための配列を宣言
var i, j; // ループ変数を宣言
var separator; // 入力データ形式である、区切り文字を表す変数を宣言
var eachdata; // 各行に分解されたデータをさらに区切り文字で分解して各値を代入するための配列を宣言
input3 = ""; // データを読み込み用変数に空文字列を代入して初期化(念の為)
input3 = document.getElementById("input3").value; // テキストエリアから読み込む
// 改行を\nに統一
input3 = input3.replace("\r\n", "\n");
input3 = input3.replace("\r", "\n");
record = input3.split("\n"); // 読み込んだデータを改行文字で各行に分解して、配列recordに代入
rows = record.length; // 行数を算出して、行数を表す変数rowsを仮の値から更新
// ラジオボタンで選択された入力データ形式に対応する区切り文字を、区切り文字を表す変数separatorに代入
if(document.getElementById("csv").checked == true){ separator = ","; } // CSV形式
if(document.getElementById("ssv").checked == true){ separator = " "; } // SSV形式
if(document.getElementById("tsv").checked == true){ separator = "\t"; } // TSV形式
if(isNaN(cols)==true){ // 列数を表す変数colsの値が半角の数値ではない場合に
alert("列数は、半角の数値を入力して下さい"); // アラートを表示して
return false; // 処理を中断する
}
// セルの左右中央揃えを表す変数lcrの値をラジオボタンの選択で代入
if(document.getElementById("lcr2left").checked == true){ lcr="l"; } // 左揃え
if(document.getElementById("lcr2center").checked == true){ lcr="c"; } // 中央揃え(センタリング)
if(document.getElementById("lcr2right").checked == true){ lcr="r"; } // 右揃え
output3 = ""; // 出力用変数に空文字列を代入して初期化
output3 += "\\begin{center}\n";
output3 += "\\begin{tabular}{|";
for(i = 0; i < cols; i++){
output3 += lcr + "|";
}
output3 += "} \\hline\n";
for(i = 0; i < rows; i++){
record[i] = record[i].replace(RegExp(separator,"g"), " & ");
output3 += record[i] + " \\\\ \\hline\n";
}
output3 += "\\end{tabular}\n";
output3 += "\\end{center}";
document.getElementById("output3").value = output3; // テキストエリア「output3」へ出力する
};
|
肆.
HTMLサイド
JavaScriptサイド
var input4; // テキストエリア「output4」へ入力する為の変数
|
伍. 数式コマンドの生成
HTMLサイド
<form><!-- getElementByIdを使用する為、name属性を指定しない -->
<select id="input5">
<option>数式を選択して下さい</option>
<option value="$^{}$">累乗(インライン数式)</option>
<option value="$_{}$">添字(インライン数式)</option>
<option value="\[ \]">ディスプレイ数式</option>
<option value="\left( \right)">小括弧(自動調整)</option>
<option value="\left\{ \right\}">中括弧(自動調整)</option>
<option value="\left[ \right]">大括弧(自動調整)</option>
<option value="\left| \right|">絶対値(自動調整)</option>
<option value="\sqrt{}">平方根</option>
<option value="\frac{}{}">分数</option>
<option value="\frac{d}{d}">微分</option>
<option value="\frac{\partial }{\partial }">偏微分</option>
<option value="\sum_{}^{}">総和記号</option>
<option value="\prod_{}^{}">総積記号</option>
<option value="\int_{}^{}">積分記号</option>
</select>
<input type="button" value="生成する" onclick="LaTeXGenerator5()"><!-- 関数名は、「LaTeXGenerator5」 --><br>
<textarea id="output5" cols="50" rows="20"></textarea><!-- 出力のみなので、テキストエリア名は、「output5」 -->
</form> |
JavaScriptサイド
var input5; // テキストエリア「output5」へ入力する為の変数
var LaTeXGenerator5 = function(){
input5 = ""; // 出力用変数に空文字列を代入して初期化
input5 = document.getElementById("input5").value;
// LaTeXの数式コマンドをテキストフィールドから取得して、変数に代入
document.getElementById("output5").value += input5 + "\n"; // テキストエリア「output5」へ出力する
};
|
陸. 行列・行列式の生成
HTMLサイド
<form><!-- getElementByIdを使用する為、name属性を指定しない -->
行数:<input type="text" id="mordrows" value="3">
列数:<input type="text" id="mordcols" value="3">
<br>
<label for="matrix1"><input type="radio" name="mord" id="matrix1" checked>行列(丸括弧)</label>
<label for="matrix2"><input type="radio" name="mord" id="matrix2">行列(鍵括弧)</label>
<label for="determinant"><input type="radio" name="mord" id="determinant">行列式(縦棒)</label>
<input type="button" value="生成する" onclick="LaTeXGenerator6()"><!-- 関数名は、「LaTeXGenerator6」 --><br>
<textarea id="output6" cols="50" rows="20"></textarea><!-- 出力のみなので、テキストエリア名は、「output6」 -->
</form>
|
JavaScriptサイド
var input6; // テキストエリア「output6」へ入力する為の変数
var LaTeXGenerator6 = function(){
var mordr = 3; // 行数を表す変数mrを初期値3と共に宣言
var mordc = 3; // 列数を表す変数mcを初期値3と共に宣言
var mord; // 行列・行列式の括弧を選択する変数mordを宣言
mordr = parseInt(document.getElementById("mordrows").value); // 行数を取得して更新
mordc = parseInt(document.getElementById("mordcols").value); // 列数を取得して更新
if(document.getElementById("matrix1").checked == true){ mord=0; } // 行列(丸括弧)
if(document.getElementById("matrix2").checked == true){ mord=1; } // 行列(鍵括弧)
if(document.getElementById("determinant").checked == true){ mord=2; } // 行列式(縦棒)
input6 = ""; // 出力用変数に空文字列を代入して初期化
if(isNaN(mordr)==true){ // 行数の値が半角の数値ではない場合に
alert("行数は、半角の数値を入力して下さい"); // アラートを表示して
return false; // 処理を中断する
}
if(isNaN(mordc)==true){ // 列数の値が半角の数値ではない場合に
alert("列数は、半角の数値を入力して下さい"); // アラートを表示して
return false; // 処理を中断する
}
switch(mord){
case 0: // 行列(丸括弧)の場合
input6 += "\\left(\n"; // 行列開始の可変丸括弧
break;
case 1: // 行列(鍵括弧)の場合
input6 += "\\left[\n"; // 行列開始の可変鍵括弧
break;
case 2: // 行列式(縦棒)の場合
input6 += "\\left|\n"; // 行列式開始の可変縦棒
break;
default: break;
}
input6 += "\\begin{array}{"; // array環境開始
for(i=0;i<mordc;++i){
input6 += "c";
}
input6 += "}\n";
for(i=0;i<mordr-1;++i){
for(j=0;j<mordc-1;++j){
input6 += " \& ";
}
input6 += " \\\\\n";
}
for(j=0;j<mordc-1;++j){ // 最後の行だけは改行記号を含まないので、別に出力。
input6 += " \& ";
}
input6 += "\n\\end{array}\n"; // 改行してarray環境終了して更に改行
switch(mord){
case 0: // 行列(丸括弧)の場合
input6 += "\\right)\n"; // 行列終了の可変丸括弧
break;
case 1: // 行列(鍵括弧)の場合
input6 += "\\right]\n"; // 行列終了の可変鍵括弧
break;
case 2: // 行列式(縦棒)の場合
input6 += "\\right|\n"; // 行列式終了の可変縦棒
break;
default: break;
}
document.getElementById("output6").value = input6; // テキストエリア「output6」へ出力する
};
|
漆.
HTMLサイド
JavaScriptサイド
捌.
HTMLサイド
JavaScriptサイド
玖.
HTMLサイド
JavaScriptサイド
拾.
HTMLサイド
JavaScriptサイド