より便利に、効率よく ! WordPress 次期エディター「Gutenberg」の基本的な操作を知って、今日から使い始めよう / WordCamp Tokyo 2018 session room GH 11:30

2018/09/15（土）に開催された WordCamp Tokyo 2018 のセッションデーで使用したスライドです。

WordPress 5.0 で導入される次期エディター「Gutenberg」について、基本的な使用方法、旧エディターからの移行、正式リリース前に最低限準備することなどを中心に発表しました。

・これから Gutenberg を使ってみたい！
・Gutenberg は旧エディターとどう違うのか、ささっと知っておきたい！

という方を対象としています。参考資料の一つとしてご活用ください。

WordCamp Tokyo 2018 セッション情報
https://2018.tokyo.wordcamp.org/session/ef-2b-2/

代表者ブログ
https://www.imamura.biz/blog/

株式会社AnimaGate
https://www.animagate.com/

Transcript

1. View Slide

2. bouya Imamura
   ࣗݾ঺հ
   ग़਎ ࡏॅ
   े৚
   ෋ࢁݝ
   ʢ౦ژ౎ʣ
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. ηογϣϯͷྲྀΕ
   ɾૢ࡞σϞʢಈըʣ
   ɾਖ਼ࣜϦϦʔεલʹ࠷௿ݶ४උ͢Δ΋ͷ
   ɾGutenberg ͷ֓ཁ
   ɾGutenberg ͰԿ͕มΘΔͷ͔ʁ
   

   View Slide

8. Gutenberg ͷ֓ཁ
   

   View Slide

9. ৽͍͠ΤσΟλʔͷ໊લ
   WordPress 5.0 ΑΓ࣮૷͞ΕΔ
   Gutenberg ͱ͸
   Gutenberg ͷ֓ཁ
   

   View Slide

10. ࠓ͔ΒͰ΋࢖͑·͢
    Gutenberg ͷ֓ཁ
    ϓϥάΠϯΛೖΕΕ͹
    

    View Slide

11. ͓ࢼ͠Ͱ͖·͢
    ϓϥάΠϯΛೖΕͳͯ͘΋
    IUUQTKBXPSEQSFTTPSHHVUFOCFSH
    Gutenberg ͷ֓ཁ
    

    View Slide

12. Gutenberg ͰԿ͕มΘΔͷ͔ʁ
    

    View Slide

13. ฤूը໘͕มΘΔ
    ౤ߘɾݻఆϖʔδͷ
    چΤσΟλʔ Gutenberg
    Gutenberg ͰԿ͕มΘΔͷ͔ʁ
    

    View Slide

14. ϒϩοΫ Λ࢖͏ͷͰ
    Gutenberg ͰԿ͕มΘΔͷ͔ʁ
    ϖʔδͷ࡞Γํ͕มΘΔ
    

    View Slide

15. ͭ·Γ
    ૢ࡞ํ๏ ͕มΘΓ·͢
    Gutenberg ͰԿ͕มΘΔͷ͔ʁ
    

    View Slide

16. چΤσΟλʔͱͷڞ௨఺
    

    View Slide

17. ίϯςϯπΛ࡞੒ Ͱ͖Δ
    Gutenberg ͰԿ͕มΘΔͷ͔ʁ
    

    View Slide

18. Gutenberg Ͱ΋
    ಉ͡Α͏ͳ͜ͱ͕Ͱ͖Δ
    Gutenberg ͰԿ͕มΘΔͷ͔ʁ
    

    View Slide

19. ૢ࡞σϞʢಈըʣ
    

    View Slide

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

    View Slide

21. ଞͷϒϩοΫ΁ม׵
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. γϣʔτίʔυʹ΋ରԠ
    

    View Slide

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

    View Slide

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

    View Slide

28. ଞʹ΋͜Μͳ͜ͱͰ͖·͔͢ʁ
    σϞ
    

    View Slide

29. ΤσΟλʔͷ࢖͍ํ͸༷ʑɻ
    ؾʹͳΔͱ͜Ζ͸
    ࣮ࡍʹ৮ͬͯΈΑ͏
    15෼Ͱ͸঺հ͖͠Εͳ͍ʂʂ
    σϞ
    

    View Slide

30. Gutenberg Λ࢖͍࢝Ί·͠ΐ͏ʂ
    ਖ਼௚೉͍͠ͱࢥ͏
    σϞ
    WordPress 5.0͔Β
    ͍͖ͳΓͷ؀ڥมԽʹదԠ͢Δͷ͸େม
    ͬͯͷ͸
    

    View Slide

31. ਖ਼ࣜϦϦʔεલʹ࠷௿ݶ४උ͢Δ͜ͱ
    

    View Slide

32. Classic Editor ϓϥάΠϯ
    ᶃ ྆ํͷΤσΟλʔΛ࢖͑ΔΑ͏ʹ
    ਖ਼ࣜϦϦʔεલʹ࠷௿ݶ४උ͢Δ͜ͱ
    

    View Slide

33. ᶃ ྆ํͷΤσΟλʔΛ࢖͑ΔΑ͏ʹ
    Classic Editor ϓϥάΠϯ
    ਖ਼ࣜϦϦʔεલʹ࠷௿ݶ४උ͢Δ͜ͱ
    

    View Slide

34. Classic Editor ϓϥάΠϯ
    ᶃ ྆ํͷΤσΟλʔΛ࢖͑ΔΑ͏ʹ
    ਖ਼ࣜϦϦʔεલʹ࠷௿ݶ४උ͢Δ͜ͱ
    

    View Slide

35. खΛಈ͔ͦ͏ɻ
    ͭ·Γʮ׳Εʯ
    ᶄ ࣮ࡍʹ৮ͬͯΈΑ͏
    ˞ςετ؀ڥͰͷ࡞ۀ͕͓͢͢Ί
    ਖ਼ࣜϦϦʔεલʹ࠷௿ݶ४උ͢Δ͜ͱ
    

    View Slide

36. چΤσΟλʔͰ࡞ͬͨ
    ౤ߘɾݻఆϖʔδΛ
    ʮϒϩοΫ΁ม׵ʯ͠Α͏
    ᶅʮϒϩοΫ΁ม׵ʯͯ͠ΈΑ͏
    ˞ςετ؀ڥͰͷ࡞ۀ͕͓͢͢Ί
    ਖ਼ࣜϦϦʔεલʹ࠷௿ݶ४උ͢Δ͜ͱ
    

    View Slide

37. ɾϒϩοΫ΁ม׵͢Δͱίʔυ͕ফ͑ͯ͠·͏
    ɾچΤσΟλʔͰ࢖͑ͨػೳ͕࢖͑ͳ͍
    ᶆʮΧελϜHTMLʯϒϩοΫʹ׳ΕΑ͏
    ˞ςετ؀ڥͰͷ࡞ۀ͕͓͢͢Ί
    ਖ਼ࣜϦϦʔεલʹ࠷௿ݶ४උ͢Δ͜ͱ
    ʮΧελϜHTMLʯϒϩοΫ
    Λ࢖ͬͯίʔυΛҡ͓࣋ͯ͘͠
    

    View Slide

38. Gutenberg ͸ϦϦʔεʹ޲͚ͯ
    ਵ࣌Ξοϓσʔτ͞Ε͍ͯ·͢
    αϙʔτϑΥʔϥϜͷར༻ ϑΟʔυόοΫΛૹΔ
    ਖ਼ࣜϦϦʔεલʹ࠷௿ݶ४උ͢Δ͜ͱ
    

    View Slide

39. (VUFOCFSH
    ࠓ೔͔Β࢖͍࢝ΊΑ͏
    

    View Slide

40. ϑΥϩʔνϟϯωϧొ࿥
    ΑΖ͘͠Ͱ͢ʂʂ
    !TCPVZB CPVZB*NBNVSB
    

    View Slide