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

WordCamp Osaka 2019 h2ham (´ ºムº `)

B46b3aff345df8060a82312564e21184?s=47 h2ham
December 07, 2019
4k

WordCamp Osaka 2019 h2ham (´ ºムº `)

B46b3aff345df8060a82312564e21184?s=128

h2ham

December 07, 2019
Tweet

Transcript

  1. None
  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. (´ ºムº `)

  12. None
  13. None
  14. None
  15. https://www.meetup.com/ja-JP/topics/wordpress/jp/

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

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

  18. None
  19. None
  20. None
  21. ぜひ⼀度北海道のイベントにも参加を!

  22. 本題

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

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

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

  26. サイト構成画⾯例

  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. ブロックエディタ抜粋

  34. None
  35. https://wordpress.org/plugins/advanced-posts-blocks/

  36. None
  37. None
  38. None
  39. None
  40. None
  41. 再利⽤ブロック

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

  43. 設計:おおよそ4ヶ⽉ほど 実装:メインの開発は2ヶ⽉    調整1ヶ⽉・⼊⼒1ヶ⽉

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

  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  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. QIPUPCZ#SZBO#VSLFIUUQTXXXqJDLSDPNQIPUPTCSZBOCVSLF 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. ご清聴ありがとうございました