原文は非表示 PRE に保持しています。
テストは IE6、Firefox3、Opera9.52 ですが、基本的に難しいスクリプト書いて無いので
どうにでもなります。このスクリプトのコアは、以下の数式です。
x = a - Math.floor((i+offset-1)/b) + a * (( i+offset-1 ) % b );
これ以外は全て直感的に処理されています。
今回は実装しませんでしたが、PRE に原文があるのでクリップボードにコピーできるし、
表示サイズは動的に作るので、エンドユーザが自分の解像度に合わせて変更できるし、
ページを超えたら自動でページ作ってもいいし、サーバーと通信してページ送りしてもいいし。
どうしても縦にできない文字とかは画像作って、TD の背景に張ればいいとおもうし、
それ以外では絵文字使えるようにもできるし、イラスト設定機能とかはかぶせるだけですね
列車は空を行き交い、普通の移動にさえロマンを感じられる。
まるでそこはパーティールームのようにも見え、空間の4分の1は外界を望む事ができた。
夜。夜空の美しいその夜。
偶然にしては出来すぎたように列車最後尾に一人の女性が乗っていた。そして、夜空から現れたプラットホームと、静かに列車が交わる。
やがて、緩やかな弧を描くような静止と共に一人の青年が乗り込んできた・・・。
青年は踊る心臓の鼓動を必死で押さえたが、やはりあれだけ練習した予定を忘れてしまった。
不覚にも、ほんの一瞬彼女に見とれたせいである。無理も無い、苦労してここにたどり着いたのは決して偶然では無いのだから。
が、すぐ平静を装って彼女に問いかける。
「すいません。えっと、この列車たしか止まりましたよね?」
「えっと・・何だっけ、あ・・」
<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=shift_jis" />
<TITLE>HTML雛形</TITLE>
<STYLE type="text/css">
* {
font-size: 12px;
}
.column {
border-style:solid;
border-width:1px;
border-color:#000000;
padding: 4px;
}
</STYLE>
</HEAD>
<BODY>
<TABLE
id=book
border=1
style='
border-collapse:collapse;
border-style:solid;
border-width:1px;
border-color:#000000;
display:none;
'
>
<TR>
<TD class="column" style='text-align:right;background-color:silver'>
<B style='font-size:14px;'>睦月</B>
</TD>
</TR>
<TR>
<TD class="column">
<DIV
id="area"
></DIV>
</TD>
</TR>
</TABLE>
<PRE id="src01" style='display:none'>
列車は空を行き交い、普通の移動にさえロマンを感じられる。
まるでそこはパーティールームのようにも見え、空間の4分の1は外界を望む事ができた。
夜。夜空の美しいその夜。
偶然にしては出来すぎたように列車最後尾に一人の女性が乗っていた。そして、夜空から現れたプラットホームと、静かに列車が交わる。
やがて、緩やかな弧を描くような静止と共に一人の青年が乗り込んできた・・・。
青年は踊る心臓の鼓動を必死で押さえたが、やはりあれだけ練習した予定を忘れてしまった。
不覚にも、ほんの一瞬彼女に見とれたせいである。無理も無い、苦労してここにたどり着いたのは決して偶然では無いのだから。
が、すぐ平静を装って彼女に問いかける。
「すいません。えっと、この列車たしか止まりましたよね?」
「えっと・・何だっけ、あ・・」
</PRE>
</BODY>
<SCRIPT language="javascript" type="text/javascript">
base = document.getElementById("src01").firstChild.nodeValue;
if (window.navigator.userAgent.toLowerCase().indexOf("opera") > -1) {
base = base.replace(/\r/,"");
}
a = 30;
b = 25;
str = "";
str = "<table border=0 id=tbl style='table-layout:fixed;'>"
for( j = 0; j < a; j++ ) {
str += "<col style='width:1.3em;'>"
}
for( i = 0; i < b; i++ ) {
str += "<tr>"
for( j = 0; j < a; j++ ) {
str += "<td style='text-align:center;'> </td>"
}
str += "</tr>"
}
str += "</table>"
document.getElementById("area").innerHTML = str;
obj = document.getElementById("tbl");
td = obj.getElementsByTagName("TD");
str = "";
offset = 1;
for( i = 1; i <= base.length; i++ ) {
x = a - Math.floor((i+offset-1)/b) + a * (( i+offset-1 ) % b );
bstr = base.substr( i-1, 1 );
switch( bstr ) {
case 'ー':
case '−':
case '-':
td[x-1].innerHTML = "|";
break;
case '、':
case '。':
td[x-1].innerHTML =
"<DIV style='position:relative;top:-8px;left:7px;'>" + bstr + "</DIV>";
break;
case '「':
td[x-1].innerHTML =
"<DIV style='position:relative;top:8px;left:-8px;'>" + bstr + "</DIV>";
break;
case '」':
td[x-1].innerHTML =
"<DIV style='position:relative;top:-10px;left:7px;'>" + bstr + "</DIV>";
break;
case 'ぁ':
case 'ぅ':
case 'ぇ':
case 'ぉ':
case 'ゃ':
case 'ゅ':
case 'ょ':
case 'っ':
case 'ァ':
case 'ゥ':
case 'ェ':
case 'ォ':
case 'ャ':
case 'ュ':
case 'ョ':
case 'ッ':
td[x-1].innerHTML =
"<DIV style='position:relative;top:-1px;left:4px;'>" + bstr + "</DIV>";
break;
default:
td[x-1].innerHTML = bstr;
break;
}
if (window.navigator.userAgent.toLowerCase().indexOf("msie") > -1) {
if ( bstr == "\r" ) {
offset += b-((i+offset-1)%b);
}
}
else if (window.navigator.userAgent.toLowerCase().indexOf("firefox") > -1) {
if ( bstr == "\n" ) {
offset += b-((i+offset-1)%b);
}
}
else if (window.navigator.userAgent.toLowerCase().indexOf("opera") > -1) {
if ( bstr == "\n" ) {
offset += b-((i+offset-1)%b);
}
}
else {
if ( bstr == "\r" ) {
offset += b-((i+offset-1)%b);
}
}
}
document.getElementById("book").style.display = '';
</SCRIPT>
</HTML>
|
