Zenn
🔥

【Kindle本出版】pandocコマンドの覚書

2024/05/15に公開
2件
Markdown
Kindle
Pandoc
epub
tech

前提環境

本記事が前提とする環境は以下のとおりとなっています。

Windows 11 Home
pandoc 3.1.12.3

そもそもPandocとは？

Pandocは、様々な形式の文章を自由自在に「変換」することができるツールです。

Markdownというシンプルな書き方で書いた文章を、

本やレポートなどで使うWordやPDF、インターネットでよく見るHTML、論文を書くときに使うLaTeXなどなど。

学生の場合、Markdownで書いたレポートをPDFに変換するといった使い方が多いのではないでしょうか。

なぜPandocが選ばれるのか？

まず、Pandocは無料で誰でも使うことができるので、学生でも気軽に利用することができます。

そして、難しい専門知識は必要ないことも魅力的。

直感的な操作で、簡単に文章を変換することができます。

最後に、変換に時間がかからず、

基本的な使い方

input.mdというMarkdownファイルを、output.epubというEpubファイルに変換しています。

pandoc -s input.md -o output.epub

-sはsourceかとおもいきや、standaloneの略で、スタンドアロン文書を指しています。（あまり理解できていないので説明は省きます。）
-oはoutputの略で、アウトプットファイル名の前につけます。

Kindle本を出版する際に実際に使ったコマンド

実際にKindle本を出版する際に実際に使ったコマンドをお伝えします。

しかし、pandocはオプションが多いのが問題。

ですので、defaults.ymlファイルにコマンドをまとめておきます。

そのdefaults.ymlファイルを参照するには以下のコマンドを使用します。

pandoc -d defaults.yml

ディレクトリーとファイル構成

defaults.ymlの説明をする前に、ディレクトリーとファイル構成をご紹介します。

.
├── cover.png        // 表紙の画像
├── defaults.yml     // pandoc コマンドをまとめたもの
├── epubmeta.yml     // EPUBメタデータ
├── meta.yml         // メタデータ
├── srcs             // MDファイルと添付イメージ
│   ├── 00_intro.md
│   ├── 01_body1.md
│   ├── 02_body2.md
│   ├── 03_body3.md
│   ├── 04_end.md
│   ├── images
│   │   └── 00_intro
│   │       ├── 1.png
│   │       ├── 2.png
│   │       └── 3.png
│   └── misc.md       // 本文にくわえませんが、一応残しておきたいもの
└── stylesheet.css    // CSSファイル

それでは、それぞれのファイルをご紹介します。

defaults.yml

defaults.ymlの中身は以下のようになっています。

metadata-file: ${.}/meta.yml
epub-metadata: ${.}/epubmeta.yml
from: markdown+emoji+rebase_relative_paths
to: epub3
input-files:
  - srcs/00_intro.md
  - srcs/01_database.md
  - srcs/02_tracker1.md
  - srcs/03_tracker2.md
  - srcs/04_para.md
  - srcs/05_end.md
output-file: output.epub
standalone: true
toc: true
toc-depth: 3
# ePUBの改ページ(見出し) デフォルトではh1のみ
# epub-chapter-level: 2
epub-cover-image: ${.}/cover.png
css: ${.}/stylesheet.css
file-scope: true
highlight-style: tango
resource-path: 
  - .
  - ${.}/srcs/images

それぞれのくわしい説明は、余裕があればしたいと思います...

epubmeta.yml

メタデータとEPUBメタデータの両方を作成することを強く推奨されているので、両方作りました。

メタデータとは違い、このEPUBメタデータはEPUBファイル自体の構造や表示に関する情報を記述するために使用されます。

---
title:
- type: main
  text: Notion習慣トラッカー
- type: subtitle
  text: 人生をマニュアル化してもっと自由に生きるための「データベース超入門」
creator:
- role: author
  text: ホヴィンチ
rights: © 2024 ホヴィンチ
ibooks:
  version: 1.0.0
...

meta.yml

メタデータは、主に書籍の内容に関する情報を記述するために使用されます。

---
title: Notion習慣トラッカー：人生をマニュアル化してもっと自由に生きるための「データベース超入門」
keywords: [notion, habit, tracker, database]
date: 2024/05/15
rights: © 2024 ホヴィンチ
language: ja-JP
...

stylesheet.css

ベースはPandoc公式で提供されているCSSをベースにつくりました。

Pandoc公式のものはこちら。

/* This defines styles and classes used in the book */
@page {
    margin: 10px;
  }
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
  blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img,
  ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
  fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, figure, figcaption, footer, header,
  hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, ol,
  ul, li, dl, dt, dd {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
  }
  html {
    line-height: 1.2;
    font-family: Georgia, serif;
    color: #1a1a1a;
    background-color: transparent;
  }
  p {
    text-indent: 0;
    margin: 1em 0;
    widows: 2;
    orphans: 2;
    /* added */
    text-align: justify; 
    /* 文頭を一文字開ける. 段落ごとに自動でスペースを付与  */
    /* text-indent: 1em; */ 
  }
  /* 太字単体だと強調が乏しいので下線も付ける */
  /* strong {
    text-decoration: underline;
  } */
  a, a:visited {
    color: #1a1a1a;
  }
  img {
    max-width: 100%;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
  }
  sup {
    vertical-align: super;
    font-size: smaller;
  }
  sub {
    vertical-align: sub;
    font-size: smaller;
  }
  h1 {
    margin: 3em 0 0 0;
    font-size: 2em;
    page-break-before: always;
    line-height: 150%;
  }
  h2 {
    margin: 1.5em 0 0 0;
    font-size: 1.5em;
    line-height: 135%;
  }
  h3 {
    margin: 1.3em 0 0 0;
    font-size: 1.3em;
  }
  h4 {
    margin: 1.2em 0 0 0;
    font-size: 1.2em;
  }
  h5 {
    margin: 1.1em 0 0 0;
    font-size: 1.1em;
  }
  h6 {
    font-size: 1em;
  }
  h1, h2, h3, h4, h5, h6 {
    text-indent: 0;
    text-align: left;
    font-weight: bold;
    page-break-after: avoid;
    page-break-inside: avoid;
  }
  
  ol, ul {
    /* 目次にも影響を与えている？ */
    margin: 1em 0 0 1.7em;
    /* margin-bottom: 10px */
  }
  li > ol, li > ul {
    margin-top: 0;
  }
  blockquote {
    margin: 1em 0 1em 1.7em;
  }
  code {
    font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
    font-size: 85%;
    margin: 0;
    hyphens: manual;
  }
  pre {
    margin: 1em 0;
    overflow: auto;
  }
  pre code {
    padding: 0;
    overflow: visible;
    overflow-wrap: normal;
  }
  .sourceCode {
    background-color: transparent;
    overflow: visible;
  }
  hr {
    background-color: #1a1a1a;
    border: none;
    height: 1px;
    margin: 1em 0;
  }
  table {
    margin: 1em 0;
    border-collapse: collapse;
    width: 100%;
    overflow-x: auto;
    display: block;
  }
  table caption {
    margin-bottom: 0.75em;
  }
  tbody {
    margin-top: 0.5em;
    border-top: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
  }
  th, td {
    padding: 0.25em 0.5em 0.25em 0.5em;
  }
  th {
    border-top: 1px solid #1a1a1a;
  }
  header {
    margin-bottom: 4em;
    text-align: center;
  }
  #TOC li {
    /* list-style: none; */
    list-style: square;
  }
  #TOC ul {
    padding-left: 1.3em;
  }
  #TOC > ul {
    padding-left: 0;
  }
  #TOC a:not(:hover) {
    text-decoration: none;
  }
  code {
    white-space: pre-wrap;
  }
  span.smallcaps {
    font-variant: small-caps;
  }
  
  /* This is the most compatible CSS, but it only allows two columns: */
  /* div.column {
    display: inline-block;
    vertical-align: top;
    width: 50%;
  } */
  /* If you can rely on CSS3 support, use this instead: */
  div.columns {
    display: flex;
    gap: min(4vw, 1.5em);
  }
  div.column {
    flex: auto;
    overflow-x: auto;
  }
  
  div.hanging-indent {
    margin-left: 1.5em;
    text-indent: -1.5em;
  }
  ul.task-list {
    list-style: none;
  }
  ul.task-list li input[type="checkbox"] {
    width: 0.8em;
    margin: 0 0.8em 0.2em -1.6em;
    vertical-align: middle;
  }
  .display.math {
    display: block;
    text-align: center;
    margin: 0.5rem auto;
  }
  
  /* For title, author, and date on the cover page */
  h1.title {
    font-size: 36px; /* フォントサイズ */
    font-weight: bold; /* 太字 */
    margin-bottom: 20px; /* 下余白 */
   }
  p.author {
    font-size: 18px; /* フォントサイズ */
    margin-bottom: 10px; /* 下余白 */
  }
  p.date {
    font-size: 14px; /* フォントサイズ */
    color: gray; /* 灰色 */
  }
  /* 目次のタイトル消す */
  nav #toc-title {
    display: none;
  }
  nav#toc ol, nav#landmarks ol {
    padding: 0;
    margin-left: 1em;
  }
  nav#toc ol li, nav#landmarks ol li {
    /* 目次に数字が付くのを防いでいる */
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  a.footnote-ref {
    vertical-align: super;
  }
  em, em em em, em em em em em {
    font-style: italic;
  }
  em em, em em em em {
    font-style: normal;
  }
  q {
    quotes: "“" "”" "‘" "’";
  }
  @media screen { /* Workaround for iBooks issue; see #6242 */
    .sourceCode {
      overflow: visible !important;
      white-space: pre-wrap !important;
    }
  }
  /* 任意の箇所で改ページする
  MDファイル内に<div class="page-break"></div>　を挿入する。 */
  .page-break {
    page-break-before:always;
  }

わからなかったこと

解決策をご存じでしたら、教えていただけるとうれしいです🙇

「・」を使ってリストを作った場合、改行されない

リストを作るには、-を使うのが一般的ですが、ブログを書くときには、全角の・が慣れているので、このまま使いたいと思いました。

しかし、pandecでepub3ファイルに書き出しても、改行がされません...

こんかいは<br>を各リストの後ろに配置することでその場しのぎをすることにしました。

・りんご<br>
・みかん<br>
・ぶどう<br>

絵文字がモノクロ

pandecでepub3ファイルに書き出したとき、もともとのマークダウンファイルは

これはどうやっていいのか、解決策がわかりませんでした。

目次のタイトルを新規で追加する

目次に「目次」という文字をいれることができるようですが、epubファイルのなかを変更する必要があるようで、やり方をそこまでくわしく調べませんでした。

以下を加えて、「ePUBのカスタムフォーマットで可能」とネットで見つけましたが、今回はあきらめました。

$if(navpage)$
<h1>目次</h1>
$endif$

第一章のはじまりの空白のなくしかた

https://twitter.com/hovinci_jp/status/1790962419164180827

リソース

英語マニュアル
https://pandoc.org/epub.html

日本語マニュアル
https://pandoc-doc-ja.readthedocs.io/ja/latest/users-guide.html#using-pandoc

Discussion

ERASERERASER

全角の「・」を使ってリスト表記をして、改行されなかったということについて、原因と対処法を考えたのでコメントしておきます。実際に試してはいないので、あくまで予想のようなものになります。

原因

Markdownでは基本的に、空行が入らない文章は改行があったとしても一つの段落（ <p> ）として表されます。そしてデフォルトでpタグのCSSには white-space: normal がかかっており、改行はただの空白としてレンダリングされます。したがって、変換後も改行が入らず地続きになったのだと思います。

対処

対処法としては、

  • Markdownでは空白２つによって <br> を表せる場合があるので試す
  • CSSでpタグに対し white-space: pre を指定する
  • 素直にリスト表記の - や * を使う（推奨
ホヴィンチホヴィンチ

ERASERさん、

コメントありがとうございます！
頂いた対処法をまだ試せていないのですが、取り急ぎ御礼まで！