id:masawada です。4/14(日)に開催された技術書典6にて弊サークル「はてな技術書典部」のスペースにお越しくださったみなさま、同人誌を購入いただいたみなさま、ありがとうございました。当日は想定を大きく超える方々にお越しいただき、15時過ぎには全在庫を完売いたしました。
感謝を込めて、本稿では今回技術書典に同人誌を出すにあたって培ったRe:VIEW Tipsや表紙のデザイン秘話についてご紹介したいと思います。表紙のデザインについては、実際に作業を担当した
id:mazcoが執筆したものです。お楽しみいただけると幸いです。
Hatena Tech Bookを支えるRe:VIEW Tips
Hatena Tech Bookを制作するにあたって、Re:VIEW 3.0を利用しました。Re:VIEWは書籍執筆支援システムのひとつで、PDFやEPUB、InDesign XMLなど様々な形式で書籍を書き出すことができます。技術系の同人誌を制作する際によく利用されており、私個人も以前別のサークルの同人誌を制作した際にRe:VIEWを利用しました。Re:VIEW 3.0は執筆開始時の最新バージョンで、現在(2019年4月)の最新バージョンは3.1*1です。
印刷所への入稿をPDFで行うため、PDFに変換できるよう環境を整えました。PDFに変換するためにはLaTeXの環境が必要です。これはRe:VIEWの内部でdvipdfmxを利用しているためです。実際にデバッグオプションを有効にしてPDFを生成すると、中間生成物として.texのファイルが出力されるのを確認できます。
版面設計や隠しノンブルの設定などいくつかの設定についてはconfig.ymlファイルを編集することで達成できますが、その他の細かな見た目の調整についてはLaTeXを直接触ることになります。そのため、本稿で紹介するのはどちらかというとRe:VIEWというよりはLaTeXで問題解決する方法になります。
複数人で編集する環境を整える
まずは複数人で編集できる環境を整えました。執筆者全員がリポジトリをcloneしてすぐに書き始められるよう、コンパイルは全てDockerの上で完結するようにして、 rake pdf コマンドでPDFが生成されるようにしました。また、著者ごとにディレクトリを切ってワークスペースを分離することで、他人の変更に影響を与えないようにしました。
articles ディレクトリに template ディレクトリを作成し、本文ファイルの article.re と、画像を設置する用の images ディレクトリを配置しました。template ディレクトリを自分のはてなIDに変えてコピーすれば自分のワークスペースを作成することができ、誰でも簡単に書き始められる状態になっています。
.
└── articles
├── masawada
│ ├── article.re
│ └── images
│ └── example.jpg
└── template
├── article.re
└── imagesRe:VIEWでコンパイルする際はこのディレクトリを直接見るのではなく、Rakeで事前に結合して .articles ディレクトリに書き出して利用しています。各章(著者ごとに章が分かれます)のディレクトリ内には複数の本文ファイルを設置できるようにしており、これを辞書順で結合するのと、後述する著者情報の埋めこみの2つの処理をRakeで行なっています。また、画像ファイルについても .images ディレクトリという中間ディレクトリに書き出す処理を行っています。
上記ディレクトリの状態で rake pdf コマンドを実行して作成される中間生成物は以下のようになります。
.
├── .articles
│ ├── masawada.re
│ └── template.re
└── .images
└── masawada
└── example.jpgRe:VIEWの config.yml で
contentdir: .articles imagedir: .images
と設定することで、これらディレクトリをRe:VIEWのソースとして利用できます。なお、画像の配置仕様については review/format.ja.md at master · kmuto/review · GitHub を参考にしています。
目次と章扉に著者情報を自動で表示する
Re:VIEWには章ごとの著者という概念が無いため、目次や章扉に著名idを挿入したい場合は自分で整備することになります。
目次と章扉のidを自動で表示したい(=ハードコードしたくない)ため、章ごとに著者情報を持たせる必要があります。章ごとに何らかの情報を持たせるには、LaTeXのカウンタを利用します。カウンタは newcounter で定義できます。
sty/review-custom.sty に
\newcounter{author}
\renewcommand{\theauthor}{id:\@author}と定義しておいて各章の冒頭で
//embed[latex]{
\author{著者ID}
//}と記述することで、本文中では \theauthor で「id:著者ID」という著者情報を取得できるようになります。
さらに今回は、Re:VIEWのモンキーパッチの仕組み*2を利用して記法を追加し、これを利用しました。review-ext.rb に
module ReVIEW
module LATEXBuilderOverride
Compiler.definline :author
def inline_author(author)
"\\author{#{author}}"
end
end
class LATEXBuilder
prepend LATEXBuilderOverride
end
endと記述することで、本文中に @<author>{著者ID} と書けばLaTeXにコンパイルする際に \author{著者ID} と変換されます。このように記法を追加することでembedを利用するよりもRe:VIEWらしく記述できるようになります。また、embedを使用すると特定の形式のみ(ここではLaTeXのみ)でしかこの情報を利用できませんが、 review-ext.rb で対応すればEPUBなどの他の形式でもこの著者情報を利用できます。
あとは著者IDの指定を自動で挿入できるようにすれば良いだけです。Rakeで各章ファイルを結合するときに、ファイルの冒頭に @<author>{著者ID} を自動で挿入します。前項で説明したとおり各章のディレクトリはその章の著者はてなIDにしているため、この情報を利用します。これで各章に著者情報を持たせられるようになりました。
著者情報を指定できるようになったので、目次や章扉からこれを利用します。
章見出しの設定時に目次の内容の設定が行なわれているので、 \def\@chapter で章見出しの設定を変更します。sty/jsbook.cls の \def\@chapter を sty/review-custom.sty にコピーしてきて、 \addcontentsline を
\addcontentsline{toc}{chapter}%
{\protect\numberline
{\@chapapp\thechapter\@chappos}%
#1 (\theauthor)}%とします。これで目次に著者情報を自動で埋めこむことができます。章扉の指定も同様に sty/jsbook.cls の \def\@makechapterhead を sty/review-custom.sty にコピーして、好みの箇所に \theauthor を埋めれば良いだけです。これで目次と章扉に著者情報を自動で表示できるようになりました。
付録Cの作り方
今回頒布したHatena Tech Bookは全7章+付録1つの構成でした。付録はAとBがなく、
id:Songmuさんの付録Cのみ。これは株式会社オライリー・ジャパンが発行している『入門監視』の付録Cをid:Songmuさんが執筆したことをオマージュしたものです。
ここまで来たらLaTeXに慣れている方はすでにお気づきかと思いますが、付録A、Bをスキップして付録Cにするには setcounter を利用します。
//embed[latex]{
\setcounter{chapter}{2}
//}付録は通常の章と同じ扱いになるため、変更する対象として chapter を指定します。通常の章は1始まりの数値、付録はA始まりのアルファベットで採番されますが、どちらの場合も setcounter では数値で設定します。この数値は0始まりになるので注意が必要です。次に表示したい番号が123の時は、122を指定します。付録Cは3番目なので、2を指定すれば期待通りの結果になります。
これをSongmuさんの原稿のみ冒頭の見出しよりも前に記述することで、付録Cを実現しています。
表紙のデザイン過程のご紹介
ここからはid:mazcoが表紙デザインをする上で考えたことを順を追ってご説明します。
普段はデザイナーとして働いています。グラフィックデザインの経験があり久しぶりに印刷物の制作を行ったため、非常に楽しかったです。
どういう表紙にするのか
まず表紙のデザインをする上で考えたのが、表紙のメインに何を据えるのか？ということでした。
今まで個人でも同人誌の表紙デザインなどをしていたのですが、創作漫画の同人誌ということもあり、ビジュアルをメインに展開していたため視覚的にアプローチができました。
しかし今回は、技術書でありはてなのエンジニアの様々な技術ということでひとつのテーマに絞られていません。ビジュアルをメインに扱っていた表紙のデザインとは今までと少し違うアプローチということもあり、表紙ってどうやって作るんだろうと少し悩みました。
デザインを落とし込む
今回のアプローチとしては考えたことは以下です
- イベントの参加者は技術に興味のある人である
- 自分の興味のある技術が書いてある本を求めている
- 表紙でどういった技術について書いてあるかがわかる
- 技術書などを常日頃から読むことがある人である
- 文字を読むことがあまり苦ではない
- 文字が多くても難しいと思わない
- 様々な技術がテーマの本である
- ひとつのテーマではないが、その分たくさんの内容が盛り込まれているということを伝える
- 表紙では雑誌のような実益性のある本だと伝える
- 一目ではてなの本であるとわかる
- テーマカラーを使い、統一感を出す
- エンジニアのはてなidを出す（認知度の高い方の名前を出す）
そこからデザインに落とし込んで、以下のような表紙になりました。
同人誌は有志で出しているということもありますし、遊び心などを加えたくて随所に細かく遊んでいます。そういう意味では、はてなのトーンとは少し違った雰囲気を出せたのではないかと思います。
本を囲むその周りの制作物
また、サークルカット、事前告知ブログのog:image、当日スペースに掲示するポスターやそのほか細かい展示物も制作しました。これらは全て表紙と同じトーンに統一しております。会場内で本を見かけてくれた人や、事前に告知を見てくれた人が探しやすいようにするためです。
techbookfest.org
developer.hatenastaff.com
ポスターに関しては身の回りのサイズ感でA4〜3くらいでいいかなと思ってしまうのですが、このサイズ感だとスペースに人が並ぶ際に隠れてしまうということもあります。「これはちょっと大きいだろ〜」くらい大きいポスターにしています。といってもA2サイズなのですがおかげで会場内でも見やすかったのではないかと思います。
考えるコツとしては会場のスケールで飾ることを念頭におくと自ずと大きさが必要ということがわかるのではないかと思います。こういった感じで、実際に手に持って見た感覚や、実利的な大きさで捉えた時の感覚などを踏まえて、値札やQR読み取りコードなど制作しました。
もし次にチャレンジする機会があれば、4色印刷以外の表現方法などに挑戦できたらなと思います。
さいごに
以上、今回のHatena Tech Bookの制作で培った技術についてご紹介しました。ぜひ次回の技術書典で皆さまの制作に役立てていただければと思います。
