Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Webと出版と、CSSの未来の話
Happy 2nd birthday HTML5! 2016­10­29
村上 真雄 (@MurakamiShinyu) 
(株)ビブリオスタイル Founder & CTO 
目次 
1. HTML5と出版  3
2. 画面も印刷もCSSで:Vivliostyleの取り組み  6
3. Webと出版に役立つCSS  10
4. CSSを拡張可能に:CSS Houdini  14
5. まとめ  17
Webと出版と、...
HTML5と出版
Webと出版と、CSSの未来の話  Page 3
電子書籍はHTML5やCSS3でできている
EPUB = HTML + CSS + パッケージ化 
(AmazonのKindle本も同様)
世界標準のEPUB仕様で日本語の電子書籍が可能になったのは
CSS3 Writing Modesで縦書き...
Webの標準 = 電子出版の標準へ
2つの標準化団体の連携によりWeb標準を使う電子出版が実現
W3C (World Wide Web Consortium)
IDPF (International Digital Publishing For...
画面も印刷もCSSで:
Vivliostyleの取り組み
Webと出版と、CSSの未来の話  Page 6
Vivliostyle(ビブリオスタイル)とは
vivlio(βιβλίο /vivlío/ = ギリシャ語〈本〉)+ style
本(出版物)の作り方や読み方の新しいスタイルを、 
世界の誰でも自由に使えるオープンなWeb標準技術で
紙でも電...
Vivliostyleの特徴
印刷の世界と画面の世界を一元化
印刷物も様々な画面も 
ひとまとめで扱える
Webブラウザさえあれば使える 
HTMLとCSSだけ 
オープンソース 
 
github.com/vivliostyle/vivlio...
Vivliostyleの事例紹介・デモ
書籍『CSSシークレット』(Lea Verou著、牧野 聡 訳、オライリー) 
  ☞ 
☞ W3C仕様書など
☞ Vivliostyle Viewerサンプル
Webと出版と、CSSの未来の話  Pag...
Webと出版に役立つCSS
Webと出版と、CSSの未来の話  Page 10
Webと出版に役立つCSS仕様
日本語縦書きなど
参考 ☞「縦書きWeb普及委員会」の「技術解説」
雑誌のようなレイアウト
段組み:CSS Multi­column Layout
任意の形の回り込み:CSS Shapes
サンプル ☞   
C...
ページのレイアウト
CSS Paged Media
CSS Generated Content
CSS Page Templates
CSS Page Floats
フォント:CSS Fonts 
最近の話題: Variable font
複数...
Can I Use ____?  (http://caniuse.com)
例:http://caniuse.com/#search=shapes
W3CでCSSの仕様ができて全ブラウザで使えるようになるには時間がかかる
Vivliostyle...
CSSを拡張可能に: 
CSS Houdini
Webと出版と、CSSの未来の話  Page 14
CSS Houdiniとは
低レベルAPIを開放し、JavaScriptから利用できるようにする。  
ブラウザに未実装のCSS機能を実現するポリフィルが作りやすくなる  
VivliostyleのようなJavaScriptによるCSS拡張実装...
Houdini仕様とブラウザのレンダリング・パイプラインの関係図 (Philip Walton氏の記事
Houdini: Maybe The Most Exciting Development In CSS You’ve Never Heard...
まとめ
Webと出版と、CSSの未来の話  Page 17
Webと出版がつながること
進化するCSSの未来にわくわく
それらを先取りしてるVivliostyleをチェックしてね
CSS標準のテクニックを学ぶお勧めの本 ☞ 
『CSSシークレット — 47のテクニックでCSSを
自在に操る』 
著者:L...
Próxima SlideShare
Cargando en…5
×

Webと出版と、CSSの未来の話

727 visualizaciones

Publicado el

Happy 2nd birthday HTML5! 2016-10-29 発表資料

Publicado en: Tecnología
  • Sé el primero en comentar

Webと出版と、CSSの未来の話

  1. 1. Webと出版と、CSSの未来の話 Happy 2nd birthday HTML5! 2016­10­29 村上 真雄 (@MurakamiShinyu)  (株)ビブリオスタイル Founder & CTO 
  2. 2. 目次  1. HTML5と出版  3 2. 画面も印刷もCSSで:Vivliostyleの取り組み  6 3. Webと出版に役立つCSS  10 4. CSSを拡張可能に:CSS Houdini  14 5. まとめ  17 Webと出版と、CSSの未来の話  Page 2
  3. 3. HTML5と出版 Webと出版と、CSSの未来の話  Page 3
  4. 4. 電子書籍はHTML5やCSS3でできている EPUB = HTML + CSS + パッケージ化  (AmazonのKindle本も同様) 世界標準のEPUB仕様で日本語の電子書籍が可能になったのは CSS3 Writing Modesで縦書きが可能に、ブラウザ実装が進む HTML5でルビのマークアップが標準に html { writing-mode: vertical-rl; /* 縦書き */ } ... <p><ruby>吾輩<rt>わがはい</rt></ruby>は猫である。 名前はまだ無い。</p> わ が は い 吾 輩 は 猫 で あ る ︒ 名 前 は ま だ 無 い ︒ Webと出版と、CSSの未来の話  Page 4
  5. 5. Webの標準 = 電子出版の標準へ 2つの標準化団体の連携によりWeb標準を使う電子出版が実現 W3C (World Wide Web Consortium) IDPF (International Digital Publishing Forum) Webと出版が融合? 「Web出版物」の標準化構想  Portable Web Publications for the Open Web Platform オンラインでもオフラインでもシームレスに読める WebサイトでもEPUBのようなパッケージ形式でも W3C・IDPFの両組織の統合(W3Cにマージ)への動き  ☞W3CとIDPFが両組織の統合を検討中 Webと出版と、CSSの未来の話  Page 5
  6. 6. 画面も印刷もCSSで: Vivliostyleの取り組み Webと出版と、CSSの未来の話  Page 6
  7. 7. Vivliostyle(ビブリオスタイル)とは vivlio(βιβλίο /vivlío/ = ギリシャ語〈本〉)+ style 本(出版物)の作り方や読み方の新しいスタイルを、  世界の誰でも自由に使えるオープンなWeb標準技術で 紙でも電子でも、 表現したいように表現できる自由と、 読みたい形で読める自由を (=アクセシビリティー) ということを目指して Vivliostyle と命名 2014年8月に株式会社ビブリオスタイル (Vivliostyle Inc.) 設立 W3Cメンバーとして仕様策定に参加しながら、次世代のCSS標準を先行実装 製品:Vivliostyle Viewer (JSライブラリ) / Vivliostyle Formatter (PDF出力) http://vivliostyle.com Webと出版と、CSSの未来の話  Page 7
  8. 8. Vivliostyleの特徴 印刷の世界と画面の世界を一元化 印刷物も様々な画面も  ひとまとめで扱える Webブラウザさえあれば使える  HTMLとCSSだけ  オープンソース    github.com/vivliostyle/vivliostyle.js Webと出版と、CSSの未来の話  Page 8
  9. 9. Vivliostyleの事例紹介・デモ 書籍『CSSシークレット』(Lea Verou著、牧野 聡 訳、オライリー)    ☞  ☞ W3C仕様書など ☞ Vivliostyle Viewerサンプル Webと出版と、CSSの未来の話  Page 9
  10. 10. Webと出版に役立つCSS Webと出版と、CSSの未来の話  Page 10
  11. 11. Webと出版に役立つCSS仕様 日本語縦書きなど 参考 ☞「縦書きWeb普及委員会」の「技術解説」 雑誌のようなレイアウト 段組み:CSS Multi­column Layout 任意の形の回り込み:CSS Shapes サンプル ☞    CSS Writing Modes CSS Text CSS Text Decoration CSS Ruby Webと出版と、CSSの未来の話  Page 11
  12. 12. ページのレイアウト 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 Webと出版と、CSSの未来の話  Page 12
  13. 13. Can I Use ____?  (http://caniuse.com) 例:http://caniuse.com/#search=shapes W3CでCSSの仕様ができて全ブラウザで使えるようになるには時間がかかる Vivliostyleは、JavaScriptでブラウザのCSS機能を補う実装をしてるが… Web開発者がWebの機能を拡張していく Extensible Web の考えをCSSにも (そこで CSS Houdini へ) Webと出版と、CSSの未来の話  Page 13
  14. 14. CSSを拡張可能に:  CSS Houdini Webと出版と、CSSの未来の話  Page 14
  15. 15. CSS Houdiniとは 低レベルAPIを開放し、JavaScriptから利用できるようにする。   ブラウザに未実装のCSS機能を実現するポリフィルが作りやすくなる   VivliostyleのようなJavaScriptによるCSS拡張実装が楽になる。 公開されたCSSポリフィルが色々利用できるようになると便利! ドラフト仕様:https://drafts.css­houdini.org/  参考☞「CSS Houdini / CSS Working Groupミーティングに参加しました」 (CSS Houdini初回ミーティング(2015年2月)の報告/Vivliostyle blog) Box Tree API CSS Layout API CSS Painting API CSS Parser API CSS Properties and Values API CSS Typed OM Font Metrics API Worklets Webと出版と、CSSの未来の話  Page 15
  16. 16. Houdini仕様とブラウザのレンダリング・パイプラインの関係図 (Philip Walton氏の記事 Houdini: Maybe The Most Exciting Development In CSS You’ve Never Heard Of より。  この記事の日本語訳がありました: 「Houdini:CSSにおいて初めて聞くであろう、おそらく一番ワクワクする進化だよ」) Webと出版と、CSSの未来の話  Page 16
  17. 17. まとめ Webと出版と、CSSの未来の話  Page 17
  18. 18. Webと出版がつながること 進化するCSSの未来にわくわく それらを先取りしてるVivliostyleをチェックしてね CSS標準のテクニックを学ぶお勧めの本 ☞  『CSSシークレット — 47のテクニックでCSSを 自在に操る』  著者:Lea Verou(リア・ヴェルー)  訳者:牧野 聡  制作:株式会社ビブリオスタイル  発行:オライリー・ジャパン   Webと出版と、CSSの未来の話  Page 18

×