ユーザー目線で学ぶGutenberg / Gutenberg to learn from a user perspective

ユーザー目線で学ぶGutenberg / Gutenberg to learn from a user perspective

#13 WP ZoomUP 「WordPressの新エディターGutenbergをもっと知ろう」
(2019/3/26)で登壇した資料です。

※セッション後に『ブロックライブラリ』に関する言葉の範囲が間違っているのではとご指摘いただきました。訂正してお詫び申し上げます。スライドは訂正箇所が分かるように修正しております。(199ページ以降)

【 イベント詳細 】
https://wpzoom.connpass.com/event/121891/

【 動画 】
https://youtu.be/F1bUmhsSucc

B3d3e62e3a1823e82eb633f42e4881a5?s=128

ud_fibonacci

March 26, 2019
Tweet

Transcript

  1. 6.
  2. 21.
  3. 37.
  4. 38.
  5. 55.

    ΫϥγοΫΤσΟλʔ ϒϩοΫΤσΟλʔ ɹॅΈʹ͖͘ੈ͔ΒɺॅΈ ʹ͖͘൥ͻΛҾ͖͍፝ͯɺ ೉༗͍ੈքΛ·ͷ͋ͨΓʹ ሜ͢ͷ͕ࢻͰ͋ΔɺᙘͰ͋ Δɻ͋Δ͸ԻᒜͱூࠁͰ͋ Δɻ͜·͔ʹӠ΁͹ሜ͞ͳ ͍Ͱ΋Α͍ ɹਓͷੈΛ࡞ͬͨ΋ͷ͸ਆͰ΋ͳ͚Ε͹َͰ΋ͳ͍ɻ໼ு

    Γ޲;ࡾݢၷྡΓʹͪΒͪΒ͢Δ།ͷਓͰ͋Δɻ།ͷਓ͕ ࡞ͭͨਓͷੈ͕ॅΈʹ͍͔͘Βͱͯɺӽ͢ᅳ͸͋Δ·͍ɻ ͋Ε͹ਓͰͳ͠ͷᅳ΁ߦ͘ڐΓͩɻਓͰͳ͠ͷᅳ͸ਓͷੈ ΑΓ΋༛ॅΈʹ͔͘Β͏ɻ ɹӽ͢ࣄͷͳΒ͵ੈ͕ॅΈʹ͚͘Ε͹ɺॅΈʹ͍͘ॴΛͲ Ε΄Ͳ͔ɺ׮༰ʢͭ͘Ζ͛ʣͯɺଋͷؒͷ໋ΛɺଋͷؒͰ ΋ॅΈΑͤ͘Ͷ͹ͳΒ͵ɻ͜͜ʹࢻਓͱ͍;ఱ৬͕ग़ိ ͯɺ͜͜ʹᙘՈͱ͍;࢖໋͕߱Δɻ͋ΒΏΔ᥁ज़ͷ࢜͸ਓ ͷੈΛ௕ؓʢͷͲ͔ʣʹ͠ɺਓͷ৺Λ๛͔ʹ͢Δ͕ނʹଚ ʢͨͭʣͱ͍ɻ ✏ ɹӽ͢ࣄͷͳΒ͵ੈ͕ॅΈʹ͚͘Ε͹ɺॅΈʹ͍͘ॴΛͲ Ε΄Ͳ͔ɺ׮༰ʢͭ͘Ζ͛ʣͯɺଋͷؒͷ໋ΛɺଋͷؒͰ ΋ॅΈΑͤ͘Ͷ͹ͳΒ͵ɻ͜͜ʹࢻਓͱ͍;ఱ৬͕ग़ိ ͯɺ͜͜ʹᙘՈͱ͍;࢖໋͕߱Δɻ͋ΒΏΔ᥁ज़ͷ࢜͸ਓ ͷੈΛ௕ؓʢͷͲ͔ʣʹ͠ɺਓͷ৺Λ๛͔ʹ͢Δ͕ނʹଚ ʢͨͭʣͱ͍ɻ ɹਓͷੈΛ࡞ͬͨ΋ͷ͸ਆͰ΋ͳ͚Ε͹َͰ΋ͳ͍ɻ໼ு Γ޲;ࡾݢၷྡΓʹͪΒͪΒ͢Δ།ͷਓͰ͋Δɻ།ͷਓ͕ ࡞ͭͨਓͷੈ͕ॅΈʹ͍͔͘Βͱͯɺӽ͢ᅳ͸͋Δ·͍ɻ ͋Ε͹ਓͰͳ͠ͷᅳ΁ߦ͘ڐΓͩɻਓͰͳ͠ͷᅳ͸ਓͷੈ ΑΓ΋༛ॅΈʹ͔͘Β͏ɻ [ ɹॅΈʹ͖͘ੈ͔ΒɺॅΈ ʹ͖͘൥ͻΛҾ͖͍፝ͯɺ ೉༗͍ੈքΛ·ͷ͋ͨΓʹ ሜ͢ͷ͕ࢻͰ͋ΔɺᙘͰ͋ Δɻ͋Δ͸ԻᒜͱூࠁͰ͋ Δɻ͜·͔ʹӠ΁͹ሜ͞ͳ ͍Ͱ΋Α͍
  6. 62.
  7. 69.
  8. 70.
  9. 71.
  10. 73.
  11. 74.
  12. 75.
  13. 77.
  14. 82.
  15. 83.
  16. 84.
  17. 85.
  18. 96.
  19. 105.
  20. 110.
  21. 114.
  22. 115.

    ΫϥγοΫΤσΟλʔ ϒϩοΫΤσΟλʔ ɹॅΈʹ͖͘ੈ͔ΒɺॅΈʹ͖͘൥ͻΛҾ͖͍፝ͯɺ೉༗͍ ੈքΛ·ͷ͋ͨΓʹሜ͢ͷ͕ࢻͰ͋ΔɺᙘͰ͋Δɻ͋Δ͸Ի ᒜͱூࠁͰ͋Δɻ͜·͔ʹӠ΁͹ሜ͞ͳ͍Ͱ΋Α͍ɻ୞·ͷ ͋ͨΓʹݟΕ͹ɺͦ͜ʹࢻ΋ੜ͖ɺՎ΋༙͘ɻண૝Λࢴʹམ ͞͵ͱ΋㧮᭱ʢ͖͏͞͏ʣͷԻʢ͓Μʣ͸ڳཪʹىΔɻ୮੨ ɹਓͷੈΛ࡞ͬͨ΋ͷ͸ਆͰ΋ͳ͚Ε͹َͰ΋ͳ͍ɻ໼ு Γ޲;ࡾݢၷྡΓʹͪΒͪΒ͢Δ།ͷਓͰ͋Δɻ།ͷਓ͕ ࡞ͭͨਓͷੈ͕ॅΈʹ͍͔͘Βͱͯɺӽ͢ᅳ͸͋Δ·͍ɻ

    ͋Ε͹ਓͰͳ͠ͷᅳ΁ߦ͘ڐΓͩɻਓͰͳ͠ͷᅳ͸ਓͷੈ ΑΓ΋༛ॅΈʹ͔͘Β͏ɻ ɹӽ͢ࣄͷͳΒ͵ੈ͕ॅΈʹ͚͘Ε͹ɺॅΈʹ͍͘ॴΛͲ Ε΄Ͳ͔ɺ׮༰ʢͭ͘Ζ͛ʣͯɺଋͷؒͷ໋ΛɺଋͷؒͰ ΋ॅΈΑͤ͘Ͷ͹ͳΒ͵ɻ͜͜ʹࢻਓͱ͍;ఱ৬͕ग़ိ ͯɺ͜͜ʹᙘՈͱ͍;࢖໋͕߱Δɻ͋ΒΏΔ᥁ज़ͷ࢜͸ਓ ͷੈΛ௕ؓʢͷͲ͔ʣʹ͠ɺਓͷ৺Λ๛͔ʹ͢Δ͕ނʹଚ ʢͨͭʣͱ͍ɻ ɹॅΈʹ͖͘ੈ͔ΒɺॅΈʹ͖͘൥ͻΛҾ͖͍፝ͯɺ೉༗͍ ੈքΛ·ͷ͋ͨΓʹሜ͢ͷ͕ࢻͰ͋ΔɺᙘͰ͋Δɻ͋Δ͸Ի ᒜͱூࠁͰ͋Δɻ͜·͔ʹӠ΁͹ሜ͞ͳ͍Ͱ΋Α͍ɻ୞·ͷ ͋ͨΓʹݟΕ͹ɺͦ͜ʹࢻ΋ੜ͖ɺՎ΋༙͘ɻண૝Λࢴʹམ ͞͵ͱ΋㧮᭱ʢ͖͏͞͏ʣͷԻʢ͓Μʣ͸ڳཪʹىΔɻ୮੨ ɹਓͷੈΛ࡞ͬͨ΋ͷ͸ਆͰ΋ͳ͚Ε͹َͰ΋ͳ͍ɻ໼ு Γ޲;ࡾݢၷྡΓʹͪΒͪΒ͢Δ།ͷਓͰ͋Δɻ།ͷਓ͕ ࡞ͭͨਓͷੈ͕ॅΈʹ͍͔͘Βͱͯɺӽ͢ᅳ͸͋Δ·͍ɻ ͋Ε͹ਓͰͳ͠ͷᅳ΁ߦ͘ڐΓͩɻਓͰͳ͠ͷᅳ͸ਓͷੈ ΑΓ΋༛ॅΈʹ͔͘Β͏ɻ ɹӽ͢ࣄͷͳΒ͵ੈ͕ॅΈʹ͚͘Ε͹ɺॅΈʹ͍͘ॴΛͲ Ε΄Ͳ͔ɺ׮༰ʢͭ͘Ζ͛ʣͯɺଋͷؒͷ໋ΛɺଋͷؒͰ ΋ॅΈΑͤ͘Ͷ͹ͳΒ͵ɻ͜͜ʹࢻਓͱ͍;ఱ৬͕ग़ိ ͯɺ͜͜ʹᙘՈͱ͍;࢖໋͕߱Δɻ͋ΒΏΔ᥁ज़ͷ࢜͸ਓ ͷੈΛ௕ؓʢͷͲ͔ʣʹ͠ɺਓͷ৺Λ๛͔ʹ͢Δ͕ނʹଚ ʢͨͭʣͱ͍ɻ
  23. 116.

    ΫϥγοΫΤσΟλʔ ϒϩοΫΤσΟλʔ ɹॅΈʹ͖͘ੈ͔ΒɺॅΈʹ͖͘൥ͻΛҾ͖͍፝ͯɺ೉༗͍ ੈքΛ·ͷ͋ͨΓʹሜ͢ͷ͕ࢻͰ͋ΔɺᙘͰ͋Δɻ͋Δ͸Ի ᒜͱூࠁͰ͋Δɻ͜·͔ʹӠ΁͹ሜ͞ͳ͍Ͱ΋Α͍ɻ୞·ͷ ͋ͨΓʹݟΕ͹ɺͦ͜ʹࢻ΋ੜ͖ɺՎ΋༙͘ɻண૝Λࢴʹམ ͞͵ͱ΋㧮᭱ʢ͖͏͞͏ʣͷԻʢ͓Μʣ͸ڳཪʹىΔɻ୮੨ ɹਓͷੈΛ࡞ͬͨ΋ͷ͸ਆͰ΋ͳ͚Ε͹َͰ΋ͳ͍ɻ໼ு Γ޲;ࡾݢၷྡΓʹͪΒͪΒ͢Δ།ͷਓͰ͋Δɻ།ͷਓ͕ ࡞ͭͨਓͷੈ͕ॅΈʹ͍͔͘Βͱͯɺӽ͢ᅳ͸͋Δ·͍ɻ

    ͋Ε͹ਓͰͳ͠ͷᅳ΁ߦ͘ڐΓͩɻਓͰͳ͠ͷᅳ͸ਓͷੈ ΑΓ΋༛ॅΈʹ͔͘Β͏ɻ ɹӽ͢ࣄͷͳΒ͵ੈ͕ॅΈʹ͚͘Ε͹ɺॅΈʹ͍͘ॴΛͲ Ε΄Ͳ͔ɺ׮༰ʢͭ͘Ζ͛ʣͯɺଋͷؒͷ໋ΛɺଋͷؒͰ ΋ॅΈΑͤ͘Ͷ͹ͳΒ͵ɻ͜͜ʹࢻਓͱ͍;ఱ৬͕ग़ိ ͯɺ͜͜ʹᙘՈͱ͍;࢖໋͕߱Δɻ͋ΒΏΔ᥁ज़ͷ࢜͸ਓ ͷੈΛ௕ؓʢͷͲ͔ʣʹ͠ɺਓͷ৺Λ๛͔ʹ͢Δ͕ނʹଚ ʢͨͭʣͱ͍ɻ ɹॅΈʹ͖͘ੈ͔ΒɺॅΈʹ͖͘൥ͻΛҾ͖͍፝ͯɺ೉༗͍ ੈքΛ·ͷ͋ͨΓʹሜ͢ͷ͕ࢻͰ͋ΔɺᙘͰ͋Δɻ͋Δ͸Ի ᒜͱூࠁͰ͋Δɻ͜·͔ʹӠ΁͹ሜ͞ͳ͍Ͱ΋Α͍ɻ୞·ͷ ͋ͨΓʹݟΕ͹ɺͦ͜ʹࢻ΋ੜ͖ɺՎ΋༙͘ɻண૝Λࢴʹམ ͞͵ͱ΋㧮᭱ʢ͖͏͞͏ʣͷԻʢ͓Μʣ͸ڳཪʹىΔɻ୮੨ ɹਓͷੈΛ࡞ͬͨ΋ͷ͸ਆͰ΋ͳ͚Ε͹َͰ΋ͳ͍ɻ໼ு Γ޲;ࡾݢၷྡΓʹͪΒͪΒ͢Δ།ͷਓͰ͋Δɻ།ͷਓ͕ ࡞ͭͨਓͷੈ͕ॅΈʹ͍͔͘Βͱͯɺӽ͢ᅳ͸͋Δ·͍ɻ ͋Ε͹ਓͰͳ͠ͷᅳ΁ߦ͘ڐΓͩɻਓͰͳ͠ͷᅳ͸ਓͷੈ ΑΓ΋༛ॅΈʹ͔͘Β͏ɻ ɹӽ͢ࣄͷͳΒ͵ੈ͕ॅΈʹ͚͘Ε͹ɺॅΈʹ͍͘ॴΛͲ Ε΄Ͳ͔ɺ׮༰ʢͭ͘Ζ͛ʣͯɺଋͷؒͷ໋ΛɺଋͷؒͰ ΋ॅΈΑͤ͘Ͷ͹ͳΒ͵ɻ͜͜ʹࢻਓͱ͍;ఱ৬͕ग़ိ ͯɺ͜͜ʹᙘՈͱ͍;࢖໋͕߱Δɻ͋ΒΏΔ᥁ज़ͷ࢜͸ਓ ͷੈΛ௕ؓʢͷͲ͔ʣʹ͠ɺਓͷ৺Λ๛͔ʹ͢Δ͕ނʹଚ ʢͨͭʣͱ͍ɻ ஈམϒϩοΫ ஈམϒϩοΫ ஈམϒϩοΫ
  24. 118.

    ΫϥγοΫΤσΟλʔ ϒϩοΫΤσΟλʔ ɹॅΈʹ͖͘ੈ͔ΒɺॅΈʹ͖͘൥ͻΛҾ͖͍፝ͯɺ೉༗͍ ੈքΛ·ͷ͋ͨΓʹሜ͢ͷ͕ࢻͰ͋ΔɺᙘͰ͋Δɻ͋Δ͸Ի ᒜͱூࠁͰ͋Δɻ͜·͔ʹӠ΁͹ሜ͞ͳ͍Ͱ΋Α͍ɻ୞·ͷ ͋ͨΓʹݟΕ͹ɺͦ͜ʹࢻ΋ੜ͖ɺՎ΋༙͘ɻண૝Λࢴʹམ ͞͵ͱ΋㧮᭱ʢ͖͏͞͏ʣͷԻʢ͓Μʣ͸ڳཪʹىΔɻ୮੨ ɹਓͷੈΛ࡞ͬͨ΋ͷ͸ਆͰ΋ͳ͚Ε͹َͰ΋ͳ͍ɻ໼ு Γ޲;ࡾݢၷྡΓʹͪΒͪΒ͢Δ།ͷਓͰ͋Δɻ།ͷਓ͕ ࡞ͭͨਓͷੈ͕ॅΈʹ͍͔͘Βͱͯɺӽ͢ᅳ͸͋Δ·͍ɻ

    ͋Ε͹ਓͰͳ͠ͷᅳ΁ߦ͘ڐΓͩɻਓͰͳ͠ͷᅳ͸ਓͷੈ ΑΓ΋༛ॅΈʹ͔͘Β͏ɻ ɹӽ͢ࣄͷͳΒ͵ੈ͕ॅΈʹ͚͘Ε͹ɺॅΈʹ͍͘ॴΛͲ Ε΄Ͳ͔ɺ׮༰ʢͭ͘Ζ͛ʣͯɺଋͷؒͷ໋ΛɺଋͷؒͰ ΋ॅΈΑͤ͘Ͷ͹ͳΒ͵ɻ͜͜ʹࢻਓͱ͍;ఱ৬͕ग़ိ ͯɺ͜͜ʹᙘՈͱ͍;࢖໋͕߱Δɻ͋ΒΏΔ᥁ज़ͷ࢜͸ਓ ͷੈΛ௕ؓʢͷͲ͔ʣʹ͠ɺਓͷ৺Λ๛͔ʹ͢Δ͕ނʹଚ ʢͨͭʣͱ͍ɻ ҰͭͷஈམϒϩοΫ ɹॅΈʹ͖͘ੈ͔ΒɺॅΈʹ͖͘൥ͻΛҾ͖͍፝ͯɺ೉༗͍ ੈքΛ·ͷ͋ͨΓʹሜ͢ͷ͕ࢻͰ͋ΔɺᙘͰ͋Δɻ͋Δ͸Ի ᒜͱூࠁͰ͋Δɻ͜·͔ʹӠ΁͹ሜ͞ͳ͍Ͱ΋Α͍ɻ୞·ͷ ͋ͨΓʹݟΕ͹ɺͦ͜ʹࢻ΋ੜ͖ɺՎ΋༙͘ɻண૝Λࢴʹམ ͞͵ͱ΋㧮᭱ʢ͖͏͞͏ʣͷԻʢ͓Μʣ͸ڳཪʹىΔɻ୮੨ ɹਓͷੈΛ࡞ͬͨ΋ͷ͸ਆͰ΋ͳ͚Ε͹َͰ΋ͳ͍ɻ໼ு Γ޲;ࡾݢၷྡΓʹͪΒͪΒ͢Δ།ͷਓͰ͋Δɻ།ͷਓ͕ ࡞ͭͨਓͷੈ͕ॅΈʹ͍͔͘Βͱͯɺӽ͢ᅳ͸͋Δ·͍ɻ ͋Ε͹ਓͰͳ͠ͷᅳ΁ߦ͘ڐΓͩɻਓͰͳ͠ͷᅳ͸ਓͷੈ ΑΓ΋༛ॅΈʹ͔͘Β͏ɻ ɹӽ͢ࣄͷͳΒ͵ੈ͕ॅΈʹ͚͘Ε͹ɺॅΈʹ͍͘ॴΛͲ Ε΄Ͳ͔ɺ׮༰ʢͭ͘Ζ͛ʣͯɺଋͷؒͷ໋ΛɺଋͷؒͰ ΋ॅΈΑͤ͘Ͷ͹ͳΒ͵ɻ͜͜ʹࢻਓͱ͍;ఱ৬͕ग़ိ ͯɺ͜͜ʹᙘՈͱ͍;࢖໋͕߱Δɻ͋ΒΏΔ᥁ज़ͷ࢜͸ਓ ͷੈΛ௕ؓʢͷͲ͔ʣʹ͠ɺਓͷ৺Λ๛͔ʹ͢Δ͕ނʹଚ ʢͨͭʣͱ͍ɻ
  25. 123.

    ϒϩοΫͷ֦ு ϓϥάΠϯͰ
 ϒϩοΫࣗମΛ
 ࡞Γग़͍ͯ͠ΔλΠϓ ΋ͱ΋ͱ͋Δ ϒϩοΫ ίΞϒϩοΫ ʹ $44ΛՃ͑ΔλΠϓ ˒ɹηογϣϯͷ͔࣌Βมߋ͠·ͨ͠ɻݩʑ͸ʮϒϩοΫϥΠϒϥϦʯͱ͍ͯ͠·ͨ͠ɻ

    ˒ɹ௥Ճ͠·ͨ͠ɻ ͸ϒϩοΫࣗମͷछྨ͕௥Ճ͞Ε·͢ɻ " # " # ϒϩοΫϥΠϒϥϦ ˒ɹগ͠දݱΛมߋ͠·ͨ͠ɻ ͸ϒϩοΫͷछྨ͸૿͑·ͤΜ͕ɺ
 $44ʹΑΓݟͨ໨͕มߋ͞Ε·͢ɻ
  26. 142.
  27. 143.

    ϒϩοΫͷ֦ு ศརͰߴػೳ γϯϓϧ ่ΕΔ ݪܕΛཹΊΔ ػೳ ϓϥάΠϯΛ ఀࢭͨ͠Β ࣮ࡍͷ ϓϥάΠϯ

    4OPX.POLFZ#MPDLT 7,#MPDLT (VUFOCFSH#MPDLT%FTJHO-JCSBSZ ϓϥάΠϯͰ ϒϩοΫࣗମΛ
 ࡞Γग़͍ͯ͠ΔλΠϓ ΋ͱ΋ͱ͋Δ ϒϩοΫ ίΞϒϩοΫ ʹ $44ΛՃ͑ΔλΠϓ " # ˒ɹηογϣϯͷ͔࣌Βมߋ͠·ͨ͠ɻݩʑ͸ʮϒϩοΫϥΠϒϥϦʯͱ͍ͯ͠·ͨ͠ɻ
  28. 144.

    ϒϩοΫϥΠϒϥϦ ศརͰߴػೳ γϯϓϧ ่ΕΔ ݪܕΛཹΊΔ ػೳ ϓϥάΠϯΛ ఀࢭͨ͠Β ࣮ࡍͷ ϓϥάΠϯ

    4OPX.POLFZ#MPDLT 7,#MPDLT (VUFOCFSH#MPDLT%FTJHO-JCSBSZ ϓϥάΠϯͰ ϒϩοΫࣗମΛ
 ࡞Γग़͍ͯ͠ΔλΠϓ ΋ͱ΋ͱ͋Δ ϒϩοΫ ίΞϒϩοΫ ʹ $44ΛՃ͑ΔλΠϓ " #
  29. 145.

    ϒϩοΫϥΠϒϥϦ ศརͰߴػೳ γϯϓϧ ่ΕΔ ݪܕΛཹΊΔ ػೳ ϓϥάΠϯΛ ఀࢭͨ͠Β ࣮ࡍͷ ϓϥάΠϯ

    4OPX.POLFZ#MPDLT 7,#MPDLT (VUFOCFSH#MPDLT%FTJHO-JCSBSZ ϓϥάΠϯͰ ϒϩοΫࣗମΛ
 ࡞Γग़͍ͯ͠ΔλΠϓ ΋ͱ΋ͱ͋Δ ϒϩοΫ ίΞϒϩοΫ ʹ $44ΛՃ͑ΔλΠϓ " #