最初に
Windows用とLinux用のexeのzipができましたので、ご利用下さい。
まずは適当な文章を書く
適当にこんな感じの文章を書いたとします。
@scene({season:"summer"}){ @scene({time:"morning"}){ 遅刻したので、$time("朝食")はたべません！ } @scene({time:"noon"}){ $time("ランチでも")いかが？ } @scene({time:"night"}){ $time("日も暮れたし")もうそろそろ帰らない？ } }
リリースモードでコンパイル
これをリリースモードでコンパイルします（リリースモードは、途中の余計な空白を取り除くモードです。出力結果がコンパクトになります）。
[foo@localhost] tnc --release sample.tn > sample.html
コンパイルのexeがMacでは小文字の
tncですが、Windowsでは大文字のTnc.exeだと思います。各自ここは書き換えて使って下さい。
できあがったsample.htmlを見ると、こんな感じになっています。
/Users/u1/Downloads/sample.tn(line:1) 'season' is not annotated in this block! error count = 1 <scene data-season='summer'><scene data-time='morning'>遅刻したので、<time>朝食</time>はたべません！</scene><scene data-time='noon'><time>ランチでも</time>いかが？</scene><scene data-time='night'><time>日も暮れたし</time>もうそろそろ帰らない？</scene></scene>
冒頭に「season制約（summer）を注釈してないよ！」というエラーが出ていますが、ここでは気にしないことにします。
縦書き文庫のビューアーにドラッグ・アンド・ドロップ
とりあえずhtmlファイルができたので、縦書き文庫に行って、適当な作品を開きます。
開いたら、作品の本文部分にsample.htmlをドラッグ・アンド・ドロップしてみましょう。するとダイアログが開くので、一般には次のように設定して「読み込む」を押します。
すると次のように内容が表示されます。
しかしちょっと変だということに気付いたでしょうか。冒頭のエラーのことではありません。別々の@sceneで分けたブロックが、すべてつながって一行の中にまとめられてしまっているのが問題です。
なぜこんなことになるかというと「本来HTMLに<scene>なんていうタグはないから」ということになります。
そして、一般に登録されていないタグは、インライン・タグと認識されるのがお約束です。
つまり<scene>は<b>とか<span>とかと同じようなタグと認識されたので、全ての文章が一行につながってしまったわけです。
設定ファイルを作成する
これをどうにかするために、まずは次のコマンドを打って、tnconfig.jsonを作成します。
[foo@localhost] tnc --init
上のコマンドをうつと、作業ディレクトリにtnconfig.jsonというファイルができるはずです。
さっそくこのtnconfig.jsonをエディタで開いてみると、途中に@sceneタグを<scene>ではなく<div>タグにマッピングする処理が書かれています。次がそれに該当する箇所です。
{ "markupMap":{ (中略) "@scene":{ "tagName": "div", "className": "<name> <arg2>" }, (中略) } }
上の抜粋した部分では、初期状態のtnconfig.jsonは@sceneを<div class='scene'>に変える、と書いてあります。
さて、tncは作業ディレクトリにtnconfig.jsonがあれば、それを設定ファイルとして利用する仕様なので、このファイルがある状態でコンパイルし直したら、@sceneは<div class="scene">として出力されそうです。
もういっかい先程と同じようにリリースモードでビルドし、出来上がったhtmlを見てみると、今度は次のようになっています。
/Users/u1/Downloads/sample.tn(line:1) 'season' is not annotated in this block! error count = 1 <div class='scene' data-season='summer'><div class='scene' data-time='morning'>遅刻したので、<time>朝食</time>はたべません！</div><div class='scene' data-time='noon'><time>ランチでも</time>いかが？</div><div class='scene' data-time='night'><time>日も暮れたし</time>もうそろそろ帰らない？</div></div>
今度は<scene>タグではなく、<div>タグで出力されていまるのがわかりますでしょうか。<div>というのはもちろん通常のHTMLに用意されているタグで、ブロックタグを表すタグですから、今度は別々のシーンが別々の段落になっているはずです。
ではもう一度、同じファイルを縦書き文庫のビューアーの本文部分にドラッグ・アンド・ドロップしてみると、、、
やりました！ だいたい望み通りの出力です。
というわけで、こうやって縦書き文庫を利用することで、一応は出力結果を本のようにして読むことが可能になっています。
ちなみに「縦書きは嫌だ！」とか「文字が小さい！」とか不満がある方は「表示設定」というボタンから変更できます。
いずれ専用のビューアーは別に作るつもりですが、しばらくはこれでご容赦いただきたく。
