UIT INSIDE

LINE UIT室の開発者による「最新のフロントエンド」をキャッチアップできる Podcast

  • オープニング
    00:00
  • 1. キャスト自己紹介
    00:42
  • 2. 技術書典について
    01:20
  • 3. 冊子の制作と CSS組版
    03:04
  • 4. Vivliostyle とは?
    05:47
  • 5. Vivliostyle と標準仕様との関係性
    08:14
  • 6. 印刷物におけるCSSの活用事例
    09:49
  • 7. か-22 で Vivliostyle の合同誌出すよ!
    12:54
  • 8. クロージング
    14:13

ep.8 技術書典と Vivliostyle - 広がる CSS の活躍の場

2019/04/04
1473 views
HANATANI Takuma緑豆はるさめ

花谷 (@potato4d) と緑豆はるさめ (@spring_raining) の二人で、技術書典、CSS 組版、Vivliostyle について話しました。

ゲスト紹介

spring_raining

技術書典

https://techbookfest.org/

  • 4/14(日) に 6 回目が開催される技術同人誌即売会
  • 毎回 1 サークルが数百冊〜数千冊を頒布するなど勢いが伸びている
  • Web フロントエンド島は特に活気があり、目玉になっている

Web 技術における執筆環境

  • 執筆というと Word や TeX の印象があるが、今は Web 技術で可能
  • 文書記述とレイアウト装飾は分け、 CSS で組版を行っていく
    • Draft の CSS の機能を使うことによって、ページ単位にわけられた印刷用のスタイルの装飾も可能
  • 本文記述も Markdown など、エンジニアが慣れ親しんでいる方法で書いていくことが可能
    • はるさめさんのケースでは、 Markdown + CSS の構成に、ビルド用の HTML は pug を、ビルドツールは Gulp で運用した実績などがある
    • 最近は NPM scripts で十分要件を満たせるので移行しても良い

Vivliostyle

https://vivliostyle.org/ja/

  • 組版でも十分な力を発揮する CSS の仕様の一方、ブラウザの実装が追いついていない場合なども多々ある
  • Web ブラウザ向けのポリフィルとして、また、より詳細な設定ツールとして Vivliostyle という OSS が存在する
  • Vivliostyle のポリシーとしては Draft として生きているものを尊重しているスタイル
    • 将来的な Web 技術としてあり得る範囲を主にサポート

Real world CSS for Typesetting

  • 現実世界での事例として、技術書典での利用実績はもちろん、開発者が触れる機会が多いドキュメントの記述でも使われている
    • 例えば、一部家電製品の取扱説明書では、実際に CSS 組版での印刷実績などが存在する
  • 装飾に凝らないある程度までうまく作られたものを作るには十分
    • どうしても専用のデザインツールには敵わないこともある
  • より詳しく知りたいかたは技術書典 6 の Vivliostyleユーザー会 の合同誌を見てみる選択肢も

その他 UIT で話題になったトピック

BGM & SE: 魔王魂