Web Novel FAQ

Web Novelの簡単なFAQです。
一度でも目を通しておくといいかと思われます。
FAQというより製作者のメモ書きに近いです。

■利用前に:とりあえず試す
Web Novelの設置は初心者の方にとっては割合難しいかと思います。 設定する個所が意外とありますし、 説明が悪くてよく分かりにくいという所もあると思います。
これも偏に作者の力不足説明不足ではあるのですが、 ここではもっとも簡単にWebNovelを試す方法を御紹介します。

まず、Scenario Converterのページを お手持ちのIE4.0/IE5.0以上で開きます。 これは普通の文章をWebNovelのシナリオ形式に変更するというプログラムなんですが、 とりあえずネット上で拾ってきた日記などの文章を、 ここのテキストエリアに張りつけましょう。 そして、[変換(formに出力)]のボタンをおもむろに押すと、 張りつけられた文章が変換されて出てきます。 この状態で、画面中央部に見える[Preview Mode(動作不安定)]のリンクをクリックしましょう。 すると別ウインドウが開き、黒い画面が出力されると思います。 この画面上をクリックすると先ほど張りつけた文章が、 WebNovelとして表示されるという仕組みです。

上の手順は簡単なのですぐに出来たと思います。 しかし、上記の様にネット上の日記などの文章をそのまま張りつけた場合、 文章がWebNovelの画面上からすぐはみ出してしまい、とても内容を見る事は出来ません。 そこで編集する必要が出てきます。編集というと難しく感じるかもしれませんが方法は簡単です。 日記の文章を再度張りつけて、 今度は適度な位置で改行し、そしてまた適度な場所で空行を挿入しましょう。 文章を改行する事によりWebNovelの一行となり、 また空行(何も書かれていない行)を挿入する事により、 次のページという概念が出てきます。

例えば、
---------------------
「で、犯人は?」野田が聞く。「何しろアッというまの出来事で、気がついたら純ちゃんは頭を撃たれて、床に倒れてました。私は何が起きたのか分からずにただ呆然としていただけです・・。本当にアッというまでしたね、5秒くらいの出来事でした。」「犯人の体格について教えてくれ。」「身長は170〜175cm位だったかな?。体格は中肉中背という感じでした。青いジーンズに、皮のジャンパーを着ていたと思います。」「じゃ、犯人の人相についてはどうかな。なにか覚えてることあるか?」「帽子を目深にかぶり、薄い色のサングラスとマスクで顔を隠してたので、顔は全然分かりません」榊は呆然とした表情をしながらも、落ち着いて答えた。それを聞いた野田は、 「こりゃ、長引きそうな事件だ・・・」と溜め息をついた。(ん?被害者の吉岡さんは店の奥で一人で飲んでたはずだ。そして、犯人は中に入ってすぐに、吉岡さんを銃で撃って、そしてすぐ逃走したと、榊さんは言ってるが・・・・・)
---------------------
上記の様に全く改行や空行を入れていない状態で、張りつけた場合、 一行でWebNovelは終わってしまいます。これでは面白くもなんともないので、 下記のように改行や空行を挿入してみます。
---------------------
「で、犯人は?」
野田が聞く。
「何しろアッというまの出来事で、気がついたら純ちゃんは頭を撃たれて、床に倒れてました。私は何が起きたのか分からずにただ呆然としていただけです・・。本当にアッというまでしたね、5秒くらいの出来事でした。」
「犯人の体格について教えてくれ。」
「身長は170〜175cm位だったかな?。体格は中肉中背という感じでした。青いジーンズに、皮のジャンパーを着ていたと思います。」

「じゃ、犯人の人相についてはどうかな。なにか覚えてることあるか?」
「帽子を目深にかぶり、薄い色のサングラスとマスクで顔を隠してたので、顔は全然分かりません」
榊は呆然とした表情をしながらも、落ち着いて答えた。それを聞いた野田は、
「こりゃ、長引きそうな事件だ・・・」
と溜め息をついた。
(ん?被害者の吉岡さんは店の奥で一人で飲んでたはずだ。そして、犯人は中に入ってすぐに、吉岡さんを銃で撃って、そしてすぐ逃走したと、榊さんは言ってるが・・・・・)

---------------------
とまぁこんな感じで適当に改行を入れて、また空行も適当な位置に挿入してみました。 今度はこれを張りつけて実行してみれば、 大分WebNovelらしい感覚を味わう事が出来ます。

ちなみにどの文章を張りつけても最後にはエラーが発生してしまいます。 これは文章を止める命令を記述していないため、起こるエラーです。 エラーがいやという方は最後の行に
#WAIT:true
という命令を挿入して下さい。エラーが出ないようになります。

■利用前に:用意するもの
WebNovelを利用する上で用意するものは、当然シナリオと成る文章画像・音楽などのバイナリデータです。
シナリオは当然自前で用意しないといけません。 書いたシナリオはScenario Converter で変換出来るように、 対応の形式で編集しておく事をお勧めします。 (と言っても、適度に改行してと空行を挿入して命令を少し書くだけですが)
背景画像データなどは無理して専用の画像を作らずに、 黒一色の背景画像など単純なものでもいいと思います。 これでも雰囲気は割合楽しめると思います。 背景画像サイズはデフォルトでは、600*400の設定となっています。(変更は可能です)

画像やシナリオが用意出来たら、あとはプログラムをダウンロードしましょう。 ここからWebNovelの最新版を手に入れる事が出来ます。
ダウンロード後、任意のフォルダに解凍しましょう。

■設定編:必要最低限の設定
ファイルを解凍したらまず"conv.htm"を開きます。これはScenario Conveterです。 事前に用意していた対応形式の文章を張り付けて変換しましょう。
変換後、出力された文章を、 今度はconv.htmと同じディレクトリに解凍された"scenario.js"というファイル をメモ帳などのエディタで開き、張り付けましょう。 これがシナリオファイルとなります。(ファイル名は"scenario.js"でなくても構わないのですが、 余計な設定をせずに済むのでこのまま使います。)

今度はまた同じディレクトリに解凍されている"novel.htm" (これがWebNovelで遊ぶ為のHTMLファイルとなります。) をメモ帳などのエディタで開きます。
そして、ここを参考にして、開いたHTMLを編集しましょう。
何か変わった事をしていなければ、 設定する個所は「○背景設定」の設定だけで済むと思います。 ここに自前で用意した背景(タイトル)画像へのパスを書きましょう。
編集後保存して、 今編集したファイルをブラウザで開けば自作のWebNovelを楽しむ事が出来ると思います。

■基本編:エラーを出さないためには
プログラム自体が巨大なものの為、一度エラーが出ると大変です。 作った製作者自身もかなり悩む事あります。
エラーをなるべく出さないように設置するには以下の手順に沿って テストしてみて下さい。

(1)まず、命令の一つも無い文章を変換し、それをシナリオファイルとして実行してみる。
これがまず重要です。何の命令も無いただの文章を(改行や改頁くらいは設定しておきます。) ただ淡々と最後まで読めるかがポイントです。 (最後の一行は#WAIT:trueをいれていない為エラーが出ちゃいますが。) この時点でエラーが出るようでしたら、"(ダブルクォーテーション・半角)が文章の中に 紛れ込んでいてそれが悪さしている可能性が高いです。 例えば、<a href="http://xxx.xxx.xxx/">link</a> というタグが文章の中にある場合など気をつけてください。 "を使う為には"の前に\を付けて、\"のようにします。

(2)命令を書く。但しJavaScriptのコードが書かれている命令は書かない。
主に、BGIMAGE/BGSOUND/FLASH/CHARACTER/DISPALL/URL/WAITなどの命令を書きます。 SELECT/WARP/COMMANDなどは後回しにしましょう。
この時点でエラー(動かない・画像が出ないなどの問題)が出る場合は、 全角/半角・大文字/小文字間違えていないか、 もしくは命令の記述の仕方を間違えていないか、命令表をよく確認して下さい。

(3)命令を書く2。
後回しにして来た、SELECT/WARP/COMMANDの命令を書きます。ここでエラーが出る事が多いです。 エラーが出る場合は大体、 「命令の記述の仕方を間違えている。」 「WARPやSELECTの命令で、飛ぶ先のシーン名、ページ番号などを間違えている。 (スペルを間違えていないか、半角を全角にしていないか、大文字と小文字を間違えていないか)」 「COMMANDの中身のJavaScriptコードが間違えている。」などが考えられます。

■基本編:タグの使用について
HTMLタグを用いて、文字の色やサイズなどを変更したい場合は、 そのタグを<TAG>...</TAG>というタグで囲む必要があります。<br> 例えば、<font color=RED>文字を紅く</font>と文字を赤くした場合は、 <TAG><font color=RED>文字を紅く</font></TAG>とこのようにして下さい。
なおタグの部分は仕様上一括表示されてしまいます。

■基本編:HTMLでの整形について
WebNovelでは基本的にHTMLタグを使った文章の整形は出来ません。 (文字を右に寄せたり、フォームを表示したりする事。) これは文字のアニメーション表示時に、 1文字ずつ文字を取得して表示するため、タグが混ざっていると ブラウザが勝手に閉じタグを入れてしまうという仕様の為避けられない問題です。
しかし一応の回避手段として、命令"DISPALL_n"があります。 この命令は指定の一行をアニメーション表示ではなく一括表示で表示します。 よって思い通りのHTMLでの整形が可能です。

■発展編:フラグデータの取り扱いについて
WebNovelではフラグ配列を用意しています。 このフラグ配列を利用する事により、 分岐処理や、名前記憶(文字列記憶)などの処理が可能になります。
フラグにデータを記録する方法は簡単です。以下の関数をコールします。
  flagRegister(number, string)
numberには記録する配列の番号を、stringにはその配列に記録する文字列、又は数字を渡します。 利用出来る番号は0〜です。例えば、配列番号0に、"康樹"というデータを格納したい場合は、
  flagRegister(0, '康樹');
とするだけです。 このコードをどこから呼び出すかは、色々と手段はありますが主に、 (1)"COMMAND_n"の命令を使う、 (2)"SELECT"命令を利用して実行する、 (3)HTMLを出力してそこにイベントを記述する。 という方法があると思います。

フラグデータを読み出す方法ですが、JavaScriptを使うと以下のようになります。
  変数 = flagReader(number);
numberには読み出したい配列の番号を。 上記のようにflagReaderを呼び出す事により変数に配列の情報が渡されます。 存在しない配列の番号を指定した場合は空文字列が返されます。 この配列の情報をどう使うかは色々と考えられる事があると思います。

ちなみに文章中に、読み出したフラグデータを挿入する事が出来ます。 読み出したい配列を<%number%>(numberには任意の数字。例えば<%0%>) と括る事により、文章中に読み出した情報を挿入する事が出来ます。 これは主に、名前などを読み出す時に使います。 他にも隠し文章をある条件下の元で出力したい時などにも。

■発展編:条件判定処理(1)
WARP命令などで用いられる条件判定の文法について軽く御紹介します。
ある程度プログラミング経験のある方なら分かると思いますが、 条件判定にはJavaScriptの演算子を用います。もっと端的に言えばif(......)文の中身そのままです。

flagReader(5) == 1   

例えば上のような条件をWARPに組みこんだ場合、 フラグ配列[5]の値を取得してから、1と比較して同じ数だったら、 このWARPを実行します。 "=="という比較演算子は右辺と左辺がイコールであるかを比較します。
同じ数じゃないという場合(否定)は、"!="を用います。
flagReader(5) != 1   
上記の例ですと、1じゃないならこの命令は実行されますが、1だった場合は 実行されず無視されます。

■バグ:文章表示時の問題
一応バグじゃなく仕様です。(いい訳)
文章をアニメーション表示している時に、一行の最後の文字が表示された後、 いきなりその文字が次の行の頭に移る事があります。 これは禁則処理が自動的に働いている為だと思われます。 これは今のところ回避手段はございません(スタイルシートなどに禁則処理をOFFにする機能がない為)。 どうしても気になる方は、表示モードを一行一括モードに設定してくださるようお願い致します。

■その他:Low-modeについて
サウンドノベルに未対応のブラウザで物語を楽しむ為のモードです。 例えば、Netscape3.xや4.x、Dream Passportなどでノベルにアクセスすると、 物語と画像が一度に表示されます。また、選択肢を選択して物語を進める事も可能です。
一応おまけみたいなものなので、動作については保証致しかねます(^^;。 ちなみに、物語をセーブしたい場合はそのページをブックマークして下さい。

■その他:Netscapeへの対応について
β版まではNetscape4.0xでも動作可能だったのですが、 1.00になるにあたり、IEのみの対応となりました。
色々とやってみたのですが、 (力不足の為)どうしても上手く処理出来ない部分が出来てしまい、 Netscapeの対応は見送らせて頂きました。
Netscapeに関してはW3CDOMに対応するであろう次期バージョンがリリースされてから、 対応を図りたいと思っています。


[ .js room ]