2016年09月02日

タグパース機能の考察

龍の宝珠、タグパース機能を実装しようとしている。

タグはシナリオデータに付随している本文以外の情報だ。

[img image/oroas.png]
雪深いアンガタ村にも春がやってきた。
風はすっかり柔らかくなり、雪解け水と土とが混じった匂いを運ぶ。
村のすべてがゆるゆるととけていくようないい気分だ。
だが、オロアシ爺さんは冬囲いのイチイの木みたいなしかめ面のままだった。

村広場の溜池の水が濁ったままだからだ。
[link 002]
*001
いつもの年なら、雪解けから3日もすればカンマンガタ川の清流が
溜池の泥をすっかり洗い流してくれるのだが、
今年は10日過ぎても薄茶色の濁流のままなのだ。

4人はカンジキをジャクジャク言わせて上流に向かっていった。
寒さがぶり返して粉雪がチラつく、嫌な朝だった。
[link 003]

↑のシナリオデータがあるとして、[赤文字]の部分がそれ。
モックアップではString#replaceを使っていちいち全書き換えしてたんだけど、なんか違うような気がしてきた・・・



そもそも現状ではシナリオデータの文字列をまるごと読み込み、タグの種類分replaceでHTMLに変換していたのだが

// [imgタグの処理
text2 = text.replace(/\[img (.+)\]/g, "<img src='$1' />");
// [linkタグの処理(代替テキストあり)
text3 = text2.replace(/\[link (.+) (.+)\]/g, "<a href='#' onclick='jump($1)'>$2</a>");
// [linkタグの処理(代替テキストなし)
text4 = text3.replace(/\[link (.+) \]/g, "<a href='#' onclick='jump($1)'>≫次へ</a>");


これだとタグの種類を増やすたびにメモリバカ食いして遅くなりそうだし、
だいたいHTMLタグへの単純な変換ではないタグの処理に困りそうだ。例えば

[flag A 1] ... フラグAに1をセット

みたいなやつ。

ということで、全テキストを一度にreplaceするんじゃなくて1行毎にパース、タグを付ける場合は必ず1行全てタグにすることにした

  let msg = "";
  const lines = window._game.message.split("\n");
  for(let i = 0; i < lines.length; i++){
    // []タグの処理
    const matched = lines[i].match(/\[(.+)\]/);
    if(matched){
      msg += parse_tag(matched[1]);
    }else{
      msg += lines[i] + "<br />";
    }
  }
  $("#message").html(msg);
こんな風に1行ずつ切っていって

function parse_tag(text){
  const tokens = text.split(" ");
  if(tokens[0] == "img"){
    return img_tag(tokens[1]);
  }else if(tokens[0] == "link"){
    if(tokens.length < 3){
      return link_tag(tokens[1], "≫次へ");
    }else{
      return link_tag(tokens[1], tokens[2]);
    }
  }
  return text + "<br />";
}

こんな風に命令を処理わけして

// [img {url}] タグを処理
function img_tag(url){
  return "<img src=" + url + " /><br />";
}

// [link {label} {text}] タグを処理
function link_tag(label_name, text){
  return "<a href='#' onclick='jump(\"" + label_name + "\")\'>" + text + "</a><br />";
}

命令実行だ!

フラグ処理なんかは最後の命令実行分に追加すればいいね。
タグ:javascript
posted by LoyalTouch at 06:43| Comment(0) | TrackBack(0) | プログラム全般 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/441554239

この記事へのトラックバック