シナリオ用CSSメモ


コンテンツ不足なので、シナリオ用のCSSに関してメモ代わりに書いておきます。

まず、こちらがおおもとのWORDで書かれたシナリオで、ト書き、セリフ、柱にそれぞれスタイルが設定してあります。

で、これをこのままテキストで貼り付けると、こんな表示になります。

11. ルナリア(異界)の山道
山道をとぼとぼと登るエレイン。手にはスイカをぶら下げている。
サラの声が聞こえる。
サラ(オフ) 「お母さーん!」
エレイン、声に気が付き、手でひさしを作って仰ぎ見る。
サラと浮き輪を身につけたおじいちゃんが走ってくる。
サラ 「人間! 人間だったの、これ!」
サラ、両手でおじいちゃんを指す。
おじいちゃん、ポーズを決める。
エレイン 「ええっと、一箇所突っ込んでもいい?」
サラ 「浮き輪でーす」
エレイン、呆れたように微笑む。

12. 同、開けたところ
木陰に粗末なベンチがある。座ってスイカを食べてるエレインとサラとおじいちゃん。
サラ 「まさか人間だなんて思ってもみなかったけど、あっ、ごめんなさい! いい意味で、人間離れしてるってこと!」
おじいちゃんは無心にスイカを食べていて無反応。サラはエレインの顔をのぞきこむ。
サラ 「(目を輝かせ)異界から来たんだよね、このおじいちゃん! だったら……」
エレインはスイカを手にとったままぼーっとしている。サラ、エレインに無視されてむっとした表情になる。
エレイン 「(サラの言葉が途切れたことに気が付き)えっ? なあに? 聞いてなかった」
サラ 「ハア(ため息)。また何か言われたの?」
エレイン 「えっ、何かって、寄り合いで? んーん、なんでもないの。(気を取り直し)て言うか、あんたは余計なこと心配しないの」
サラ 「だって。どうせ私のことでしょ?」
エレイン 「そんなことないって! で? なに? 異界から? なんだっけ?」

「同、開けたところ」って柱はねーだろうとか、そういうツッコミは、えー、あとに回してもらってですね、これはもう見ての通り、本当に読みにくい。そこで、cssを使ってきれいに成形して表示するんですが、もともとプレーンなテキストなのでHTMLタグは埋め込まれていません。つまりCSSを書いたところで、元のテキストにどこがセリフでどこがト書きかっていう区別がないのですね。
で、その区別をつけるためにはタグを打たないといけないんですけど、しかしわざわざタグを打ち込むのは非常にめんどくさい。ボツになった作品のためにわざわざ何やってんだろう、って気持ちになってきます。

そこで(じゃじゃーん)、javascriptの出番です。
javascriptっていうのは、世界で2番めに素晴らしいスクリプト言語です。これを用いて、テキストを調べて、セリフっぽいところ、ト書きっぽいところ、柱っぽいところにそれぞれHTMLタグを追加します。
ちなみに一番素晴らしい言語はRustです。異論は認める。

// 
// シナリオ用のテキストにHTML表示用のタグを打ち込む。
// 
// 変換の本体
function repcore(search, Rep, target ) {
    // 正規表現オブジェクトの生成と
    var regrep = new RegExp( search, "g" );
    // その実行
    target = target.replace( regrep , Rep );
    return( target );
}
// 変換の準備と実行
function setformat() {
    // シナリオの本文を得る
    var str = document.getElementById("scenario").innerHTML;
    // 変換用の配列を準備
    var regdata = [
        // 柱の検出。半角数字が入っている。
        [/(\d.+)/, '<span class="hashira">$1</span>'],
        // セリフの検出。"「"が入っている。
        [/(.+「.+)/, '<span class="serifu">$1</span>'],
        // ト書きの検出。タブで始まって"「"がが入っていない。
        [/(?<!.)\t([^「].+)/, '<span class="togaki">$1</span>']
    ];
    var num = regdata.length;
    // 変換する
    for (var i = 0; i < num; i++){
        str = repcore(regdata[i][0], regdata[i][1], str);
    }
    // 変換したHTMLテキストを書き戻す
    document.getElementById("scenario").innerHTML = str;
}
// ウインドウのonloadに引っ掛けて実行する。
window.onload = function(){
    setformat();
}

これを”なんとかかんとか.js”ってファイル名にして、適当なところに保存して、記事のあたま当たりに、

<script type='text/javascript' src='http://ほげほげ/なんとかかんとか.js'></script>

という呪文を書いて呼び出します。
そうすると、id=”scenario”のブロックの中のテキストに、シナリオ用のタグが打ち込まれます。
よく見ると気がつくと思いますが、普通はdivタグでやりそうなところがspanタグになっていますね。
これは記事に直書きでjavascriptのテストをしていた名残です。WordPressが記事中のdivタグを勝手に解釈してフィルターかけてくることがあるので、それを避けるためです。

そしてこれをきれいに見せるためのCSSを用意します。

.entry-content .hashira{
	display: block;
	font-weight: bold;
	border: solid #c0c0c0 1px;
	padding: 4px;
	margin: 4px 0;
}
.entry-content .togaki{
	width: 18em;
	font-weight: lighter;
	margin: 0 0 4px 4em;
	color: #a0a0a0;
	display: block;
}
.entry-content .serifu{
	width: 20em;
	font-weight: normal;
	margin: 0 0 4px 3em;
	text-indent: -1em;
	color: #404040;
	display: block;
}

spanタグはinline属性なので、全部ブロックに変えます。
あとは柱の枠線や、ト書きやセリフの字下げなどなどです。
セリフの2行目以降の1文字下げは、1行目をマイナスのインデントをかけることで実装しています。
これらの処理を経てこんな感じに表示されるようになります。

11. ルナリア(異界)の山道
山道をとぼとぼと登るエレイン。手にはスイカをぶら下げている。
サラの声が聞こえる。
サラ(オフ) 「お母さーん!」
エレイン、声に気が付き、手でひさしを作って仰ぎ見る。
サラと浮き輪を身につけたおじいちゃんが走ってくる。
サラ 「人間! 人間だったの、これ!」
サラ、両手でおじいちゃんを指す。
おじいちゃん、ポーズを決める。
エレイン 「ええっと、一箇所突っ込んでもいい?」
サラ 「浮き輪でーす」
エレイン、呆れたように微笑む。

12. 同、開けたところ
木陰に粗末なベンチがある。座ってスイカを食べてるエレインとサラとおじいちゃん。
サラ 「まさか人間だなんて思ってもみなかったけど、あっ、ごめんなさい! いい意味で、人間離れしてるってこと!」
おじいちゃんは無心にスイカを食べていて無反応。サラはエレインの顔をのぞきこむ。
サラ 「(目を輝かせ)異界から来たんだよね、このおじいちゃん! だったら……」
エレインはスイカを手にとったままぼーっとしている。サラ、エレインに無視されてむっとした表情になる。
エレイン 「(サラの言葉が途切れたことに気が付き)えっ? なあに? 聞いてなかった」
サラ 「ハア(ため息)。また何か言われたの?」
エレイン 「えっ、何かって、寄り合いで? んーん、なんでもないの。(気を取り直し)て言うか、あんたは余計なこと心配しないの」
サラ 「だって。どうせ私のことでしょ?」
エレイン 「そんなことないって! で? なに? 異界から? なんだっけ?」

落ち着きますねぇ。
でもこれも、うっかりしてるとWordPressの野郎が勝手にタブを除去したりして、毎度ハラハラドキドキなんで、一番良いのは投稿時にフィルターかけてしまうことなんだけど、やや難易度が上がるのでそっちはパス。せっかくヌルく仕事ができるようにスクリプトを使っているのに、なぜ険しい道を好んで歩こうか。
という、ひさしぶりにjavascriptとじゃれあった日記でした。
まったく可愛いやつだぜ、javascript。

コメントは受け付けていません。