2014-07-08 FormatterClub事例発表会

DITAとCSS組版で気軽にシングル ソース パブリッシング
AH CSS Formatter + DITA Makes
Single Source Publishing Easiercoolia, Inc.

About coolia, Inc.
 ドキュメント制作
 ソフト開発のバックグラウンド 商品企画
 開発、テスト、デバッグ
 ローカライズ
 リリースTechnicalDocumentation
End-to-end
SoftwareDevelopment
Expertise

Make it cool!
www.coolia.com© 2014 coolia, Inc.

DITAとCSS組版で気軽にシングル ソース パブリッシング
coolia, Inc.

11

Our Current Focus
「情報開発」

Information

Development
Modular, task制作
 部品化
oriented, topic タスク指向
based technical トピック指向
documentation
シングル ソース パブリッ Single source
シングpublishingÌDITAを利用ÌUsing DITA
テクニカル ドキュメント© 2014 coolia, Inc.

2

What is DITA?
Darwin Information Typing

Architectureの略称
XMLベースのフレームワー

クオープンな標準仕様
DITA Open Toolkitが事実上のリファレンス実装
有力なXML製品でサポート

 Darwin Information

Typing Architecture XML-basedframework Open standardspecification
 DITA Open Toolkit
serves as a reference
implementation. [*] Rich support frommajor XML products[*] DITA and DITA Open Toolkit are two different things, but for simplicity we will call them just “DITA”.
© 2014 coolia, Inc.

DITAとCSS組版で気軽にシングル ソース パブリッシング
coolia, Inc.

32

What is DITA? (contd.)

 特長
 部品化
 再利用
 情報タイプ シングル ソースで複数の出力形式
 テクニカル ドキュメントに最適 Modular, content reuse,

information type
 Single source, multipleoutputs
 Best suited fortechnicaldocumentation

HTMLEPUBXMLXMLXML
DITA

WebHelp
PDF© 2014 coolia, Inc.

4

Our First Adoption of DITA
出力形式：HTML所見：DITAは気軽にはじめられる
 導入しやすい
• 費用面
• 技術面

 大企業だけではなく、少人数でも有用
 仕様のバランスがよい。きつすぎず、ゆるすぎず© 2014 coolia, Inc.

DITAとCSS組版で気軽にシングル ソース パブリッシング
coolia, Inc.

 Output: HTML
 Findings: DITA
 Is easy to startwith. (both costand learningcurve)
 Benefits not only
large companies
but also smallbusiness.
 Has very goodbalance. Not too
strict, not tooloose.
53

Our Next Adoption of DITA
 ソフトウェア マニュアル
 100ページ弱の和文
 複数の出力形式：
 HTML EPUB WebHelp WebHelp Mobile
 PDF

 Software Manual(Japanese): –100pages
 Multiple outputs: HTML EPUB WebHelp WebHelp Mobile
 PDF

 スコープ外：
 縦書き
 ルビ
 数式

 Our of scope: Vertical writing Ruby Math© 2014 coolia, Inc.

6Problem
DITA ≠ 真のシングル ソース パブリッシング
Ì組版がシングル ソースになっていないXMLXMLXMLDITA?

DITA ≠ True

single sourcepublishingÌLack of singlesource
formatting

HTMLEPUB
WebHelp
PDF© 2014 coolia, Inc.

DITAとCSS組版で気軽にシングル ソース パブリッシング
coolia, Inc.

74

PDF is the Most Difficult Part
 Uses its own XSLT.
PDFは独自の変換経路
 Other outputs share 他の対象出力形式はコアの
the core HTMLHTML変換を共有
transformation.
 XSL-FOからはPDFしか得られ
 XSL-FO serves PDF
ないonly.

Ì手間のわりに、得るもの

Ì Time-consuming,

は限定的

small gain.

CSS
XMLXMLHTMLDITA
XMLXMLXMLEPUB
Synthesis

HTMLXMLXMLSynthesis &Formatting© 2014 coolia, Inc.

FormattingXSL-FO

WebHelp

Encoding

PDF[*] Images for illustrative purposes only. Not the actual design diagrams.

8The Kernel of the Issue
 今や需要はWebが中心
 すべてがHTML。多様なデバイスとブラウザがCSSで動的にレンダリングする
 PDFだけは、XSL-FOなどで組版したものを、限られたデバイスやリーダーで表示する
 一方でPDF需要は依然として高い
Web
HTML+CSS Today's demand is Web-centric.

 Everything is HTML,formatted with CSS,
rendered dynamically onvarious browsers on variousdevices.
 Only PDF is formatted withXSL-FO, displayed on limited
readers on limited devices.
 But the demand for PDF isstill high.

ChromeFirefox
WebKitIE© 2014 coolia, Inc.

DITAとCSS組版で気軽にシングル ソース パブリッシング
coolia, Inc.

95

CSS Formatter Comes to Rescue
CSS Formatter がWebブラウ  CSS Formatter

plays like one of
ザのようなはたらきをしWeb browsers.てくれるÌ Making PDF isÌあたかもレスポンシブWeb
now just another
デザインの一種のごとく
adaptation ofRWD.
PDFを作成Web

ChromeHTML+CSS

Firefox
WebKitIE
CSS Formatter© 2014 coolia, Inc.

10

DITA with CSS Formatter いったんHTMLに集約してから、  HTML as presentation
hub
PDFに出力Ì Simplified, true single
Ì 工程が単純化され、真のシングsourcing

ルソース化 Written only in XML Presented only inHTML Formatted only in CSS

 執筆はXMLだけ 表現はHTMLだけ
 組版はCSSだけCSS
XMLXMLDITAXMLXMLXMLHTMLEPUB

Synthesis

HTMLXML
XMLFormatting

WebHelp
Encoding© 2014 coolia, Inc.

DITAとCSS組版で気軽にシングル ソース パブリッシング
coolia, Inc.

CSS
Formatter

PDF
116

Develop CSS for Each Output?
Sassでより簡単に
Sassとは CSSプリプロセッサ
 フリー
 とても簡単• 純粋なCSSを拡張していくだ
けではじめられる

Sass makes iteasier.
What’s Sass?

 CSS
preprocessor
 Free Very easy tolearn• You can startfrom pure CSS.

© 2014 coolia, Inc.

12

With Sass, you canスタイルシートをコンポーネント化できる

 共通CSS＋出力形式特有のCSS
変数を使える条件分岐できる @if, @for, @while, @eachstylesheets.

 Base CSS + outputspecific CSS's Use variables.
 Use control directives.

 @if, @for, @while,@each
Output-specific
CSS
for …
CSS
for …

Base CSS
Sass© 2014 coolia, Inc.

 Componentize

Other CSS
Variables
Control Directives

DITAとCSS組版で気軽にシングル ソース パブリッシング
coolia, Inc.

CSS・・・for PDF

137

Other Useful Sass Features
 Master style (kindマスター スタイル的なもof)のを組み合わせられる @extend, @include, @content
便利な関数が用意されている color, opacity, string, number,listなど
関数を自作できる
それらを詰め合わせたフレームワークもある Compassなど

 @extend,@include,@content

 Helper functions
 color, opacity,string, number, listetc.
 Your own functions
 Popularframeworks suchas Compass© 2014 coolia, Inc.

Showcase
XML (DITA)

14

Clean, structured presentation in XHTMLCSS (Sass)[*] Based on a sample DITA project bundled with <oXygen/>.

© 2014 coolia, Inc.

DITAとCSS組版で気軽にシングル ソース パブリッシング
coolia, Inc.

15

8

Showcase: EPUB

© 2014 coolia, Inc.

16

Showcase: WebHelp© 2014 coolia, Inc.

DITAとCSS組版で気軽にシングル ソース パブリッシング
coolia, Inc.

179

Showcase: WebHelp Mobile© 2014 coolia, Inc.

18Showcase: PDF© 2014 coolia, Inc.

DITAとCSS組版で気軽にシングル ソース パブリッシング
coolia, Inc.

1910

DITA + CSS Formatter: Pros
 約50％の納期短縮

 Delivery time reduced by

 CSS Formatter出力は上出来 InDesignやWordでのマニュアル制作をリプレース可能

 CSS Formatter does an 豊富なCSS例を参考にできる

 Can exploit the power of スタイル作成の高速化
 組版でもCSSのデバッグは簡単（ブラウザでF12キー）
 CSS専用ライセンスのおかげ
で費用対効果さらにアップ

approx. 50%

excellent job.

 Competitive with oreven better than thelegacy works of InDesign
and Word

many CSS examples outthere.
 Style development getsfaster.
 Debugging CSS is still easy.
(F12 on modernbrowsers)
 Even more cost-effectivewith CSS-only Formatter
license© 2014 coolia, Inc.

20

DITA + CSS Formatter: Cons CSS Formatterのバグ すぐ修正！
 oXygen XML Editorのバグ すぐ修正！
 ページ メディア用のCSS応用例がほとんどない CSS Formatter向けの些細なCSS変更が、他のブラウザに影響することがある コンテンツ変更をともなうCSSに依存しがち 索引はめんどう
 標準化とその実装が普及していない© 2014 coolia, Inc.

DITAとCSS組版で気軽にシングル ソース パブリッシング
coolia, Inc.

 Encountered several bugsof CSS Formatter. (Andfixed quickly!) The same can be said foroXygen. (Also fixedquickly!) Virtually no samples ofpaged media CSS.
 A trivial change for CSS
Formatter can affectanother browser, and viceversa.
 Dependency on content
manipulation in CSS.
 Indexing is a tedious task.
 Standards and its
implementations notwidely accepted yet.
21

11

Our Current Workflow
CSS
Sass
⑤
Subversion
XMLXMLXML

⑥

XHTML

DITA-OT
Custom XSLT

PDF

CSS
Formatter

EPUBWebHelp
HTML Help

Text
Markdown

WebHelpFeedback

②

DOCX

WebDAV④①oXygenXML Editor© 2014 coolia, Inc.

③MS Word

Review&Communication
Authors

Templates

Reviewers

22Summary DITAはシングル ソース化に適している DITAは気軽にはじめられる 費用：DITAはフリー 規模：少人数チームでも有用 DITA ≠ 真のシングル ソース パブリッシング PDFは他のHTML系出力形式と違いすぎるし、難しい
Ì DITA＋CSS Formatter ≒ 真のシン

グル ソース パブリッシング© 2014 coolia, Inc.

DITAとCSS組版で気軽にシングル ソース パブリッシング
coolia, Inc.

 DITA facilitates singlesourcing.

 You can start DITA small.

 Cost: DITA is completelyfree.
 Scale: Even a small teamwill find DITA beneficial.
 DITA ≠ True single source

publishing PDF is too muchdifferent and moredifficult than HTMLvariant outputs.
Ì DITA + CSS Formatter ≒True single source
publishing2312