たてがき君のページ 解説編 分身の術3(Plug-in) 変身の術3(横→縦) まるやるま君 縦書の考察
IE4/5 NC4専用版→ 分身の術4(Plug-in) 変身の術4(横→縦) 復活の術4(縦→横) IE忍法帖

たてがき君〜分身の術〜模擬Plug-inの使い方

<目次>

 分身の術〜Plug-inとは?〜概論
 分身の術〜応用編
 分身の術〜ページめくりタイプ


分身の術〜Plug-inとは?〜概論

 分身の術はネーミングが悪いせいか、変身の術との違いが分かりにくいようじゃ。確かに見栄えは同じであり、違いと言えば入力欄やらボタンが有るか無いかだけじゃ。しかし、HTMLソースを良くごらん下され。えっ?違いが分からぬと?そうじゃな。分身の術・変身の術のページのHTMLソースを見ても、確かに、違いがわかりにくいかも知れぬ。では、次のページを見比べて頂き度い。但し、違いがわかりやすいように、IE4/NN4以上でしか見る事が出来ない「変身の術4」の方を使っておるので注意くだされ。

分身の術4での表示 変身の術+IE忍法帖で作成した縦書HTML使用

 表示は全く同じじゃな(注1)。では、それぞれのHTMLソースを見比べて頂き度い。分身の術は、表示されている「文章が横書」で書かれているのに対して、変身の術では当然ながら表示画面どおり「文章が縦書」で書かれているのだな。即ち、分身の術では、いわゆるPlug-inと呼ばれるものを使っての縦書表示と同じことになるのじゃ。尤も専用のPlug-inを使えば、括弧・記号・半角文字などがワープロや縦書専用ソフトなどと同様きれいに表示される事になるがの。分身の術とは「たてがき君〜変身の術」とスクリプトが同じ故、「変身の術」の「分身」として機能するということじゃ。余計分からなくなったら無視してくだされ。まぁ、「JavaScriptを使ってPlug-inの真似事も出来る」と言う事であり、それ以上の意味はない。実用性については拙者も甚だ疑問を抱いておる。ふぉっふぉっふぉっ。(だが、ご使用頂いている方もいるのじゃな...感謝)

(注1)IE4/5/5.5で見た場合には括弧等が異なって見える。(分身ver1.11以降の新機能と変身:IE忍法帖)

 先ず初めに一般のPlug-inと、一般的な縦書HTML作成ソフトで作成したHTML方式でのメリット・デメリットを考えてみようかの。Plug-inとしては、読売新聞のホームページで今年から始まった「縦書Plug-in」などがあるのじゃな。しかし、これは自由に使わせてもらえないようじゃから、テキストエディター関連のPlug-inなどを想定して考えてみよう。こんなもんがあったのじゃな。すばらしい。

表1メリットデメリット
Plug-in
方式
  1. 横書き文書が残っており後で編集するのが楽。
  2. 無駄なタグ・空白がなくファイル容量が小さい。
  3. ワープロ同様、括弧・半角文字・記号もきれいに表示。
  1. Plug-inをインストールしないと読めない。
    (自動インストールのものはあるんじゃろか)
  2. 通常読めるOS・ブラウザに制限あり。
    (Windows専用とか、最新ブラウザのみなど)
  3. 無償でWEB作成者が使えるものが少ない。
  4. 表示までに多少時間が掛かる。
縦書HTML
方式
  1. いかなるOS、ブラウザでも大抵は縦書で読める。
  2. インストールなどの作業をせずして読める。
  3. 通常、Plug-inより表示の時間が短い。
  1. 括弧・半角文字・記号に使用制限あり。
  2. タグ・空白の多用によりファイル容量が大きくなる。
  3. 一度作った縦書文書を校正するのは難しい。
    (長文では元文章を別に保管しない限り不可能か)

 従い、美しく見せる為には「Plug-in」方式、誰にでも見て貰えるという汎用性の観点からは「縦書HTML」方式と言う事がいえるだろう。リピーターを主な対象としたページであれば「Plug-in」方式、新規訪問者を期待しているページであれば「縦書HTML」方式と言う感じじゃな。再編集(注)の事を考えると長文か否かによっても、おのずと決まってくるじゃろう。

(注)
 縦書HTMLソフトの中には、元の横書き文章を保存するものや、縦書HTMLスクリプトにコメントとして横書き文章を書き込んでおくものもあるようじゃな。前者は管理が面倒なときもあるし、なくしてしまうこともあるかも知れん。後者はただでさえ膨らんだファイル容量が更に膨らむというデメリットもある。

 では、「たてがき君」では何を目論んでいるのか。上の表と対応させて違いを書いてみようかの。ここでは、Plug-inに近いIE4/5、NN4専用版の「分身の術4」に限って記述する。赤字のものは重要な相違点じゃが、黒太字のものは比較対象によっては違いがない場合もあるものじゃ。

表2メリットデメリット
分身の術
(擬似Plug-in)
  1. 横書き文書が残っており後で編集するのが楽。
  2. 無駄なタグ・空白がなくファイル容量が小さい。
  3. ワープロ同様、括弧・半角文字・記号もきれいに表示。
    括弧・半角文字・記号に使用制限あり。
    IE4/5.0xでは、()【】の擬似表示表示可能。
    IE5.5では、()『』【】などの全角括弧はOS保有の縦書きフォントにより全て縦書き表示可能。
  1. Plug-inをインストールしないと読めない。
    インストール不要
  2. 通常、読めるOS・ブラウザに制限あり。
    (Windows専用とか、最新ブラウザのみなど)
    Win版IE4/5・NN4相当のJavaScript搭載ブラウザでないと表示不可。OSは無関係(注1)。
  3. 無償でWEB作成者が使えるものが少ない。
    たてがき君はフリースクリプト
  4. 表示までに多少かなり時間が掛かる。
変身の術
(縦書HTML)
  1. いかなるOS、ブラウザでも大抵は縦書で読める。
  2. インストールなどの作業をせずして読める。
  3. 通常、Plug-inより表示の時間が短い。
  1. 括弧・半角文字・記号に使用制限あり。
    IE忍法帖を使用すればIE4以上で丸括弧の擬似表示可能(IE5.5では縦書きフォント表示)
  2. タグ・空白の多用によりファイル容量が大きくなる。
  3. 一度作った縦書文書を校正するのは難しい。
    復活の術で元の横書き文書に戻して編集できる(注2)。

(注1)
本来Windows版のNN4で動けば、マック版・UNIX版など他のOSのNN4でも(メーカーの意図としては)動くはずなのだが、残念ながらそう簡単ではないのじゃな。但し、マック版でのNN4.7では「分身の術4」は動作しているとの報告がある。これから情報収集が必要じゃ。Linuxでも動く可能性があるが、SunOSでは動かない可能性が高い(別スクリプトでの経験)。

(注2)
「解説編」で説明している通り完全復活は出来ないが、再編集の為の復活の観点からは、まぁ充分じゃないかと思っておる。長文の場合には便利だと思うがの。

 表2で良く見比べて頂くと『何となく』は分かって頂けたじゃろうか。分身の術はPlug-inのデメリットの一部を克服し汎用性を持たせるのが目的じゃ。ここでいう汎用性とは、新規訪問者にPlug-inのインストール作業をしてもらう必要がなく、Windows以外のOSでも見て貰える(まだ未確認じゃがの)ということじゃな。一方、変身の術は復活の術によって長文の場合でも再編集可というものを目指したものでごじゃるよ。
 果たして目的が果たせたのかどうか、拙者にも分からんのが正直なところじゃ。復活の術を作る前は、分身の術(模擬Plug-in)も「そこそこ便利」と思ったのじゃが、復活の術を作ってしまったものじゃから、実を言えば分身の術は使い道がない気がしておるのが正直なところじゃ。特にIE3、NC2/3でも使える分身の術3は汎用性が高くなる一方、HTMLの中にJavaScriptをいちいち記述する必要があることから、ファイルが巨大となり実用性は殆どないといえるじゃろう。

 ま、気を取り直して分身の術4(模擬Plug-in)の使い方を説明しよう。冒頭に記載した分身の術4での表示を開いて、HTMLソースを見ながら読んで頂き度い。まぁ、面倒じゃろうから次の説明だけでも分かるじゃろう。

注意:以下の解説は「変身の術4(NETSCAPE6 PR1対策版)」には一部当てはまりません。上記の分身の術4での表示での使用法に関する解説です。N6 PR1対策版を使用する場合には、スクリプト名、タグが違うので気をつけてください。尚、N6 PR3より変身の術3でも表示できるようになっています。

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<TITLE>分身の術4の例示</TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="TateConv.js"></SCRIPT>
</HEAD>
<BODY bgcolor="#66CCCC">

 上の赤字の部分は縦書変換の為の外部スクリプトであるTateConv.jsを呼び出すためのもので必須である。勿論TateConv.jsは、縦書表示させるHTML文書に対しての相対URL、若しくはhttp://www.xxx.yyy.jp/~abc/efg/TateConv.jsなどの絶対URLで記述する。この例では、同じディレクトリにある場合じゃな。画像をリンクさせるときなどと同じことじゃ。あと、青字は、画面全体の背景色を変えるためのもので縦書部分の背景色ではないこと、注意されたし。

<form name="frm"><!-- inputタグの下から元文章を記入する。半角のダブルクォーテーション( " )は使えません -->
<input type="hidden" name="str" value="

 むだじゃ、むだじゃ

 「むだじゃ、むだじゃ」とは、かのムーミンに登場した「じゃこうねずみ先生」のお言葉じゃが、すばらしきお言葉である。ムーミンの「息をするのもむだなの?」との素朴な疑問にも、言葉を詰まらせながら「むだじゃ、むだじゃ」と啖呵を切っておったのは鮮明に覚えておる。
 ここで生涯の師、いや座右の銘となった「むだじゃ、むだじゃ」を元に『むだじゃ教』を興す事をわしは考えた。世の中、ますます世知辛くなってきておるが、何事も「むだじゃ、むだじゃ」とさらりと流せなくては、ストレスも溜まる一方じゃな。
 しかし、難しいぞ。わしも未だに煩悩に悩まされつづけておる。何時になったら、じゃこうねずみ先生の境地に達するじゃろなぁ。
"></form><!-- 元文章ここまで -->
<SCRIPT LANGUAGE="JavaScript"><!--

document.write(seikei(document.frm.str.value,20,20,1,0,0,"#dcdcdc",1))<!--数字を変える。(字数、行数、字寸、字間、行間、縦書き背景色、枠)-->
//--></SCRIPT><p>

 上記で赤字の部分は変更してはならぬ。何も考えずそのままコピーして貼り付ける事じゃ。
 次に縦書表示をしたい元文書を上表の黒字部分に書けばよいのじゃな。これだけじゃ。これで縦書が表示されるのじゃな。

制限事項:文章中に半角のダブルクォーテーション " は使えない

 勿論、縦書の表示の仕方を変えることも出来る。青字で書いてある数字などがそうじゃ。半角カンマ , や背景色である#dcdcdcを囲んでいる "" も間違わないように書く必要がある。前から順番に「字数」「行数」「字寸」「字間」「行間」「縦書背景色」「枠」「右揃え」の指定をしておる。変身の術で使っているものと同じなので、変身の術を見ながら書けばよいじゃろう。「枠」の部分は半角数字の 1 0 のどちらかを入れる事になるが、 1 枠表示 0 枠無表示じゃな。


分身の術〜応用編

 更に【太字】【漢数】【完縦】【頁番】などの調整もしたいとか、全体の背景色を変える「背景色変更」バーも表示させたいなどはどうすればよいかのぉ。取り敢えず、次のようにオプション(赤字部分)を入れてみてくれるかの。大文字小文字の区別はせねばならぬ。また、各オプションは半角英数字である事に加え、それぞれのオプションの後に半角の ; を入れる事も忘れてはならぬ。(こちらの方は、正規オプションではない)

<SCRIPT LANGUAGE="JavaScript"><!--
BGCOL=1;PAGE=0;HR=3;KANSU=4;BOLD=1;FCOL='#333333';
document.write(seikei(document.frm.str.value,20,20,1,0,0,"#dcdcdc",1))<!--数字を変える。(字数、行数、字寸、字間、行間、縦書き背景色、枠)-->
//--></SCRIPT><p>

 (正規ではない)オプションの一部を紹介しよう。JavaScriptが分かる人であれば、スクリプトを見れば分かるじゃろう。また、TateConv.jsの該当部分を変えることで、いちいちオプション設定をしなくても標準の見え方を変える事も出来るので、適当に変えてくだされ。

 これらのオプションも入れると分身の術4の例示2のようなことになる。この例では、縦書きブロックの間隔を広げたり、字色を変えたりもしているが、需要があれば正規オプションに入れようかの。尚、飽く迄例示じゃから見栄えはいまいちじゃな。
尚、これらのオプションは今後変更されることがあるので注意。

BGCOL=1背景色バーを付ける。(0でオフ)
BOLD=1【太字】モード(0でオフ)。自動的に【完縦】となる。
KANSU=1【漢数】モード。1から4(究極モード)まで。(0でオフ)
K_TATE=1【完縦】にする。(0でオフ)
PAGE=0【頁番】を付けない。(1で付ける)
HR=3【水平】による水平線なしと同じ。0-3を指定する。HR=0 で水平線。
4-6で水平線長さ変更。(2000/11/20追加
KPG=0強制改頁指定。0でオフ、デフォルトは2。()
FCOL="#333333"字色の設定。
BGP="asi.gif"背景画像の設定。元のHTML文書よりの相対URLを指定。
KPG=0強制改頁指定。0でオフ、デフォルトは2。(2000/11/20追加

 既知のバグ:「オプション」が、次に開く別ページにも引きずられてしまう。JavaScriptでグローバル変数にしている為じゃが、気になるなら全てのオプションを書けばいいので、まぁええじゃろ。(正規オプションでは、この問題はない)

 実はNN3は外部JavaScriptに対応しているので、「分身の術3(Plug-in)」のスクリプト部分を外部ファイルとすれば、なんとNN3でも使えるのじゃ。IE4/5、NN3/NC4で使えるとなると更に汎用性が高まるのじゃが、NN3の場合時として表示がJavaScript外部ファイルになることがあるのじゃ。ブラウザで【再読込】や【リロード】【最新の情報に更新】などのボタンを押せば、次からは縦書で表示されることが殆どなのじゃが、いったいどうなっておるのじゃろうな。巷ではネスケのバグといわれておる。NN4でも同じ問題が起こるかどうかは良く分からぬ。何れにせよ、「変な表示が出たら【再読込】してください」の注意書きが必要じゃな。因みに、分身の術3(Plug-in)はSunOS版NN3.04では動いておるようじゃから、スクリプトとしての汎用性は高いかも知れんのじゃがのぉ。


分身の術〜ページめくりタイプ

 「模擬Plug-inであればページめくり方式が良い」とのご指摘を頂き、早速開発に取掛かったでごじゃる。解説なし。ご意見ご希望あればメールを頂きたいでごじゃるな。

たてがき君〜分身の術3〜別タイプ たてがき君〜分身の術4〜別タイプ

※ページめくりタイプ3と4の違い
 4の場合は NN2/3、IE3 などの古いブラウザでは TEXTAREA で横書き表示させるのに対して、3では NN2、IE3 では通常の横書き表示(document.write()によるもの)、NN3では複数段組の縦書き表示をしている。4の方がHTML内のスクリプトが簡単であることに加え、元文章の記号制限(半角ダブルクォーテーション)がない。古いブラウザでの閲覧者の有無によって使い分けていただきたい。因みに、同じ IE5/NN4 でも4のほうが若干早く表示される。

注意:オプションの設定方法がどんどん変わる可能性あるので気をつけてください。

取敢えず出来たこと。(汎用性のある3の場合を記載)

 うぬぬ、なんだか Plug-in ぽくなってきたでごじゃるぞ。
 縦書きで見てもらうこと以上に、出来る限りの人に元文章を見てもらうことが大事であるから、その点上記の仕様で問題なかろう。

検討課題

  1. NN3の場合、外部スクリプトが表示されることがある。(再表示すれば直ることが多い)
  2. MAC版 IE4.5で不正動作(縦横混じった表示)、MAC版 IE5 ではブラウザ毎落ちると言う致命的エラーが出ている(2000/4/16 発覚)。IE4.5についてはJavaScriptの仕様が違う可能性大。IE5は手がかりも掴めず(変身の術が動くかどうかも分からない...)。

<主な変更点>

2001/9/16IE6対応
2001/3/26変換元文章が長い場合表示まで時間がかかるので「しばらくお待ちください」表示をつける。
2000/11/20Netscape6 正式版に対応
2000/9/4Netscape6 PR2に対応(変身の術4はかなりまともに動く)
2000/7/17字間を任意に指定できるように修正。(position:aboslute にて解決)
2000/7/3⌒ を利用して┏┓も【】を90度横にした記号に近くして表示(IE4/5のみ)→副作用で字間を強制的に広くしている。
2000/6/26IE4/5.0xで閲覧時┌┐┏┓などの全角二字括弧を ⌒ で表示(閉じ丸括弧はFilterで表示)。
2000/5/22縦書き部にマウスを乗せたとき操作方法を表示。ステータスバーへの頁番表示廃止。
2000/5/15縦書き表示部のクリックで、下側:次頁、上側:前頁 に進むみ、キーボードで N:次項(Next)、B:前項(Back)、T:第一項(Top)、E:最終頁(End)の操作実装(IE4/5、NC4共通)。但し、NC4の場合は縦書き枠外左右のクリックでも移動してしまう。
なお、これら機能付加により、【進む】【戻る】【最初】【最後】の各ボタンは廃止。また、頁数をステータスバーに表示(縦書き枠下の頁数表示も廃止するべきか?)
ページ移動の際、常に縦書き枠がウィンドウ内に表示させる機能付加。(初期表示の際も同じ)
2000/5/8NN4 でも縦書き表示部のクリックで次ページに進む。
2000/5/1IE5.5β版の縦書きスタイルを利用し、IE5.5βでの閲覧時には()【】『』などもそのまま(代用ではなく)縦書き表示させる。
HTML側のスクリプトの変更(簡素化)。NN3での縦書き表示(ページめくりではない)は強制的に完縦1とする。
IE4/5では縦書き表示部のクリックで次ページに進む。
2000/4/23縦書きブロックの最後も強制的に指定した縦書きブロックサイズ(字数×行数)にし、常に右揃えとなるように変更。ページ数は「第 2/5 頁」のように総頁数もつけた。
2000/4/16動作が安定。特にNN4.01eで以前はブラウザ毎落ちることがあったのが、拙者の環境では落ちなくなった。NN4.xにおける無表示も改善(起こらなくなった)。window.setTimeout()での「表示遅延」で、内部エラーが起こらなくなったようじゃ。
2000/4/9オプション変更(背景画像、字色)。【進む】【戻る】ボタンでの循環を止める。頁番背景色を縦書き枠背景色にする。NN4で縦書き枠とボタンの間に空行があったのを修正。NN4で横幅が800px以上の場合に左右移動ボタンをつける。横書き表示の際の字色・背景色を自動化。
2000/4/2β版完成

本ページの内容は出典を明らかにする限り無断転載を許可します。
最終更新日:2001年9月16日 by 縦の会