Textwell でカクヨム記法を無限にプレビューできる Action を作った

更新：2016-08-11読了まで：約0分

ついカッとなって作った。

今は公開している。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="utf-8">
<style>
/* <!CDATA[ */
html, body {
background-color: #FEFDFB ;
color: #141311 ;
}
body {
margin : 1em auto ;
max-width : 40em ;
line-height: 1.818em ;
}
h1 {
font-size: 1.2rem ;
font-family: "游ゴシック", "Yu Gothic", "YuGothic", sans-serif  ;
text-align : center ;
}
p {
font-family: "游明朝", "Yu Mincho", "YuMincho", serif ;
font-weight: 500 ;
}
em {
font-style : normal ;
-webkit-text-emphasis-style: filled dot ;
}
/* ]]> */
</style>
<script>/* <![CDATA[ */
"use strict";

// Unicode Range is copied from http://tama-san.com/kanji-regex/
var RULES = [
/ [[\|｜]] ( [[^《]] +) [[《]] ( [[^》]] +) [[》]] /g,
/((?: [[々〇〻\u3400-\u9FFF\uF900-\uFAFF]] | [[\uD840-\uD87F]]  [[\uDC00-\uDFFF]] )+) [[《]] ( [[^》]] +) [[》]] /g
];
var ESC = / [[\|｜]]  [[《]] /g;
var EM  = / [[《]] {2}( [[^》]] +) [[》]] {2}/g;
function escapeHTML(t) {
return t.replace('&', '&amp;')
.replace('<', '<')
.replace('>', '>')
.replace('', '')
.replace(', ''')
}
function processLine(line) {
RULES.forEach(function (rule) {
line = line.replace(rule, function ( _, $1, $2, offset, str ) {
return [
'<ruby>', escapeHTML($1) , '<rt>', escapeHTML($2), '</rt>' , '</ruby>',
].join('');
});
});

line = line.replace(EM, function ( _, $1, offset, str ) {
return  [[ '<em>', escapeHTML($1) ,'</em>']] .join("");
});
return line.replace(ESC, '《');
}
function renderPreview(title, lines) {
document.title          = 'カクヨムプレビュー for Textwell';
document.body.innerHTML = [
'<h1>', escapeHTML(title) , '</h1>',
'<p>', lines.map(function (line) { return processLine(line) }).join("</p><p>") ,'</p>'
].join('');
}
function main() {
var title = '';
var lines = [];
if ( typeof(T) !== 'undefined' ) {
lines = T.text.split(/\n{2,}/);
title = lines.shift();
} else {
title = '書式テスト';
lines = [
'とある魔術の禁書目録《インデックス》',
'|約束されし勝利の剣《エクスカリバー》',
'｜勝利すべき黄金の剣《カリバーン》',
'|《廃墟》',
'｜《新築》',
'この味は、《《嘘を付いている味》》だぜ！',
];
}
renderPreview(title, lines);
}
document.addEventListener('DOMContentLoaded', main);
/* ]]> */</script>
<title>カクヨムプレビュー for Textwell</title>
</head>
<body></body>
</html>

使い方。

とりあえず Textwell のアクションに上記ソースコードを突っ込んで、

Textwell から実行すればあら不思議、なんとカクヨム記法のプレビューが出来ちゃいます！

という感じで使う。

ちなみに先程、この文章を書いながらに気がつきましたが、カクヨム記法の傍点の実装を忘れてました。そのため現時点では、傍点記法は使えません。多分、今後やる気や必要性が出て来たら実装します。

追記: [[2016-08-12]]
つい先程やる気が出たので、上記コードを修正しました。一応、特に問題などが無ければ、2016 年 8 月現在の [[カクヨム]] 記法のすべてをサポート出来ているハズです。はい。

あと、上記アクションのコード内の、

Javascript 上での漢字の Unicode Range 正規表現

については、

より引用(と言うよりコピペして加工)しています。

また、本 [[Textwell]] のアクションは基本的には、

と言う扱いでお願いします。

という事で今日は以上。

ちなみに本日は母方の亡くなった祖母の [[初盆]] だったりしましたが、一応、恙無く法事は無事終わりました事を報告だけしておきます。

と言う訳で、以上です。はい。