13
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

今CSS組版で同人誌を書くとしたら 2017

Last updated at Posted at 2017-12-14

技術系同人誌 Advent Calendar 2017の名目上9日目です。
なんかすんごい勢いで枠埋まってるので日をさかのぼって登録してます。


何度も頓挫させてるのではっきり言って信用ならない情報なのですが、
仮にこれから私がCSS組版で同人誌を書くとしたら
どんな環境を用意するか、というIFの話をします。
あと自分は業界人でもなんでもないただの素人だからそこ覚悟して読んでね。

基本ルール

「あるものを使う」

なるべく既にあるものを上手いこと使いまわして労力を削減します。
まかりまちがっても組版向けのレイアウトフレームワークを作るとかはやりません。

「Webに近しいものを使う」

HTML,CSS,JavaScriptとその親戚を優先して使います。
最終形がここなのでここから遠いものがプロジェクト内に
増えれば増えるほど道のりがしんどくなることが予想されます。

できればプログラム的なものはJSライクにだけ書ければいいようにしたいです。
やっぱアイソモーフィックですよアイソモーフィック。知らんけど。

HTML

何はともあれ本文用にMarkdown。

Markdownにはデファクトスタンダードがないという点がよく槍玉に上がるけど
合同誌向けでもない限りはオレオレ拡張でガンガン建て増しした方が結果的に良さそう。
なのでパーサがいじりやすいものだと良い。JS製ならmarkdown-itだと思う。

あとはstat blockのためにテンプレートエンジン的なものが欲しい。
PugかReact-JSXかEJSか。動的にやる必要はあまりない。
物によってはテンプレートエンジンがMarkdown読み込み対応してたりする。

最終的に複数のMarkdownやstat blockをレンダリングしたものを
1ファイルのhtmlに組み立てていく段階があり、そこを誰にやらすかでプロジェクトの方向が決まる。
JS書いてDOMを組み立てるか、前述のテンプレートエンジンを利用するか、
PostHTMLとかを使ってそれらのいいとこどりを狙うか。
JSからテンプレートエンジン呼び出して使ったり、
テンプレートエンジンのプラグインでMarkdownがパースできたり、
こいつらの多くは相互に相手を利用する方法を持ってるけど
結局根っこは誰が担当するのかというのを明確にしておく必要がある。

CSS

PostCSSかなー。
現代のCSSを効率的に書くのではなく未来のCSSを現代の環境に召喚するのが主目的なので
コンセプト的にはCSSNextとかが合致しているように見える。

Markdownは要素にクラスを当てるの超絶苦手なので
BEMやらコンポーネント指向やらのメインストリームの考え方とはものすごく相性が悪い。
あきらめてタイプセレクタまみれのスタイルシートを書くかMarkdownパーサを魔改造するか
他の方法で本文を書く修羅になるかを選ぶ感じだと思う。

JavaScript

お好きなaltJSをどうぞ。
レガシーブラウザ対応とか考える必要ないからES6をaltJSとして使えばいいと個人的には思う。
そのうち間に処理はさむことなく直で使えるようになるだろうからその時のリターンを見越す感じで。
採用したテンプレートエンジンが特定のaltJS推しならそっちでも。

ビルドツール/バンドラ

まあgulpかwebpackでいいのでは。シェル芸歴がないのでnpm-scriptsだとかえって手間かかりそう。

あとやってることがほぼほぼ静的サイトジェネレータなので
条件にマッチするものがあれば色々そっちに面倒を見てもらう手もあるか。

小さいプロジェクトなら最近出てきたparcelとかいうのも使えそう。
本を書く目的ならつまるところエントリポイントは本文一個なので相性は良いと思う。

ヘッドレスブラウザ

CSS組版的には環境を一変させてしまった危ないブツ。
これがあると原稿をpdf化するまでを全部スクリプトでできるようになってしまう。
でもまだ全然いじれてないのでコメントできない。

どうせデザインやる時にchrome dev toolは使うのでヘッドレスブラウザ使うなら同系のpuppeteerになると思う。
もしくははるさめ氏の https://www.npmjs.com/package/viola-savepdf に任せる。

字詰め

  • Yaku Han JP
  • font-feature-settings: 'palt';

なんかすごいこだわりがあるのでなければこの二つさえあればどうにかなると思う。

Chromeのルビでかすぎ問題

stat blockの中身書き

直でjsonいじったりすると手計算部分とかで死にそうなので
基本的にオンラインキャラシーのようなものを用途別に作ってそっちからしこしこ入力したい。

13
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?