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

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

今は公開している。

<!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 のアクションは基本的には、

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


という事で今日は以上。

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

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

nyarlaが大体

Scrapbox.io でコメントや意見を書く