サーバのいらない派閥ジェネレータ

面白いけどHTML+JavaScriptだけでできるような。あとやってることに対してrubyコードも複雑すぎると思う。

<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <script>
//<![CDATA[
function genHabatsu() {
  var text = document.getElementById("input").value;
  text = habatsu(text);
  document.getElementById("output").innerHTML = text;
}

function habatsu(text) {
  var result = "";
  var continues = {};
  var lines = text.split("\n");
  for (var i = lines.length - 1; i >= 0; i -= 1) {
    var level = getLevel(lines[i]);
    result = makeIndent(level, continues) + lines[i].substr(level) + "<br />" + result;
    purgeDeeper(continues, level);
    continues[level] = true;
  }
  return result;
}

function purgeDeeper(continues, level) {
  for (var i in continues) {
    if (parseInt(i) > level) {
      continues[i] = false;
    }
  }
}

function makeIndent(level, continues) {
  var indent = "";
  for (var i = 1; i < level; i += 1) {
    indent += continues[i] ? "│　" : "　　";
  }
  if (level > 0) {
    indent += continues[level] ? "├─" : "└─";
  }
  return indent;
}

function getLevel(line) {
  var r = 0;
  for (var i = 0; i < line.length; i += 1) {
    if (line.charAt(i) == "-") {
       r += 1;
    } else {
       break;
    }
  }
  return r;
}
//]]>
  </script>
</head>
<body>
  <div>
    <form>
      <textarea id="input" cols="80" rows="10">
あああ
- いいい
-- ううう
--- えええ
-- ううう
--- えええ
- おおお
かかか
- ききき
-- くくく
-- けけけ
- こここ
      </textarea><br/>
      <input type="button" onclick="genHabatsu()" value="gen"/>
    </form>
  </div>
  <pre id="output"></pre>
</body>
</html>

IE7対応させた。幅設定で折り返しとか入れると面白いかも。

JavaScript で幅に合わせて文字列を切りつめる - Psychs's blog のやりかたで、

  • span style="font-family: 'MS Pゴシック'; font-size: 16px"
  • 8 * count の幅

でいいでしょう