このすみノート

Webエンジニアが技術や趣味を書くブログです。

技術書典6に向けて、技術系同人誌の執筆・制作環境についてまとめてみる

私は技術書典4・5と、個人でサークル参加をしてきたサークル主です。本の制作環境を迷いながら選択することが多かったので、技術書典6にサークル参加される方への備忘録も兼ねて、まとめてみました。

まずは技術同人誌を執筆するための制作環境ですが、私が観測した範囲内では、以下のいずれかでした。

  1. Microsoft Word / Googleドキュメント
  2. Markdown
  3. LaTeX
  4. InDesign / CLIP STUDIO
  5. Re:VIEW単体
  6. Re:VIEW + (InDesign / CSS組版)などの組み合わせ
  7. VivliostyleでCSS組版

それぞれ簡単ではありますが、所感をつらつらと綴ってみます。なお、眠くて概要を説明する気力がなかったため「◯◯とは?」的な内容は、それぞれのワードで検索して補っていただけると幸いです。

Microsoft Word / Googleドキュメント

WordとGoogleドキュメントは、もっともお手軽な選択肢です。環境構築が不要で、すぐに書き始めることができます。私は、技術書典4の同人誌はGoogleドキュメントを使って書きました。

プログラムを掲載する領域は、1x1マスで枠の大きいテーブルを作って、テーブルの背景色を変えて中に文字を書けば作れます。画像の配置がとても柔軟なので、スクリーンショットを多用する本との相性は良かったです。

私もハマったのですが、Googleドキュメントには罠があります。「B5」のサイズが「JIS B5」じゃないため、絶妙にサイズが異なります。最終的にはWordで微調整してから、PDFを生成して印刷所に提出しました。

tanjoin.hatenablog.com

Markdown

Markdownでは、そのものズバリの本があります。「Markdownで技術同人誌を書こう!」です。表紙のキャラクターがとても可愛いです。

booth.pm

ちなみに、私は当初Gitbookで書こうとしていました。しかしながら、謎の空白ページができてしまったりと、どうにもうまく調整ができなかったので途中で挫折しました。

ただ、私がGitbookで悪戦苦闘していたのは1年前なので、現在は様相が変わっているかもしれません。

github.com

Markdown形式のドキュメントを書くように技術同人誌を作ることができるサービス

私は「技術同人誌再販Night」のLTで知りました。「Markdownで技術同人誌を書こう!」のFlightBooksさんは、「Markdown形式のドキュメントを書くように技術同人誌を作ることができるサービス」を、アルファ版としてリリースしています。

flightbooks.pub

Markdownだと細かい体裁にこだわるのは難しいのですが、本は見た目よりも内容が大事なので「書き慣れたMarkdownを使ってとにかく書く!」というのは、ありな選択肢だと思ってます。

Markdownで気軽に書くという選択肢

藤原さんが技術書典4で頒布した同人誌がベースとなっている、「Markdownライティング入門」があります。ちなみに、技術書典4の非公式アフターでは藤原さんと近くの席だったので、色々とお話したことを覚えています。

本を書くためというよりは、純粋にMarkdownを有効活用するための本です。そう、我々はプレーンテキストで気楽に書きたいのです。

LaTeX

私の理解が正確なのかは定かではないのですが、LaTeXをラッパーしたのがRe:VIEWであると認識しています。ただ、Re:VIEWを介さずにLaTeXをそのまま使って書くこともできます。

ちなみに、私はいまだにLaTeXの修正で詰まります。覚えれば書けるのかもしれませんが。LaTeXを自由自在に扱っている方達はすごい!

f:id:konosumi:20190107231302j:plain

InDesign / CLIP STUDIO

CLIP STUDIOは、湊川さんの「マンガでわかるDocker」でお馴染みです。「技術同人誌再販Night」のLTで実演してましたが、同人誌の印刷所別にフォーマットを最適化して出力できる機能がすごかったです。

なお、マンガやイラストも描ける方に向いてます。

webdesign-manga.com

InDesignも同じく、本の中身のデザインを工夫する方には向いてます。

私は絵心もなく、どちらも使ったことがありません。色々と紹介できれば良かったのですが。次回の技術書典6のアフターイベントでは、皆さんの執筆環境の話が聞いてみたいです。

Re:VIEW単体

「Re:VIEW」は最近、バージョン3.0がリリースされました。なお、Re:VIEWのバージョン設定はconfig.ymlのreview_versionで切り替えることができます。ただし、3.0系の設定は2.X系との互換性がなく、少し書き方が違うみたいです。

そのため、3.0系のRe:VIEWフォーマットは少しずつ普及していくのではないかと予想しています。私もまだ、3.0系の情報には追いつけておりません。

本のコンパイル環境はDockerがダントツにお手軽です。それは昨年のブログに書きましたので、もしよろしければご覧ください。

www.konosumi.net

Re:VIEWテンプレート

Re:VIEWは自分で設定をあれこれ書くと大変なので、テンプレートを使うパターンが多いです。私が知っている範囲内では、下記のどちらかが選択肢として挙げられます。

  • TechBooster/ReVIEW-Template
  • Re:VIEW Starter (#reviewstarter)

TechBooster/ReVIEW-Template

https://github.com/TechBooster/ReVIEW-Template

TechBoosterのReVIEW-Templateは、ダウンロードするだけですぐに使い始めることができます。ただし、色々とカスタマイズされている影響か、本のコンパイル時間ではRe:VIEW Starterに軍配が上がります。

「vvakame/review」のdockerを使ってコンパイルします。

docker run --rm -v `pwd`:/work vvakame/review:2.5 /bin/sh -c "cd /work/articles ; review-pdfmaker config.yml"

Re:VIEW Starter (#reviewstarter)

https://kauplan.org/reviewstarter/

@_kauplanさんのRe:VIEW Starterは、選択形式で環境を構築するため、自由度が高いです。同じく、ダウンロードするだけで使いはじめることができます。

「kauplan/review2.5」のdockerを使ってコンパイルします。

 docker run --rm -v $PWD:/work kauplan/review2.5 /bin/bash -c "cd /work; rake pdf"

ちなみに、どちらを使っても良さげな本になります。本文の見た目や外観に違いがあるので、気に入ったほうのテンプレートを使うのがオススメです。

Re:VIEWナレッジベース

私は最近、「リンクが水色の枠で囲われてしまうトラブル」に悩まされていました。色々と検索をした結果、最終的には「Re:VIEWナレッジベース」で解決しました。

Re:VIEW ナレッジベース — Re:VIEW knowledge ドキュメント

Re:VIEWの開発者が自ら書いているナレッジベースのため、内容の正確性が高いです。リンクが水色の枠で囲われてしまうトラブルも、「\hypersetup{hidelinks}」で無事に直りました。

なぜかRe:VIEWはググラビリティが低く、思うような解決方法にたどり着けないことが多かったのですが。「Re:VIEWナレッジベース」の存在を知ってからは、悩まされることが少なくなりました。

Re:VIEW記法のチートシート

Re:VIEWは記法が独特なので、チートシートが必須です。ブラウザに固定したり、印刷したりして使います。

Re:VIEWチートシート · GitHub

ReVIEWチートシートを作りました - ひつじのにっき

Re:VIEW + (InDesign / CSS組版)などの組み合わせ

Re:VIEWを単体で使わずに、何かと組み合わせて使う方法です。

Re:VIEW + InDesign

「Re:VIEW+InDesign制作技法」という書籍があります。Re:VIEWの原稿を変換して使うというアプローチです。

  • Re:VIEWの原稿から、InDesign上で扱いやすく、またいろいろな書籍に対応できる汎用性のあるXML――IDGXML――に変換できること。
  • 従来のように手動で紙面化する過程で原稿とDTPデータを乖離させてしまうのではなく、(LaTeXほどとはいわずとも)文章の修正はRe:VIEWの原稿で行い、再び容易に紙面化し直せるよう、JavaScriptのプログラムを用意すること。

review.kmuto.jp

Re:VIEW + CSS組版

技術書典4で一緒にサークル参加した「Grand Pa-Ma」のグランパさんは、CSS組版勢です。

技術書典5で頒布した本を読ませていただいたのですが。本文内の「マゴ」と「グランパ」の声の掛け合いの配置が鮮やかで、CSS組版の威力を知りました。

at-grandpa.hatenablog.jp

細部まで理解できてはいないのですが、要約すると「HTML + CSS」を活用したデザインテンプレートを経由して、それを最終的にPDFに変換して出力する方法だと思います。

VivliostyleでCSS組版

グランパさんは「Re:VIEW+CSS組版」ですが、VivliostyleでのCSS組版もあるみたいです。技術書典6の「Vivliostyleユーザー会」さんの本が期待されます。CSSで本が作れます!

さいごに

執筆環境の選択は自由なので、色々と試してみるとおもしろいです。

ちなみに、私は技術書典4ではGoogleドキュメントを使い、技術書典5ではRe:VIEWを使って書きました。サークル参加に向けた準備や心構えなどは、「技術同人誌を書こう!」を読んでだいたい理解しました。

私の雑な直感では、技術書典6の応募サークル数を700〜800と予想しています。技術書典4から技術書典5で参加サークル数が200ほど増えているため、同じくらいの増加率はあるような気がしています。そして落選が怖いです。

宣伝: 技術書典6のこのすみ堂

技術書典6のこのすみ堂(自サークル)では、当選すれば「プログラミング言語Kuin」の本を書きます。Kuinの本は世の中に一冊もないので、かなりニッチな本になります。50冊くらいは頒布できたら嬉しいなぁ。

まあ、ニッチな領域こそ同人の真髄ではないかと思いますので、気楽に頑張っていきたいと思います。

www.konosumi.net

プログラミング言語Kuinのお試し版を配布中

昨年の12月に「プログラミング言語Kuin」の同人誌を20ページほど書きまして、それをお試し版として頒布中です。

booth.pm