Markdownで本を書く人は多いでしょうが、
Marpで電子書籍を作るという話は、
検索してもあまり見つけられなかったので、
ノウハウを共有&備忘録のために紹介します。
Marpとは
そもそもMarpとは、
Markdownで「スライド」を作成するツールです。
ご存知の通り、スライドは主に文字と画像から構成されます。
そこで、Marpを使えば、
「文字と画像を配置した図鑑的なものも作れるのではないか」
と思ったのが、そもそものモチベーションです。
Marpを使うメリット・デメリット
何事にもメリット・デメリットがあります。
特に、元々「スライド」用のツールを
書籍の作成に使うのですから当然難しいところがあります。
メリット
メリットはページのレイアウトの調整とコンテンツの中身を分離できることです。
レイアウトの調整はCSSで行い、
コンテンツの中身はMarkdownで記述します。
これにより、ページのレイアウトに統一感を出しつつ、
後から、全体のページをまとめて微調整することができます。
デメリット
主なデメリットとしては以下が挙げられます。
どれも、Marpが「スライド」作成ツールであるので当然のデメリットです。
CSSでレイアウトを調整する
コンテンツはMarkdownで作るとして、
電子書籍の体裁は全てCSSで整えていきます。
自作CSSを適用する方法
Marpで自作CSSを適用する際には少し前準備が必要です。
順に追って行きましょう。
CSSを用意する
今から編集していくためのCSSファイルを作成します。
ここでは「book_template.css」という名前で作ることにします。
CSSの最初の行に以下のコメント分を入力します。
/* @theme book_template */
Marpでは「テーマ(theme)」という名前で、
CSSのレイアウトが管理されます。
@themeでMarpから呼び出すときの「テーマ名」を設定します。
上の例では、テーマ名として「book_template」を設定したことになります。
CSSのパスを登録する
Marp側から自作のCSSを読み込んでもらうために、
CSSファイルの場所を登録する必要があります。
Visual Studio CodeでMarpを使う場合は、
Visual Studio Codeの「設定」（Cmd+,）から、
「Marp: Themes」を検索してCSSのパスを追加します。
※ Marp-CLIを使う場合は、
コマンドライン引数に「--theme "CSSのパス"」で指定します。
Markdownでテーマを設定する
上の準備が整うといよいよ自作テーマを設定できます。
テーマの指定は上で設定したテーマ名をmarkdownから指定します。
markdownの最初に以下のように入力して、
「theme」で適用するテーマ名を指定します。
--- marp: true theme: book_template ---
最低限の体裁
上で、自作CSSを適用できるようになったら、
いよいよCSSに手を加えてレイアウトを整えていきます。
とりあえず、最低限電子書籍の体裁にするために、
以下をCSSファイルに追記します。
@import 'gaia'; section { background-color: #fff; color: #000; width: 1600px; height: 2560px; padding-top:3em; }
最初の文ではMarpデフォルトのテーマ「gaia」を継承しています。
Marpのページはsectionに対応するので、
ページのサイズ、背景、文字色、余白などを指定します。
電子書籍っぽくなってきました。
後は、見出しタグの見た目を自由に設定して、
オリジナルのレイアウトを作りましょう。
ページ毎にレイアウトの種類を切り替える
何種類かのレイアウトを使い分けて、
ページ毎にレイアウトを切り替えたい場合があります。
Marpではディレクティブを使ってページのクラス名を指定できます。
このクラス名毎にCSSでレイアウトを変更すればOKです。
例えば、以下のようにMarkdownでページのクラスを指定します。
下の例では「title」というクラス名を指定しています。
--- <!-- _class: title --> # タイトル ## 著者名 ---
※クラス名をスペースで区切って複数のクラス名を指定することも可能です。
これでsectionタグにtitleのクラス名が付与されるので、
CSS側では、title用のレイアウトを作成します。
section.title{ text-align: center; } section.title h1{ margin: 40% auto; font-size: 300%; text-align: center; }
これで、本文のレイアウトとは別に、
下のようなタイトルページを作ることができます。
PDF出力する
MarpではPDFで出力することができるので、
PDF形式の電子書籍は簡単に作ることができます。
ただし、読み込む画像やページ数が多い電子書籍を作ろうとすると、
タイムアウトのエラーに引っかかることがあります。
タイムアウトを無効にするためには、Marp-CLIを使って
以下のコマンドでPDF出力を実行します。
PUPPETEER_TIMEOUT=0 marp --pdf book.md --theme book_template.css
※ visual studio codeを使う場合は、visual studio codeを開く前に環境変数PUPPETEER_TIMEOUT=0を指定します。
あるいは、HTMLで出力してから、ブラウザからPDFで保存するという方法でもできました。
※ 印刷のプレビュー読み込みが完了するのを十分に待たないと、画像が出力されない場合があるようでした。
あとがき
スライド作成ツールのMarpで電子書籍を作るという
少し変わった取り組みを紹介しました。
カタログや図鑑など、レイアウトが決まっている本を作るには、
結構便利な気がしています。
より詳しくは↓の書籍にまとめましたのでそちらも参考にして下さい。
書籍中で雛形としても使えるCSSも紹介しています。
冒頭で紹介した、この方法で作成した電子書籍は以下のものです。
※ kindle形式に変換するために、さらにPDF→MOBIという変換を辿っています
