電子出版の変革─Web標準を利用したワンソース・マルチユースの実現に向けて / 20161213-xml-murakami

Web標準利用･実現向 XSPAセミナー 20161213 村上真雄 (@MurakamiShinyu)
㈱ビブリオスタイル Founder & CTO

目次 1. はじめに 3 2. Scholarly HTMLとは何か 6 3. 構造化文書の共通語としてのHTML
10 4. HTMLをセマンティックに 13 5. 「Web出版物」の時代へ 20 6. スタイルシート仕様CSSの進化 23 7. 画面も印刷もCSSで：Vivliostyleの取り組み 26 目次 2

はじめに 3

発表者自己紹介村上真雄 (MURAKAMI Shinyu) Twitter: @MurakamiShinyu 株式会社ビブリオスタイル取締役会長兼CTO
1990年頃からマークアップ言語と組版に関心をもち、テキスト整形ツール「XTR」を個人で開発し、フリーソフトウェアとして公開。その後、XML 組版ソフトAH Formatter（アンテナハウス社）の開発に携わる。 2014年、Webブラウザベース次世代HTML/CSS組版システムの開発のため株式会社ビブリオスタイル（Vivliostyle Inc.）を設立。はじめに 4

(Vivliostyle Inc.) 社名：株式会社ビブリオスタイル（Vivliostyle Inc.）社名の由来：Vivlio（βιβλίο /vivlío/ ＝ギリシャ語〈本〉）＋ style Webサイト：http://vivliostyle.com
設立：2014年8月代表者：代表取締役社長石田智之事業内容：電子出版のソフトウェア開発 W3C会員企業として電子出版・CSS組版関連の標準化活動はじめに 5

Scholarly HTML 何 Scholarly HTMLとは何か 6

Scholarly HTML=学術情報HTML 学術論文をHTMLで表現する方法を標準化しようとしている W3CにScholarly HTMLコミュニティーグループ www.w3.org/community/scholarlyhtml/ ドラフト仕様: w3c.github.io/scholarlyhtml/ 仕様をまとめてるのは Robin
Berjon: W3C HTML5仕様の元Editorで、現在は学術出版プラットフォーム(science.ai)開発者 Tzviya Siegman: EPUB3.1仕様のEditorであるなどW3CとIDPFの電子出版標準化で中心的な一人。学術出版社Wileyの情報標準化リーダー W3Cのコミュニティーグループであり正式なワーキンググループではないが、Web・電子出版の標準化で中心的な人たちが関わっているということ Scholarly HTMLとは何か 7

Scholarly HTML 目指他形式との変換をサポートすること直接手で書くことも簡単なことセマンティックに構造化されていること自動処理プログラムが簡単にできることなど。github.com/w3c/scholarlyhtml/blob/ghpages/goals.md Scholarly HTMLとは何か
8

Scholarly HTML 紹介 “What is Scholarly HTML?” Scholarly HTMLで書かれたScholarly HTML解説記事。
☞Vivliostyleデモ版あり松原隆彦講義録「宇宙論入門」 JAGAT XMLパブリッシング凖研究会でScholarly HTML版サンプル作成 Scholarly HTMLとは何か 9

構造化文書共通語 HTML 構造化文書の共通語としてのHTML 10

XML 分野最適構造化文書形式 JATS（学術情報）、DITA（技術ドキュメント）などそれぞれに専用のツールがある異なるXML文書形式やHTMLへの変換はXSLTで表示するにはHTMLに変換構造化文書の共通語としてのHTML
11

HTML ブラウザでそのまま表示できる Webアクセシビリティの標準のしくみが整備されてきている普及しているWeb用のツール（HTMLエディタ、各種CMSなど）が使える扱える人が多く学習コストが低い HTMLはもっとも普及している構造化文書形式であり、他とやりとりするのに「共通語」として便利 XHTML構文を使えばXMLのツールも使える（その必要がないなら緩い HTML構文でOK）でも専用のXMLほどセマンティックな文書構造化はできない？
構造化文書の共通語としてのHTML 12

HTML HTMLをセマンティックに 13

HTML5 文書構造化標準 2014年にHTML5がW3C勧告、2016年11月には改訂版のHTML 5.1が勧告 HTML5の新要素（section、article、nav、header、footer、aside、figure、 figcaption 等）でセマンティックな文書構造が明確に従来からのHTML要素もよりセマンティックな定義に。例：small要素は「細目などの注釈」という意味に
HTMLをセマンティックに 14

role属性 HTML要素意味付加 WAIARIA：Webのアクセシビリティのためにセマンティックな情報を HTML要素に DPUBARIA：デジタル出版のためのセマンティックな語彙を定義 Scholarly HTMLで使えるrole属性の語彙の例： contentinfo（コンテンツ情報）
docabstract（要旨） docacknowledgments（謝辞） docappendix（付録） docbibliography（参考文献） docconclusion（結論） docendnote（後注） docfootnote（脚注） docintroduction（序論） docsubtitle（副題） HTMLをセマンティックに 15

RDFa: 情報 HTML 埋込方法 Scholarly HTMLでは schema.org/ScholarlyArticle の語彙を利用
例： <span property="schema:author" typeof="schema:Person"> <span property="schema:familyName">村上</span> <span property="schema:givenName">真雄</span> (<span property="schema:affiliation">Vivliostyle Inc.</span>) </span> HTMLをセマンティックに 16

Scholarly HTML 感 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8">
<title>Scholarly HTMLはこんな感じ</title> </head> <body> <article typeof="schema:ScholarlyArticle"> <header> <h1>Scholarly HTMLはこんな感じ</h1> <p role="doc-subtitle">ごく簡単な学術論文みたいな例</p> </header> <div role="contentinfo">  <ul> <li property="schema:author" typeof="schema:Person"> HTMLをセマンティックに 17

<span property="schema:familyName">村上</span> <span property="schema:givenName">真雄</span> <span property="schema:affiliation">Vivliostyle Inc.</span> </li> </ul> </div>
<section role="doc-abstract"> <h2>概要</h2> <p>本稿は、ごく簡単な学術論文みたいな例です。</p> </section> <section role="doc-introduction"> <h2>はじめに</h2> <p>論文を<a href="#sh" role="doc-biblioref">Scholarly HTML</a> で書いてみます。</p> </section> <section> <h2>これはセクション見出し</h2> <section> <h3>これはサブセクション見出し</h3> HTMLをセマンティックに 18

<p>このようにセクションをネストします。ネストのレベルに応じた見出し要素 h2-h6 を使います。</p> </section> </section> <section role="doc-acknowledgements"> <h2>謝辞</h2> <p>みなさまに感謝。</p> </section>
<section role="doc-bibliography"> <h2>参考文献</h2> <ol> <li typeof="schema:WebPage" role="doc-biblioentry" id="sh"> <a href="https://w3c.github.io/scholarly-html/">Scholarly HTML</a> </li> </ol> </section> </article> </body> </html> HTMLをセマンティックに 19

「Web出版物」時代「Web出版物」の時代へ 20

Web 標準 = 電子出版標準電子書籍はHTML5やCSS3でできている EPUB = (X)HTML +
CSS + パッケージ化 (AmazonのKindle本も同様) 世界標準のEPUB仕様で日本語の電子書籍が可能になったのは CSS3 Writing Modesで縦書きが可能に、ブラウザ実装が進む HTML5でルビのマークアップが標準に html { writing-mode: vertical-rl; /* 縦書き */ } ... <p><ruby>吾輩<rt>わがはい</rt></ruby>は猫である。名前はまだ無い。</p> わがはい吾輩は猫である ︒ 名前はまだ無い ︒ 「Web出版物」の時代へ 21

Web 出版融合=Web出版物標準化２つの標準化団体の連携によりWeb標準を使う電子出版が実現した W3C (World Wide Web Consortium)
IDPF (International Digital Publishing Forum) さらに進み「Web出版物」(Web Publication)の標準化へ Web Publications for the Open Web Platform オンラインでもオフラインでもシームレスに読める WebサイトでもEPUBのようなパッケージ形式でも W3C・IDPFの両組織が統合へ（W3Cにマージ） ☞国際電子出版フォーラム（IDPF）、加盟機関による投票の結果、 W3Cとの統合計画を承認「Web出版物」の時代へ 22

仕様CSS 進化スタイルシート仕様CSSの進化 23

Web 出版役立 CSS仕様日本語組版関係参考 ☞「縦書きWeb普及委員会」の「技術解説」雑誌のようなレイアウト段組：CSS Multicolumn
Layout 任意の形の回り込み：CSS Shapes サンプル ☞ 縦書き CSS Writing Modes 文字組・禁則処理 CSS Text 装飾・圏点 CSS Text Decoration ルビ配置 CSS Ruby スタイルシート仕様CSSの進化 24

ページのレイアウト CSS Paged Media CSS Generated Content CSS Page Templates
CSS Page Floats フォント：CSS Fonts 最近の話題： Variable font 複数のフォントのようにふるまう単一のフォント参考☞ Variable Fonts: the Future of (Web) Type CSS Fonts Level 4 の Font Variation Properties スタイルシート仕様CSSの進化 25

画面印刷 CSS : Vivliostyle 取組画面も印刷もCSSで：Vivliostyleの取り組み 26

Vivliostyle 特徴印刷の世界と画面の世界を一元化印刷物も様々な画面もひとまとめで扱える Webブラウザさえあれば使える HTMLとCSSだけオープンソース github.com/vivliostyle/vivliostyle.js 画面も印刷もCSSで：Vivliostyleの取り組み
27

Vivliostyle 事例紹介･書籍『CSSシークレット』（Lea Verou著、牧野聡訳、オライリー） ☞ 学術論文 ☞ W3C仕様書など
☞ Vivliostyle Viewerサンプル What is Scholarly HTML? 松原隆彦講義録「宇宙論入門」画面も印刷もCSSで：Vivliostyleの取り組み 28

電子出版の変革─Web標準を利用したワンソース・マルチユースの実現に向けて / 20161213-xml-murakami

電子出版の変革─Web標準を利用したワンソース・マルチユースの実現に向けて / 20161213-xml-murakami

XSPA

More Decks by XSPA

Other Decks in Technology

Featured

Transcript

Web標準利用･実現向 XSPAセミナー 20161213 村上真雄 (@MurakamiShinyu)

目次 1. はじめに 3 2. Scholarly HTMLとは何か 6 3. 構造化文書の共通語としてのHTML

はじめに 3

発表者自己紹介村上真雄 (MURAKAMI Shinyu) Twitter: @MurakamiShinyu 株式会社ビブリオスタイル取締役会長兼CTO

(Vivliostyle Inc.) 社名：株式会社ビブリオスタイル（Vivliostyle Inc.）社名の由来：Vivlio（βιβλίο /vivlío/ ＝ギリシャ語〈本〉）＋ style Webサイト：http://vivliostyle.com

Scholarly HTML 何 Scholarly HTMLとは何か 6

Scholarly HTML=学術情報HTML 学術論文をHTMLで表現する方法を標準化しようとしている W3CにScholarly HTMLコミュニティーグループ www.w3.org/community/scholarlyhtml/ ドラフト仕様: w3c.github.io/scholarlyhtml/ 仕様をまとめてるのは Robin

Scholarly HTML 紹介 “What is Scholarly HTML?” Scholarly HTMLで書かれたScholarly HTML解説記事。

構造化文書共通語 HTML 構造化文書の共通語としてのHTML 10

XML 分野最適構造化文書形式 JATS（学術情報）、DITA（技術ドキュメント）などそれぞれに専用のツールがある異なるXML文書形式やHTMLへの変換はXSLTで表示するにはHTMLに変換構造化文書の共通語としてのHTML

HTML HTMLをセマンティックに 13

RDFa: 情報 HTML 埋込方法 Scholarly HTMLでは schema.org/ScholarlyArticle の語彙を利用

Scholarly HTML 感 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8">

<span property="schema:familyName">村上</span> <span property="schema:givenName">真雄</span> <span property="schema:affiliation">Vivliostyle Inc.</span> </li> </ul> </div>

<p>このようにセクションをネストします。ネストのレベルに応じた見出し要素 h2-h6 を使います。</p> </section> </section> <section role="doc-acknowledgements"> <h2>謝辞</h2> <p>みなさまに感謝。</p> </section>

「Web出版物」時代「Web出版物」の時代へ 20

Web 標準 = 電子出版標準電子書籍はHTML5やCSS3でできている EPUB = (X)HTML +

Web 出版融合=Web出版物標準化２つの標準化団体の連携によりWeb標準を使う電子出版が実現した W3C (World Wide Web Consortium)

仕様CSS 進化スタイルシート仕様CSSの進化 23

Web 出版役立 CSS仕様日本語組版関係参考 ☞「縦書きWeb普及委員会」の「技術解説」雑誌のようなレイアウト段組：CSS Multicolumn

ページのレイアウト CSS Paged Media CSS Generated Content CSS Page Templates

画面印刷 CSS : Vivliostyle 取組画面も印刷もCSSで：Vivliostyleの取り組み 26

Vivliostyle 特徴印刷の世界と画面の世界を一元化印刷物も様々な画面もひとまとめで扱える Webブラウザさえあれば使える HTMLとCSSだけオープンソース github.com/vivliostyle/vivliostyle.js 画面も印刷もCSSで：Vivliostyleの取り組み

Vivliostyle 事例紹介･書籍『CSSシークレット』（Lea Verou著、牧野聡訳、オライリー） ☞ 学術論文 ☞ W3C仕様書など