この記事は
VSCode + Markdown Preview Enhanced + Calibre
の組み合わせで、4万字程度の小説をEPUB（電子書籍）同人誌にして配布するまでの経過報告です。

いわゆる「結構いろいろ調べたので、備忘録として残しておきます」というやつです。この世でいちばん助かるやつ。

必要なもの

• VSCode

• Markdown Preview Enhanced

• Calibre

まずはVSCodeに Markdown Preview Enhanced を導入。

公式ドキュメントに従ってCalibreもダウンロードします。

なお公式ドキュメントのコードではうまくいかないことがあるので、私はこちらの記事を参照してシンボリックリンクを作成しました（いまだにこれがなんなのかよくわかっていない）。

私がつまずいたポイントは「一度間違った場所にリンクすると、unlinkするまで治らない」だったのでエンジニアパイセンにおしえてもらった魔法の呪文も貼っておきます。

unlink /usr/local/bin/ebook-convert

公式ドキュメントのコードで「ここにはなんもないです」って言われたらこれでunlinkしてから正しい場所にリンクを貼りましょう。

ちなみに私はmac環境なので、この呪文がwindowsでも使えるかは未確認です。

プレビューと出力

MPEをインストールすると右上にプレビューボタンが出ます。

クリックするとこんな感じでプレビューが。

ちなみにこの画像は縦書きにレイアウトを整えた状態で撮ってますが、CSSをいじるまではデフォルトの横書きでプレビューされます。

プレビューを右クリックでこのようにメニューが。

もろもろ出力できますが、「eBook→ePub」でとりあえずePub出力ができます。
「eBook→HTML」もあり、こちらはブラウザでレイアウトが確認できるので、CSSをいじるときに便利。

原稿をMarkdownで整形

私は小説原稿をtxtでベターッと書いているので、段落分けに一行空きを挿入するとか、カギカッコの字下げのためにカギカッコではじまる段落を<div>でくくるとか、シーン区切りの三行空きのためにシーンごとに<div>でくくるとかしましたが、おおむねHTMLとCSSの基本的な知識があればやることはわかると思います。

Markdownは便利な記法がいろいろありますが、箇条書きリストや表を小説で使うことってあんまりないしな。

CSSでレイアウトを組む

そもそもなんでこんな迂遠なやりかたでEPUB出力しようと思ったかというと、

「pagesで出力した縦書きEPUBのカギカッコの字下げが死ぬほど気持ち悪い」

ことが原因でした。行頭約物を半角に、などという高度なことはできませんので、pagesくんは。

というわけで組版の方向性としては

• 縦書き

• カギカッコの字下げを美しく

がメイン。あとはリフロー型のEPUBなので文字サイズや紙色などは可変ですし、それを考えると章タイトルの飾りとかもそこまで凝らないほうがいいかなと、ちょっと画像をつけるだけにしました。

最終的に落ち着いたレイアウトはこう。

さて、こうしたレイアウトを組むためにはMPEのCSSを編集する必要があります。

lessファイルは要するにちょっとすごいCSSで、なんか入れ子にできるとかそういう拡張性がありますが、普通にCSS書くのと同じ感覚で使えます。

上のレイアウトを作るためにわたしが書いたCSSは以下の通り。

.markdown-preview.markdown-preview {
  // modify your style here
  // eg: background-color: blue;

    text-align: justify;
    -webkit-writing-mode:vertical-rl;
    -epub-writing-mode:vertical-rl;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: rgb(50, 50, 50);
    font-family: serif;
    font-size: 1em;
    line-height: 1.6;
    margin: 1.2 0;

    p,div{
      margin: 0;
      padding: 0;
    }

  h2{
    font-weight: 400 !important;
    font-size: 1em;
    font-family: serif;
    margin-right: 1em;
    margin-left: 2em;
    margin-top: 2em;
  }

  h2::before{
    display: inline-block;
    content: "";
    background-size: contain;
    background-image: url(ornament2.png);
    width: 1.2em;
    height: 1.2em;
    transform: rotate(45deg);
    margin-bottom: 2em;
  }

  h2::after{
    display: inline-block;
    content: "";
    background-size: contain;
    background-image: url(ornament2.png);
    width: 1.2em;
    height: 1.2em;
    transform: rotate(45deg);
    margin-top: 2em;
  }
  p{
    text-indent: 1em;
  }
  div.converse{
    text-indent: 0.5em;
  }
  div.story{
    margin-top: 1em;
    margin-right: 1.8em;
    margin-left: 1.8em;
  }
  div.scene{
    margin-right: 3em;
  }
  div.bottom{
    margin-right: 1em;
    text-align: end;
  }
  div.tatenaka{
    display: inline-block;
    transform: rotate(-90deg) translate(0,-0.25em);
  }
}

わりあいシンプルに縦書きを実装できたんじゃないかと思います。

ちなみに、こうしてCSSを完成させてもまだもうちょっとやることがあるんじゃよ。

Calibreでページ送りとか細かい編集

なんとここまで頑張ってCSSでレイアウトしたEPUBですが、出力したままだとページ送りが左から右（横書き仕様）になってます。

あと埋め込んだ画像も反映されてない。これは反映させる方法がありそうですが、使ったのが章タイトルの飾りだけなのでCalibreに直接ぶっこむのが早かったです。

というわけで出力したEPUBをCalibreで読み込んで細かい編集をします。

左上の「本を追加」から出力したEPUBをインポート。
右クリックの「書籍編集」から編集画面を開きます。

編集画面でいじるのは2カ所です。

まず章タイトルにつけた飾りの画像が含まれてなかったので追加します。
左上のアイコンからCSSで指定した画像を追加。（CSSには画像指定がちゃんと入ってるので、画像含めて出力する方法もたぶんあります）

それからファイルブラウザの下のほうにあるopfファイルを編集してページ送りを右から左（縦書き仕様）にします。

opfファイルの中にある

<spine toc="ncx">

こいつを

<spine toc="ncx" page-progression-direction="rtl">

こうじゃ。

これでページ送りも縦書き仕様になります。

こちらが完成した作品です

例にもれずここまでの解説に含めていないちょこまかした調整（奥付の実装とか、目次の生成とか。でもCalibre側の操作とCSSの調整がほとんどなのでわかる人には説明するまでもないよね！）を加えてあるのですが、今回頒布したEPUBファイルはこちらです。

本文字数は4万5千字くらい。EPUBだと厚みを気にしなくていいのでもっと短くてもサクサク読めていい気がしますが、トンチキ・スペクタクル・ロマンスの芸風でやらしてもろてるのでいつもだいたいこのくらいの文量です。

今回基本になる組版のCSSがだいたい固まったので、今後もいろいろEPUBの小説作ってみようかなと思います！