ホーム  >  tech

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

公開日

最終更新日

僕用にしかならないけど，もしよければどうぞ．(2026-04-14 追記) GitHub にもあります。

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

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;
}

カテゴリー:tech

関連投稿

1件のコメント

  1. ピンバック: オープンソース開発を持続可能にする素晴らしい知恵がある – 回れ右の内輪差

コメントを残す

回れ右の内輪差をもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む