$30 off During Our Annual Pro Sale. View Details »

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

bouya Imamura
September 15, 2018

より便利に、効率よく ! 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/

bouya Imamura

September 15, 2018
Tweet

More Decks by bouya Imamura

Other Decks in Technology

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