WordCamp Osaka 2019 h2ham (´ ºムº `)

Transcript

1. View Slide

2. 運⽤も最⼤限考慮！
   コーポレートサイトで
   ブロックエディタフル活⽤の事例紹介
   ⻑⾕川 広武
   株式会社HAMWORKS
   

   View Slide

3. スライドは共有するため、
   メモは不要です
   

   View Slide

4. WordPress案件で
   ブロックエディタ利⽤での
   設計・構築 をしていますか？
   質問
   

   View Slide

5. 2018年12⽉6⽇
   

   View Slide

6. https://wordpress.org/news/2018/12/bebo/
   

   View Slide

7. https://ja.wordpress.org/gutenberg/
   ブロックエディタの登場により
   WordPressの設計が変わった！
   

   View Slide

8. 皆さんの設計・構築も
   ブロックエディタの登場により
   変わりましたか？
   

   View Slide

9. ⾃⼰紹介
   

   View Slide

10. ハム
     テクニカルディレクター
    フロントエンドエンジニア
    SaCSS 主催
    ⻑⾕川 広武
    は せ が わ ひろむ
    

    View Slide

11. (´ ºムº `)
    

    View Slide

12. View Slide

13. View Slide

14. View Slide

15. https://www.meetup.com/ja-JP/topics/wordpress/jp/
    

    View Slide

16. https://www.meetup.com/ja-JP/Sapporo-WordPress-Meetup/
    - ２ヶ⽉に１度開催のペース
    - これまで８回開催
    - 当⽇に質問を受けて進⾏する形式
    

    View Slide

17. https://ja.wordpress.org/plugins/gutenberg/
    ほぼ毎回ブロックエディタ関連
    

    View Slide

18. View Slide

19. View Slide

20. View Slide

21. ぜひ⼀度北海道のイベントにも参加を！
    

    View Slide

22. 本題
    

    View Slide

23. https://ja.wordpress.org/gutenberg/
    ブロックエディタの登場により
    WordPressの設計が変わったんです
    

    View Slide

24. 会社の事例１つ⽬として
    初ブロックエディタ対応プロジェクト
    リリース
    2019年2⽉
    

    View Slide

25. https://www.bacardijapan.jp/
    投稿コンテンツはすべて
    ブロックエディタ⼊⼒対応
    

    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. https://wordpress.org/plugins/advanced-posts-blocks/
    

    View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. 再利⽤ブロック
    

    View Slide

42. 変更頻度が⾼い再利⽤ブロックに
    専⽤のリンク
    

    View Slide

43. 設計：おおよそ４ヶ⽉ほど
    実装：メインの開発は２ヶ⽉
       調整１ヶ⽉・⼊⼒１ヶ⽉
    

    View Slide

44. - ワイヤー後に必要ブロック精査
    - もしくは、必要ブロック決定後に
    必要ブロックのみで構成
    ワイヤーの段階でブロックも確定
    

    View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. View Slide

52. 2018 年 8 ⽉時点で
    ブロックエディタ採⽤きめる
    

    View Slide

53. https://ja.wordpress.org/gutenberg/
    - 標準になる機能⾃体を最⼤限利⽤したい
    - クライアントの利⽤しやすさ優先
    - カスタムフィールドの利⽤を避けたい
    開発段階で採⽤を決めた理由
    

    View Slide

54. それより何よりも・・・
    

    View Slide

55. カスタムフィールド前提の
    設計・構築を避けたい！
    

    View Slide

56. https://2017.tokyo.wordcamp.org/session/ad-9/
    

    View Slide

57. https://speakerdeck.com/h2ham/wordcamp-tokyo-2017-h2ham-toro-unit
    

    View Slide

58. https://speakerdeck.com/h2ham/wordcamp-tokyo-2017-h2ham-toro-unit?slide=31
    「外観」と「コンテンツ」の分離
    

    View Slide

59. プラグインやテーマによる豊富な拡張性
    WordPress で構築するメリット
    

    View Slide

60. カスタムフィールドの功罪
    

    View Slide

61. ⼊⼒の制限と明確化？
    - 決まった⼊⼒で制限をすることで
    予期せぬ使われ⽅を防ぐ？
    → 表⽰崩れ防⽌にもなる？
    - どこに何を⼊⼒するのかの明確化？
    

    View Slide

62. 結果、制作にかかる負担増加
    - 作りきり⼤前提事案に
    - ⼊⼒内容追加があっても、対応負担増加に
    - テンプレートの複雑化・制作⼯数増に
    

    View Slide

63. QIPUPCZ#SZBO#VSLFIUUQTXXXqJDLSDPNQIPUPTCSZBOCVSLF
    photo by Andreas Mortonus https://www.flickr.com/photos/purpleseadonkey/4775066884
    ステキなWordPressサイト
    

    View Slide

64. https://developer.wordpress.org/themes/
    

    View Slide

65. https://speakerdeck.com/chiilog/wordpresstemafalsezuo-rifang-2019-si-falsebesutopurakuteisu
    実案件も含めてテーマ製作者は必読！
    

    View Slide

66. WordPress 案件って難しぃよ！
    

    View Slide

67. 設計も制作も難易度増！
    - 運⽤も踏まえて仕様を詰める必要がある
      - 運⽤時どんな⼊⼒が必要か
      - 運⽤に合わせてどんなコンポーネントが必要か
    - ブロックエディターを理解する
      - どんなブロックがあり何ができるのか
      - そのブロックでどんなHTMLが出⼒されるか、スタイルがついているか
      - コンポーネントを意識した設計とスタイル設計
      - 場合によってカスタムブロックの作成⽅法も
    

    View Slide

68. ブロック間の余⽩は統⼀したい
    - 次のブロックが何か？で余⽩を変えると
    制作⼯数は増えてしまう
    ここが苦⼿・・・
    

    View Slide

69. 結局のところ
    

    View Slide

70. 制作の何がかわったか
    ？
    

    View Slide

71. 運⽤も考慮したブロック設計が必須に
    - ブロックだけでページが構成できるように
    - 制作ブロック数で⼯数も変わる
    - カスタムフィールドは最⼩限に
    - 利⽤するとしてもコンテンツ以外の構成などに
    

    View Slide

72. https://wptavern.com/gutenberg-one-year-later
    

    View Slide

73. まとめ
    

    View Slide

74. "ブロックエディタの登場で制作が変化
    "設計重要！
    "運⽤も考慮した設計必須！
    "カスタムフィールドは基本不要
    

    View Slide

75. 使いやすい・メンテしやすい
    WordPressサイトに！
    

    View Slide

76. この時間は設計の話でした
    

    View Slide

77. ご清聴ありがとうございました
    

    View Slide