Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

はじめに 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Scholarly HTML 何 Scholarly HTMLとは何か 6

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Scholarly HTML 感 Scholarly HTMLはこんな感じ

Scholarly HTMLはこんな感じ

ごく簡単な学術論文みたいな例

  • HTMLをセマンティックに 17

Slide 18

Slide 18 text

村上 真雄 Vivliostyle Inc.

概要

本稿は、ごく簡単な学術論文みたいな例です。

はじめに

論文をScholarly HTML で書いてみます。

これはセクション見出し

これはサブセクション見出し

HTMLをセマンティックに 18

Slide 19

Slide 19 text

このようにセクションをネストします。ネストのレベルに応じた見出し要素 h2-h6 を使います。

謝辞

みなさまに感謝。

参考文献

  1. Scholarly HTML
HTMLをセマンティックに 19

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

吾輩わがはいは猫である。 名前はまだ無い。

わ が は い 吾 輩 は 猫 で あ る ︒ 名 前 は ま だ 無 い ︒ 「Web出版物」の時代へ 21

Slide 22

Slide 22 text

Web 出版 融合=Web出版物 標準化 2つの標準化団体の連携により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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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