見出しとアウトラインのはなし / wpshinshu vol 4

Transcript

1. ݟग़͠ͱΞ΢τϥΠϯͷ͸ͳ͠
   Toro_Unit@ Shinshu WP Meetup vol.4
   1
   

   View Slide

2. $ whoami
   2
   

   View Slide

3. Toro_Unit
   ઎෦ ߛ (͏Β΂ ͻΖ͠)
   • Frontend Engineer
   • WordPress Plugin and Theme
   Developer
   Github: @torounit
   Twitter: @Toro_Unit
   3
   

   View Slide

4. ࡳຈͷձࣾͰϦϞʔτϫʔΫͯ͠·͢
   4
   

   View Slide

5. View Slide

6. Contribution
   • WordPress 5.0.1 and 5.1 (Α͍ͯ)
   • WordCamp Kyoto 2017 / Osaka
   2018 / Ogijima 2018 ࣮ߦҕһ
   • WordCamp Osaka 2018 Speaker.
   • etc...
   6
   

   View Slide

7. Plugins and Themes
   • Custom Post Type Permalinks
   • Simple Post Type Permalinks
   • Powerful Posts Per Page (PPPP)
   • Smart PWA <- new!
   • Vanilla
   • and more...
   7
   

   View Slide

8. Do you know HTML ?
   8
   

   View Slide

9. HTML is...
   • HyperText Markup Language
   • ver 5.2
   • WHATWG͕ඪ४࢓༷ʢHTML Living StandardʣΛࡦఆͯ͠
   ͍ΔɻͦΕΛݩʹW3C ͕קࠂ͍ͯ͠Δɻ
   9
   

   View Slide

10. View Slide

11. View Slide

12. Do you know ?
    •
    •
    •
    •
    •
    •
    12
    

    View Slide

13. W3C ͷઆ໌ΑΓҾ༻ɻ
    These elements represent headings for their sections.
    e
    These elements have a rank given by the number in their name.
    The h1 element has the highest rank, the h6 element has the
    lowest rank, and two elements with the same name have equal
    rank.
    e
    Use the rank of heading elements to create the document outline.
    13
    

    View Slide

14. ࿨༁
    ͜ΕΒͷཁૉ͸ɺηΫγϣϯͷݟग़͠Λද͠·͢ɻ
    e
    ͜ΕΒͷཁૉʹ͸ɺ໊લͷ൪߸Ͱࢦఆ͞ΕͨϥϯΫ͕͋Γ·
    ͢ɻ h1ཁૉ͸࠷ߴϥϯΫΛ࣋ͪɺh6ཁૉ͸࠷௿ϥϯΫΛ࣋ͪɺ
    ಉ໊͡લͷཁૉ͸ಉ͡ϥϯΫΛ࣋ͪ·͢ɻ
    e
    ݟग़͠ཁૉͷϥϯΫΛ࢖༻ͯ͠ɺυΩϡϝϯτΞ΢τϥΠϯΛ
    ࡞੒͠·͢ɻ
    14
    

    View Slide

15. ηΫγϣϯ
    ষɻจষͷ۠෼ɻ
    Ξ΢τϥΠϯ
    จষͷશମͷߏ੒
    15
    

    View Slide

16. Do you know ?
    •
    •
    •
    •
    16
    

    View Slide

17. Sectioning content (۠෼ίϯςϯπ)
    ,, , ͸ Sectioning content
    ͱ͍͏ΧςΰϦʔʹଐ͢Δλάɻ
    17
    

    View Slide

18. 
    ηΫγϣϯΛද͢ɻΑΓదͨ͠λά͕͋ΔͳΒ͹ͦͪΒΛ࢖͏
    ͜ͱɻ
    
    ϒϩά΍৽ฉͳͲͷهࣄɺSNS΍ܝࣔ൘ͳͲͷ౤ߘͳͲɺࣗݾ
    ׬݁ͨ͠ηΫγϣϯɻ
    18
    

    View Slide

19. 
    φϏήʔγϣϯɻϝχϡʔ౳Λද͢ηΫγϣϯɻ
    
    จॻͷϝΠϯίϯςϯπͱؒ઀తͳؔ܎͔͍࣋ͬͯ͠ͳ͍ηΫ
    γϣϯɻ޿ࠂͱ͔αΠυόʔͱ͔ɻ
    19
    

    View Slide

20. Example.
    20
    

    View Slide

21. ௕໺ݝͷࢢொଜ
    
    ௕໺ࢢ
    ળޫࣉ͕͋ΔΑ.
    
    
    দຊࢢ
    দຊ৓͕͋ΔΑ.
    
    21
    

    View Slide

22. Outline.
    1. ௕໺ݝͷࢢொଜ
    1. ௕໺ࢢ
    2. দຊࢢ
    22
    

    View Slide

23. ݟग़͠ͷϨϕϧʹؔ܎ͳ͘จॻߏ଄͸౳Ձɻ
    ௕໺ݝͷࢢொଜ
    
    ௕໺ࢢ
    ળޫࣉ͕͋ΔΑ.
    
    
    দຊࢢ
    দຊ৓͕͋ΔΑ.
    
    23
    

    View Slide

24. ηΫγϣϯͷߏ଄ʹΑΓɺจॻߏ଄͸ܾఆ͞ΕΔɻ
    • શ෦ Ͱ΋ HTML ͷ࢓༷తʹ͸શ͘໰୊ແ͍ɻ
    • ݟग़͠ͷແ͍ηΫγϣϯ͕͋Δ৔߹ɺλΠτϧແ͠ͷηΫ
    γϣϯͱͯ͠ೝࣝ͞ΕΔɻ
    • ௨ৗ ʹ͸ݟग़͕͋͠Δ͸ͣɻ
    24
    

    View Slide

25. ҉໧తͳηΫγϣϯ
    25
    

    View Slide

26. λάΛ࢖Θͳ͍৔߹Ͱ΋ɺจॻߏ଄ΛఆٛͰ͖Δɻ
    26
    

    View Slide

27. ௕໺ݝͷࢢொଜ
    ௕໺ࢢ
    ળޫࣉ͕͋ΔΑ.
    দຊࢢ
    দຊ৓͕͋ΔΑ.
    27
    

    View Slide

28. ௕໺ݝͷࢢொଜ
    
    ௕໺ࢢ
    ળޫࣉ͕͋ΔΑ.
    
    
    দຊࢢ
    দຊ৓͕͋ΔΑ.
    
    28
    

    View Slide

29. Outline.
    1. ௕໺ݝͷࢢொଜ
    1. ௕໺ࢢ
    2. দຊࢢ
    29
    

    View Slide

30. • - ͸ηΫγϣϯͷλΠτϧͳͷͰɺݟग़͠λά͕͋
    Δ৔߹ɺηΫγϣϯ͕͸͡·ͬͨϞϊͱͯ͠ղऍ͞ΕΔɻ
    • Ϩϕϧ͕௿͍ηΫγϣϯ͕͋Δ৔߹ɺͦΕ͸αϒηΫγϣϯ
    ͕͸͡·ͬͨϞϊͱͯ͠ɺղऍ͞ΕΔɻ
    • ಉ͡Ϩϕϧ͔ͦΕΑΓߴ͍৔߹ɺݱࡏͷηΫγϣϯ͕ऴΘ
    Γɺ৽͍͠ηΫγϣϯ͕͸͡·ͬͨϞϊͱͯ͠ղऍ͞ΕΔɻ
    30
    

    View Slide

31. ௕໺ݝ
    ஍ཧ
    ࢢொଜ
    ௕໺ࢢ
    দຊࢢ
    ಛ௃
    31
    

    View Slide

32. outline.
    1. ௕໺ݝ
    1. ஍ཧ
    2. ࢢொଜ
    1. ௕໺ࢢ
    2. দຊࢢ
    3. ಛ௃
    32
    

    View Slide

33. ౳ͷதͰ΋ద༻͞ΕΔɻ
    33
    

    View Slide

34. ௕໺ݝ
    ஍ཧ
    
    ࢢொଜ
    ௕໺ࢢ
    দຊࢢ
    
    ಛ௃
    34
    

    View Slide

35. outline.
    1. ௕໺ݝ
    1. ஍ཧ
    2. ࢢொଜ
    1. ௕໺ࢢ
    2. দຊࢢ
    3. ಛ௃
    35
    

    View Slide

36. ௕໺ݝ
    ஍ཧ
    
    ࢢொଜ
    ௕໺ࢢ
    দຊࢢ
    
    ಛ௃
    36
    

    View Slide

37. ͜͏ղऍ͞ΕΔɻ
    37
    

    View Slide

38. ௕໺ݝ
    ஍ཧ
    
    ࢢொଜ
    
    
    ௕໺ࢢ
    
    
    দຊࢢ
    
    ಛ௃
    38
    

    View Slide

39. outline.
    1. ௕໺ݝ
    1. ஍ཧ
    2. ࢢொଜ
    3. ௕໺ࢢ
    4. দຊࢢ
    5. ಛ௃
    39
    

    View Slide

40. ݟग़͠ͷ෇͚ํͰɺจॻߏ଄͕มΘͬͯ͠·͏ɻ
    40
    

    View Slide

41. 
    هࣄͷλΠτϧ
    ຊจ...
    ݟग़͠
    ຊจ...
    
    Outline.
    1. هࣄͷλΠτϧ
    1. ݟग़͠
    41
    

    View Slide

42. 
    هࣄͷλΠτϧ
    ຊจ...
    ݟग़͠
    ຊจ...
    
    ผͷηΫγϣϯʹͳͬͯ͠·͏ɻ
    1. هࣄͷλΠτϧ
    2. ݟग़͠
    42
    

    View Slide

43. Ξ΢τϥΠϯͷॏཁੑ
    43
    

    View Slide

44. ԿނΞ΢τϥΠϯ͕ॏཁ͔ʁ
    จষͷߏ଄ΛɺϚγʔϯϦʔμϒϧʹ͢ΔͨΊɻ
    ·ͨɺจॻߏ଄Λ͔ͬ͠Γ͢Δ͜ͱͰɺΘ͔Γ΍͍͢จষɻ
    ϒϥ΢βɺεΫϦʔϯϦʔμʔ(Ի੠ϒϥ΢β)౳ɺͦͷଞࢧԉٕज़͕ݟग़͠
    ΛೝࣝͰ͖ΔͨΊɺ༷ʑͳϝϦοτΛϢʔβʔʹఏڙग़དྷΔɻ
    • ݟग़͠Ͱͷδϟϯϓػೳɻ
    • ໨࣍ͷࣗಈੜ੒ɻ(ex. Wikipedia)
    ݟग़͠ɹʦจॻߏ଄ʧʛ࣮ફϊ΢ϋ΢ʛΤʔ ΠϨϒϯ ϫΠʦWebA11y.jpʧ
    44
    

    View Slide

45. จॻߏ଄ͷνΣοΧʔ
    WordPress 5.0 Ͱ౥ࡌ͞ΕΔɺ৽͍͠ฤ
    ूը໘ʮGutenbergʯͰ͸ɺจॻߏ଄ͷ
    νΣοΧʔ͕౥ࡌ͞ΕΔɻݟग़͕͠ε
    Ωοϓ͞Ε͍ͯͨΓ͢ΔͱΤϥʔ͕දࣔ
    ͞ΕΔɻ
    45
    

    View Slide

46. ΞΫηγϏϦςΟͷͨΊʹ΋ਖ਼͍͠ϚʔΫΞοϓ
    Λɻ
    • ো֐ऀࠩผղফ๏͕ࢪ޻͞ΕɺΞΫηγϏϦςΟରԠ͕ɺߦ੓Ͱ
    ͸ඞਢɺຽؒͰ͸౒ྗٛ຿ʹɻج४ͱͯ͠͸ɺJIS X 8341-3 ͕ద
    ༻͞ΕΔɻ
    • ݈ৗऀͰ΋εϚʔτϑΥϯɺεϚʔτεϐʔΧʔͳͲͷීٴͰ
    WEBαΠτͷ༷ʑͳ࢖͍ํ͕͋Δɻ
    • ࣗ෼ͷ࡞ͬͨαΠτ΍ॻ͍ͨهࣄ͕࢖͍ͮΒ͔ͬͨΒݏͩΑͶɻ
    46
    

    View Slide

47. ·ͣ͸ݟग़͠Λਖ਼͘͠ઃఆ͢Δͱ͜Ζ͔ΒॳΊͯΈ·ͤΜ͔ʁ
    47
    

    View Slide

48. ࢀߟࢿྉ
    • HTML5 υΩϡϝϯτͷηΫγϣϯͱΞ΢τϥΠϯ - HTML:
    HyperText Markup Language | MDN
    • HTML 5.2: 4.3. Sections
    • ݟग़͠ɹʦจॻߏ଄ʧʛ࣮ફϊ΢ϋ΢ʛΤʔ ΠϨϒϯ ϫΠ
    ʦWebA11y.jpʧ
    48
    

    View Slide

49. Thanks!
    Github: @torounit
    Twitter: @Toro_Unit
    Facebook: fb.me/torounit
    Blog: https://torounit.com
    49
    

    View Slide