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