【コピペ用】TeX入力支援ブラウザツール

最終更新日

僕用にしかならないけど,もしよければどうぞ.

こんな見た目の 野球ノート作成支援ツールです

HTML (html.html)

<HTML>
	<HEAD>
		<TITLE>
			野球ノート作成
		</TITLE>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript" src="js.js"></script>
		<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
		<link rel="stylesheet" type="text/css" href="css.css">
	</HEAD>
	<body>
		<div id="wrapper">
			<div id="teams">
				<input type="text" placeholder="1試合目の先攻" id="offe_1"/>
				 - <input type="text" placeholder="1試合目の後攻" id="defe_1"/><br>
				<input type="text" placeholder="2試合目の先攻" id="offe_2"/>
				 - <input type="text" placeholder="2試合目の後攻" id="defe_2"/><br>
			</div>
			<hr>
			<div id="result">
			<table>
				<tbody>
					<tr>
						<td rowspan="2">結果</td>
						<td><input type="text" placeholder="1試合目の先攻の点" id="point_1o"/></td>
						<td>-</td>
						<td><input type="text" placeholder="1試合目の後攻の点" id="point_1d"/></td>
						<td>:</td>
						<td><input type="text" autocomplete="on" list="test"  placeholder="1試合目の勝敗" id="result_1"></td>
					</tr>
					<tr>
						<td><input type="text" placeholder="2試合目の先攻の点" id="point_2o"/></td>
						<td>-</td>
						<td><input type="text" placeholder="2試合目の後攻の点" id="point_2d"/></td>
						<td>:</td>
						<td><input type="text" autocomplete="on" list="test"  placeholder="2試合目の勝敗" id="result_2"></td>
					</tr>
				</tbody>
			</table>
			</div>
			<datalist id="test">
				<option value="勝ち!" />
				<option value="負け..." />
				<option value="引き分け" />
			</datalist><br>
			<div id="content_div">
			<textarea id="content" wrap="soft" placeholder="試合内容"></textarea>
			</div><br>
			<div style="border-style: solid; border-width: 1px; float: left; padding: 5px 5px 5px 20px;width: 100px;">学んだこと</div>
			      <input type="button" value="学んだことをクリア" onclick="aaa()" />
			<ul>
				<li><div id="lsn_1"><input type="text" placeholder="学んだこと1" id="lesson_1"/></div></li>
				<li><div id="lsn_2"><input type="text" placeholder="学んだこと2" id="lesson_2"/></div></li>
				<li><div id="lsn_3"><input type="text" placeholder="学んだこと3" id="lesson_3"/></div></li>
				<li><div id="lsn_4"><input type="text" placeholder="学んだこと4" id="lesson_4"/></div></li>
				<li><div id="lsn_5"><input type="text" placeholder="学んだこと5" id="lesson_5"/></div></li>
				<li><div id="lsn_6"><input type="text" placeholder="学んだこと6" id="lesson_6"/></div></li>
				<li><div id="lsn_7"><input type="text" placeholder="学んだこと7" id="lesson_7"/></div></li>
			</ul>
			<div id="date_div">
			<input type="date" value="2003-07-07" id="date" /><br><br>
			</div><br><br>
			<div id="make">
				<input type="button" value="TeXソース生成" onclick="test()" />
			</div><br><br>
			<textarea style="width:800px; height:400px; font-family:'ricty diminished';" id="note" readonly>ここにTeXソースを表示</textarea><br><br>

	</BODY>
</HTML>

JavaScript (js.js)

var out = ""; //出力の文字列
var offe_1, defe_1, offe_2, defe_2, point_1o, point_1d, result_1, point_2o, point_2d, result_2;
var content;
var lesson_1, lesson_2, lesson_3, lesson_4, lesson_5, lesson_6, lesson_7;
var date;
console.log("cleared!");

function test() {
    initialize(); //出力文字列の初期化

    offe_1 = $(':text[id="offe_1"]').val(); //1試合目の先攻
    defe_1 = $(':text[id="defe_1"]').val(); //1試合目の後攻
    offe_2 = $(':text[id="offe_2"]').val(); //2試合目の先攻
    defe_2 = $(':text[id="defe_2"]').val(); //2試合目の後攻

    point_1o = $(':text[id="point_1o"]').val(); //1試合目先攻の得点
    point_1d = $(':text[id="point_1d"]').val(); //1試合目後攻の得点
    result_1 = $(':text[id="result_1"]').val(); //1試合目の勝敗
    point_2o = $(':text[id="point_2o"]').val(); //2試合目先攻の得点
    point_2d = $(':text[id="point_2d"]').val(); //2試合目後攻の得点
    result_2 = $(':text[id="result_2"]').val(); //2試合目の勝敗

    content = $('[id=content]').val(); //試合内容

    lesson_1 = $(':text[id="lesson_1"]').val(); //学んだこと1
    lesson_2 = $(':text[id="lesson_2"]').val(); //学んだこと2
    lesson_3 = $(':text[id="lesson_3"]').val(); //学んだこと3
    lesson_4 = $(':text[id="lesson_4"]').val(); //学んだこと4
    lesson_5 = $(':text[id="lesson_5"]').val(); //学んだこと5
    lesson_6 = $(':text[id="lesson_6"]').val(); //学んだこと6
    lesson_7 = $(':text[id="lesson_7"]').val(); //学んだこと7

    date = document.getElementById("date").value; //日付

    addSeperator();
    addTeams();
    addResult();
    addContent();
    addLesson();
    addDate();

    document.getElementById("note").innerHTML = out;
}

function initialize() {
    offe_1 = "";
    defe_1 = "";
    offe_2 = "";
    defe_2 = "";
    point_1o = "";
    point_1o = "";
    result_1 = "";
    point_2o = "";
    point_2d = "";
    result_2 = "";
    content = "";
    lesson_1 = "";
    lesson_2 = "";
    lesson_3 = "";
    lesson_4 = "";
    lesson_5 = "";
    lesson_6 = "";
    lesson_7 = "";
    date = "";
    out = "";
}

function addSeperator() {
    out += "%%%%%%%%%%%%%%%%%%%%ここまでテンプレート,必要分繰り返す\n\\begin{center}\n{\\bfseries \\LARGE %team name \n  \\begin{tabular}[c]{ccc}\n";
}

function addTeams() {
    out += "    " + offe_1 + " &-& " + defe_1 + "\\\\\n";

    if (offe_2) {
        out += "    " + offe_2 + " &-& " + defe_2 + "\n";
        console.log("offe_2 is not UNDEFINED!")
    };

    out += "  \\end{tabular}\n}\\noindent \\rule{\\columnwidth}{0.1mm} \\\\\n  \\begin{tabular}{cccccc}\n";
}

function addResult() {
    //1試合だけの時
    if (!offe_2) {
        out += "  \\multirow{1}{*}{結果} & " + point_1o + " &-& " + point_1d + " &:& " + result_1 + " \\\\\n"
    } else if (offe_2) {
        var sp23 = "                        ";

        out += "  \\multirow{2}{*}{結果} & " + point_1o + " &-& " + point_1d + " &:& " + result_1 + " \\\n";
        out += sp23 + "& " + point_2o + " &-& " + point_2d + " &:& " + result_2 + "\n";
    }

    out += "  \\end{tabular}\n\\end{center}\n\n";
}

function addContent() {
    out += content + "\n\n";
}

function addLesson() {
    out += "\\medskip \\noindent \\fbox{学んだこと}\n\\begin{itemize}\n";
    if (lesson_1) {
        out += "\\item " + lesson_1 + "\n";
    }
    if (lesson_2) {
        out += "\\item " + lesson_2 + "\n";
    }
    if (lesson_3) {
        out += "\\item " + lesson_3 + "\n";
    }
    if (lesson_4) {
        out += "\\item " + lesson_4 + "\n";
    }
    if (lesson_5) {
        out += "\\item " + lesson_5 + "\n";
    }
    if (lesson_6) {
        out += "\\item " + lesson_6 + "\n";
    }
    if (lesson_7) {
        out += "\\item " + lesson_7 + "\n";
    }
    out += "\\end{itemize}\n";
}

function addDate() {
    var weekDayList = ["Sun.", "Mon.", "Tue.", "Wed.", "Thu.", "Fri.", "Sat."];
    var year = new Date(date).getFullYear();
    var month = new Date(date).getMonth() + 1;
    var date_ = new Date(date).getDate();
    var day = new Date(date).getDay();
    if (month < 10) month = "0" + month;
    if (date_ < 10) date_ = "0" + date_;

    out += "\\begin{flushright}(" + year + "/" + month + "/" + date_ + " " + weekDayList[day] + ")\\end{flushright}\n\\newpage\n%%%%%%%%%%%%%%%%%%%%ここまでテンプレート,必要分繰り返す\n";
}

function aaa() {
    var lsn_1 = document.getElementById("lsn_1");
    var lsn_2 = document.getElementById("lsn_2");
    var lsn_3 = document.getElementById("lsn_3");
    var lsn_4 = document.getElementById("lsn_4");
    var lsn_5 = document.getElementById("lsn_5");
    var lsn_6 = document.getElementById("lsn_6");
    var lsn_7 = document.getElementById("lsn_7");

    lsn_1.innerHTML = '<input type="text" placeholder="学んだこと1" id="lesson_1"/>';
    lsn_2.innerHTML = '<input type="text" placeholder="学んだこと2" id="lesson_2"/>';
    lsn_3.innerHTML = '<input type="text" placeholder="学んだこと3" id="lesson_3"/>';
    lsn_4.innerHTML = '<input type="text" placeholder="学んだこと4" id="lesson_4"/>';
    lsn_5.innerHTML = '<input type="text" placeholder="学んだこと5" id="lesson_5"/>';
    lsn_6.innerHTML = '<input type="text" placeholder="学んだこと6" id="lesson_6"/>';
    lsn_7.innerHTML = '<input type="text" placeholder="学んだこと7" id="lesson_7"/>';

    console.log("aaa!");
}

CSS (css.css)

body {  
    text-align: center;  
}  
div#wrapper {  
    width: 800px;  
    margin: 0 auto;  
    text-align: left;  
} 
div#teams{
    width: 400px;  
    margin: 0 auto;  
}
div#result{
    width: 600px;  
    margin: 0 auto;  
}
textarea#content{
	width: 700px;
	height: 400px;
}
div#content_div{
    width: 700px;  
    margin: 0 auto;  
}
div#date_div{
	float: right;
}
div#make{
    margin: 0 auto;  
}
input#lesson_1{
    width: 600px;
    height: 40px;
    overflow-wrap: break-word;
}
input#lesson_2{
    width: 600px;
    height: 40px;
    overflow-wrap: break-word;
}
input#lesson_3{
    width: 600px;
    height: 40px;
    overflow-wrap: break-word;
}
input#lesson_4{
    width: 600px;
    height: 40px;
    overflow-wrap: break-word;
}
input#lesson_5{
    width: 600px;
    height: 40px;
    overflow-wrap: break-word;
}
input#lesson_6{
    width: 600px;
    height: 40px;
    overflow-wrap: break-word;
}
input#lesson_7{
    width: 600px;
    height: 40px;
    overflow-wrap: break-word;
}

コメントを残す

%d人のブロガーが「いいね」をつけました。