お手軽にWebサービスを用いてMarkdownで技術同人誌を作成する

はじめに

FlightBooksというWebサービスを用いてMarkdownで技術同人誌を作成する方法の紹介です。

技術書典という技術同人誌を販売するイベントがしばしば開催されているので、技術同人誌を作ってみたいという人も多いと思います。
書籍を書くためによく使われるのが Re:VIEW というツールですが、これの環境構築が面倒そうに思った人が、とりあえず簡単に印刷用のPDFを作る方法の紹介です。
(技術書典10への申し込み締め切りが11/30、アップロード締め切りが12/24なので、頑張ればまだいけるかも!?)

Re:VIEWを使って同人誌を書いてみようと思った場合は、以下の記事を参照ください。
Re:VIEW(公式)
Markdownで書かれたブログ記事をRe:VIEWを使って「本」にしてみる
Re:VIEW環境をWindows10上で簡単に構築してPDFを出力するまで
review記法を覚えたくないけど執筆したい人の強い味方「md2review」の使い方

FlightBooksでの技術同人誌の作り方

FlightBooksとは

Markdownのオンラインエディタを用いて技術同人誌が作れるWebサービスです。
印刷所および電子書籍向けにPDFを作成でき、技術書典などで販売できます。
無料です。

私がさわってみたところ、Markdownでテキストを書いてPDF出力するだけで本が作れるので、「予備知識が何もないけど、とりあえず本を作ってみたい」という場合に、なんの準備もなく始められる点が素晴らしいと思いました。

FlightBooksの使い方について、公式のヘルプは以下にあります。
ガイド：エディタの使い方

上記を読みながら、私が実際に触って つまった所を開発者の ku-sukeさん に教えてもらったので、その内容を以降に記載します。

Chapterごとに本文を作成

FlightBooks では、Chapterと呼ばれる単位で本文を分けて作成します。
Chapterというのは目次に書かれる単位であり、最初にChapterを作って、ChapterごとにMarkdownで本文を書きます。

このChapterの先頭に「#が1つの見出し」を書くという制約があります(下図の赤枠部分)。
Chapterの先頭以外で「#が1つの見出し」を書くと、目次が意図しないレイアウトになってしまうので、Chapterの先頭以外では「#が2つ以上の見出し」を使います。

Chapterの順番変更

作成したChapterの順番を後から変更したいと思った場合は、ドラッグドロップで変更できます。
下図は「#1章」というChapterをドラッグしている時の画面です。

紙のサイズを選んでPDFファイルを作成

本文を書いたら、[ビルドする...]ボタンを押して、PDFファイルを作成します。
その際に、以下の4つの形式から選択できます。

• プレビュー(B5余白)
  • [印刷所向け(B5余白)]と同じ形式で出力します。違いは、各ページの冒頭にビルド番号が付くことです。
• 印刷所向け(B5余白)
  • 印刷所に印刷をお願いする際のデータには、数mmの余白を作る必要があります。そのため、その余白を含めたB5形式でPDFファイルを出力します。
• プリンタ用(B5)
  • 上記の余白を含まないB5形式のPDFファイルを出力します。技術書典やBOOTH向けの電子書籍は、この形式で出力すると良さそうです。
• 電子書籍用(A6)
  • A6形式のPDFファイルを出力します。横幅が狭くて長細い形式なので、Kindleなどの電子書籍向けと思います。

ビルドが完了しない場合

上記でのビルド実行後に、pdfファイルが作成されると[finish]と表示され、それをクリックすると、PDFファイルを表示できます。
しかし、ときどき[finish]にならない場合があります。
そういう場合は、[更新]をクリックしてください。
クリック時の反応はありませんが、実際には効果があって、しばらくするとuploaded(ビルド中)の表示がfinish(ビルド完了)に更新されることが多いです。

細かい部分を編集したい場合

出力したPDFに対して、細かい部分をどうしても直したいという人は、出力したpdfファイルのURLのファイル名の部分を "index.html" に書き換えてアクセスすると、PDFに出力する直前のhtml形式のファイルを取得できます。
(例)https://xxxxx/generation.pdf → https://xxxxx/index.html

そのhtmlファイルを手動で編集し、自分でそのhtmlファイルをPDFファイルに変換すれば良いと思います。
htmlファイルをpdfファイルに変換する方法

紙の印刷方法

上記で作成するPDFは、書籍の本文用のPDFです。
印刷所に印刷を依頼する場合、「表紙」と「本文」のデータを分けて送付することが多いようです。そのため、表紙用の画像を作成する必要があります。

(例)「ねこのしっぽ」という同人印刷所のページには、以下のように必要なデータ形式が書かれています。
原稿制作マニュアル | 同人誌印刷 ねこのしっぽ

表紙用の画像は、印刷所が指定するデータ形式で自分で作った上で、印刷所に印刷をお願いすることになります。

ちなみに、FlightBooksの表紙ジェネレーター(ベータ版)で、表紙用の画像を作成することもできます(とりあえず全部の欄に文字を入力して、画像取得ボタンを押せば、表紙用の画像がダウンロードできます)。

電子書籍用のPDF作成

技術同人誌を販売することで有名な BOOTH などは、PDFファイルを電子書籍として販売することが可能です。

ただ、FlightBooksで作成したPDFファイルは表紙がありません。
表紙を追加したいという場合は、なんらかのPDFの編集ツールを用いて、FlightBooksで作成したPDFに表紙を追加する必要があります。

もしくは、[細かい部分を編集したい場合] に記載した方法で、htmlファイルを手動で編集して、先頭ページに表紙を追加してから、自分でそのhtmlファイルをPDFファイルに変換するという方法もあります。

まとめ

初めて技術同人誌を書く人が、とりあえずお手軽にMarkdownで作成したいという場合に、FlightBooksは便利だと思います。

ちなみに私は、普段はエンジニアリングマネージャーとして、チームの皆で楽しく開発する施策を色々実施しています。詳しくは以下を参照ください。
1年以上かけて生産性倍増＋成長し続けるチームになった施策を全部公開

Twitterでも開発に役立つ情報を発信しています → @kojimadev