フルサイトエディティング (フルサイト編集)って何？

フルサイトエディティング (フルサイト編集)って何？三鷹・吉祥寺 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

フルサイトエディティング (フルサイト編集)って何？

フルサイトエディティング (フルサイト編集)って何？

masa_ishii

More Decks by masa_ishii

Other Decks in Technology

Featured

Transcript