名前を記した当番表を作る方法 (JavaScriptを使用)
いろいろなことで、名前が記入された表を作成する機会がある。
多くの人は、簡単でしょう「Ｅｘｃｅｌ」で作れば、といいます。
しかし、名前の順序が左上から左下へと記入され、右の次の枠へと続きます。つまり、
縦１５名と備考欄、横４ブロックで合計６０名。時々、名前が入れ変わったり、名前の削除や追加をする必要があります。さて、変更の都度、表をつくり変えますか？？
この見本は画像で縮小してあります、横幅503px。原本は660pxです。
EXCEL で考察
ＥＸＣＥＬで考える方法は、最初は、完全な表を作成します。
追記、削除の必要が生じたら、同じものを下にコピーします。つまり表が２個になります。下の表から、名前を削除します。上の表から、必要な名前の縦のブロックをコピーして下の表に貼り付けます。空白や、追記、変更、削除を考えながら、コピーして作成します。おかしな箇所が生じれば再試行で仕上げます。その後、上の部分を削除して完成です。
別の作り方では、最初の作成で、テキストファイルのリストを読み込ませる方法があります。しかし、タブもしくは空白で横に分割して、読み込みます。次の手直しでは、このテキストファイルを手直しするのは面倒です。左上から左下に続くリストの手直しは、間違いを生じやすいです。または、リストを縦に作成し、全部を縦に読み込ませ、後で分割して表に貼り付ける方法もあります。
上記の２方法では、最初はまじめに作りますが、手直し、追記、変更、削除が億劫になり結局、新しいリストになるまで、加筆、修正したものが使われ続けます。
ＨＴＭＬとＪａｖａＳｃｒｉｐｔで考察
Ｗｅｂページを表示させるＨＴＭＬは最初、文章の表示やレイアウトを簡単にする方法を考えて開発された文書作成用のプログラム言語です。 その後、ＣＳＳやＪａｖａＳｃｒｉｐｔも組み込まれるようになり、表現の幅が広がりました。
小生は、簡単な文章はテキストエディタで作成しています。印刷時にはテキストエディタに付属する印刷設定でレイアウトを考えています。通常の文章では、文字の修飾や枠取りは不要ですのでこの方法は最適で、時間の短縮につながります。
画像を挿入する必要がある文章では、ＨＴＭＬで作成しています。この利点は、文章が完成してから、レイアウトをプログラムで変更できるので、無理やり１ページに収めようなどということが可能です。つまり、 印刷幅を指定したり、行間隔を変更することが部分的に可能なのでこのようなことが出来るのです。
ＨＴＭＬとＪａｖａＳｃｒｉｐｔを使ってプログラムリストを作ると、更に多くのことが可能になり、ここで考えている、名前のリストを作成して、表に端から流し込みなさい。というプログラムが作成可能になります。この名前のリストの部分だけ手直しすれば、削除や、変更が簡単に可能で、リストを見るだけで、表示の順序もわかります。
リストの解説、変更用資料
リストを青文字で、解説、注釈を赤枠、赤文字で記しています。
<!DOCTYPE HTML>プログラム始まりHTML5です
<HTML lang="ja">
<HEAD>head部分です
<meta charset="UTF-8">文字コードUTF-8です
<SCRIPT LANGUAGE="JavaScript">JavaScriptの指定です
function MakeArray(n){ this.length=n; }
</SCRIPT>
<TITLE>当番表</TITLE>
<style type="text/css">CSSファイルの定義です
html { font-size: 86%; line-height: 1.6; overflow-y: scroll; }
line-height: 1.6; は改行幅を指定
body { margin: 0; background: #fff; text-align: center; }
#wrap { margin: 0 auto; width:660px; padding: 0;幅660pxを指定
background: #fff; color: black; }
h2 { font-size: 15pt; font-weight: bold; line-height:1.4;
margin: 2px; text-align: left; padding-left:1em;
background: #fff; color: black; width: 95%;
border-bottom: 1px solid #222;
font-family: "ＭＳ Ｐゴシック", sans-serif !important; }
h2 span { float: right; text-align: right; font-size: 10pt;
font-weight: normal; padding-top: 8px; padding-right: 1em; }
h4 { margin: 2px; clear: both; border: 1px solid #222; width: 96%;
font-size: 12pt; font-weight: bolder; line-height:1.3;
text-align: left; padding: 2px; padding-left: 0.5em;
margin-bottom: 1em; }
table.tb_01 table の定義です
{ margin: 2px; width: 24%; float: left;
border: solid 1px #222; border-collapse: collapse; }
table.tb_01 tr
{ vertical-align: top; }
table.tb_01 tr td
{ border-right: solid 1px #222;
border-bottom: solid 1px #222;
font-weight: bold; text-align: center;
white-space: nowrap; width: 11%; }
table.tb_01 tr th
{ border-right: solid 1px #222;
border-bottom: solid 1px #222;
font-weight: bold; text-align: center;
white-space: nowrap; width: 13%; }
</style>CSSファイルの定義終わり
</HEAD>head部分終わり
<BODY>本文始まり
<DIV id="wrap">
<SCRIPT LANGUAGE="JavaScript">JavaScript のプログラム
var num=60data の合計数値です
var aaa="*"
名前リストです 分割は「読点（、:全角）」です
+" 白鳳、 里川、 将棋、 隆康 、 青山 、 "
+" 渋谷、 原宿、 代々木、 新宿、 大久保、"
+" 若桜、 千代、 栃和歌、 展方、横浜、"
+" * "ブロックの分割は「アスタリスク（*:半角）」です
+" 高田、馬場、 、 目白 、 池袋 、 大塚、"
+" 粉米、 田端、 日暮里、 上野、 御地町、"
+" 秋葉原、 神田、 東京、 有楽町、品川、"
+" * "
+" 田町、 川崎、 鎌田、 富士 、 白馬 、 "
+" 欧州、 金策、 豊島、 千代、 藤田、"
+" 大道、 遠田、 改心、 意識、 、"
+" * "
+" 問題、 提起 、 沓掛 、 会長、 計画、"
+" 短距離、 高飛、 育成、 、 男子、"
+" 今年、 一昨年、 来年、 未来、今年、"
最後には +" * " はありません
document.write("<h2><span>25.01.01</span>");
document.write("平成２５年 当番表</h2><br>");
document.write("<h4>当番の方は、必ず実行してください。");
document.write("<br>");
document.write("留守をするときは、個人的に別の方に依頼されるようにお願いします。");
document.write("</h4>");
var label=aaa
for(i=1;i<=num;i++)
{
data=label.split("*"); * で分割
data=data[i].split("、"); 、 で分割
document.write("<table class='tb_01'>");tableの定義
document.write("<tr><td>氏名</td> <th>実施日</th> </tr>");
document.write("<tr><td>" +data[0]+ "</td> <th>～</th></tr>");
document.write("<tr><td>" +data[1]+ "</td> <th>～</th></tr>");
document.write("<tr><td>" +data[2]+ "</td> <th>～</th></tr>");
document.write("<tr><td>" +data[3]+ "</td> <th>～</th></tr>");
document.write("<tr><td>" +data[4]+ "</td> <th>～</th></tr>");
document.write("<tr><td>" +data[5]+ "</td> <th>～</th></tr>");
document.write("<tr><td>" +data[6]+ "</td> <th>～</th></tr>");
document.write("<tr><td>" +data[7]+ "</td> <th>～</th></tr>");
document.write("<tr><td>" +data[8]+ "</td> <th>～</th></tr>");
document.write("<tr><td>" +data[9]+ "</td> <th>～</th></tr>");
document.write("<tr><td>" +data[10]+ "</td> <th>～</th></tr>");
document.write("<tr><td>" +data[11]+ "</td> <th>～</th></tr>");
document.write("<tr><td>" +data[12]+ "</td> <th>～</th></tr>");
document.write("<tr><td>" +data[13]+ "</td> <th>～</th></tr>");
document.write("<tr><td>" +data[14]+ "</td> <th>～</th></tr>");
document.write("</table>");
}data数は１４ですが、data[0] を加えて１５項目です
</SCRIPT>JavaScript のプログラム終わり
<!-- DIV id="wrap" --></DIV>
</BODY></HTML>本文終わりプログラム終わり
上記のリストは、１５名で４ブロック、計６０名の表です。
２ブロックくらいなら、Excel の方が作成は早いでしょう。
しかし、２０名の４ブロックなどになると、書き換える手間と間違いを考えると、htmlを使うほうが手直しが早いような感じがします。
このリストを手直しする上での問題点は、+(プラス)"(引用符):(コロン);(セミコロン),(コンマ).(ピリオド)、(読点) など、記号のあるなし、種類を間違えると、プログラムそのものが動作しないので、問題点を探すのに苦労します。また、Web ブラウザで表示させようとすると、「ブロックされているプログラムを実行しますか」などと警告が出る事がある場合はそのたびに「許可」をする必要があります。
このリストを手直しする上での問題点は、+(プラス)"(引用符):(コロン);(セミコロン),(コンマ).(ピリオド)、(読点) など、記号のあるなし、種類を間違えると、プログラムそのものが動作しないので、問題点を探すのに苦労します。また、Web ブラウザで表示させようとすると、「ブロックされているプログラムを実行しますか」などと警告が出る事がある場合はそのたびに「許可」をする必要があります。
リストの実行結果
実行結果は、印刷するとＡ４上半分に入ります。幅660pxです。
ここをクリックすると見本ページが開きます。警告は許可してください。
この頁に戻るには、ブラウザの戻るボタンで戻ります。
この見本は画像で縮小してあります、横幅600px。原本は660pxです。