Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

$ whoami 2

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Do you know HTML ? 8

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Do you know ? •

•

12

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Do you know ? • • • • 16

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Example. 20

Slide 21

Slide 21 text

௕໺ݝͷࢢொଜ

௕໺ࢢ

ળޫࣉ͕͋ΔΑ.

দຊࢢ

দຊ৓͕͋ΔΑ.

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

ݟग़͠ͷϨϕϧʹؔ܎ͳ͘จॻߏ଄͸౳Ձɻ

௕໺ݝͷࢢொଜ

௕໺ࢢ

ળޫࣉ͕͋ΔΑ.

দຊࢢ

দຊ৓͕͋ΔΑ.

Slide 24

Slide 24 text

ηΫγϣϯͷߏ଄ʹΑΓɺจॻߏ଄͸ܾఆ͞ΕΔɻ • શ෦

Ͱ΋ HTML ͷ࢓༷తʹ͸શ͘໰୊ແ͍ɻ • ݟग़͠ͷແ͍ηΫγϣϯ͕͋Δ৔߹ɺλΠτϧແ͠ͷηΫ γϣϯͱͯ͠ೝࣝ͞ΕΔɻ • ௨ৗ ʹ͸ݟग़͕͋͠Δ͸ͣɻ 24

Slide 25

Slide 25 text

҉໧తͳηΫγϣϯ 25

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

௕໺ݝͷࢢொଜ

௕໺ࢢ

ળޫࣉ͕͋ΔΑ.

দຊࢢ

দຊ৓͕͋ΔΑ.

Slide 28

Slide 28 text

௕໺ݝͷࢢொଜ

௕໺ࢢ

ળޫࣉ͕͋ΔΑ.

দຊࢢ

দຊ৓͕͋ΔΑ.

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

•

-

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

Slide 31

Slide 31 text

௕໺ݝ

஍ཧ

ࢢொଜ

௕໺ࢢ

দຊࢢ

ಛ௃

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

௕໺ݝ

஍ཧ

ࢢொଜ

௕໺ࢢ

দຊࢢ

ಛ௃

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

௕໺ݝ

஍ཧ

ࢢொଜ

௕໺ࢢ

দຊࢢ

ಛ௃

Slide 37

Slide 37 text

͜͏ղऍ͞ΕΔɻ 37

Slide 38

Slide 38 text

௕໺ݝ

஍ཧ

ࢢொଜ

௕໺ࢢ

দຊࢢ

ಛ௃

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

ݟग़͠ͷ෇͚ํͰɺจॻߏ଄͕มΘͬͯ͠·͏ɻ 40

Slide 41

Slide 41 text

هࣄͷλΠτϧ

ຊจ...

ݟग़͠

ຊจ...

Outline. 1. هࣄͷλΠτϧ 1. ݟग़͠ 41

Slide 42

Slide 42 text

هࣄͷλΠτϧ

ຊจ...

ݟग़͠

ຊจ...

ผͷηΫγϣϯʹͳͬͯ͠·͏ɻ 1. هࣄͷλΠτϧ 2. ݟग़͠ 42

Slide 43

Slide 43 text

Ξ΢τϥΠϯͷॏཁੑ 43

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

·ͣ͸ݟग़͠Λਖ਼͘͠ઃఆ͢Δͱ͜Ζ͔ΒॳΊͯΈ·ͤΜ͔ʁ 47

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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