Asciidoctor PDFとditaaと日本語の組み合わせに苦戦した話


Asciidoctor PDF + Asciidoctor Diagram + ditaa で図表を取り込んだPDFを生成しようとしていろいろ大変だったので顛末をまとめてみました。一応日本語入りの図表がPDF化できましたよ。

前段

Asciidoctor Diagramというextensionを使うとAsciidoctorで図表が扱えるようになります。

Asciidoctor Diagramは色々なツールのラッパーとして機能します。PlantUMLmermaidなんかの「テキストで図表を書く」系のツールがAsciidoctorで使えるようになるんですね。ステキ。

今回はditaaを使ってアスキーアートを図表化し、Asciidoctor PDFでPDF化してみました。

顛末

Asciidoctor Diagramを組み込んだ環境だと、以下のような感じでditaaの図表が書けます。

[ditaa]
....
+-------------+    +-------------+
| Asciidoctor |    | Asciidoctor |
|   diagram   |----|   日本語    |
|             |    |             |
+-------------+    +-------------+
....

Asciidoctor PDFでPDF化するとこうなります。

日本語が文字化けする

日本語が文字化けする

せっかくテキストで図表が書けるのに日本語NGだと厳しいですよね。

この問題はditaa側の不具合のようです。Asciidoctor Diagramにそのものズバリのチケットがありました。試せてないですが、Windowsじゃなかったら化けないのかも。

commit/4e96e5297c75781f75b6c0c8cdba1ed9233328b8 の中身を確認すると lib/asciidoctor-diagram/ditaa/extension.rb が修正されています。

- JARS = ['ditaa-1.3.13.jar', 'ditaamini-0.11.jar'].map do |jar|
+ JARS = ['ditaa-1.3.13.jar', 'ditaamini-0.12.jar'].map do |jar|

ditaamini-x.xx.jarpepijnve/ditaa で開発されているfork版で、 A stripped down version of ditaa. とのこと。ditaaの問題を直してAsciidoctor Diagramに組み込んだのが#233の修正ということになります。

最新版である asciidoctor-diagram-1.5.18 にはこのcommitは取り込まれていないので自前でパッチを当てましょう。 commit/4e96e5297c75781f75b6c0c8cdba1ed9233328b8 を取り込めばOK。

2019.12.28追記:#233の修正は asciidoctor-diagram-1.5.19 でリリースされました。自前でパッチを当てる必要はなくなっています。

改めてPDF化してみます。

日本語は文字化けしなくなったけど…

日本語は文字化けしなくなったけど…

図が崩れてます。これはditaaの既知の問題。

ditaaは全角文字だろうが何だろうが幅固定で処理しちゃうんですね。 手っ取り早いworkaroundは「全角文字の後ろに半角スペースを入れる」です。

手で半角スペースを挿入してもいいんですが、そうするとアスキーアートが崩れちゃって微妙です。 なので、extension書いてみました。

Ruby素人なのでコードとしては微妙かもですがご容赦を。

これをasciidoctor-diagramと一緒にextensionとして読み込みます。

> asciidoctor-pdf -r asciidoctor-diagram -r .\patch.rb test.adoc

日本語が化けず、図形も崩れないようになりました。

崩れなくなりました

崩れなくなりました

ただ、せっかくPDF化するのに図表がぼやけた感じになっててイマイチです。これはditaaがデフォルトだとPNGを出力するのが原因。

[ditaa, "diagram01", "svg"]
....
+-------------+    +-------------+
| Asciidoctor |    | Asciidoctor |
|   diagram   |----|   日本語    |
|             |    |             |
+-------------+    +-------------+
....

のようにすると、出力フォーマットをSVGに変えられます。2番目のパラメータは出力ファイル名。3番目が出力フォーマットです。指定したいのは3番目だけなんですが、2番目省略できないみたい…

PDF化してみましょう。

ぼやけなくなったけどまた文字化けだ…

ぼやけなくなったけどまた文字化けだ…

また日本語が化けました。今度はditaaの問題じゃなくてPDF生成に使われているprawnの問題。

対処法も上の記事に書いてある通りです。Sans Serif のところはAsciidoctor PDFのthemeで指定しているフォントにしておいてください。

Prawn::Svg::Font::GENERIC_CSS_FONT_MAPPING.merge!(
  'sans-serif' => 'Sans Serif'
)

上記のコードを patch2.rb という名前で保存し、extensionと一緒に読み込みましょう。

> asciidoctor-pdf -r asciidoctor-diagram -r .\patch.rb .\patch2.rb test.adoc

ようやくいい感じのPDFが生成できるようになりました。半角スペースが入るので日本語部分がちょっと微妙ですが、まあ許容範囲ということで…

日本語入りの綺麗な図表

日本語入りの綺麗な図表

AsciiDocはMarkdownと比べて表現力が高いのが魅力。ditaaと組み合わせることで図表もテキストで書けるようになりました。さらに表現力増しますね!

余談その1

半角スペースの代わりに幅がゼロの特殊文字を入れればいいのでは?と思って\u200B(zero width space)とか\u2060(word joiner)とかを試してみたんですが、手元の環境ではうまくいきませんでした。指定するフォントによっては上手くいくのかなあ…

余談その2

ditaaのsourceforge上のリポジトリは2011年が最新で、開発止まっているのかな?と見せかけて GitHub - stathissideris/ditaa がアクティブなリポジトリのようです。公式ページのリンク直しておいてほしい…




関連(するかもしれない)記事


おススメ