『IE11以上対応できもちよく書くCSS』というタイトルで技術系同人誌を作り、2018年4月22日の技術系同人誌即売会の「技術書典4」に出展しました。
制作編と出展編で分けて記事を投稿したいと思います。
テーマ
技術書典の出展は前回が初めてで、今回で2度目。
今回もいろいろ案を出しました。最終的に、元同期と話していたときにもらった案が需要ありそうだったのと、自分でもそういう本が欲しかったので「IE11以上対応することで良くなること」をテーマにしました。
当初は、「IE11以上対応にすることで、これだけのコストが下がる」というざっくりした数字まで出せたらいいなと思っていましたが、数字を出すのがそんなに簡単ではなかったのでやめ、特にCSS3以上でIE11以上に対応している便利できもちいいものをリファレンス的に紹介する本にしました。
執筆方法
CSS組版で行いました。
環境
- テキストエディタ（Markdown形式）
- Pandoc
- CSS
- gulp
- 独自PHPスクリプト
- Vivliostyle
- Chrome
- Photoshop
- Illustrator
- Git
の環境で執筆。書き出してみると、わりと面倒なことをやっているな、という感じがありますが、特にこの執筆環境で必須なのは、次のとおりです。
- テキストエディタ（Markdown形式）
- Pandoc
- CSS
- Vivliostyle
- Chrome
Markdownの形式さえ覚えれば、あとはPandocやVivliostyleの設定の仕方を覚えるだけでCSS組版ができます。といっても、そのCSSを書いたり、Pandocの設定を探したりするのも割と面倒ではありますが、今回私は前回に使ったものをほぼそのまま使いました。今回も前回同様、レイアウトを自由に変更したかったので、CSS組版にしました。
CSS組版の流れ
CSS組版を上記の環境でした流れは以下です（基本的に前回と同様）。
- Markdown形式で執筆
- テキストエディタは使い慣れているAtomを使用
- 単純にHTMLに変換しただけではデザインをあてにくいところのみタグを記述しclassをあてる（奥付や、画像の横並びや、コラムなど）
- PandocでHTMLに変換
- gulpを起動し、特定のディレクトリ配下にあるファイルが更新されるとPandocでHTMLに変換するようにする
- HTMLに変換させた後は、目次の位置などのソースの微調整を独自PHPスクリプトで変換するようにgulpで設定
- 記述したCSSを適用
- Chromeで表示しVivliostyleのプラグインでプレビュー
- プレビュー画面を印刷画面からPDF保存
- PDFを入稿
すべて初めからHTMLで記述をすれば、かなり自由なレイアウトの紙面ができあがります。しかし、すべてHTML記述すると読みづらく書きづらいものです。私の場合はMarkdownをマスターデータとして、変更があればMarkdownファイルを編集する、自動組版的な形を取っています。
Viola という便利なツール（サービス）もあったのですが、既に環境を構築していたということもあり見送りました。
レビュー
- ターゲット層の方
- 技術的に秀でている方
にお願いしました。校正は、今回も時間的に厳しくセルフチェックのみです。
表紙デザイン
写真
いつもお世話になっている方に、技術書典の売り子も込みで依頼。
当初は、どんなテーマで書くかも決まっていなかったのですが、「パトカー」で撮りたいと漠然と思ってました。実物のパトカーを使うのは難しいですが、劇用車というものがあり、ドラマなどで使われる「パトカーっぽいもの」だと数万くらいで借りられると知りました。しかし、調べていくと、遠い田舎まで行かないといけなかったり、手続きが面倒だったり、断念。
そんなこんなでテーマも決まり、「きもちいい」から連想するシチュエーションをいくつかピックアップ。「きもちいい」というキーワードが先に決まったのではなく、シチュエーションと同時に決めた感じです。
- プール
- お姫様の部屋
- ベッド
- バスタブ
- ハンモック
- カフェのカウンター
- 銭湯の湯船
- 銭湯の番台
から選んでもらって、
- お姫様ベッドで彼シャツ（彼シャツいいねとお互い話していたので）
- バスタブ
- 銭湯
がいいという返信をもらい、1つめは「彼シャツは彼の家で着るものだから、お姫様ベッドのシチュエーションがおかしい」となり、銭湯は今の髪型に合わないとなり（撮りたかった銭湯から連絡が来なかったというのもありますが）、バスタブに決定。
都内でいくつか撮影スタジオ（もしくは撮影可能で二次利用可能なバスタブの設備のあるところ）を検索しました。場所や値段や見た目がよさそうなところを選定。バラはバラ風呂用のものがAmazonで売っているので購入。赤いバラだけのものだとめちゃめちゃ高いので断念。その後、撮影用の服を一緒に買いにいきました（普段使いできるようなものを選んでもらいいくらかカンパする形）。
何カットか案を出して、撮影当日に挑む。スタジオでは、ストロボとシンクロコードを借りました。撮影時間4時間取ってましたが、ぜんぜん足りず。お湯貯めと排水に予想外に手間がかかりました。床に排水口がないのでホースで窓の外に排水しないといけないのをそのまま床にぶちまけてしまうなどして悲惨でした。
反省点もあり、カット数を減らし、1カット1カットにもう少し時間をかければ良かったと思いました。つまり、撮影前にデザインをきちんと考える。
印刷所と印刷方法
前回同様、日光企画です。早割が間に合いませんでした。
オフセット印刷、スタンダードフルカラーセット、B5判、76ページ（表紙4ページ込み）、200部
ポストカード印刷
電子版のダウンロード用カードの印刷は、グラフィックです。
ポストカード（オンデマンド）、片面カラー、上質180kg、100枚
まとめと告知
BOOTHで販売を始めました。電子版は下記からどうぞ。
IE11以上対応できもちよく書くCSS – masahiko – BOOTH（同人誌通販・ダウンロード）
商業版が出ました！
最新ブラウザ対応で気持ちよく書くCSSデザイン
物理本の通販はこちらです。
COMIC ZIN 通信販売/商品詳細 IE11以上対応できもちよく書くCSS