WordCamp Osaka 2019 h2ham (´ ºムº `)

Transcript

2. 運⽤も最⼤限考慮！ コーポレートサイトで ブロックエディタフル活⽤の事例紹介 ⻑⾕川 広武 株式会社HAMWORKS
3. スライドは共有するため、 メモは不要です
4. WordPress案件で ブロックエディタ利⽤での 設計・構築 をしていますか？ 質問
5. 2018年12⽉6⽇
6. https://wordpress.org/news/2018/12/bebo/
7. https://ja.wordpress.org/gutenberg/ ブロックエディタの登場により WordPressの設計が変わった！
8. 皆さんの設計・構築も ブロックエディタの登場により 変わりましたか？
9. ⾃⼰紹介
10. ハム  テクニカルディレクター フロントエンドエンジニア SaCSS 主催 ⻑⾕川 広武 は せ が わ ひろむ
11. (´ ºムº `)
15. https://www.meetup.com/ja-JP/topics/wordpress/jp/
16. https://www.meetup.com/ja-JP/Sapporo-WordPress-Meetup/ - ２ヶ⽉に１度開催のペース - これまで８回開催 - 当⽇に質問を受けて進⾏する形式
17. https://ja.wordpress.org/plugins/gutenberg/ ほぼ毎回ブロックエディタ関連
21. ぜひ⼀度北海道のイベントにも参加を！
22. 本題
23. https://ja.wordpress.org/gutenberg/ ブロックエディタの登場により WordPressの設計が変わったんです
24. 会社の事例１つ⽬として 初ブロックエディタ対応プロジェクト リリース 2019年2⽉
25. https://www.bacardijapan.jp/ 投稿コンテンツはすべて ブロックエディタ⼊⼒対応
26. サイト構成画⾯例
33. ブロックエディタ抜粋
35. https://wordpress.org/plugins/advanced-posts-blocks/
41. 再利⽤ブロック
42. 変更頻度が⾼い再利⽤ブロックに 専⽤のリンク
43. 設計：おおよそ４ヶ⽉ほど 実装：メインの開発は２ヶ⽉    調整１ヶ⽉・⼊⼒１ヶ⽉
44. - ワイヤー後に必要ブロック精査 - もしくは、必要ブロック決定後に 必要ブロックのみで構成 ワイヤーの段階でブロックも確定
52. 2018 年 8 ⽉時点で ブロックエディタ採⽤きめる
53. https://ja.wordpress.org/gutenberg/ - 標準になる機能⾃体を最⼤限利⽤したい - クライアントの利⽤しやすさ優先 - カスタムフィールドの利⽤を避けたい 開発段階で採⽤を決めた理由
54. それより何よりも・・・
55. カスタムフィールド前提の 設計・構築を避けたい！
56. https://2017.tokyo.wordcamp.org/session/ad-9/
57. https://speakerdeck.com/h2ham/wordcamp-tokyo-2017-h2ham-toro-unit
58. https://speakerdeck.com/h2ham/wordcamp-tokyo-2017-h2ham-toro-unit?slide=31 「外観」と「コンテンツ」の分離
59. プラグインやテーマによる豊富な拡張性 WordPress で構築するメリット
60. カスタムフィールドの功罪
61. ⼊⼒の制限と明確化？ - 決まった⼊⼒で制限をすることで 予期せぬ使われ⽅を防ぐ？ → 表⽰崩れ防⽌にもなる？ - どこに何を⼊⼒するのかの明確化？
62. 結果、制作にかかる負担増加 - 作りきり⼤前提事案に - ⼊⼒内容追加があっても、対応負担増加に - テンプレートの複雑化・制作⼯数増に
63. QIPUP
    CZ
    #SZBO
    #VSLF
    IUUQTXXXqJDLSDPNQIPUPTCSZBOCVSLF photo by Andreas Mortonus https://www.flickr.com/photos/purpleseadonkey/4775066884 ステキなWordPressサイト
64. https://developer.wordpress.org/themes/
65. https://speakerdeck.com/chiilog/wordpresstemafalsezuo-rifang-2019-si-falsebesutopurakuteisu 実案件も含めてテーマ製作者は必読！
66. WordPress 案件って難しぃよ！
67. 設計も制作も難易度増！ - 運⽤も踏まえて仕様を詰める必要がある   - 運⽤時どんな⼊⼒が必要か   - 運⽤に合わせてどんなコンポーネントが必要か - ブロックエディターを理解する   - どんなブロックがあり何ができるのか   - そのブロックでどんなHTMLが出⼒されるか、スタイルがついているか   - コンポーネントを意識した設計とスタイル設計   - 場合によってカスタムブロックの作成⽅法も
68. ブロック間の余⽩は統⼀したい - 次のブロックが何か？で余⽩を変えると 制作⼯数は増えてしまう ここが苦⼿・・・
69. 結局のところ
70. 制作の何がかわったか ？
71. 運⽤も考慮したブロック設計が必須に - ブロックだけでページが構成できるように - 制作ブロック数で⼯数も変わる - カスタムフィールドは最⼩限に - 利⽤するとしてもコンテンツ以外の構成などに
72. https://wptavern.com/gutenberg-one-year-later
73. まとめ
74. "
    ブロックエディタの登場で制作が変化 "
    設計重要！
    "
    運⽤も考慮した設計必須！ "
    カスタムフィールドは基本不要
75. 使いやすい・メンテしやすい WordPressサイトに！
76. この時間は設計の話でした
77. ご清聴ありがとうございました