Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
フルサイトエディティング (フルサイト編集)って何?
masa_ishii
November 17, 2020
Technology
0
530
フルサイトエディティング (フルサイト編集)って何?
masa_ishii
November 17, 2020
Tweet
Share
More Decks by masa_ishii
See All by masa_ishii
Tokyo WordPress Meetup オンライン忘年会 LT
ishimasar
0
34
三鷹・吉祥寺 WordPress Meetup 事前説明
ishimasar
0
40
2020年 半年間の活動から考える私なりの「Code for X」
ishimasar
0
580
Other Decks in Technology
See All in Technology
JAWS-UG re:Habilitaion 報告 / JAWS-UG OITA rehabilitation
hiranofumio
0
130
リファインメントは楽しいかね?
kitamu_mu
1
440
FoodTechにおける商流・金流・物流の進化/Evolution of Commercial, Financial, and Logistics in FoodTech
dskst
0
400
JJUG2022_spring_Keycloak (Red Hat Single Sign-on)
tinoue
0
200
UWBを使ってみた
norioikedo
0
420
データエンジニアと作るデータ文化
yuki_saito
4
1.6k
ラブグラフ紹介資料 〜プロダクト解体新書〜 / Lovegraph Product Deck
lovegraph
0
260
雑な攻撃からELBを守る一工夫 +おまけ / Know-how to protect servers from miscellaneous attacks
hiroga
0
510
モブに早く慣れたい人のためのガイド / A Guide to Getting Started Quickly with Mob Programming
cybozuinsideout
PRO
2
1.8k
The Fractal Geometry of Software Design
vladikk
1
1k
JUnit5.7, 5.8の新機能紹介 #jjug_ccc #jjug_ccc_b / junit 5.7, 5.8 new features
kyonmm
PRO
2
420
Custom AppをIP制限ありのままで審査に通す方法
yusuga
0
680
Featured
See All Featured
Happy Clients
brianwarren
89
5.6k
Practical Orchestrator
shlominoach
178
8.6k
For a Future-Friendly Web
brad_frost
166
7.4k
Rebuilding a faster, lazier Slack
samanthasiow
62
7.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
12k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
The Invisible Customer
myddelton
110
11k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Web development in the modern age
philhawksworth
197
9.3k
The Art of Programming - Codeland 2020
erikaheidi
32
11k
Stop Working from a Prison Cell
hatefulcrawdad
261
17k
Transcript
フルサイトエディティング (フルサイト編集)って何? 三鷹・吉祥寺 WordPress Meetup vol.2 これからのWordPressを一緒に学ぼう会 その1
こんにちは! 三鷹・吉祥寺 WordPress Meetupです! ・Tokyo WordPress Meetup内の1カテゴリーです ・今回が開催 第2回目です (第1回は2020年5月)
・これからもいろいろな独自なテーマを扱うMeetupができたらとアレ コレ考えています (第3回も計画中) ・いつかオフラインもやりたい 2
ご当地わぷー作りました 3 三鷹・吉祥寺わぷー です。これからよろ しくだぷー♪
本日のお品書き 1. WordPressの開発ロードマップを見てみよう 2. 「Gutenberg(グーテンベルク)」ってそもそも何? 3. 開発ってどこでやってるの? 4. 今日の本丸・フルサイト編集(FSE/フルサイトエディティング) について
5. 実際にハンズオンでFSEに触ってみよう 6. ディスカッション・情報交換会、懇親へ 4
1. WordPressの 開発ロードマップを見てみよう https://ja.wordpress.org/about/roadmap/ 5
1. WordPressの開発ロードマップを見てみよう • WordPressは継続して開発アップデートがなされています ・ロードマップ → おもにGutenberg プロジェクトが進行中 https://ja.wordpress.org/about/roadmap/ •
「WORDPRESS.ORG 日本語」サイトに随時更新されるいろいろなドキュメントがあがってま す。それらを読むだけでも WordPressのいろんな知識が身につくと思います! ・ニュース https://ja.wordpress.org/news/ ・理念 https://ja.wordpress.org/philosophy/ ※これらは英語版のニュースをボランティアが日本語版に翻訳したものです 6
2. 「Gutenberg(グーテンベルク)」 ってそもそも何? https://ja.wordpress.org/gutenberg/ 7
2. 「Gutenberg(グーテンベルク)」ってそもそも何? • WordPress 5.0でリリースされた、新しいエディター(投稿画面)の開発プロジェクトのことで、 「Goutenberg(グーテンベルク)」プロジェクトと呼ばれています • このWordPress 5.0 開発コードネーム"Bebo"
は2018年12月にリリース。ブロックエディタ (Goutenberg)がリリースされてからもう 2年が経つんですね ※コードネームには毎回著名なジャズのアーティスト名がつけられています • “必要であれば Classic Editorプラグインを使用して以前のエディタに切り替えることができま す。今後の開発は Gutenberg プラグインで続けられます ” ※Classic Editor(クラシックエディター)は 2021年の12月31日でサポートが終了予定 8
3. 開発ってどこでやってるの? https://github.com/WordPress/gutenberg 9
3. 開発ってどこでやってるの? Q. Goutenbergってどこで開発されてて、どういう風に開発は進んでいるの? A. 「GitHub」というソフトウェア開発のプラットフォーム上で公開(オープンソース)されながら開発が 進められている https://github.com/WordPress/gutenberg ・開発プラットフォームとしての Gutenberg
https://ja.wordpress.org/team/handbook/block-editor/developers/platform/ 10
4. フルサイト編集(FSE/ フルサイトエディティング)について https://ja.wordpress.org/team/handbook/block-editor/developers/the mes/block-based-themes/ 11
4. フルサイト編集(FSE/フルサイトエディティング)について • 完全にブロックで構成されたテンプレートを持つ WordPress テーマの機能のこと。「page」 「post」など異なる投稿タイプのコンテンツに加え、サイトのすべてのエリア、ヘッダー、フッ ター、サイドバー等をブロックエディターで編集できるようになります • 「ブロックベーステーマ」は、「フルサイト編集」
(Full Site Editing)、または「ブロックコンテントエ リア」(Block Content Area) とも呼ばれ、これらは まだプラグインの実験レベルの機能 です → 2021年3月リリース予定のWordPress 5.7 以降に実装される予定とのこと 12
4. フルサイト編集(FSE/フルサイトエディティング)について • 「フルサイト編集」テーマのいいところは何か? Webサイト全体のデザインやちょっとした構造変更 が、コードを書けない人でもできるように なっていく点。WordPressを使うすべてのユーザーにとっての使いやすさ、変更しやすさなど の体験が向上する、はず! • 「フルサイト編集」テーマになることで大変なこと、デメリットは何か?
既存のテーマ開発とまた異なる開発手法であったり、ファイル構造になったりするので対応し ていくのがけっこう大変になると考えられる。これまでの制作に加えてまた新たなキャッチアッ プが必要に 13
4. フルサイト編集(FSE/フルサイトエディティング)について • フルサイト編集(FSE/フルサイトエディティング )についてある程度、詳しいドキュメント一覧 ・fullsiteediting.com https://fullsiteediting.com/ ・BOLDGRID https://www.boldgrid.com/support/wordpress-tutorials/full-site-editing/ ・impress.org
https://impress.org/wordpress-full-site-editing-gutenberg-7-7/#:~:text=Go%20to%20the% 20Gutenberg%20menu,the%20Parisienne%20or%20Audacious%20theme. 14
5. 実際にハンズオンでFSEに触ってみよう 15
5. 実際にハンズオンでFSEに触ってみよう 1. 【推奨】 最初に、Local(by Flywheel)でPCローカル環境を作成して、そこに WordPressのテスト環境を 作成するやり方をオススメします (別にローカル環境を立てても OK)
導入参考記事: https://316-jp.com/localbyflywheel-install 2. インストール後「CREATE NEW SITE」→「Setup WordPress」でローカル設定を進める 動作も立ち上げもサクサク軽い!セッティング楽チン! 16 •フルサイト編集を触ってみるための手順1 ※テスト環境を作成してお試しください
5. 実際にハンズオンでFSEに触ってみよう 1. WordPress Beta Testerプラグインをインストールして、最新の「開発ベータ版 (ナイトリービル ド)」に更新してください。少し先の WordPressバージョンが試用できますが、 PCローカルもしく
は確実な実験環境にのみ試し、 くれぐれも稼働中のサイトなどに用いないでください。 2. Gutenbergプラグインをインストール。新しいフルサイト編集機能をテストするために必要で す。 3. フルサイト編集対応テーマ (開発実験中)をGitHubリポジトリからダウンロードして、フォルダに 入れて、テーマを選択してください。「 twenty twentyone-blocks」という名前のテーマで確実に 試せます。ほか6つ対応テーマあり(2020/11月時点)。 17 •フルサイト編集を触ってみるための手順2 ※テスト環境を作成してお試しください
5. 実際にハンズオンでFSEに触ってみよう 18 •フルサイト編集機能(FSE)、こんな感じの画面です ※あくまで開発中
6. ディスカッション・情報交換会、懇親へ 19
ご清聴ありがとう ございました。 つづきはMeetupのなかで!! 20