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
Kansai WordPress Meetup@Kyoto Lightning talk
Search
Yoriyasu Nishimura
January 18, 2020
Technology
0
440
Kansai WordPress Meetup@Kyoto Lightning talk
ブロックエディターに挑戦!
Yoriyasu Nishimura
January 18, 2020
Tweet
Share
More Decks by Yoriyasu Nishimura
See All by Yoriyasu Nishimura
失敗談から 運用しやすいサイトの作り方を 考えてみた
yori3
0
2.4k
Other Decks in Technology
See All in Technology
o11y入門_外形監視を利用したWebアプリケーションへの最適なモニタリング_TechBrew
k5k
2
100
疲弊しない!AWSセキュリティ統制の考え方 #devio_osakaday1
masahirokawahara
6
5.8k
クラウドサインにおけるプロダクトマネージャーの役割と開発プロセス / 20240410_cloudsign-PdM
bengo4com
1
670
Databricks におけるデータエンジニアリング
databricksjapan
0
360
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
0
100
"好き"との生活/Regularly update profile with GitHub Actions
judeeeee
0
140
LLM とプロンプトエンジニアリング/チューターをビルドする / LLM and Prompt Engineering and Building Tutors
ks91
PRO
0
200
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs (QCon London)
inesmontani
PRO
0
140
コンパウンドスタートアップのためのスケーラブルでセキュアなInfrastructure as Codeパイプラインを考える / Scalable and Secure Infrastructure as Code Pipeline for a Compound Startup
yuyatakeyama
3
1.8k
エンタープライズ環境下での Active Directory の運用 TIPS
tamaiyutaro
1
1.4k
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
640
**強い**エンジニアのなり方 - フィードバックサイクルを勝ち取る / grow one day each day
soudai
59
17k
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
103
6.6k
Side Projects
sachag
451
41k
A designer walks into a library…
pauljervisheath
199
23k
The Power of CSS Pseudo Elements
geoffreycrofte
58
5k
Imperfection Machines: The Place of Print at Facebook
scottboms
258
12k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
Building Flexible Design Systems
yeseniaperezcruz
318
37k
We Have a Design System, Now What?
morganepeng
42
6.7k
Making Projects Easy
brettharned
106
5.5k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
A Philosophy of Restraint
colly
195
16k
Transcript
మ͍͏ͪʹଧͯʂʁ ϒϩοΫΤσ Ολʔʹઓʂ 2020年1月18日 西村 依泰
ࣗݾհ •Facebook:yoriyasu.nishimura •Twitter:@yori3_otim2 •GitHub:github.com/yori3 Webデザイナー(自称) マークアップエンジニア(仕事) 西村 依泰(yori3)
ࠓճ͢͜ͱ •WordPressのブロックエディターを使って やったこと •ブロックエディター使ってみた感想
ࠓճ͞ͳ͍͜ͱ •ブロックエディターの使いかた。 •ソースコードの解説
8PSE$BNQ͕ऴΘͬͯ •WordCamp楽しかった。
8PSE$BNQ͕ऴΘͬͯ •WordCamp楽しかった。 •ブロックエディター関連のセッション人気。
8PSE$BNQ͕ऴΘͬͯ •WordCamp楽しかった。 •ブロックエディター関連のセッション人気。 •ブロックエディターあんまり触ってないな。
8PSE$BNQ͕ऴΘͬͯ •WordCamp楽しかった。 •ブロックエディター関連のセッション人気。 •ブロックエディターあんまり触ってないな。 よし、やろう
ͬͨ͜ͱ •自分のサイトをブロックエディター化 •固定ページはhtml直打ち →固定ページもブロックエディターで作る •管理画面そのまま →フロントとエディターのスタイルを合わせる
ελΠϧΛઃఆ •言語ごとのシンタックスハイライトを出したかったの で、ソースコードブロックのスタイルを設定できるよ うにした。 •ソースコードのシンタックスハイライト →prism.jsを使用 •prism.jsのルール(クラス名にlanguage-〇〇を含む) に従ってクラスがつくように、スタイルを作成
ελΠϧΛઃఆ
ελΠϧΛઃఆ •割と簡単に設定できた。 •選択するだけで設定できると楽。
ݻఆϖʔδϒϩοΫΤσ ΟλʔͰ࡞Δ •基本は既存のブロックを使う。 •カスタムブロックもやってみたかったので、調べ ながらdl,dt,ddタグを作る。
ݻఆϖʔδϒϩοΫΤσ ΟλʔͰ࡞Δ •高度な設定でクラス名をつけられるので、割と自 由度は高い。 •カスタムブロックはReact.js使うので、ちょっと 難易度高め。
ϑϩϯτͱΤσΟλʔͷελΠϧΛ߹ΘͤΔ フロント エディター
ϑϩϯτͱΤσΟλʔͷελΠϧΛ߹ΘͤΔ フロント エディター
ϑϩϯτͱΤσΟλʔͷελΠϧΛ߹ΘͤΔ •見た目が揃ってると、編集していてわかりやすい。 •エディターで生成される htmlが複雑なので 合わせるのが結構つらい
None
ͬͯΈͨײ •ブロックエディターでも結構思い通りできる。 (要CSS知識) •よく使うスタイルは、スタイルを選択できるよう にしておいた方が良さそう。 •フロントとエディターの見た目を一緒にするのは 結構大変(やってると便利)