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

学術情報XML推進協議会 セミナー
日時: 2016年12月13日（火曜日）14:00-16:00
場所: カクタス・コミュニケーションズ株式会社内 Einstein
Vivliostyle版はこちら
http://bit.ly/xspa20161213viv

Transcript

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

   View Slide

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

   View Slide

3. はじめに 3
   

   View Slide

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

   View Slide

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

   View Slide

6. Scholarly HTML 何
   Scholarly HTMLとは何か 6
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. role属性 HTML要素 意味 付加
    WAI­ARIA：Webのアクセシビリティのためにセマンティックな情報を
    HTML要素に
    DPUB­ARIA：デジタル出版のためのセマンティックな語彙を定義
    Scholarly HTMLで使えるrole属性の語彙の例：
    contentinfo（コンテンツ情報）
    doc­abstract（要旨）
    doc­acknowledgments（謝辞）
    doc­appendix（付録）
    doc­bibliography（参考文献）
    doc­conclusion（結論）
    doc­endnote（後注）
    doc­footnote（脚注）
    doc­introduction（序論）
    doc­subtitle（副題）
    HTMLをセマンティックに 15
    

    View Slide

16. RDFa: 情報 HTML 埋
    込 方法
    Scholarly HTMLでは schema.org/ScholarlyArticle の語彙を利用
    例：
    
    村上
    真雄
    (Vivliostyle Inc.)
    
    HTMLをセマンティックに 16
    

    View Slide

17. Scholarly HTML 感
    
    
    
    
    Scholarly HTMLはこんな感じ
    
    
    
    
    Scholarly HTMLはこんな感じ
    ごく簡単な学術論文みたいな例
    
    
    
    
    
    HTMLをセマンティックに 17
    

    View Slide

18. 村上
    真雄
    Vivliostyle Inc.
    
    
    
    
    概要
    本稿は、ごく簡単な学術論文みたいな例です。
    
    
    はじめに
    論文をScholarly HTML
    で書いてみます。
    
    
    これはセクション見出し
    
    これはサブセクション見出し
    HTMLをセマンティックに 18
    

    View Slide

19. このようにセクションをネストします。ネストのレベルに応じた見出し要素
    h2-h6 を使います。
    
    
    
    謝辞
    みなさまに感謝。
    
    
    参考文献
    
    
    Scholarly HTML
    
    
    
    
    

    View Slide

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

    View Slide

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

    View Slide

22. 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
    

    View Slide

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

    View Slide

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

    View Slide

25. ページのレイアウト
    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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide