【超初心者向け】Gutenberg（ブロックエディター）を使って、ブログを書いたりページを作ってみよう / wpmokumoku-nihonbashi-2019-05-25

Slide 1

Slide 1 text

ʲ௒ॳ৺ऀ޲͚ʳ(VUFOCFSHʢϒϩοΫΤσΟλʔʣ Λ࢖ͬͯɺϒϩάΛॻ͍ͨΓϖʔδΛ࡞ͬͯΈΑ͏ 8PSE1SFTT΋͘΋͘ษڧձˏ೔ຊڮʢ2019೥5݄25೔ʣ ൃදऀ גࣜձࣾ"OJNB(BUFʢΞχϚήʔτʣ ୅දऔక໾ࠓଜ఩໵

Slide 2

Slide 2 text

bouya Imamura ࣗݾ঺հ ग़਎ ࡏॅ े৚ ෋ࢁݝ ʢ౦ژ౎ʣ

Slide 3

Slide 3 text

2006 2008 2010 2016 ๏ਓ ུྺ ৮Δ ॻ͘ ಠཱ ݱࡏ ࣗݾ঺հ

Slide 4

Slide 4 text

WordPress Λ࢖ͬͨ ͔ͳΓ೉қ౓͕ߴ͍ ੍࡞΋΍͍ͬͯ·͢ ΍͍ͬͯΔ͜ͱ ΢ΣϒαΠτ੍࡞ ΢ΣϒαʔϏεӡӦ ΢ΣϒγεςϜ։ൃ CMSߏங ECαΠτߏங σβΠϯ੍࡞ ੍໊ࢗ࡞ ϩΰ੍࡞ ૢ࡞ڭҭ ΢Σϒ੍࡞ձࣾ΁ͷٕज़ࢦಋ ࣗݾ঺հ

Slide 5

Slide 5 text

ͳΔ΂͘ίʔυΛॻ͔ͣʹ ࣗݾ঺հ ϝϯςφϯείετΛ཈͑Δ WordPress ͷߏங ΍͍ͬͯ·͢

Slide 6

Slide 6 text

ݱࡏ WordPressʹؔ͢Δ׆ಈ Nishikiʢެࣜʣ Newpost Catchʢެࣜʣ ϓϥάΠϯ ςʔϚ WordCamp Tokyo 2017 WordCamp Osaka 2018 εϐʔΧʔ ଞʹ΋ͨ͘͞Μ ଞʹ΋ͨ͘͞Μ ࣗݾ঺հ WordCamp Tokyo 2018

Slide 7

Slide 7 text

ࣗݾ঺հ ϫʔυΩϟϯϓ ౦ژ 2018 ͷ༷ࢠ

Slide 8

Slide 8 text

ࠓճͷ͓࿩ ɾૢ࡞σϞʢಈըʣ ɾϒϩοΫΤσΟλʔͰ࡞ΒΕͨ΢ΣϒαΠτ ɾGutenberg ϒϩοΫΤσΟλʔ ʹ͍ͭͯ ɾچΤσΟλʔͱͷʮҧ͍ʯͱʮڞ௨఺ʯ ɾϒϩοΫΤσΟλʔରԠͷϫʔυϓϨεςʔϚ ɾϒϩοΫΤσΟλʔରԠͷٕज़ॻ

Slide 9

Slide 9 text

Gutenberg ϒϩοΫΤσΟλʔ ʹ͍ͭͯ

Slide 10

Slide 10 text

࣮͸ϓϩδΣΫτ໊ Gutenberg ͱ͸ Gutenberg ϒϩοΫΤσΟλʔ ʹ͍ͭͯ

Slide 11

Slide 11 text

ʮϒϩοΫΤσΟλʔʯͷ౥ࡌ͸ Gutenberg ϓϩδΣΫτͷҰ؀ Gutenberg ϒϩοΫΤσΟλʔ ʹ͍ͭͯ ͳͷͰ

Slide 12

Slide 12 text

WordPress όʔδϣϯ 5.0 ͔Β ਖ਼ࣜʹϦϦʔε͞Εͨ ʮ৽͍͠ΤσΟλʔʯͷ͜ͱ Gutenberg ϒϩοΫΤσΟλʔ ʹ͍ͭͯ ϒϩοΫΤσΟλʔ͸

Slide 13

Slide 13 text

จࣈͰ͸Ͳ͏දݱͨ͠Β͍͍ʁ Gutenberg ϒϩοΫΤσΟλʔ ʹ͍ͭͯ

Slide 14

Slide 14 text

๻͸ϒϩάͳͲͰ͸ ʮGutenberg ϒϩοΫΤσΟλʔʯ ͱॻ͘͜ͱʹ͍ͯ͠Δ Gutenberg ϒϩοΫΤσΟλʔ ʹ͍ͭͯ

Slide 15

Slide 15 text

چΤσΟλʔͱͷʮҧ͍ʯͱʮڞ௨఺ʯ

Slide 16

Slide 16 text

چΤσΟλʔͱͷʮҧ͍ʯ͸ʁ

Slide 17

Slide 17 text

ฤूը໘͕ҧ͏ ౤ߘɾݻఆϖʔδͷ چΤσΟλʔ ϒϩοΫΤσΟλʔ چΤσΟλʔͱͷʮҧ͍ʯ͸ʁ

Slide 18

Slide 18 text

ϒϩοΫ Λ࢖͏ͷͰ چΤσΟλʔͱͷʮҧ͍ʯ͸ʁ ϖʔδͷ࡞Γํ͕ҧ͏

Slide 19

Slide 19 text

ͭ·Γ ૢ࡞ํ๏͕ʮҧ͏ʯ چΤσΟλʔͱͷʮҧ͍ʯ͸ʁ

Slide 20

Slide 20 text

چΤσΟλʔͱͷʮڞ௨఺ʯ

Slide 21

Slide 21 text

ίϯςϯπΛ࡞੒ Ͱ͖Δ چΤσΟλʔͱͷʮڞ௨఺ʯ ϒϩάΛॻ͍ͨΓ ϖʔδΛ࡞ͬͨΓ

Slide 22

Slide 22 text

ϒϩοΫΤσΟλʔ Ͱ΋ ಉ͡Α͏ͳ͜ͱ͕Ͱ͖Δ چΤσΟλʔͱͷʮڞ௨఺ʯ ݟग़͠ΛೖΕͨΓ ը૾ΛషΓ෇͚ͨΓ

Slide 23

Slide 23 text

ૢ࡞σϞʢಈըʣ

Slide 24

Slide 24 text

ΞΠίϯͰϒϩοΫΛ௥Ճ ʴ

Slide 25

Slide 25 text

ଞͷϒϩοΫ΁ม׵

Slide 26

Slide 26 text

εϙοτϥΠτϞʔυͰϒϩοΫʹϑΥʔΧε

Slide 27

Slide 27 text

ϏδϡΞϧΤσΟλʔɾίʔυΤσΟλʔͷ੾Γସ͑

Slide 28

Slide 28 text

ιʔγϟϧϝσΟΞ΍ಈըͷຒΊࠐΈ

Slide 29

Slide 29 text

γϣʔτίʔυʹ΋ରԠ

Slide 30

Slide 30 text

چΤσΟλʔͰ࡞੒ͨ͠΋ͷΛม׵

Slide 31

Slide 31 text

ૉૣ͘ϒϩοΫΛ௥Ճ͢Δ

Slide 32

Slide 32 text

ଞʹ΋͜Μͳ͜ͱͰ͖·͔͢ʁ

Slide 33

Slide 33 text

ΤσΟλʔͷ࢖͍ํ͸༷ʑɻ ؾʹͳΔͱ͜Ζ͸ ࣮ࡍʹ৮ͬͯΈΑ͏ ͢΂ͯ঺հ͖͠Εͳ͍ʂʂ

Slide 34

Slide 34 text

͜ͷษڧձͷ࣌ؒΛ࢖ͬͯ ϒϩάهࣄ΍ϖʔδΛ࡞ͬͯΈΑ͏

Slide 35

Slide 35 text

ͲΜͳϒϩοΫ͕͋Δͷ͔Λ ·ͣ͸ʮ஌Δʯͱ͜Ζ͔Β ͸͡ΊΑ͏ શͯͷϒϩοΫΛҰ౓͸࢖ͬͯΈΑ͏ ษڧձதʹͥͻ΍ͬͯ΄͍͜͠ͱᶃ

Slide 36

Slide 36 text

چΤσΟλʔͰ࡞ͬͨ ౤ߘɾݻఆϖʔδΛ ʮϒϩοΫ΁ม׵ʯ͠Α͏ ʮϒϩοΫ΁ม׵ʯͯ͠ΈΑ͏ ษڧձதʹͥͻ΍ͬͯ΄͍͜͠ͱᶄ ※ݱࡏʮچΤσΟλʔʯΛ࢖͍ͬͯΔํͷΈର৅

Slide 37

Slide 37 text

ɾϒϩοΫ΁ม׵͢Δͱίʔυ͕ফ͑ͯ͠·͏ ɾچΤσΟλʔͰ࢖͑ͨػೳ͕࢖͑ͳ͍ ʮΧελϜHTMLʯϒϩοΫʹ׳ΕΑ͏ ʮΧελϜHTMLʯϒϩοΫ Λ࢖ͬͯίʔυΛҡ͓࣋ͯ͘͠ ษڧձதʹͥͻ΍ͬͯ΄͍͜͠ͱᶅ

Slide 38

Slide 38 text

͜ͷษڧձதʹ࣭໰͍ͯͩ͘͠͞

Slide 39

Slide 39 text

खΛಈ͔ͦ͏ɻ ͭ·Γʮ׳Εʯ

Slide 40

Slide 40 text

׳ΕΔͱچΤσΟλʔΑΓ ޮ཰͕͍͍Ͱ͢ʂʂ

Slide 41

Slide 41 text

ϒϩοΫΤσΟλʔରԠͷϫʔυϓϨεςʔϚ

Slide 42

Slide 42 text

ϒϩοΫΤσΟλʔରԠ WordPress ެࣜςʔϚ Nishiki ແྉ഑෍த!! ϒϩοΫΤσΟλʔରԠͷϫʔυϓϨεςʔϚ ೔ຊޠରԠ ೔ຊޠϚχϡΞϧ΋͋Γ·͢ μ΢ϯϩʔυͯ͠Έ͍ͯͩ͘͞

Slide 43

Slide 43 text

ϒϩοΫΤσΟλʔରԠͷٕज़ॻ

Slide 44

Slide 44 text

ϒϩοΫΤσΟλʔରԠͷ81ຊͰ͢

Slide 45

Slide 45 text

ϒϩοΫΤσΟλʔͰ࡞ΒΕͨ΢ΣϒαΠτ

Slide 46

Slide 46 text

ͿΒͿΒਆࣾ IUUQTCVSBCVSBKJOKBOFU

Slide 47

Slide 47 text

8PSE1SFTTςʔϚ/JTIJLJ1SPσϞαΠτ IUUQTEFNPBOJNBHBUFDPNXQOJTIJLJQSP

Slide 48

Slide 48 text

͜ͷษڧձதʹ࣭໰͍ͯͩ͘͠͞

Slide 49

Slide 49 text

ओͳ׆ಈɾऔΓ૊Έ

Slide 50

Slide 50 text

ϫʔυϓϨεςʔϚൢചɾαϙʔτʮαϙτϐΞʯ ϓϥάΠϯൢച ϫʔυϓϨεςʔϚ ͓खຊσʔλ ͓ࢼ͠൛μ΢ϯϩʔυ ΞϑΟϦΤΠτ ݸผαϙʔτ ΦϯϥΠϯαϙʔτ ΧελϚΠζαϙʔτ ϢʔβʔίϛϡχςΟ

Slide 51

Slide 51 text

ϫʔυϓϨεςʔϚൢച /JTIJLJςʔϚͷ্Ґ൛ /JTIJLJ1SP &$αΠτߏங /JTIJLJ1SPGPS8PP$PNNFSDF ແྉ͓ࢼ͠൛͋Γ·͢ʂʂ ΞϑΟϦΤΠτϓϩάϥϜͷࢀՃʢ೚ҙʣ

Slide 52

Slide 52 text

ݸผαϙʔτ ςʔϚ։ൃऀͱରͰղܾ͢Δ ׬શΫϩʔζυͷαʔϏε ˞ଞͷํʹαϙʔτ಺༰͕஌ΒΕΔ͜ͱ͸͋Γ·ͤΜ

Slide 53

Slide 53 text

ϑΥʔϥϜʹ౤ߘͨ͠Γɺνϟοτ΍ϝʔϧ ͳͲΛ࢖ͬͨΓɺͱʹ͔͘จষΛॻ͘ͷ͕ۤ खʂʂ ΦϯϥΠϯαϙʔτ

Slide 54

Slide 54 text

ϫʔυϓϨεॳ৺ऀ޲͚ʹ ϥΠϒ഑৴΍ղઆಈըΛ:PV5VCFͰਵ࣌ެ։ νϟϯωϧొ࿥ ΑΖ͘͠Ͱ͢ʂʂ CPVZB*NBNVSB

Slide 55

Slide 55 text

ʮ։ൃऀͱϢʔβʔͷަྲྀͷ৔ʯΛఏڙ͍ͯ͠·͢ɻςʔ ϚͷΞοϓσʔτ৘ใɺ৽੡඼ͳͲͷઌߦࠂ஌ɺػೳ௥Ճ ͷཁ๬΍ෆ۩߹ใࠂͳͲͷϑΟʔυόοΫ΋ड͚෇͚͍ͯ ·͢ɻ ϢʔβʔίϛϡχςΟ

Slide 56

Slide 56 text

ɾϫʔυϓϨεͷૢ࡞ɾΧελϚΠζͰࠔͬͨʂʂ ʮαϙτϐΞʯͰ๻͕αϙʔτ͠·͢ ɾϫʔυϓϨεςʔϚɺͲΕΛબΜͰ͍͍͔Θ͔Βͳ͍ʂʂ IUUQTTVQQPSUBOJNBHBUFDPN

Slide 57

Slide 57 text

Ͳ͏΋͋Γ͕ͱ͏͟͝·ͨ͠ʂʂ