0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

TinyMCEを青空文庫エディタにする

Last updated at Posted at 2024-01-07

青空文庫エディタ

Meryのマクロ機能を利用して青空文庫エディターというのがある、私も使っていたが、初心者向けではないのでもう少し直感的に操作するものができないかと思っていた。ウェブ用のHTMLエディタを使って、HTMLから青空文庫に変換する機能をつけたものつくった。それを青空文庫エディタにした。

仕組み

TinyMCEでHTMLを作成して、turndownを改造したhtml2aozoraで青空文庫に変換している。AozoraJavaScriptParserで青空文庫からHTMLに変換しなおしている。それぞれのHTMLタグやクラスが違うので改造して対応している。

TinyMCE https://www.tiny.cloud/

turndown https://github.com/mixmark-io/turndown

html2aozora https://github.com/kyukyunyorituryo/html2aozora

AozoraJavaScriptParser https://github.com/gearsns/AozoraJavaScriptParser

なぜ縦書きか?

 日本語の書籍の場合は、縦書きで出版されることが多く表示と編集を同じ画面で行いたい。縦書きであっても、左側に入力画面で右側にビュワーを表示している事がある。その場合は、画面の表示内容と、実際の編集画面がずれてしまう。そうすると入力画面が小さくなり入力に集中がしづらい。

 縦書きファイルを何を目的として作るか。例えばキンドルで販売するためにEPUBファイルとして出力したい場合に、できるだけ同じCSSを使って編集したほうが出戻りが減る。つまり、エディターにEPUBのCSSを使用して同じ表示にする。エディター自体にEPUB出力機能をつければエディターだけで完結する。

 エディターの場合には見たまま表現ができたほうが何かと便利なことがある。例えば、ボタンによる操作をしたい場合に、画面が分かれていると、ツールバーの表示画面が少なくなる。注記自体を覚える必要がなくなる。マークダウンであれば左側に注記を入力して右側に表示する場合がある。そうすると注記自体を暗記しないと不便。

 見たまんま編集できるWYSIWYGの問題点はデータ構造が複雑になり、編集結果と実際の表示がずれてくること。HTMLの場合などに可読性がなくなってくる。特に縦書きの場合にはhtmlに縦中横、傍点、傍線などのタグがなくclassかstyleを指定する。ルビのタグは冗長で編集がしずらくなる。

縦書き文章の保存形式

縦書き文章の保存形式として、青空文庫注記があるが、パーサーや相互変換に標準のものがない。そのために、マークダウンほどHTMLと行き来することが難しい。
web小説では、ふりがなの入力は青空文庫とその他が混ざっている。傍点をふりがなとして使っているものも多い。

ルビ 傍点
小説家になろう (全角または半角)|漢字《ルビ》 |漢《・》|字《・》
カクヨム (全角または半角)|漢字《ルビ》 《《○○》》
青空文庫 (全角縦線)|漢字《ルビ》 ○○[#「○○」に傍点]

ここから引用

縦書きエディタの種類はそれほど多くない、しかもwebの場合はメンテナンスがされないことが多い。

関連

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?