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

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

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

2019年05月25日(土)に開催された WordPress もくもく勉強会@日本橋で発表したスライドです。

WordPress 5.0 から導入された ブロックエディターですが「存在は知っているけど、旧エディターを使い続けている」という方も少なくないと思います。

・いずれブロックエディターに移行したい
・ブロックエディターで何ができるのか、イマイチ理解できていない
・ブロックエディターを使い始めたんだけど、うまく使いこなせていない

という方に向けて「ブロックエディターでこんなことができるよ!」というお話をしました。

当日参加いただいた方の振り返りや、参加できなかった方は参考資料としてご活用ください。

この機会に、ぜひブロックエディターを使ったブロク記事やページ作成に挑戦いただけますと幸いです。

bouya Imamura

May 25, 2019
Tweet

More Decks by bouya Imamura

Other Decks in Technology

Transcript

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

    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ʢެࣜʣ
    Newpost Catchʢެࣜʣ
    ϓϥάΠϯ ςʔϚ
    WordCamp Tokyo 2017
    WordCamp Osaka 2018
    εϐʔΧʔ
    ଞʹ΋ͨ͘͞Μ ଞʹ΋ͨ͘͞Μ
    ࣗݾ঺հ
    WordCamp Tokyo 2018

    View Slide

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

    View Slide

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

    View Slide

  9. Gutenberg ϒϩοΫΤσΟλʔ ʹ͍ͭͯ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    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. γϣʔτίʔυʹ΋ରԠ

    View Slide

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

    View Slide

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

    View Slide

  32. ଞʹ΋͜Μͳ͜ͱͰ͖·͔͢ʁ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  38. ͜ͷษڧձதʹ࣭໰͍ͯͩ͘͠͞

    View Slide

  39. खΛಈ͔ͦ͏ɻ
    ͭ·Γʮ׳Εʯ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  43. ϒϩοΫΤσΟλʔରԠͷٕज़ॻ

    View Slide

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

    View Slide

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

    View Slide

  46. ͿΒͿΒਆࣾ
    IUUQTCVSBCVSBKJOKBOFU

    View Slide

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

    View Slide

  48. ͜ͷษڧձதʹ࣭໰͍ͯͩ͘͠͞

    View Slide

  49. ओͳ׆ಈɾऔΓ૊Έ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  57. Ͳ͏΋͋Γ͕ͱ͏͟͝·ͨ͠ʂʂ

    View Slide