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

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/rubyrubyrb
⳹/rb
䛝䜗䛖/rt/ruby
䛝䜗䛖/rtruby
Copyright©2014
NTT
corp.
All
Rights
Reserved.㻝㻝
䛣䜜䜎䛷䛾䝹䝡䛾HTMLᥦ᱌
㐣ཤ䛾䠏ᥦ᱌
XHTML
Ruby
::
h[p://www.w3.org/TR/2001/REC-­‐ruby-­‐20010531/
•
2001ᖺᥦ᱌䚹ከᑐከᑐᛂ䠄rpspanᒓᛶ䛒䜚䠅䚹
rubyrb
ἲ/rbrt
rt
䛡/rt/rubyrubyrb
ᪧHTML5
Ruby
⤒/rbrt
::
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䛺䛧
rubyrb
ἲrb
⳹rb
⤒rt
䜋rt
䛡rt
䛝䜗䛖/ruby
rubyrb
ἲ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
rtcfurtrirtgana/rtc
ruby䚷
㛢䛨䝍䜾䜢ධ䜜䜜䜀䚸㛫
䛻✵ⓑ䞉ᨵ⾜䜢ᤄධྍ⬟
㛤䛝䝍䜾䠄୍㒊䠅
┬␎ྍ⬟
ぶᩥᏐ䛸䝹䝡䜢ศ
㞳䛧䛶ධ䜜䜙䜜䜛䚹
ぶᩥᏐ䛻ᑐ䛧䛶䚸」
ᩘ䛾䝹䝡䜢ᣦᐃྍ⬟
㛢䛨䝍䜾┬
␎ྍ⬟
振り仮名 ふ が な
fu ri gana
」ᩘ䛾ぶᩥᏐ䛻ᑐ䛧䛶䚸䝹䝡䜢
䜎䛸䜑䛶᣺䜛䛣䛸䛜䛷䛝䜛
ᑐᛂ䛩䜛ぶᩥᏐ䛸䝹䝡䛜ྠ䛨ሙྜ䚸⾲
♧䛥䛫䛺䛔䛣䛸䛜䛷䛝䜛䚹䠄CSS䠅

14. 䛡rb⤒rt
䛝䜗䛖/ruby
䜋/rtrb⳹/rbrt
䛡/rtrb
Copyright©2014
NTT
corp.
All
Rights
Reserved.㻝㻟
䝹䝡䛾㛢䛨䝍䜾䛾┬␎
㛢䛨䝍䜾䛿୍⯡ⓗ䛻┬␎ྍ⬟䚹
ruby
rbἲrt
䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷↓
ruby
rbἲ/rbrt
⤒/rbrt
㛤䛝䝍䜾
䜋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.㻝㻠
㛢䛨䝍䜾䛾┬␎౛
䛸䛖䛝䜗䛖
ᮾி
rubyrbᮾrbிrt䛸䛖rt䛝䜗䛖
/ruby
rubyᮾrbிrp(rt䛸䛖rt䛝䜗䛖
rp)/ruby
Tokyo
rubyᮾrbிrt䛸䛖rt䛝䜗䛖
rtcTokyo/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
rubyrbᮾrbி
rtc䛸䛖rt䛝䜗䛖/ruby
ruby
ᮾrbrtrt
ி䛝䜗䛖
ruby
rbrbrtc
rt
䛝䜗䛖
ᮾி䛸䛖
䛸䛖
䛸䛖䛝䜗䛖
୧᪉䛸䜒ྠ䛨䛂ᮾி䛃䜢ព࿡䛩䜛䚹䊻DOMᮌ䛾䛹䜜䛜ぶᩥᏐ䛷䚸
䛹䜜䛜䝹䝡䛛䜢ศ㢮䛩䜛䜰䝹䝂䝸䝈䝮䛜ᚲせ䚹

18. rubyᮾrbிrt䛸䛖rt䛝䜗䛖rtcTortkyo/rt/rtc㒔rt䛸rtcCity/ruby
Copyright©2014
NTT
corp.
All
Rights
Reserved.㻝㻣
䝹䝡䛾ศ㢮䞉ศ๭
ruby
DOMᮌ
ᮾ䡎䠾rtrtrtc㒔rt
Tōrt
䝹䝡ぶᩥᏐ䜾䝹䞊䝥䠖䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚷䚸䞉䞉䞉
䝹䝡ᩥᏐ䝁䞁䝔䝘䜾䝹䞊䝥
䝹䝡ᩥᏐ䜾䝹䞊䝥
䚷䚷䚷䚷䚷䚷䚷䚸䞉䞉䞉
䝹䝡ᩥᏐ䜾䝹䞊䝥
䚷䚷䚷䚷䚷䚷䚷䚷䚸䞉䞉䞉
ᕥ䛛䜙㉮ᰝ
䝹䝡ぶᩥᏐ䜾䝹䞊䝥
䝹䝡ᩥᏐ䝁䞁䝔䝘ฎ⌮
䝹䝡ᩥᏐ
ฎ⌮
䝹䝡ぶᩥᏐฎ⌮
DOM䝺䞁䝆DOM䝺䞁䝆
DOM䝺䞁䝆
DOM䝺䞁䝆
䝹䝡
䝹䝡
䝉䜾䝯䞁䝖
䝉䜾䝯䞁䝖
ி䛸䛖䛝䜗䛖
kyō
䛸
rtc
City

19. rubyᮾrbிrt䛸䛖rt䛝䜗䛖rtcTortkyo/rt/rtc㒔rt䛸rtcCity/ruby
Copyright©2014
NTT
corp.
All
Rights
Reserved.㻝㻤
䝹䝡䛾ศ㢮䞉ศ๭
ruby
DOMᮌ
ᮾ䡎䠾rtrtrtc㒔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
imgrt
rbc
rb[IWS]
span
rtc
rtrt
DOMᮌ
• Web䝨䞊䝆సᡂ⪅䜔䚸JavaScript
䛜౑⏝䚹
• 䝜䞊䝗䛿㻌JavaScript
➼䛻䜘䛳䛶⮬
⏤䛻⤌䜏᭰䛘䜙䜜䜛䚹
䝺䞁䝎䝸䞁䜾ᮌ
• Web䝤䝷䜴䝄䛾⾲♧䝹䞊䝏䞁䛜౑
⏝䚹
• DOMᮌ䛜JavaScript➼䛷ኚ᭦䛥䜜
䛯ሙྜ䚸཯ᫎ䛧䛶෌ᵓ⠏䛥䜜䜛䚹
• DOM䛷㊊䜚䛺䛔䝜䞊䝗䛿⏕ᡂ

25. ౛䠖
rubyᮾrbிrp䠄rt䛸䛖rt䛝䜗䛖rtcTokyorp䠅/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
↓
rbcrb…/rb✵ⓑrb…/rbrbc
rt../rt✵ⓑrt…/rt
↓
rtcrt…/rt✵ⓑrt…/rtrtc
rbせ⣲㛫䚸rtせ⣲㛫䛾✵ⓑ䛿䛭䜜䛮䜜䚸rb,
rt䛸ྠ
䛨᣺䜛⯙䛔䛸䜏䛺䛧䚸ᚲせ䛻ᛂ䛨䛶⏕ᡂ䛥䜜䜛㻌rbc,
rtc
䝪䝑䜽䝇䛷඲య䜢ᅖ䜐䚹
rbc../rbc✵ⓑrtc…/rtc
rbc䛸rbc/rtc䛾㛫䛾✵ⓑ䛿䝉䜾䝯䞁䝖㛫✵ⓑ䛸䛧䛶rb
䛸ྠ䛨᣺䜛⯙䛔䛸䜏䛺䛧䚸ᚲせ䛻ᛂ䛨䛶⏕ᡂ䛥䜜䜛rubyせ
⣲䛷ᅖ䜐䚹䠄䛭䜜௨እ䛾㻌rb䚸rt䚸rtc
㛫䛾✵ⓑ䛿↓ど䚹䠅
↓
rubyrbc…/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ᮾ/rbrbி/rb
rt䛸䛖/rtrt䛝䜗䛖/rt
rtTō/rtrtkyō/rt
/ruby
ruby
rbAerith/rbrb
/rbrbGainsboro/rb
rt䜶䜰䝸䝇/rtrt䞉/rtrt䝀䜲䞁䝈䝤䞊䝹/rt
/ruby
䜶䜰䝸䝇䞉䝀䜲䞁䝈䝤䞊䝹
ruby
rbW/rbrbW/rbrbW/rb
rtWorld/rt
rtWide/rt
rtWeb/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)
䝤䝷䜴䝄䜈䛾ᐇ⿦䜢㈉⊩䛩
䜛๓䛻䚸ᚲ䛪䝔䝇䝖䜢஦๓䛻
సᡂ䛩䜛ᚲせ䛜䛒䜛䚹