Upgrade to Pro — share decks privately, control downloads, hide ads and more …

初めてのGutenberg 使ってみた!

ud_fibonacci
September 29, 2018

初めてのGutenberg 使ってみた!

#1 WP ZoomUPでお話したGuterbergの基礎のお話です。

https://wpzoom.connpass.com/event/100153/

ud_fibonacci

September 29, 2018
Tweet

More Decks by ud_fibonacci

Other Decks in Technology

Transcript

  1. ॳΊͯͷ(VUFOCFSH
    ࢖ͬͯΈͨʂ
    ଜ্௚ࢠ
    81;PPN61ɹ

    View full-size slide

  2. (VUFOCFSH άʔςϯϕϧΫ

    ϛχηγϣϯ
    ॳΊͯͷํʹ͸
    ΩιͷΩι
    طʹ͝ଘ஌ͷํʹ͸
    ෮श

    View full-size slide

  3. ΞδΣϯμ
    (VUFOCFSH׏ג⡦رٌ
    ⢪׏ג׫׋䠬䟝
    ⢪ְ倯ךֶׁ׵ְ

    View full-size slide

  4. ΞδΣϯμ
    (VUFOCFSH׏ג⡦
    ⢪׏ג׫׋䠬䟝
    ⢪ְ倯ךֶׁ׵ְ
    (VUFOCFSH׏ג⡦رٌ

    View full-size slide

  5. (VUFOCFSHͱ͸
    8PSE1SFTTך
    倜׃ְؒر؍ة٦
    7FSחז׏׋׵垥彊䵧鯹✮㹀
    ˟植㖈
    խ8PSE1SFTTכ7FS

    View full-size slide

  6. 8PSE1SFTTͷ
    ΤσΟλʔ͸

    View full-size slide

  7. ೥͘Β͍΄΅ಉ͡ܗͩͬͨ

    View full-size slide

  8. ΋ͬͱ࣌୅ʹଈͨ͠
    ΤσΟλʔͷܗ͕
    ͋ΔͷͰ͸ʁ
    ௚ײతʹ࢖͑Δ
    ͱ͍͏͜ͱͰ

    View full-size slide

  9. ϒϩοΫ

    ֦ுੑͷ͋Δฤू
    ͕Ͱ͖ΔΑ͏ʹ͠Α͏ʂ
    ͱݺ͹ΕΔ͔ͨ·ΓΛجຊʹͯ͠

    View full-size slide

  10. ࢝·ͬͨͷ͕
    (VUFOCFSHͷ։ൃʂ

    View full-size slide

  11. ೖྗͷײ͕͡
    ࣅ͍ͯΔαʔϏε

    View full-size slide

  12. %SPQCPY1BQFS .FEJVN /PUF

    View full-size slide

  13. (VUFOCFSHͷฤूը໘

    View full-size slide

  14. (VUFOCFSHͷฤूը໘

    View full-size slide

  15. (VUFOCFSHͷฤूը໘
    歗⫷
    鋅⳿׃
    俑畍
    نةٝ
    ׉ך➭ְ׹ְ׹
    ԼʹͲΜͲΜʰϒϩοΫʱͱݺ͹ΕΔɺίϯςϯπΛͷ͔ͨ·ΓΛ௥Ճ͍͖ͯ͠·͢ɻ

    View full-size slide

  16. Πϝʔδͱͯ͠͸

    View full-size slide

  17. 81;PPN61פ״ֲֿ׉
    鎸䙀ׅץֹ痥♧㔐ח׀⿫⸇ְ׋׌ֹծ
    ֮׶ָהֲ׀ְׂתׅ
    Ϙλϯ
    81;PPN61
    ͜ΜͳϖʔδΛ࡞Γ͍ͨͱ͖

    View full-size slide

  18. 8FCل٦آ
    ·ͬ͞Βͳϖʔδʹ

    View full-size slide

  19. 81;PPN61 歗⫷
    ը૾ϒϩοΫʢ͜͜Ͱ͸Χόʔը૾ϒϩοΫʣ

    View full-size slide

  20. 81;PPN61פ״ֲֿ׉
    81;PPN61
    鋅⳿׃
    ݟग़͠ϒϩοΫ

    View full-size slide

  21. 81;PPN61פ״ֲֿ׉
    鎸䙀ׅץֹ痥♧㔐ח׀⿫⸇ְ׋׌ֹծ
    ֮׶ָהֲ׀ְׂתׅ
    81;PPN61
    俑畍媮衅
    ஈམϒϩοΫ

    View full-size slide

  22. 81;PPN61פ״ֲֿ׉
    鎸䙀ׅץֹ痥♧㔐ח׀⿫⸇ְ׋׌ֹծ
    ֮׶ָהֲ׀ְׂתׅ
    Ϙλϯ
    81;PPN61
    نةٝ
    ϘλϯϒϩοΫ

    View full-size slide

  23. 81;PPN61פ״ֲֿ׉
    鎸䙀ׅץֹ痥♧㔐ח׀⿫⸇ְ׋׌ֹծ
    ֮׶ָהֲ׀ְׂתׅ
    Ϙλϯ
    81;PPN61 歗⫷
    鋅⳿׃
    نةٝ
    ϒϩοΫΛ௥Ճͯ͠΢ΣϒϖʔδΛ࡞Δ
    俑畍媮衅

    View full-size slide

  24. (VUFOCFSH
    Ӷҙ
    ։ൃத

    View full-size slide

  25. Ͳ͏΍ͬͨΒ
    (VUFOCFSHΛࢼͤΔͷʁ

    View full-size slide

  26. ํ๏͸
    ̎ͭ

    View full-size slide

  27. IUUQTKBXPSEQSFTTPSHHVUFOCFSH
    ɹɹମݧϖʔδͰೖྗͯ͠ΈΔ

    View full-size slide

  28. ϓϥάΠϯΛΠϯετʔϧ
    IUUQTKBXPSEQSFTTPSHQMVHJOTHVUFOCFSH

    View full-size slide

  29. (VUFOCFSHΛࢼ͢ͷʹ
    Φεεϝͷ
    ςʔϚ

    View full-size slide

  30. IUUQTHJUIVCDPNPOPDPNHVUFOCFSHDIBMMFOHF
    ʰ(VUFOCFSH$IBMMFOHFʱ
    ʰ(VUFOCFSHͰ࡞ΔϥϯσΟϯάϖʔδʱ
    8PSE$BNQ0TBLB
    খ໺ོ࢜
    ͞Μ

    View full-size slide

  31. IUUQTTOPXNPOLFZJODPSH
    ʰ4OPX.POLFZʱ

    View full-size slide

  32. ͥͻࢼͯ͠Έͯ
    ͍ͩ͘͞
    ·ͩ࢖ͬͨ͜ͱͳ͍Α
    ͱ͍͏ํ͸

    View full-size slide

  33. ΞδΣϯμ
    ⢪ְ倯ךֶׁ׵ְ
    (VUFOCFSH׏ג⡦رٌ
    ⢪׏ג׫׋䠬䟝

    View full-size slide

  34. ࢖ͬͯΈͨײ૝
    ྑͦ͞͏
    ͳΜ͔

    View full-size slide

  35. ࢖ͬͯΈͨײ૝
    Ұ൪࠷ॳʹݟͨͱ͖͸ೖྗը໘͕ਅͬനա͗ͯͲ͏͠Α͏͔ͱࢥͬͨ

    View full-size slide

  36. ࢖ͬͯΈͨײ૝
    Α͘ݟͯΈΔͱ

    View full-size slide

  37. ࢖ͬͯΈͨײ૝
    ʰλΠτϧΛ௥Ճʱͷཝ͕͋Γ

    View full-size slide

  38. ࢖ͬͯΈͨײ૝
    λΠτϧΛೖྗ͢ΔͱύʔϚϦϯΫͷมߋཝ͕ग़͖ͯͨΓ
    λΠϜϥά͋Δ͔ΒؾΛ͚ͭͯʂʂʂ

    View full-size slide

  39. ࢖ͬͯΈͨײ૝
    Լʹ͸࣍ʹԿΛ͢΂͖͔ͷࢦ͕ࣔग़͖ͯ·͢

    View full-size slide

  40. ࢖ͬͯΈͨײ૝
    (VUFOCFSH͸ඞཁͳ͍΋ͷ͸Ӆ͠
    ඞཁͳ΋ͷ͸ඞཁͳ࣌ʹग़͢

    View full-size slide

  41. ࢖ͬͯΈͨײ૝
    )5.-΍ಛผͳϓϩάϥϛϯάͷ஌͕ࣝͳͯ͘΋
    ϘλϯΛ͚ͭͨΓը໘Λ෼ׂͰ͖ΔͳͲɺ
    ΍Γ͍ͨ͜ͱ͕Ͱ͖Δ

    View full-size slide

  42. ΞδΣϯμ
    (VUFOCFSH׏ג⡦
    رٌ⢪׏ג׫׋䠬䟝
    ⢪ְ倯ךֶׁ׵ְ

    View full-size slide

  43. ΞδΣϯμ
    (VUFOCFSH׏ג⡦
    رٌ⢪׏ג׫׋䠬䟝
    ⢪ְ倯ךֶׁ׵ְ
    ⢪ְ倯ךֶׁ׵ְ

    View full-size slide

  44. ࢖͍ํͷ͓͞Β͍
    歗⫷
    鋅⳿׃
    俑畍
    نةٝ
    ׉ך➭ְ׹ְ׹

    View full-size slide

  45. จষΛೖΕ͍ͨ৔߹

    View full-size slide

  46. จষΛೖΕ͍ͨ৔߹
    ͦͷ··ςΩετΛଧͭ
    ςΩετͷೖྗΛͯ͠Έ·͢Αɻ

    View full-size slide

  47. จষҎ֎Λ
    ೖΕ͍ͨ৔߹
    ը૾ ݟग़͠ Ϙλϯ

    View full-size slide

  48. ํ๏͸
    ̎ͭ

    View full-size slide


  49. ϘλϯΛԡͯ͠
    ϒϩοΫͷछྨΛબΜͰ
    ௥Ճ͢Δ

    View full-size slide


  50. εΫϩʔϧͨ͠Β
    ͍ͬͺ͍ग़ͯ͘Δ

    View full-size slide


  51. ʮʯʮʢϒϩοΫछྨʣʯ
    ͱೖྗͯ͠ɺ
    ໨తͷϒϩοΫछྨΛݺͼग़ͯ͠બͿ

    View full-size slide

  52. ϒϩοΫछྨͷҰཡ͕දࣔ͞ΕΔ

    View full-size slide

  53. ϒϩοΫͷछྨΛߜΓࠐΉ͜ͱ͕Ͱ͖Δ

    View full-size slide

  54. ৄࡉઃఆ͍ͨ͠ͱ͖

    View full-size slide

  55. จষશମͷઃఆΛ͍ͨ͠ͱ͖

    View full-size slide

  56. (VUFOCFSHϛχηογϣϯ͸Ҏ্Ͱ͢

    View full-size slide

  57. (VUFOCFSHʹ͍ͭͯͷ
    2"
    ࣭໰͕͋Δํ͸͍Ζ͍Ζฉ͍ͯΈ͍ͯͩ͘͞
    ίʔφʔ
    ࣍͸

    View full-size slide

  58. WordCamp Miami 2018
    GUTENPUU
    ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View full-size slide