VS Codeのmarkdownで技術同人誌(商用利用)を執筆する方法比較!【PDF/ePUB】

プログラミング学習

2010年頃にたくさん電子書籍の記事をたくさん書いていましたが、久々に電子書籍の記事です。noteも使ったのですが、markdownが利用できません。現在はVS Codeのmarkdownの環境に完全に移行しています。

markdownで技術書(同人誌)を執筆する方法は、実に多彩であり、普段はあんま迷わないのですけど、今回は悩んで軽くいろいろ使ってみることに。せっかく調べたので、覚書程度にまとめておきます。最終的に採用したのは最後のものになります。

VS Codeのmarkdownで技術書(同人誌)を執筆する方法比較!おすすめは?

まず、ざっくりとぐぐったあと、Twiterrでも情報収集しました。最初は簡単にすませたかったため、PDFを作成できるものを探しましたが、だんだんと組版の欲求がでてきてそこまでやることにしました。

Pandoc を描写エンジンに設定できる VSCode 拡張、Markdown Preview Enhanced、まじ最高なんだけど 80 万ダウンロードのそこそこメジャーなプロダクトなんだから、アイコンくらい設定して。https://t.co/pKg55kqBTD

— 大岡由佳『りあクト! 第3版』Booth/Amazonで近日刊行 (@oukayuka) February 27, 2020

1回docsに変換するのですね。PDFの直変換がぱっとしないときはよいアイデアという気がします。

Markdown Preview Enhanced で Pandoc をパーサーにして青空文庫ルビフィルターをかまし、Solarized Light テーマに合わせてスタイルをカスタマイズ。本文フォントはしっぽり明朝、見出しはヒラギノ角ゴ Pro。
これで ePub も docx も、なんなら PDF もそのまま作れる。これぞ最強の執筆環境だ! pic.twitter.com/rkw6ajSslk

— 大岡由佳『りあクト! 第3版』Booth/Amazonで近日刊行 (@oukayuka) January 12, 2020

参考までに、自分がまとめてる Pandoc 使い方メモです。https://t.co/QkHPLn3HFZ

— 大岡由佳『りあクト! 第3版』Booth/Amazonで近日刊行 (@oukayuka) January 13, 2020

いろいろと参考になりました。

技術同人誌の入稿用PDF作成(組版)については、個人的に「山の登山ルート」がいくつかあるような見方をしている。

– Re:VIEW→(LaTeX/CSS組版)→PDF
– (Markdown→)HTML/CSS→Vivliostyle→PDF(→入稿可能なPDF)
– Markdown→Pandoc→(LaTeX/Word/CSS組版)→PDF
– Word/PowerPoint→PDF

— 藤原惟📕 (@skyy_writing) September 1, 2019

Re:VIEW→LaTeX→PDF
HTML+CSS→Vivliostyle→PDF
Markdown→PDF
Asciidoc→PDF

お好きなものをお選びください

— なのなの (@nano2_aloerina) December 4, 2018

いろいろとありますね。

EPUB作る人は少数でほとんどは電子版もPDF。組版は粗くてもみんなそこまで気にしない。Re:ViewやSphinx、Pandocなど使われている。TechBoosterさんがテンプレートを出している関係で技術書典ではRe:View使用者が多い。 #jepa

— Jun Tajima (@JunTajima) May 29, 2019

組版はほどほどでいいですかね。ただ、デザインはできるとよいです。個人的にはCSS組版に流れ着きます。

LaTeXとCSS組版の比較

・装飾に強い
・周辺ツールの充実(例えば.mdから本文を生成するツールの選択肢はmd→texよりmd→htmlの方がずっと広い)
・旅行雑誌みたいに文章が並ぶことがメインコンテンツでない場合とかの対応性
あたりになるかと思います

— ライアーノーズ (@liarnose) November 20, 2019

夏コミ新刊、mdである程度書いてからRe:VIEW 3.0でレイアウトしたのだけど、システムとしてはありがたかった。でも細部をLaTeXで整えるのが大変すぎたのでCSS組版どうかなーと思ったが、まだやっぱり大変さはありそうという感じだった。
結局、自分が使える知識・技術とのトレードオフになりそう

— えすじ (@esuji) August 31, 2019

スポンサーリンク

VS Codeのmarkdownで技術書(同人誌)を執筆する方法一覧

Markdown-pdf

この拡張は簡単だったため、1番最初に試しました。

  • Vs Codeの拡張をいれてPDFに簡単に変換できます。お手軽です。
  • htmlにも変換できます。
  • highlight.jsにも対応。
  • CSSの適応はできたり、ページ数を表示したりできます。
一見、これでよさそうな気もしたのですが、そもそも書籍を作ることに特化していないためクオリエィが高い本が作成できません。物足りなさを感じて辞めました。ただの資料ならこれでもOKです。

Markdown Preview Enhanced

pdfやhtmlのエクスポート、pandocについてはこちらにまとめなおしました。

その他のpdf変換

他にもいろいろとあるみたいですね。ただ書籍用というより、ただPDFを作成するものが多いです。

MarkdownをPDFに変換する「md-to-pdf」は痒いところに手が届く素敵ツール | DevelopersIO
MarkdownをPDFに綺麗にいい感じに出力したい…!と探し回っていたところ、「md-to-pdf」が最も私の要件に合致したので使ってみました。

md-to-pdfは複数mdに対応しているよう。

md2pdf - CSSを組版に使ってMarkdownをPDFに変換
MarkdownをPDFにするソフトウェアは幾つもありますが、細かい組版に対応しているものは多くありません。ごく簡単なものであれば問題ありませんが、ドキュメントなどで体裁にこだわりたい場合もあるでしょう。専用アプリもありますが、自動化したいというニーズもあります。 今回紹介するmd2pdfはコマンド一つでMarkdow...

FlightBook

(19) FlightBooks🐤MarkdownでPDFが作れるさん (@FlightBooksJP) / Twitter

FlightBooksという楽にPDFが作成できるサービスのようです。

すごく簡単そうです。
  • 個人的にはさまざまな拡張が使える、Vs Codeから使いたかったが、オンラインエディタのため用途があわず見送り。
  • 速度が遅いらしいという情報もみかけました。

未使用のため、ざっくりとしかとらえていません。もっといいところもあるかもしれません。こちらは同人誌がでていますね。

gitbook

未使用で詳しく調べていないため、紹介だけです。複数のmdは対応しているようだが、webドキュメントメインでPDFの作成はやや思い通りにならないところがあるよう。

ローカルは問題ないよう。

PDF作成には電子書籍元年の頃?からあるcalibreを使う模様。

gitbookの使い方 - Qiita
description: Let's start documentation with gitbook-cli. gitbookの使い方 手軽に記述できる Markdown形式を利用して各種の文章を作成できる gitboo...

ただ、gitbook-cliは開発が止まっている模様。

OSSは停止し、有料化するようです。

Re:VIEW

詳細はこちらの記事に移動しました。

スポンサーリンク

VsCodeの技術同人誌のおすすめは?

Pandoc(htmlとePUB)

(追記)PDFを作る際に辞めにしたのですが、HtmlとePUBはいろいろと試した結果、Pacdocのエクスポート結果が気に入って使うことにしました。日本語情報も豊富です。

Markdown Preview Enhancedをプレビュー用に使っています。詳細はこちらです。

PDFは今のところ、Vivliostyleを使っています。Pandocをインストールして途中までやりましたが、途中でCSS組版に興味がうつり、Vivliostyleに切り替えました。

ただPDFもpandocも商用利用にも使われているみたいですね。

Vivliostyle(PDF)

もちろん、各々が触っている言語などにより導入しやすさも変わるでしょうが、個人的にVivliostyleを採用しました。採用理由は以下のとおりです。

  • 自由にデザインできるものがよかった。CSS組版で作成した本がわりと好みのデザインだった。
  • ブロガーなのでそこそこCSSはわかる。LATeXはわかりにくい情報を結構見かけた。
  • vueを使っていたため、nodo.jsとnpmがすでに入っていた。rudyなどを追加でいれたくなかった。
最初、知りたい情報はぐぐっても、Twitterをみても一部ないものやちょっとわかりにくいものがありました。でも、一度できてしまえば、あとは簡単ですかね。特に、Create Bookができたのち簡単になりました。最近、情報が増えてきましたかね。

markdown→html-[vivliostyle]→pdfをやる時のコツですが md→htmlはpandoc一択です –section-divsとヘッダにclassタグを設定できることを利用するとmdの特定の文法に場所によって違うcssを当てられるってのがだいじです

— ライアーノーズ (@liarnose) May 1, 2016

以前はmd → Html → PDFを生成する流れでやっていたため、少々面倒だったのですが、Create Bookができたのち、mdをpdfにダイレクトに変換できるようになりました。pandocもインストールしたけどいらなく。

Vivliostyleの商用利用は?

ライセンス形態が気になりました。

AGPL ライセンスであることによって、ソースコードを改変して、別製品にしたりWebサービスに埋め込む場合には、改変したソースコードを開示する義務がありますが、Vivliostyle をそのまま利用して、あるいは、Fidus Writer など、Vivliostyle を利用している別のサービスを利用して、商用の書籍を制作することに何ら問題はなく、制限なしで Vivliostyle を印刷やPDF生成に使用することができます。

https://vivliostyle.org/ja/blog/2018/11/12/interview-by-fiduswriter/

Vivliostyleの環境構築で混乱

初回インストールした際に、過去情報もあって若干混乱しました。おそらく下記のように進化しています。

viola-savepdf

vivliostyle-savepdf

vivliostyle-cli

npm install -g @vivliostyle/cli

そうか、viola-savepdf の後継が vivliostyle-savepdf なのか。#Vivliostyle

— 某ZR(ざんねん🙃) (@zr_tex8r) August 31, 2019

その後、create bookができたようです。今ならcreate bookを調べてインストールです。

Vivliostyleの使い方

簡単に書いてみました。

スポンサーリンク

VsCodeのePUBのReader

こちらを入れて使っています。ちょっと見るのには便利です。

Google Chromeの拡張もありますが、こちらの方がイメージしやすかったです。

スポンサーリンク

puppeteerとは

puppeteerという言葉がよくでてきます。

PuppeteerとはGoogleのメンバーが開発したOSSで、ChromeやChromium(vivliostyleのプレビューで使われている)のNodeライブラリです。

markdown-pdfの公式ダウンロード、Markdown Preview EnhancedのPDF変換時、そしてvivliostyleも。

現時点の CLI は CSS 組版と PDF 出力を実行するプラットフォームとして Chromium を利用している。これは puppeteer 経由で操作して をインストールすると puppeteer が定義したバージョンの Chromium を一緒にダウンロードする仕組みだ。

https://akabeko.me/blog/2020/11/vivliostyle/

つまり大元はみんな一緒のようです!やれることは似通ってくるかもしれません。

markdown-pdfやMarkdown Preview Enhancedとvivliostyleの違い

vivliostyleは本を作ることを目指しています。

  • 1番の違いに感じるのは、複数のmdファイルをPDF化できることです。
  • 章分けなどヘッダーの設定が充実しています(いまひとつのところもあります)
  • プレビュー機能もあります(これはMarkdown Preview Enhancedでもできますけど)

Font AwesomeのPDF埋め込みはライセンス的に可能?

ちょっと気になったので。ここしか記載がないっぽいですね。可能ぽい。

Embed FA Free in documents. (e.g. .pdf, .doc, etc.)

https://fontawesome.com/license/free

stackoverflowにも質問がありました。参考になるかと。

技術同人誌の表紙の作り方

自分で描けるならクリスタがおすすめです。Adobeと違って買い切りなのでたまに描く人におすすめです。

外注化するならココナラやsukimaでしょうか。

ご参考になれば幸いです。

コメント

タイトルとURLをコピーしました