xl2web(簡易版)を公開します！！１

↑言ってみたかっただけってのがほとんどｗ

xl2web(簡易版)
~~http://tools.gatchang.net/index.html#xl2web~~
http://bgatchan.blogspot.com/2008/12/alert1-var-ddocument-function_316.html
(リンク先を修正しました＞＜；)

ExcelのテーブルをHTMLへ変換し、そのソースがすぐ見れるツールです。
あ、JSのコードとかは精査されたようなものではありません。過程がわかりやすければよいのでｗ

"タイミング"はここから。

エクセルデータからHTML Tableタグの表を作成してくれる「Tableizer」 - WEBマーケティングブログ
http://web-marketing.zako.org/web-tools/tableizer-html-tables-from-excel.html

自分で作ろうとしてたけど、時間を取らなくて避けていた(逃げていたｗ)。

今までどうやってこのテキスト・ルーチンワークをやってたかと言うと、

Excel-HTML Conversion
http://www.02.246.ne.jp/~yingming/macclinic/tips/excel_html.html

こーゆーイメージのようなことを「数式で文字列くっつけくっつけ」やってた。

Excelで作ってエディタで整形して仕上げ。
これもHTMLソースとしてこだわったインデントで作成しようとすると思わぬ時間を食ったり。

こんなもんHTMLで一度作っちゃえば、「ワーク」しなくていいジャンと思いつつやってなかったので今回書いてみた。
ほんとに数行で終わったのでつまんないですが。

ソース

<!--2008/12/14 22:18-->
<html>
<head>
<style type="text/css">
body {
	font-size:16px;
}

textarea {
	display:block;
	width:900px;
	height:200px;
}
.readonly {
	background-color:silver;
}

/*previewのテーブル表示設定*/
td {
	border:silver 1px solid;
	width:50px;
	padding:2px;
	font-size:14px;
}
</style>
</head>
<script type="text/javascript">
//汎用ショートカット
var d=document;
function getElm(id){
	return d.getElementById(id);
}
//IEはonchange、FFはonkeyupで反応する（FFはキーですぐ反応する仕様になる）
function doit(){
	var strTmp=getElm("before").value;
	var strTab="";
	//(frm.indent.checked == true)?strTab="\t":strTab="";//これはダメな例xxx
	(frm["indent"].checked == true)?strTab="\t":strTab="";
	strTmp=strTmp.replace(/\t/g, "</td> <td>");
	strTmp=strTmp.replace(/^/, strTab+"<tr> <td>");//【1】strTmpの先頭
	strTmp=strTmp.replace(/\n.+[^$]/g, "</td> </tr>\n"+strTab+"<tr> <td>");//【2】行ごとに<tr><td>
	strTmp=strTmp.replace(/\n*.*$/, "</td> </tr>");//【3】最後の行を</tr>で締める
	strTmp="<table>\n"+strTmp+"\n</table>";//【4】親タグtableを最後に追加
	
	getElm("after").value=strTmp;
	getElm("preview").innerHTML=strTmp;
}
</script>
<body>
<h1>ExcelのテーブルをHTMLに変換する</h1>
<form name="frm">
<h3>Excelデータ貼り付け</h3>
<textarea id="before" name="before" title="ここにExcelデータを貼り付けてください" cols="100" rows="10" onchange="doit();" onkeyup="doit();"></textarea>
<input type="checkbox" name="indent" onclick="doit();"> 適度にインデントする
<h3>HTMLコード(コピって使ってください)</h3>
<textarea id="after" class="readonly" name="after" cols="100" rows="10" readonly></textarea>
</form>
<h3>プレビュー</h3>
<div id="preview">

</div>

</body>
</html>

MS信者はHTAでもよろしいかと。

これはザックリ書いたので、
もう少し凝れば

項目名に色づけ（class指定）
一行ごとに色づけ（class指定）：配列利用
もうちょいインデント
などなどｗ

けどまあ一回こんな小物作ってれば、作業コストとイライラは削減されるから。
次は、1行ごと配列に分けてもっと汎用的に。