『悪魔の正しい死に方』制作記録五

2024年8月10日

目次
  1. 進捗
  2. 組版について
  3. 今後について

進捗

組版をしたり、表紙を作ったり、入稿をしたりしました。
無事本も届き、頒布準備も完了しました。
Web版を公開しました。

甘翼
長編小説『悪魔の正しい死に方』

組版について

組版にはVivliostyleを使用しています。

Vivliostyle
index

vivliostyleとは、HTML・CSSを用いて組版をする組版システムの一種です。
無料で使えます。

同人誌の組版をするためのソフト・システムは色々あります。
私は比較的使い慣れたHTML・CSSで組版をするのが好きなので、組版にはほとんどVivliostyleを使用しています。

もしVivliostyleを使ってみたい方は、以下の公式チュートリアルが参考になります。

Vivliostyle
チュートリアル

Javascript(Node.js)やMarkdownになじみがない方には、少々難しい部分があるかもしれません。
ただ基本的な組版は公式チュートリアルを参考にすれば問題なく行えるかと存じます。

公式チュートリアルやドキュメントなどではわかりにくい点について、いくつか補足をします。

EPUBについて

VivliostyleではEPUBファイルを出力することが可能です。
EPUBファイルは電子書籍の規格の一つです。

EPUBファイルを出力するには、vivliostyle.config.jsのoutputプロパティで、拡張子epubのファイル名を指定します。

output: [
    './book.epub',
],

Viviliostyleから出力したEPUBファイルは、そのままだと電子書籍ビューワーで正常に表示されないことがあります。
例えば、EPUB向けの縦書きの指定が不十分で、初期状態では縦書きで表示してほしいのに、横書きで表示されてしまうことがあります。

その場合は別途外部ソフトで編集する必要があります。
私はEPUBの編集に「Sigil」を使用しました。

Sigil-Ebook
What is Sigil?

個別事例:縦書き表示設定

Vivliostyleから出力したEPUBを初期状態で縦書き表示にしたい場合、「content.opf」ファイルの「spine」タグに「page-progression-direction=”rtl”」属性を追加します。

<spine page-progression-direction="rtl">
    <itemref idref="titlexhtml"/>
</spine>

縦書きで表示されるかを確認するために電子書籍ビューワーを使用します。
電子書籍ビューワーにおいて、縦書き表示が可能なものは限られます。
私は「Kinoppy」を使用しました。

紀伊國屋書店Kinoppy
index

他にも「Thorium」「Bibi」なども、縦書き表示が可能です。
ただしBibiは右綴じ表示されません(公式サイトのデモでは右綴じで表示されていますが、私の環境ではできませんでした)。

Thorium Reader
index
Bibi
index

個別事例:パス指定

Viviliostyleにおいて、ファイルパスに「@」が含まれることがあります。
配布されているテーマを使った場合などです。

おそらくですが、ファイルパスに「@」が含まれていると、一部の電子書籍ビューワーでファイルが読み込まれません。

対処法としては、「Viviliostyle側で、@が含まれないディレクトリにテーマを移動する」「EPUB出力後にパスを置換する」などが挙げられます。

目次について

Viviliostyleでは目次ページを指定することができます。
目次ページの目次が出力後のPDFのブックマークにも反映されます。

ただ一部事例では、Viviliostyle側で目次を指定したくない場合があります。
その場合は外部ソフトで目次を指定することになります。

PDFのブックマークの編集ソフトは「PDFtk Bookmarks Editor」を使用しました。

PDFtk Bookmarks Editor
index

このソフトでは、PDFファイルと特定書式で書かれたブックマークファイル(txt形式)を読み込むことで、PDFのブックマークを編集することができます。

ブックマークファイルは以下のような書式で書きます。

1	1	title
2	1	index
3	1	main

ページ番号、レベル(階層)、ページ名の順で記述します。
特にこだわりが無ければレベルはすべて1でもよいです。
指定したページ名でブックマーク一覧に表示されます。

ブックマークファイルにおいて、日本語をそのまま指定すると文字化けします。
日本語を記述したい場合は、数値文字参照に変換する必要があります。

1    1   &#12479;&#12452;&#12488;&#12523;
2    1   &#30446;&#27425;
3    1   &#26412;&#32232;

私は日本語の数値文字参照変換をするために自分でコードを書きましたが、後日調べたら以下のようなツールを見つけました。

Tech-Unlimited
数値文字参照変換ツール

試してはいませんが、おそらくこのツールで変換したものを使用して問題ないかと思われます。

縦書き・横書き指定について

Viviliostyleで縦書き・横書きを指定するには、CSSで「writing-mode」プロパティを使用します。

MDN
writing-mode

日本語の縦書きなら「writing-mode: vertical-rl;」、日本語の横書きなら「writing-mode: horizontal-tb;」を指定します。

文書内で、縦書きと横書きを切り替えたい場合があります。
その場合は、切り替えたい部分をタグで囲み、そのタグにwriting-modeを指定します。

Viviliostyleでは、writing-modeの設定に合わせて自動的に綴じ方向が変わります。
「writing-mode: vertical-rl;」なら右綴じ、「writing-mode: horizontal-tb;」なら左綴じになります。

Viviliostyleでは、ページによってCSSを切り替えることができます。
文書最初のページに別のCSSを指定する場合、文書全体の書字方向と違う値をhtmlセレクターで指定すると、綴じ方向が変わってしまいます。
例えば、文書全体では縦書きがよいが、タイトルページ(1ページ目)で横書きの指定をすると、左綴じになってしまいます。
こうなると、Viviliostyleで「右ページに対するCSS」「左ページに対するCSS」などを指定した場合に、本来の想定と違うCSSが適用されてしまいます。

私はこれにしばらく気がつかず、右ページの隠しノンブルが左ページに適用されるバグに頭を抱えていました。

空白ページについて

Viviliostyleでは、設定によって自動的に空白ページを挿入することが可能です。
例えば「必ず左ページから始まる設定」をすると、左ページから始まるように空白ページでページ数を調整してくれます。

ただ、バグなのかわかりませんが、自動挿入された空白ページに対してCSSが適用されないことが多々ありました。
なので私は手動で空白ページを挿入しました。また、空白ページを挿入しなくていいよう本編の文字数を調整しました。

目次リンクについて

目次にハイパーリンクを使用すると、印刷時に黒で印刷されないことがあるそうです。
私は悪たし以外の入稿をしたときに、入稿チェックをしてくださった印刷所の方にご指摘を受けました。
入稿用データの場合は、目次にリンクを使用しない方がよいと思います。

ページと同じサイズの指定について

CSSにおいて、レイアウトのために、あるタグに対しページと同じサイズを指定したい場合があります(※マージンを除いたサイズ)。
普通のサイト制作であれば、width・heightに「100%」を指定することが多いと思います。

ただViviliostyleでは、100%を指定してもページと同じサイズにならないことがありました。
以下のように指定することで解決しました。

width: 100vmin;
height: 100%;

vminについては以下のページを参照しました。

CSS Values and Units Module Level 4
Distance Units: the length type

ルビの中央表示

デフォルトの状態では、ルビは上揃いで表示されます(縦書きの場合)。
以下のように指定することで、中央表示されるようにしました。

ruby {
    position: relative;

    rt {
        position: absolute;
        top: 50%;
        left: 2.35em;
        transform: translateY(-50%);
    }
}

Viviliostyleの小ネタはまだあると思いますが、ひとまず思いついたところだけ記しました。

実際に確認してみて

届いた本を確認し、組版に問題ないかを確認しました。
概ね問題ありませんでしたが、ノドのマージンだけはもう少し広くてもよかったと思います。

書籍版悪たしでは、小口のマージンを8mm、ノドのマージンを16mmに設定しています。
自分が持っている本を参考に設定しました。

ネットで情報を調べると、ノドのマージンは最低15mmあった方がいいという情報や、分厚い本なら20mmはあるべきという情報が見つかります。

ただ今回の装丁では、ノド側の文字が極端に見づらいということはありませんでした。
ただ見やすいわけでもない、微妙なバランスです。
ページ数削減のために行数を18行にしたのが原因だと思います。
次回も18行にする場合は文字サイズを小さくします。

今後について

ほとんどの作業が完了し、あとは頒布するのみとなりました。
約四ヶ月の制作期間は長かったようにも短かったようにも思います。

小説版『悪魔の正しい死に方』の制作記録はいったんここで完結です。
ここまで読んでいた皆様にお礼申し上げます。
すでにWeb版を読んでいただいた方もありがとうございます。あなたの心に何かを残せたなら幸いです。

夏のイベントが終わったら、ゲーム版『悪魔の正しい死に方』の制作を開始したいです。
ただその前に短編ゲームを作りたい気持ちもあります。
またゲーム版悪たしはコンテンツ量が多く、制作期間が年単位になる可能性があります。
それを考えると、制作開始時期は慎重に決めるべきかもしれません。

いつになるかはわかりませんが、ゲーム版『悪魔の正しい死に方』の制作を開始したときは、また制作記録を執筆・公開いたします。
読んで面白いと思っていただける、あるいは「自分でも作ってみたい」と思っていただけるような、そんな制作記録にしたいです。
またお目にかかれたら幸いです。


navigation