TeXユーザの集い2014 発表資料(W3C Ruby)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

TeXユーザの集い2014 発表資料(W3C Ruby)

on

  • 288 views

ルビのWeb標準化における現状と課題

ルビのWeb標準化における現状と課題

Statistics

Views

Total Views
288
Views on SlideShare
255
Embed Views
33

Actions

Likes
2
Downloads
4
Comments
0

1 Embed 33

https://twitter.com 32

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

TeXユーザの集い2014 発表資料(W3C Ruby) Presentation Transcript

  • 1. 䝹䝡䛾Webᶆ‽໬䛻䛚䛡䜛⌧≧䛸ㄢ㢟 Copyright©2014 NTT corp. All Rights Reserved. ᖺ᭶᪥ ᮍ᮶䛽䛳䛸◊✲ᡤ ᕝᖭኴ୍
  • 2. Copyright©2014 NTT corp. All Rights Reserved.㻝 䝹䝡䛸䛿 • 䝹䝡䠄ⱥㄒ: ruby䠅 䚷ᩥ❶ෆ䛾௵ព䛾ᩥᏐ䛻ᑐ䛧䜅䜚䛜䛺䠋ㄝ᫂䠋␗ 䛺䜛ㄞ䜏᪉䛸䛔䛳䛯ᙺ๭䛾ᩥᏐ䜢䜘䜚ᑠ䛥䛺ᩥᏐ䛷䚸 ㏻ᖖ⦪᭩䛝䛾㝿䛿ᩥᏐ䛾ྑഃ䠋ᶓ᭩䛝䛾㝿䛿ᩥ Ꮠ䛾ୖഃ䛻グ䛥䜜䜛䜒䛾䚹  きょう   お と と い   あ さ っ て 今日は一昨日の明後日です。
  • 3. ふ   り   が   な Copyright©2014 NTT corp. All Rights Reserved.㻞 䝔䜻䝇䝖䛾┤ิᵓ㐀䛸୪ิᵓ㐀 䛂䝹䝡䛃䛿ᚑ᮶䛾┤ิⓗ䛺䝔䜽䝇䝖䜢୪ิ໬䛩䜛䚹 振 り 仮 名 fu   ri   gana እᅜㄒ䛾⩻ヂ䚸㞀ᐖ⪅⏝䛾⿵ຓ᝟ሗ䛺䛹䚸 ᵝ䚻䛺ᛂ⏝䛜⪃䛘䜙䜜䜛䚹
  • 4. Copyright©2014 NTT corp. All Rights Reserved.㻟 ୪ิ䝔䜽䝇䝖䛾ྍ⬟ᛶ Ṕྐⓗᩥ᭩䛻䛚䛡䜛ṇᩥ䛸෗ᮏ䞉 ୗ᭩䛝➼䛾ᑐ↷䛾䝕䝆䝍䝹໬䛺䛹䚹 ኱᪥ᮏ⥔᪂ྐᩱ㻌㢮⧩அ㒊㻌஭ఀᐙྐᩱ
  • 5. Copyright©2014 NTT corp. All Rights Reserved.㻠 እᅜㄒ䛾ᩍ⛉᭩䠄౛䠅 እᅜㄒ䜢Ꮫ⩦䛩䜛㝿䛻⿵ຓ᝟ሗ䛸䛧䛶ูゝㄒ 䜢௜グ䛩䜛䛺䛹䚹 etān na hantum iccāmi ᙼ䜙䜢㻌㻌㻌㻌䛺䛔㻌㻌ẅ䛩䛣䛸䚷㻌㻌䚷⚾䛿ḧ䛩䜛 ど⥺䛾⛣ື䛜ᑡ䛺䛟䚸⌮ゎ䛜᪩䛔
  • 6. 䛆䝕䞊䝍ᵓ㐀䛇 䛄䛀ぶ䛁䛀䝹䝡䛁䛅䞉䞉䞉 䛄䛀ぶ䛁䛀䝹䝡䛁䛅䞉䞉䞉䞉 Copyright©2014 NTT corp. All Rights Reserved.㻡 䝹䝡䛾䝕䞊䝍ᵓ㐀 䝰䝜䝹䝡 䜾䝹䞊䝥䝹䝡 ୧ഃ䝹䝡 ⇍ㄒ䝹䝡  䈜HTML5䛾 ᪂ᶵ⬟ 䛄䛀ぶᩥᏐ⩌䛁 䛀䝹䝡ᩥᏐ⩌䛁䛅 䛄䛀ぶ䛁䛀ぶ䛁䞉䞉䞉 䚷䛊䛀䝹䝡䛁䛀䝹䝡䛁䞉䞉䞉䛋 䚷䛊䛀䝹䝡䛁䛀䝹䝡䛁䞉䞉䞉䛋䞉䞉䛅 䛄䛀ぶ䛁䛀ぶ䛁䞉䞉䞉 䛀䝹䝡䛁䛀䝹䝡䛁䞉䞉䞉䛅
  • 7. Copyright©2014 NTT corp. All Rights Reserved.㻢 㛗䛔䝹䝡 ྂ䛔సရ䛷䛿䛂㯮Ṛ㤋ẅே஦ ௳䛃䛜᭷ྡ䚹 䝷䝜䝧➼䛷䜒฼⏝౛䚹 䠄ᨵ⾜ฎ⌮䛾⪃៖䛜ᚲせ䠅 㯮Ṛ㤋ẅே஦௳䠄㟷✵ᩥᗜ䠅䞉䠄♫఍ᛮ᝿♫䠅
  • 8. Copyright©2014 NTT corp. All Rights Reserved.㻣 䝪䝫䝰䝣䜷䞉䝹䝡䠄ྎ‴䠅 䚷
  • 9. Copyright©2014 NTT corp. All Rights Reserved.㻤 HTML䛸CSS䛻䛚䛡䜛䝹䝡 W3C䛾䝹䝡䛻㛵䛩䜛ᶆ‽໬䛿䚸HTML䛸CSS䛻ศ 䛛䜜䚸䛭䜜䛮䜜௨ୗ䛾ᙺ๭䜢ศᢸ䛩䜛䚹 • HTML5 䝹䝡 • 䝔䜻䝇䝖䛾୪ิᵓ㐀䛾䝕䞊䝍⾲⌧ • DOMᮌ䛾ᵓ⠏䠄䝟䞊䝈䠅䛸ゎ㔘᪉ἲ • CSS 䝹䝡 • ୍⯡XMLᩥ᭩䛾䝹䝡ᣦᐃ᪉ἲ • 䝹䝡䛾⾲♧᪉ἲ
  • 10. Copyright©2014 NTT corp. All Rights Reserved. HTML5 䛻䛚䛡䜛䝹䝡
  • 11. Copyright©2014 NTT corp. All Rights Reserved.㻝㻜 䝹䝡 䛾ᶆ‽໬䛾⤒⦋ • ISO 6429 (JIS X 0211) … PTX➢ྕ (1986ᖺ) • ISO/IEC 10646 / Unicode … Interlinear AnnotaXons 䠄1990ᖺ௦䠅 • HTML • XHTML Ruby (2001) • ึᮇ䛾HTML5 Ruby • EPUB3 䛻䛶᥇⏝ • ୧ഃ䝹䝡䞉⇍ㄒ䝹䝡䛻ᮍᑐᛂ • HTML5 Ruby Extension • ୧ഃ䝹䝡䞉⇍ㄒ䝹䝡䛻ᑐᛂ
  • 12. 䜋</rt></ruby><ruby><rb> ⳹</rb> 䛝䜗䛖</rt></ruby> 䛝䜗䛖</rt><ruby> Copyright©2014 NTT corp. All Rights Reserved.㻝㻝 䛣䜜䜎䛷䛾䝹䝡䛾HTMLᥦ᱌ 㐣ཤ䛾䠏ᥦ᱌ XHTML Ruby :: h[p://www.w3.org/TR/2001/REC-­‐ruby-­‐20010531/ • 2001ᖺᥦ᱌䚹ከᑐከᑐᛂ䠄rpspanᒓᛶ䛒䜚䠅䚹 <ruby><rb> ἲ</rb><rt> <rt> 䛡</rt></ruby><ruby><rb> ᪧHTML5 Ruby ⤒</rb><rt> :: h[p://www.w3.org/TR/2012/CR-­‐html5-­‐20121217/ • 䚷䚷᭱ప㝈䛾ᶵ⬟䜢ᣢ䛳䛯༢⣧䝹䝡䚹EPUB3䛺䛹䛷᥇⏝䚹 <ruby> ἲ<rt> 䜋</rt> ⳹<rt> Ruby Extenxion Spec :: 䛡</rt> ⤒<rt> h[p://darobin.github.io/html-­‐ruby/ 䞉䚷⇍ㄒ䝹䝡䞉୧ഃ䝹䝡䛻ᑐᛂ䛧䚸HTML5 Ruby䛸஫᥮ᛶ䜢⥔ᣢ䚹rbspan䛺䛧 <ruby><rb> ἲ<rb> ⳹<rb> ⤒<rt> 䜋<rt> 䛡<rt> 䛝䜗䛖</ruby> <ruby><rb> ἲ<rt> 䜋<rb> ἲ<rt> 䛡<rb> ⤒<rt> 䛝䜗䛖</ruby>
  • 13. ᮍᑐᛂ䝤䝷䜴䝄⏝ 䛻ᣓᘼ䜢⏝ពྍ Copyright©2014 NTT corp. All Rights Reserved.㻝㻞 HTML5 䠄CSS)䝹䝡䛾≉ᚩ <ruby>᣺<rb>䜚<rb>௬<rb>ྡ</rb> <rp>(</rp> <rt>䜅<rt>䜚<rt>䛜<rt>䛺</rt> <rp>)</rp> <rtc>fu<rt>ri<rt>gana</rtc> <ruby>䚷 㛢䛨䝍䜾䜢ධ䜜䜜䜀䚸㛫 䛻✵ⓑ䞉ᨵ⾜䜢ᤄධྍ⬟ 㛤䛝䝍䜾䠄୍㒊䠅 ┬␎ྍ⬟ ぶᩥᏐ䛸䝹䝡䜢ศ 㞳䛧䛶ධ䜜䜙䜜䜛䚹 ぶᩥᏐ䛻ᑐ䛧䛶䚸」 ᩘ䛾䝹䝡䜢ᣦᐃྍ⬟ 㛢䛨䝍䜾┬ ␎ྍ⬟ 振り仮名 ふ    が  な fu ri gana 」ᩘ䛾ぶᩥᏐ䛻ᑐ䛧䛶䚸䝹䝡䜢 䜎䛸䜑䛶᣺䜛䛣䛸䛜䛷䛝䜛 ᑐᛂ䛩䜛ぶᩥᏐ䛸䝹䝡䛜ྠ䛨ሙྜ䚸⾲ ♧䛥䛫䛺䛔䛣䛸䛜䛷䛝䜛䚹䠄CSS䠅
  • 14. 䛡<rb>⤒<rt> 䛝䜗䛖</ruby> 䜋</rt><rb>⳹</rb><rt> 䛡</rt><rb> Copyright©2014 NTT corp. All Rights Reserved.㻝㻟 䝹䝡䛾㛢䛨䝍䜾䛾┬␎ 㛢䛨䝍䜾䛿୍⯡ⓗ䛻┬␎ྍ⬟䚹 <ruby> <rb>ἲ<rt> 䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷↓ <ruby> <rb>ἲ</rb><rt> ⤒</rb><rt> 㛤䛝䝍䜾 䜋<rb>⳹<rt> 䛝䜗䛖</rt></ruby> ┤ᚋ䛾䝍䜾 ぶ䛜㛢䛨䛯 rb rt rtc rp 䛭䛾௚ ruby 䛺䛧 䛺䛧 䛺䛧 䛺䛧 䛺䛧 rb 㛢䛨䜛 㛢䛨䜛 㛢䛨䜛 㛢䛨䜛 䛺䛧 㛢䛨䜛 rt 㛢䛨䜛 㛢䛨䜛 㛢䛨䜛 㛢䛨䜛 䛺䛧 㛢䛨䜛 rtc 㛢䛨䜛 㛢䛨䜛 㛢䛨䜛 㛢䛨䜛 䛺䛧 㛢䛨䜛 rp 㛢䛨䜛 㛢䛨䜛 㛢䛨䜛 㛢䛨䜛 䛺䛧 㛢䛨䜛
  • 15. <ruby>ᮾ<rt>䛸䛖<rb>ி<rt>䛝䜗䛖</ruby> Copyright©2014 NTT corp. All Rights Reserved.㻝㻠 㛢䛨䝍䜾䛾┬␎౛ 䛸䛖䛝䜗䛖 ᮾி <ruby><rb>ᮾ<rb>ி<rt>䛸䛖<rt>䛝䜗䛖 </ruby> <ruby>ᮾ<rb>ி<rp>(<rt>䛸䛖<rt>䛝䜗䛖 <rp>)</ruby> Tokyo <ruby>ᮾ<rb>ி<rt>䛸䛖<rt>䛝䜗䛖 <rtc>Tokyo</ruby>
  • 16. Copyright©2014 NTT corp. All Rights Reserved.㻝㻡 ౛ • ṇ䛧䛔䝬䞊䜽䜰䝑䝥 <ruby> ἲ<rt> 䜋</rt> ⳹<rb> ⤒<rt> • 㛫㐪䛳䛯䝬䞊䜽䜰䝑䝥 䛡<rt> 䛝䜗䛖</ruby> <ruby> ἲ<rt> 䜋<rb>⳹<rt> 䛡<rb> ⤒<rt> 䛝䜗䛖</ruby> <ruby> ἲ<rtc> 䜋<rb>⳹<rb> ⤒<rtc> 䛡<rt> 䛝䜗䛖</ruby> <ruby> ἲ<rt> 䜋</rtc> ⳹<rb> ⤒<rt> 䛡<rt> 䛝䜗䛖</ruby> <ruby> ἲ<rtc> 䜋</rt>⳹<rt> 䛡<rb> ⤒<rt> 䛝䜗䛖</ruby> <ruby> ἲ<rt> 䜋</rt>⳹</rb> ⤒<rt> 䛡<rt> 䛝䜗䛖</ruby> 䈜 㛤䛝䝍䜾䛾┬␎䜢๓ᥦ䛸䛧䛯㛢䛨䝍䜾䛾タᐃ䛿䛷䛝䛺䛔
  • 17. Copyright©2014 NTT corp. All Rights Reserved.㻝㻢 HTML5 䝹䝡䛸DOMᮌ • <rb>䛿䚸<ruby>䛾┤᥋䛾Ꮚ౪䛾ሙྜ䛿┬␎ྍ⬟䚹 • <rtc>䛿䚸<rt>䛜୍䛴䛧䛛䛺䛔ሙྜ䛿┬␎ྍ⬟䚹 • 䛯䛰䛧䚸䛣䛾䛂┬␎ྍ⬟䛃䛸䛔䛖䛾䛿䚸DOMᮌ䛷⿵᏶䛥䜜䜛 䛣䛸䛷䛿䛺䛔䚹䠄JavaScript䛿ὀព䛜ᚲせ䚹䠅 <ruby>ᮾ<rb>ி <rt>䛸䛖<rt>䛝䜗䛖</ruby> <ruby><rb>ᮾ<rb>ி <rtc>䛸䛖<rt>䛝䜗䛖</ruby> <ruby> ᮾrbrtrt ி䛝䜗䛖 <ruby> rbrbrtc rt 䛝䜗䛖 ᮾி䛸䛖 䛸䛖 䛸䛖䛝䜗䛖 ୧᪉䛸䜒ྠ䛨䛂ᮾி䛃䜢ព࿡䛩䜛䚹䊻DOMᮌ䛾䛹䜜䛜ぶᩥᏐ䛷䚸 䛹䜜䛜䝹䝡䛛䜢ศ㢮䛩䜛䜰䝹䝂䝸䝈䝮䛜ᚲせ䚹
  • 18. <ruby>ᮾ<rb>ி<rt>䛸䛖<rt>䛝䜗䛖<rtc>To<rt>kyo</rt></rtc>㒔<rt>䛸<rtc>City</ruby> Copyright©2014 NTT corp. All Rights Reserved.㻝㻣 䝹䝡䛾ศ㢮䞉ศ๭ <ruby> DOMᮌ ᮾ<䡎䠾><rt><rt><rtc>㒔<rt> Tō<rt> 䝹䝡ぶᩥᏐ䜾䝹䞊䝥䠖䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚸䞉䞉䞉 䝹䝡ᩥᏐ䝁䞁䝔䝘䜾䝹䞊䝥 䝹䝡ᩥᏐ䜾䝹䞊䝥 䚷䚷䚷䚷䚷䚷䚷䚸䞉䞉䞉 䝹䝡ᩥᏐ䜾䝹䞊䝥 䚷䚷䚷䚷䚷䚷䚷䚷䚸䞉䞉䞉 ᕥ䛛䜙㉮ᰝ 䝹䝡ぶᩥᏐ䜾䝹䞊䝥 䝹䝡ᩥᏐ䝁䞁䝔䝘ฎ⌮ 䝹䝡ᩥᏐ ฎ⌮ 䝹䝡ぶᩥᏐฎ⌮ DOM䝺䞁䝆DOM䝺䞁䝆 DOM䝺䞁䝆 DOM䝺䞁䝆 䝹䝡 䝹䝡 䝉䜾䝯䞁䝖 䝉䜾䝯䞁䝖 ி䛸䛖䛝䜗䛖 kyō 䛸 <rtc> City
  • 19. <ruby>ᮾ<rb>ி<rt>䛸䛖<rt>䛝䜗䛖<rtc>To<rt>kyo</rt></rtc>㒔<rt>䛸<rtc>City</ruby> Copyright©2014 NTT corp. All Rights Reserved.㻝㻤 䝹䝡䛾ศ㢮䞉ศ๭ <ruby> DOMᮌ ᮾ<䡎䠾><rt><rt><rtc>㒔<rt> Tō<rt> 䝹䝡ぶᩥᏐ䜾䝹䞊䝥䠖䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚸䞉䞉䞉 䝹䝡ᩥᏐ䝁䞁䝔䝘䜾䝹䞊䝥 䝹䝡ᩥᏐ䜾䝹䞊䝥 䚷䚷䚷䚷䚷䚷䚷䚸䞉䞉䞉 䝹䝡ᩥᏐ䜾䝹䞊䝥 䚷䚷䚷䚷䚷䚷䚷䚷䚸䞉䞉䞉 ᕥ䛛䜙㉮ᰝ 䝹䝡ぶᩥᏐ䜾䝹䞊䝥 䝹䝡ᩥᏐ䝁䞁䝔䝘ฎ⌮ 䝹䝡ᩥᏐ ฎ⌮ 䝹䝡ぶᩥᏐฎ⌮ DOM䝺䞁䝆DOM䝺䞁䝆 DOM䝺䞁䝆 DOM䝺䞁䝆 䝹䝡 䝹䝡 䝉䜾䝯䞁䝖 䝉䜾䝯䞁䝖 ி䛸䛖䛝䜗䛖 kyō 䛸 <rtc> City
  • 20. • ྛ䜾䝹䞊䝥䛾DOM䝺䞁䝆㓄ิ䜢ᕥ䛛䜙䝨䜰䝸䞁䜾䛩䜛䚹 • ぶ䛜వ䛳䛯䜙䝹䝡䛿᭱ᚋ䛾ぶ䛻䜎䛸䜑䛶ᑐᛂ䛥䛫䜛䚹 • 䝹䝡䛜వ䛳䛯䜙✵䛾ぶせ⣲䜢⏕ᡂ䛧䛶䛭䜜䛻ᑐᛂ䛥䛫䜛䚹 DOM䝺䞁䝆DOM䝺䞁䝆 DOM䝺䞁䝆 䛸䛖䛝䜗䛖 DOM䝺䞁䝆DOM䝺䞁䝆 Copyright©2014 NTT corp. All Rights Reserved.㻝㻥 䝹䝡䛾䝨䜰䝸䞁䜾 䝹䝡ぶᩥᏐ䜾䝹䞊䝥䠖䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷 䝹䝡ᩥᏐ䝁䞁䝔䝘䜾䝹䞊䝥 䝹䝡ᩥᏐ䜾䝹䞊䝥 䚷䚷䚷䚷䚷䚷䚷㻌㻌㻌㻌㻌㻌㻌㻌㻌㻌㻌㻌㻌㻌㻌㻌㻌㻌㻌㻌㻌㻌㻌㻌㻌 䝹䝡 䝉䜾䝯䞁䝖 ᮾி DOM䝺䞁䝆 䝹䝡ᩥᏐ䜾䝹䞊䝥 䚷䚷䚷䚷䚷䚷䚷 Tōkyō
  • 21. Copyright©2014 NTT corp. All Rights Reserved. CSS Ruby Level 1 䛻䛴䛔䛶
  • 22. Copyright©2014 NTT corp. All Rights Reserved.㻞㻝 CSS Ruby Level 1 HTML/XML䛻䛚䛡䜛䝹䝡䛾ᣦᐃ᪉ἲ䛸⾲♧᪉ ἲ䜢つᐃ䚹 つ᱁䛾ᵓᡂ䛿௨ୗ䛾㏻䜚 1. IntroducXon 2. Ruby Box Model 䠄䝪䝑䜽䝇䝰䝕䝹䠅 3. Ruby Layout 䠄䝺䜲䜰䜴䝖䠅 4. Ruby Formeng ProperXes 䠄䝥䝻䝟䝔䜱䠅 5. Edge Effects
  • 23. Copyright©2014 NTT corp. All Rights Reserved.㻞㻞 䝪䝑䜽䝇䝰䝕䝹 ௵ព䛾XMLᩥ᭩䛷䛾䝹䝡䝪䝑䜽䝇䛾ᵓᡂ᪉ἲ XMLᩥ᭩ <䝹䝡௜䛝> 䚷<ぶᏐ>ᮾ</ぶᏐ><ぶᏐ>ி</ぶᏐ> 䚷<ᣓᘼ>䠄</ᣓᘼ> 䚷<䝁䞁䝔䝘><䝹䝡>䛸䛖</䝹䝡><䝹䝡>䛝䜗䛖</䝹䝡></䝁䞁䝔䝘> 䚷<䝹䝡>Tokyo</䝹䝡><ᣓᘼ>䠅</ᣓᘼ> </䝹䝡௜䛝> 䝹䝡௜䛝㻌{ display: ruby; } ぶᏐ㻌㻌㻌{ display: ruby-­‐base; white-­‐space: nowrap; } ᣓᘼ㻌㻌㻌{ display: none; } 䝹䝡㻌㻌㻌{ display: ruby-­‐text; white-­‐space: nowrap; font-­‐size: 50%; } rbc { display: ruby-­‐base-­‐container; } 䝁䞁䝔䝘 { display: ruby-­‐text-­‐container; } CSS 䛸䛖䛝䜗䛖 ᮾி Tokyo
  • 24. <ruby> [Text]<img> Copyright©2014 NTT corp. All Rights Reserved.㻞㻟 DOMᮌ䛸䝺䞁䝎䝸䞁䜾ᮌ <ruby> [Text]<span>[IWS]<rtc> <img><rt> <rbc> <rb>[IWS] <span> <rtc> <rt><rt> DOMᮌ • Web䝨䞊䝆సᡂ⪅䜔䚸JavaScript 䛜౑⏝䚹 • 䝜䞊䝗䛿㻌JavaScript ➼䛻䜘䛳䛶⮬ ⏤䛻⤌䜏᭰䛘䜙䜜䜛䚹 䝺䞁䝎䝸䞁䜾ᮌ • Web䝤䝷䜴䝄䛾⾲♧䝹䞊䝏䞁䛜౑ ⏝䚹 • DOMᮌ䛜JavaScript➼䛷ኚ᭦䛥䜜 䛯ሙྜ䚸཯ᫎ䛧䛶෌ᵓ⠏䛥䜜䜛䚹 • DOM䛷㊊䜚䛺䛔䝜䞊䝗䛿⏕ᡂ
  • 25. ౛䠖 <ruby>ᮾ<rb>ி<rp>䠄<rt>䛸䛖<rt>䛝䜗䛖<rtc>Tokyo<rp>䠅</ruby> Copyright©2014 NTT corp. All Rights Reserved.㻞㻠 ↓ྡ䝪䝑䜽䝇⏕ᡂ XML/HTMLᩥ᭩䛻䛚䛔䛶䚸┬␎䛥䜜䛯䝪䝑䜽䝇䜢䝺䞁䝎䝸䞁䜾ᮌ ᵓ⠏䛾㝿䛻⿵᏶䛩䜛䚹 HTML5䛾䛂ศ๭䞉ศ㢮䞉䝨䜰䝸䞁䜾䛃䛸䛿␗䛺䜛䛾䛷ὀព䚹  ruby rbcrtcrtc rb rb rt rt ᮾ ி 䛸䛖 䛝䜗䛖 rt Tokyo rp 䠄 rp 䠅 䈜䚷㉥䛔Ⅼ⥺䛜⿵᏶䛥䜜䛯䝪䝑䜽䝇 HTML5䛷䛿RBC䛿つᐃ䛥䜜䛶䛔䛺䛔
  • 26. Copyright©2014 NTT corp. All Rights Reserved.㻞㻡 䝪䝑䜽䝇⏕ᡂ䛻䛚䛡䜛✵ⓑฎ⌮ <rb>..</rb>✵ⓑ<rb>…</rb> ↓ <rbc><rb>…</rb>✵ⓑ<rb>…</rb><rbc> <rt>..</rt>✵ⓑ<rt>…</rt> ↓ <rtc><rt>…</rt>✵ⓑ<rt>…</rt><rtc> <rb>せ⣲㛫䚸<rt>せ⣲㛫䛾✵ⓑ䛿䛭䜜䛮䜜䚸<rb>, <rt>䛸ྠ 䛨᣺䜛⯙䛔䛸䜏䛺䛧䚸ᚲせ䛻ᛂ䛨䛶⏕ᡂ䛥䜜䜛㻌<rbc>, <rtc> 䝪䝑䜽䝇䛷඲య䜢ᅖ䜐䚹 <rbc>..</rbc>✵ⓑ<rtc>…</rtc> <rbc>䛸<rbc>/<rtc>䛾㛫䛾✵ⓑ䛿䝉䜾䝯䞁䝖㛫✵ⓑ䛸䛧䛶<rb> 䛸ྠ䛨᣺䜛⯙䛔䛸䜏䛺䛧䚸ᚲせ䛻ᛂ䛨䛶⏕ᡂ䛥䜜䜛<ruby>せ ⣲䛷ᅖ䜐䚹䠄䛭䜜௨እ䛾㻌rb䚸rt䚸rtc 㛫䛾✵ⓑ䛿↓ど䚹䠅 ↓ <ruby><rbc>…</rbc>✵ⓑ<rtc>…</rtc></ruby>
  • 27. Copyright©2014 NTT corp. All Rights Reserved.㻞㻢 ᣺䜚௬ྡ䛾⮬ື㞃ⶸᶵ⬟ <ruby>᣺<rb>䜚<rb>௬<rb>ྡ</rb> <rp>(</rp> <rt>䜅<rt>䜚<rt>䛜<rt>䛺</rt> <rp>)</rp> <ruby>䚷 䜅䚷䚷䚷䚷䛜䚷㻌䛺 ᣺䜚௬ྡ ᑐᛂ䛩䜛ぶᩥᏐ䛸䝹䝡䛜ྠ䛨ሙྜ䚸⾲ ♧䛥䛫䛺䛔䛣䛸䛜䛷䛝䜛䚹䠄CSS䠅 䜅䚷㻌䜚䚷䛜䚷㻌䛺 ᣺䜚௬ྡ
  • 28. 䛸䛖䛝䜗䛖 Copyright©2014 NTT corp. All Rights Reserved.㻞㻣 䝹䝡䛸✵ⓑ ᪥ᮏㄒ䛸ⱥㄒ䛾⤌䜏ྜ䜟䛫䜒ྍ⬟ <ruby> <rb>ᮾ</rb><rb>ி</rb> <rt>䛸䛖</rt><rt>䛝䜗䛖</rt> <rt>Tō</rt><rt>kyō</rt> </ruby> <ruby> <rb>Aerith</rb><rb> </rb><rb>Gainsboro</rb> <rt>䜶䜰䝸䝇</rt><rt>䞉</rt><rt>䝀䜲䞁䝈䝤䞊䝹</rt> </ruby> 䜶䜰䝸䝇䞉䝀䜲䞁䝈䝤䞊䝹 <ruby> <rb>W</rb><rb>W</rb><rb>W</rb> <rt>World</rt> <rt>Wide</rt> <rt>Web</rt> </ruby> ᮾி Tōkyō Aerith Gainsboro ✵ⓑධ䜙䛺䛔 World Wide Web WWW
  • 29. CSS䝥䝻䝟䝔䜱 • display • XMLせ⣲䛾䛹䜜䛜䚸䝹䝡䛾ఱ䛻ᑐᛂ䛩䜛䛛䜢つ Copyright©2014 NTT corp. All Rights Reserved.㻞㻤 ᐃ䚹 • ruby-­‐base, ruby-­‐text, ruby-­‐text-­‐container, ruby-­‐ base-­‐container • <rp>せ⣲䛿䚸㏻ᖖ䛿㻌none 䠄⾲♧䛧䛺䛔䠅 • ruby-­‐posiXon • ruby-­‐merge • ruby-­‐align
  • 30. ← over ← under 厹台厭台厽台 新 幹 線 shinkansen ↑right ↑ lei ౛䠖䚷rtc {ruby-­‐posiXon: over right;} Copyright©2014 NTT corp. All Rights Reserved.㻞㻥 ruby-­‐posiXon 䝥䝻䝟䝔䜱 䝹䝡䛾఩⨨䜢ᣦᐃ䛩䜛䛯䜑䛻䚸<rtc>䛻㐺⏝䛥䜜䜛䚹 • over/under䠄ᶓ᭩䛝䠅 䛧䜣䛛䜣䛫䜣 ᪂ᖿ⥺ • right/lei䠄⦪᭩䛝䠅 shinkansen • inter-­‐character䠄䝪䝫䝰䝣䜷䠅 • ⦪᭩䛝䞉ᶓ᭩䛝୧᪉䛷ᑐᛂ䛩䜛䛻䛿䚸䠎䛴䜢ᣦᐃ䚹 䠄」ᩘ䛾<rtc>䛜䛒䜛ሙྜ䛿䚸䝕䝣䜷䝹䝖䛷䛿ྠ᪉ྥ䛻䝇䝍䝑䜽䚹䠅
  • 31. Copyright©2014 NTT corp. All Rights Reserved.㻟㻜 ruby-­‐merge 䝥䝻䝟䝔䜱 」ᩘ䛾<rt>䜢ྵ䜐<rtc>䛻䛚䛔䛶䚸䝹䝡䛾㓄⨨ ᪉ἲ䜢ᣦᐃ䛩䜛䚹 • separate :: 䝰䝜䝹䝡 • collapse :: 䜾䝹䞊䝥䝹䝡 • auto :: ⇍ㄒ䝹䝡 䠄䜶䞊䝆䜵䞁䝖౫Ꮡ䠅 䛤䚷㻌䛢䜣 ㄒ※ 䛤䛢䜣 ㄒ※
  • 32. 䝥䝻䝟䝔䜱್ぶᩥᏐ䛜㛗䛔䝹䝡䛜㛗䛔౛ start䚷䚷䚷䛤䛢䜣 䚷䚷ㄒ※ center䛤䛢䜣 ㄒ※ space-­‐between䜲㻌 䞁㻌䝕㻌㻌䝑㻌㻌䜽㻌㻌䝇 ⚗᭩┠㘓 space-­‐around䜲㻌䞁㻌䝕㻌䝑㻌䜽㻌䝇 ⚗᭩┠㘓 Copyright©2014 NTT corp. All Rights Reserved.㻟㻝 ruby-­‐align 䝥䝻䝟䝔䜱 䝹䝡䞉ぶᩥᏐ䛾㓄⨨᪉ἲ䜢<ruby>䛻ᑐ䛧䛶ᣦᐃ䚹
  • 33. Copyright©2014 NTT corp. All Rights Reserved. ௒ᚋ䛾ㄢ㢟䚸ᒎᮃ
  • 34. ୺䛺ㄢ㢟䛾ゎỴᚋ䚸LCᐉゝ䜢䛧 䛶௚䛾䜾䝹䞊䝥䛻䝺䝡䝳䞊౫㢗 Copyright©2014 NTT corp. All Rights Reserved.㻟㻟 W3Cᶆ‽໬䝥䝻䝉䝇 W3C䛾ᶆ‽໬䝥䝻䝉䝇䛿䛂䝥䝻䝉䝇ᩥ ᭩䛃䛻䜘䛳䛶䚸ୗグ䛾䜘䛖䛻ᐃ䜑䜙䜜䜛䚹 Editor’s Drai Public Working Drai Last Call Announcement Candidate RecommendaXon  Proposed RecommendaXon RecommendaXon 䠄່࿌䠅 䝽䞊䜽䜾䝹䞊䝥 (WG) 䛻䛚䛔䛶䚸 ᚲせ䛸ㄆ䜑䜙䜜䛯つ᱁䛾䝗䝷䝣䝖 ᱌䜢䜎䛪䜶䝕䜱䝍䛜ᇳ➹䚹 ෆ㒊䛾㆟ㄽ䛜ᡂ⇍䛧䛯䜙୍⯡බ 㛤䛧䛶እ㒊䜢஺䛘䛶㆟ㄽ W3C䛾௚䛾䜾䝹䞊䝥䛾☜ㄆᚋ䚸 䝤䝷䜴䝄㛵ಀ⪅䛻䝔䝇䝖䛾సᡂ 䜔䝤䝷䜴䝄䛾ᐇ⿦䜢౫㢗䛩䜛䚹 ᐇ⿦⤒㦂䛜༑ศ䛻䛴䜎䜜䠄2䛴 ௨ୖ䛾䝤䝷䜴䝄䛷ᐇ⿦䛥䜜䠅䚸ᐇ ⌧ᛶ䛜༑ศ䛸ุ᩿䛥䜜䛯ሙྜ䛿䚸 PR໬䛧䛶W3Cㅎၥጤဨ఍䛻㏦௜㻌 ㅎၥጤဨ఍䛻䜘䜚ṇᘧ䛻່࿌ HTML5CSS Ruby 2014/10/28 2014/8/5 つ᱁䛾䛂᭱⤊່࿌䛃䛻䛿䝔䝇䝖సᡂ䛸䝤䝷䜴䝄ᐇ⿦䛜ᚲせ
  • 35. Copyright©2014 NTT corp. All Rights Reserved.㻟㻠 䝹䝡䛾ᶆ‽໬䛾≧ἣ HTML5 䝹䝡䛆᭱⤊່࿌䛇 • 2014ᖺ5᭶ … 䝟䞊䝄䛾䝔䝇䝖䛾䝁䝭䝑䝖 • 2014ᖺ6᭶ … Firefox (Gecko䠅䜈䛾ᐇ⿦ • 2014ᖺ7᭶ … WebKit 䠄Safari䠅䜈䛾ᐇ⿦ CSS Ruby 䛆ⲡ᱌䛇 ⌧≧䛷䛿䚸䛔䛟䛴䛛䛾䝤䝷䜴䝄䛷 <ruby> 䜢䝟䞊䝈䛷䛝䜛䜒 䛾䛾䚸ṇ☜䛻⏬㠃䛻⾲♧䛿䛷䛝䛺䛔䚹 • 䝗䝷䝣䝖䛾ᨵⰋ www-­‐styles 䝯䞊䝸䞁䜾䝸䝇䝖䛻䛚䛔䛶䚸㆟ㄽ䜢⾜䛔䚸䝗䝷䝣䝖䛾 ᨵⰋ䜢᥎㐍䛩䜛 • 䝔䝇䝖䛾సᡂ Test the Web Forward ➼䜢⤒⏤䛧䛶W3C䜈䝔䝇䝖䜢㈉⊩䛩䜛 • 䝤䝷䜴䝄䜈䛾ᐇ⿦
  • 36. ruby{₎Ꮠ}{䛛䜣䛨} ruby[l]{₎Ꮠ}{䛛䜣|䛨} 䡘₎Ꮠ䛀䛛䜣䛨䛁䠷䠀䛂₎Ꮠ䛃䛾ᕥ䛻䛂kanji䛃䛾ὀグ䠹 <U+FFF9>₎Ꮠ<U+FFFA>䛛䜣䛨<U+FFFB> Copyright©2014 NTT corp. All Rights Reserved.㻟㻡 HTML5௨እ䛾䝹䝡⾲グ䠄౛䠅 • LaTeX Okumacro, ⸨⏣䝟䝑䜿䞊䝆 • 㟷✵ᩥᗜ䛾䝹䝡 • Unicode Interlinear AnnotaXons • Pandoc ML 䛷ᥦ᱌䛥䜜䛯 Markdown 䝹䝡⾲グ᪉ἲ [䛛䜣䛨](-­‐₎Ꮠ) ᗄ䛴䛛䛿䛂⇍ㄒ䝹䝡䛃䜔䛂୧ഃ䝹䝡䛃䛺䛹䛾㓄៖䛿୙༑ศ
  • 37. Copyright©2014 NTT corp. All Rights Reserved.㻟㻢 䝹䝡⾲グ䛿Ⓨᒎ㏵ୖ • CSS Ruby䛾㛤Ⓨ • 㟁Ꮚ᭩⡠䛷䛾䝯䝍䝕䞊䝍䛾ᢅ䛔 • 㠀HTML5䛷䛾⾲⌧ • … 䜎䛰䜎䛰Ⰽ䚻ṧ䛳䛶䛔䜎䛩䚹 ⯆࿡䛾䛒䜛᪉䚸䛬䜂ᣮᡓ䛧䛶䜏䜎䛫䜣䛛䠛 
  • 38. ᭱ᚋ䜎䛷䛤Ύ⫈䚸䛒䜚䛜䛸䛖䛤䛦䛔䜎䛧䛯䚹 Copyright©2014 NTT corp. All Rights Reserved.
  • 39. Copyright©2014 NTT corp. All Rights Reserved. 䠄ཧ⪃㈨ᩱ䠅
  • 40. Copyright©2014 NTT corp. All Rights Reserved.㻟㻥 ཧ⪃ᩥ⊩ • JLREQ • HTML5 Ruby • CSS Ruby Level 1 • ᅧㄒὀ㡢➢⹰ᡭ෉
  • 41. W3C䛾䝔䝇䝖సᡂ䛸䝤䝷䜴䝄ᐇ⿦ ⥲ྜヨ㦂 Copyright©2014 NTT corp. All Rights Reserved.㻠㻜 せ௳ᐃ⩏ タィ ᐇ⿦ ༢యヨ㦂 ᝿ᐃእ䛾฼⏝ せ௳ᐃ⩏䛾ಟṇ ヨ㦂㡯┠ᩚ⌮ ௙ᵝ䝞䜾䛾Ⓨぬ 䝴䞊䝄䜔Web㛤Ⓨ⪅䛿䚸つ ᱁䛾⠊ᅖෆ䛷䛺䜣䛷䜒䛩䜛 ྍ⬟ᛶ䛜䛒䜛䛾䛷䚸ᴟ➃䛺 ≧ែ䛾⪃៖䜒ᚲせ 㟼ⓗ䝔䝇䝖 ືⓗ䝔䝇䝖 䜰䝃䞊䝅䝵䞁ヨ㦂 ⏬㠃☜ㄆヨ㦂 䝔䝇䝖䛾ᡂຌ䞉ኻᩋ 䜢䚸true/false 䛷㏉ 䛩㛵ᩘ䜢సᡂ䛩䜛䚹 ẚ㍑ᑐ㇟⏬㠃䜢స ᡂ䛧䚸䝡䝑䝖䝬䝑䝥ẚ ㍑䛩䜛 䠄ᚲせ䛺䜙䚸ヨ㦂⏝ ᑐᢠ䝃䞊䝞䜢⏝ព䠅 ௬᝿⎔ቃ䛷ẖ᪥ ヨ㦂䜢ᐇ᪋䚷 HTML5 䛾䝔䝇䝖 CSS 䛾䝔䝇䝖䠄RefTest)  䝤䝷䜴䝄䜈䛾ᐇ⿦䜢㈉⊩䛩 䜛๓䛻䚸ᚲ䛪䝔䝇䝖䜢஦๓䛻 సᡂ䛩䜛ᚲせ䛜䛒䜛䚹