Re:VIEWで技術同人誌を書いて出版するまで
TL;DR
技術同人誌出版めちゃ楽しいからみんなもやろうぜ。
技術書典９
8/1より、技術書典９のサークル参加申込みの受付が始まりました。
今回は完全オンライン開催かつ参加費無料なので、初参加のハードルはかなり低いです！
https://gyazo.com/d87514fe9ff8cd3a08a365def25354d5
また、技術書典が公式でオンラインの執筆支援イベントやるみたいなので、興味がある方はこちらも併せて見てみてください。
技術同人誌とは
「技術」に関する内容を記した個人出版の書籍のこと
プログラミングからデザイン、制作進行に関することなどあらゆる技術についての本がある
たまに死ぬほどニッチな同人誌が出ていてビビる
☆みんなのおすすめの技術同人誌書いておくれ
技術同人誌を頒布できるイベント
開催日：毎年８月（夏コミ）と１２月（冬コミ）
開催場所：東京ビックサイト（東京都・有明）
メインジャンルはアニメやゲーム、音楽などだが技術関連のサークルが集まった島がある模様
開催日：年２回（春・秋）
開催場所：池袋サンシャインシティ（技術書典４までは秋葉原UDX）
技術書のみで開催される同人誌即売会。おそらく国内最大のイベント
技術ジャンルごとに島が分かれている
次回の 技術書典９ は 2020/9/12-22 でオンライン開催。サークル参加申込中
開催日：これまで2019年7月と2019年12月の２回開催
場所：東京都・日本橋
サークル数が技術書典より大幅に少ないため、コミュニケーションが取りやすいらしい（下記記事より引用）
技術同人誌の良いところ
商業誌にはない細かい情報に出会える
はじめての＊＊的な本が多く、技術の入門に良い
本なのでパラパラできる
ニッチなジャンル・技術を手軽に推せる
出版のハードルが低い
技術同人誌から商業化チャンスがある
技術同人誌の良くないところ
書かれている内容が正しいとは限らない
情報がアップデートされない
積んじゃう
Re:VIEWとは
Re:VIEWは @kmuto さんを中心にOSSで開発されているデジタルで原稿を執筆するためのシステム システムのコアは Ruby で原稿周りのコアは TeX
見た目や記法を調整するときはRubyやTeXを書く必要がある
原稿は独自記法を使用して執筆する
コミュニティの規模がそこまで大きくないので、困ったときに解決方法が見つかりづらい
開発環境構築
環境構築方法
開発環境は次の３つから構築するのがメジャー
Re:VIEWの gem をインストールする
公式ドキュメントに記載されている方法
環境構築のためにRubyをデバイスにインストールしなければいけない
Rubyの環境があって細かくカスタマイズしたい・最新版を使用したい場合に良いかも
TechBoosterのテンプレートを使用する
TechBoosterが発行している技術書で実際に利用されているテンプレート
Re:VIEW 4.1に対応済み
GitHubリポジトリの「Use this template」から環境構築できる
手軽に最低限の設定をセットアップしたい場合に良いかも
Re:VIEW Starterを使用する
GUIからRe:VIEWの各種設定を説明付きでセットアップできる
Re:VIEWのバージョンが 3.x になっている
超気軽に体裁が整った設定をセットアップしたい場合に良いかも
ここでは、そこそこカスタマイズしつつ、新しいバージョンを使用したいので TechBooster のテンプレートを使用します。
TechBoosterのテンプレートからリポジトリを作成する
https://gyazo.com/a93beb78d0fcfa49cd0b3bf12e17ba5b
▲ Use this template ボタン
https://gyazo.com/f8b7a12654f102324a7e29a07b787876
▲ 適当な名前でリポジトリを作成
https://gyazo.com/a1e466087dadea3d39f0b0cf6bad9edb
▲ 作成したリポジトリ
ディレクトリ・ファイル構成
code:ファイル・ディレクトリ構成
.
│ # CircleCIで原稿をPDFにビルドするCI設定ディレクトリ
├── .circleci/
├── .github/
│ │ # GitHub Actionsで原稿をPDFにビルドするワークフロー設定
│ └── .workflows/
│ # 原稿に関するファイルを格納するディレクトリ
├── articles/
│ │ # ドキュメント
│ ├── doc/
│ │ # 画像のルートディレクトリ
│ ├── images/
│ ├── lib/
│ │ # Re:VIEWのスタイルディレクトリ
│ ├── sty/
│ ├── Rakefile
│ │ # 現行の目次ファイル
│ ├── catalog.yml
│ │ # Re:VIEWの設定ファイル
│ ├── config.yml
│ │ # コアで使用される文言ファイル
│ ├── locale.yml
│ │ # 原稿ファイル
│ ├── *.re
│ │ # ？
│ └── *.css
│ # PDFの出力例（無関係）
├── pdf-samples/
│ # 原稿校正のルール
├── prh-rules/
│ # GitLab CIで原稿をPDFにビルドするCIファイル
├── .gitlab-ci.yml
├── Gemfile
├── Gruntfile.js
├── build-in-docker.sh
├── package.json
├── rebuild-css.sh
├── redpen-conf-ja.xml
└── setup.sh
原稿のビルド
田村は以下の理由で原稿のビルドはGitHub Actionsでするようにしました。
ビルドごとに npm install が実行されるのが煩わしかった
Dockerを起動したくなかった
Rubyをインストールしたくなかった
ビルドのためにCommitする必要があるため、定期的にCommitできる
ワークフローファイルはテンプレートディレクトリに含まれているため、リモートリポジトリにCommitをPushすればビルドが自動で実行されます。
ビルドのワークフローは Build Re:VIEW to make distribution file という名前で実行されます。
https://gyazo.com/a2a3d51224fb77a355c8b5a18d850e77
TechBoosterのテンプレートの設定はデフォルトで紙版になっているため、PDFにトンボが含まれます。
https://gyazo.com/7359c915eb6f742d2b6f997f281c5159
▲ ビルドされたPDFファイル
電子版のPDFをビルドするためには、設定ファイルの用紙設定を電子版に変更する必要があります。
code:diff
# B5の設定(10pt 40文字×35行) - 紙版
- texdocumentclass: "review-jsbook", "media=print,paper=b5,serial_pagination=true,hiddenfolio=nikko-pc,openany,fontsize=10pt,baselineskip=15.4pt,line_length=40zw,number_of_lines=35,head_space=30mm,headsep=10mm,headheight=5mm,footskip=10mm" # B5の設定(10pt 40文字×35行) - 電子版
+ texdocumentclass: "review-jsbook", "media=ebook,paper=b5,serial_pagination=true,openany,fontsize=10pt,baselineskip=15.4pt,line_length=40zw,number_of_lines=35,head_space=30mm,headsep=10mm,headheight=5mm,footskip=10mm" 変更したら変更をCommitしてPushします。
すると、再度ワークフローが実行され電子版のトンボなしのPDFがビルドされます。
https://gyazo.com/d33d2cdfb83d1e5e1b82e53c29ce35ab
トンボのない純粋なPDFがビルドされました。
https://gyazo.com/ff078ec62b4a3d24892f0e08d1b66b8a
▲ ビルドされた電子版のPDFファイル
textlint の環境設定
textlint はルールに則った文章かどうかをチェックするツールです。
textlint で Re:VIEW の原稿で文章チェックできるプラグインが公開されています。
また、文章のルールは textlint-rule-preset-ja-technical-writing というルールセットを使用するのが手軽です。
さらに、GitHub Actionsで原稿チェックを行うように次のようにワークフローを追加します。
code:.github/workflows/textlint.yml
name: Check Textlint
on:
push:
paths:
- '**.re'
- '.github/workflows/textlint.yml'
- 'textlint/**'
jobs:
build:
name: Textlint
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
with:
fetch-depth: 1
- uses: actions/setup-node@v1
with:
node-version: 12.x
- run: yarn --cwd textlint install --ignore-scripts
- name: Check Textlint (with auto-fix)
run: yarn --cwd textlint lint --fix
- name: Check Textlint
run: yarn --cwd textlint lint
- name: Push auto-fixed files
run: |
git config --global user.name "${GITHUB_ACTOR}"
git config --global user.email "${GITHUB_ACTOR}@users.noreply.github.com"
if (git diff --shortstat | grep '0-9'); then \ git add .; \
git commit -m "👕 Fixed auto-fixable Textlint errors by github-actions"; \
git push origin HEAD:${GITHUB_REF}; \
fi
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
執筆
執筆期間
前回の技術書典に向けて執筆した２冊の執筆期間は次のとおりでした。
どちらも、調整自体は2020/03/14までやっていました。
GitHub Actions本：2019/12/08〜2020/02/15
ESLint本：2020/02/04〜2020/03/14
シンタックス
Re:VIEWでの原稿執筆はRe:VIEWフォーマットの独自シンタックスで行います。
シンタックスはMarkdownに似ていますが、利用できる機能は大きく異なります。
Re:VIEWで使用できるシンタックスは次のページで解説されています。
図表の参照
Re:VIEWでは図・表・コードの参照を識別子で行います。
code:原稿の例
具体的なコードの例を@<list>{main}で示します。
console.log('コード名');
//}
https://gyazo.com/762b6f26fdda115007106daa9b725ba5
▲ ソースコード参照の例
画像の挿入
画像は/articles/images/以下に配置したファイルを、ファイル名をIDとして原稿に挿入します。
次の例では /articles/images/screenshot.png を行に挿入します。
code:原稿の例
また、次の例は /articles/images/budge.png をインラインに挿入します。
code:原稿の例
例えば@<icon>{budge}のようなバッジがアカウントに付与されます。
インライン画像はバッジやタグといった文中にフォーマットされた文字列を埋め込んだり、横に画像を並べたい場合に使用します。
画像ファイルは次のセクションで解説されているルールに従って配置します。
改ページの挿入
改ページはLaTexを使用して挿入します。
code:原稿の例
# 1.1 タイトル１
...
\clearpage
//}
# 1.2 タイトル2
印刷・出版
印刷所
同人誌の印刷・製本を行う会社はたくさんありますが、技術書典では次の２社がバックアップ印刷所に指定されています。
バックアップ印刷所はプラン選択時に納期などが明確に決まっていたり、会場への書籍配送料が無料になったりとメリットが多いので強いこだわりがなければバックアップ印刷所を使用するのが良いでしょう。
田村の場合は、名前とサイトがかわいかったのでねこのしっぽを選択しました。
納期がギリギリすぎる場合はキンコーズのセルフコピー機を使用すると救われることがあります。
サイズの違い
同人誌の製本サイズには次の２種類が主に使用されます。
B5
アニメ同人誌のよくあるサイズ
でかいオライリー本と同じサイズ
A5
A4用紙の半分の大きさ
小さいオライリー本と同じサイズ
A4に2in1印刷して製本後をプレビューしやすい
製本方法の違い
同人誌の製本方法には一般的に次の２種類が使用されます。
無線綴じ
ページを表紙に糊付けして製本する方法
一般に売られている小説や漫画は無線とじが多い
ページの背表紙に近い側が見えなくなる
中綴じ
２ページ分の紙を針金で止めて製本する方法
パンフレットなどページ数が少ないものに多い
見開きにしやすい
ページ数が多い本には向かない
印刷方法の違い
印刷方法には次の２種類が使用されます。
オフセット
画質＝◎／少部数お値段＝△(画質優先なら○)／中部数お値段＝○(仕様により)／大部数お値段＝◎
刷版とインクを使用して印刷を行う方法
大量・繊細に印刷を行いたいならこちら
オンデマンド
画質＝○／少部数お値段＝◎／中部数お値段＝○(仕様により)／大部数お値段＝×
通常のプリンターのように紙に印刷を行う方法
500部以下で印刷の精度をそこまで気にしないならこちら
左綴じと右綴じ
左綴じと右綴じは間違えるとまじで残念なことになるので、間違えないようにしましょう。
左綴じ：本文が横書きの書籍☆
右綴じ：本文が縦書きの書籍
技術同人誌の本文は横書きなので、左綴じを選んでおけば良いでしょう。
見積もりと申し込み
※すべてねこのしっぽでの例です
だいたいの印刷費用
すべて店頭引取＆表紙・本文モノクロでの金額です。
A5 vs B5
A5・120P・50部・無線綴じ・オンデマンド：26,600円（532円/冊）
B5・120P・50部・無線綴じ・オンデマンド：32,000円（640円/冊）
部数による違い
A5・120P・50部・無線綴じ・オンデマンド：26,600円（532円/冊）
A5・120P・200部・無線綴じ・オンデマンド：61,200円（306円/冊）
A5・120P・300部・無線綴じ・オンデマンド：84,300円（281円/冊）
ページ数による違い
A5・120P・50部・無線綴じ・オンデマンド：26,600円（532円/冊）
A5・50P・50部・無線綴じ・オンデマンド：15,900円（318円/冊）
オフセット印刷 vs オンデマンド印刷
A5・120P・50部・無線綴じ・オンデマンド：26,600円（532円/冊）
A5・120P・50部・無線綴じ・オフセット：47,900円（958円/冊）
A5・120P・200部・無線綴じ・オンデマンド：61,200円（306円/冊）
A5・120P・200部・無線綴じ・オフセット：77,100円（386円/冊）
入稿時期による割引・割増
納期が 8/1 の直接搬入優遇イベントの場合、
7/21 までの入稿で 10% OFF
7/28 が通常締切
7/29 の入稿で 10% UP
本が印刷されるまでの手順
ねこのしっぽのオンライストア My@on にサインアップする
見積もり金額が確定したら申し込む
料金を支払う
原稿を仕上げる
オンラインで入稿する
届くのを待つ
感動したこと
結構しっかり原稿をチェックしてくれる
印刷日を間違えてイベント当日にしていたら「印刷日は入稿した日のほうが良い」と電話で教えてくれた
印刷所が書かれていなかったので書いたほうがいいことも電話で教えてくれた