Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WordCamp Osaka 2019 h2ham (´ ºムº `)
Search
h2ham
December 07, 2019
7
4.8k
WordCamp Osaka 2019 h2ham (´ ºムº `)
h2ham
December 07, 2019
Tweet
Share
More Decks by h2ham
See All by h2ham
フロントエンドカンファレンス北海道2024 『小規模サイトでも使えるVite 〜HTMLコーディングをよりスマートに〜』長谷川広武(ハム)
h2ham
1
3.6k
WordCamp Kansai 2024 ハム『ブロックエディタでWebサイトの制作がどう変わったのか?実装事例から見る現在のWordPressの設計と構築』
h2ham
1
690
WordPress案件を請け負う制作会社からみる Shifter の魅力
h2ham
0
1.3k
WordCamp Tokyo 2017 h2ham toro_unit
h2ham
1
7.1k
デザイナーが効率よくテーマ作成を進めるには? デザインから WordPress のテーマ作成のワークフローを見直す
h2ham
2
6.5k
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.2k
The Cult of Friendly URLs
andyhume
78
6.4k
Documentation Writing (for coders)
carmenintech
71
4.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Agile that works and the tools we love
rasmusluckow
329
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
33k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Making Projects Easy
brettharned
116
6.2k
Building an army of robots
kneath
305
45k
Unsuck your backbone
ammeep
671
58k
Transcript
None
運⽤も最⼤限考慮! コーポレートサイトで ブロックエディタフル活⽤の事例紹介 ⻑⾕川 広武 株式会社HAMWORKS
スライドは共有するため、 メモは不要です
WordPress案件で ブロックエディタ利⽤での 設計・構築 をしていますか? 質問
2018年12⽉6⽇
https://wordpress.org/news/2018/12/bebo/
https://ja.wordpress.org/gutenberg/ ブロックエディタの登場により WordPressの設計が変わった!
皆さんの設計・構築も ブロックエディタの登場により 変わりましたか?
⾃⼰紹介
ハム テクニカルディレクター フロントエンドエンジニア SaCSS 主催 ⻑⾕川 広武 は せ
が わ ひろむ
(´ ºムº `)
None
None
None
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/ ほぼ毎回ブロックエディタ関連
None
None
None
ぜひ⼀度北海道のイベントにも参加を!
本題
https://ja.wordpress.org/gutenberg/ ブロックエディタの登場により WordPressの設計が変わったんです
会社の事例1つ⽬として 初ブロックエディタ対応プロジェクト リリース 2019年2⽉
https://www.bacardijapan.jp/ 投稿コンテンツはすべて ブロックエディタ⼊⼒対応
サイト構成画⾯例
None
None
None
None
None
None
ブロックエディタ抜粋
None
https://wordpress.org/plugins/advanced-posts-blocks/
None
None
None
None
None
再利⽤ブロック
変更頻度が⾼い再利⽤ブロックに 専⽤のリンク
設計:おおよそ4ヶ⽉ほど 実装:メインの開発は2ヶ⽉ 調整1ヶ⽉・⼊⼒1ヶ⽉
- ワイヤー後に必要ブロック精査 - もしくは、必要ブロック決定後に 必要ブロックのみで構成 ワイヤーの段階でブロックも確定
None
None
None
None
None
None
None
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#VSLFIUUQTXXXqJDLSDPNQIPUPTCSZBOCVSLF photo 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サイトに!
この時間は設計の話でした
ご清聴ありがとうございました