読者です 読者をやめる 読者になる 読者になる

#技術書典2 新刊メイキング

4月9日に開かれた技術書典2にて,弊サークルpentapodは「チートシートチートシート」という同人誌を頒布していました(またもや事後報告になりすみません…次こそはブログでも告知したい).

今回は私の他にも4人の方が執筆する合同誌という形になり,寄稿者の知名度にもあやかって(?)13時半には完売することができました. ここで,前回の記事と同じくこの本の制作過程を紹介しようと思います.

f:id:spring_raining:20170412194516j:plain

独自エディタ

複数の執筆者が別々に記事を書く時の問題点の一つに,最終的に記事をまとめた際のページ数の把握が難しいという問題があります. LaTeX等の場合,記事の執筆者がページ数を確認したい場合ビルド環境を用意してもらう必要があります. 今回の本は中綴じのためページ数を4の倍数にする必要があり,余計にページ数に注意を払う必要がありました.

そこで,今回は記事を執筆する際のページ数確認の参考になるよう,簡易なエディタを用意しました.

https://harusamex.com/tbf02-previewer/

f:id:spring_raining:20170412135713p:plain

↑のページを開くと,左ペインにMarkdownで原稿を書くエディタが,右ペインに原稿から最終的に印刷される紙のプレビューが表示されます. 何故このようにリアルタイムでプレビューができるかというと,背後にVivliostyle.jsが動いており,原稿が修正される度にCSS組版によりブラウザ上でレンダリングができるためです.

割と軽い気持ちで作ったこのエディタがあり得ないぐらい便利で,執筆中はとてもとてもお世話になりました. これだけのためにCSS組版を導入する価値があると思います.

github.com

組版

組版に使用するCSSは割と前回の成果を流用しており,前回のCSSと比べてそこまで変わったことはしてないです. 特筆できるような点は,今回はちゃんと表紙もCSSで組み立てたという点と,EPUB Adaptive LayoutをやめてCSS Paged Mediaを使うようにした点です.

組版に使ったCSSについては公開しているので参考までにどうぞ.

github.com

告知サイト

前回と同じく,今回も新刊の告知サイトを作ってみました.

https://pentapod.github.io/tbf02/

f:id:spring_raining:20170412141531p:plain

ソースを見ると妙な作りになっていることが分かりますが,これはNext.jsを使って作られています. Next.jsの詳しい説明は省きますが,Reactを使ったWebサービスを良い感じに作れるフレームワークといったもので,最近何かと話題に出る事が多い(個人の意見)です.

Next.jsはサーバサイドレンダリング(SSR)もしてくれますが,github.ioのような静的なページホスティングサービスに向けてページをレンダリングしてくれる機能はありません*1. そこで,このようなスクリプトを用意して,SSRされたページを無理矢理wgetで取ってきて保存するという方法でgithub.io向けのページを生成しています. でも…まあ…こういう用途で無理してNext.jsを使う必要は無いような気がします…

github.com

合同誌ってどうやって寄稿者を集めているんですか

↑これはとても困りました. この本の場合だと,前回同人誌を頒布したときに興味を持って頂いた方に個人的に声をかけたのですが,これは一般的なやり方なのか… 合同誌を作る時ってどうやって寄稿者を募るのが一般的なんでしょうか? やっぱり公募?

入稿

今回はねこのしっぽに依頼しました. オフセットB5モノクロ24ページ(表紙: ホワイトポスト マットPP加工/本文: 上質紙 90kg)を150部印刷して41,600円になりました. マットPP加工なので表紙がサラサラです!

www.shippo.co.jp

ねこのしっぽではpdf入稿を受け付けていたので,前回のようにaiテンプレートに貼り付ける作業は必要なくなりました. 入稿の時も裁ち落としへの塗り足し忘れがありましたが,上手く汲み取って塗り足してくれたりとプロの仕事を感じました.

CM

残念ながら会場で完売となってしまった「チートシートチートシート」ですが,電子版なら今すぐ入手することができます! ご興味あればぜひぜひご覧ください🙏 また,夏コミにもエントリーしているので機会があれば再販するかもしれません.要チェック!

booth.pm

*1:ちょうど今議論されてるのでそのうち実装されそうです https://github.com/zeit/next.js/issues/604