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

Transcript

1. フルサイトエディティング (フルサイト編集)って何？ 三鷹・吉祥寺 WordPress Meetup vol.2 これからのWordPressを一緒に学ぼう会 その1

2. こんにちは！ 三鷹・吉祥寺 WordPress Meetupです！ ・Tokyo WordPress Meetup内の1カテゴリーです ・今回が開催 第2回目です (第1回は2020年5月)

   ・これからもいろいろな独自なテーマを扱うMeetupができたらとアレ コレ考えています (第3回も計画中) ・いつかオフラインもやりたい 2

3. ご当地わぷー作りました 3 三鷹・吉祥寺わぷー です。これからよろ しくだぷー♪

4. 本日のお品書き 1. WordPressの開発ロードマップを見てみよう 2. 「Gutenberg（グーテンベルク）」ってそもそも何？ 3. 開発ってどこでやってるの？ 4. 今日の本丸・フルサイト編集(FSE/フルサイトエディティング) について

   5. 実際にハンズオンでFSEに触ってみよう 6. ディスカッション・情報交換会、懇親へ 4

5. 1. WordPressの 開発ロードマップを見てみよう https://ja.wordpress.org/about/roadmap/ 5

6. 1. WordPressの開発ロードマップを見てみよう • WordPressは継続して開発アップデートがなされています ・ロードマップ → おもにGutenberg プロジェクトが進行中 https://ja.wordpress.org/about/roadmap/ •

   「WORDPRESS.ORG 日本語」サイトに随時更新されるいろいろなドキュメントがあがってま す。それらを読むだけでも WordPressのいろんな知識が身につくと思います！ ・ニュース https://ja.wordpress.org/news/ ・理念 https://ja.wordpress.org/philosophy/ ※これらは英語版のニュースをボランティアが日本語版に翻訳したものです 6

7. 2. 「Gutenberg（グーテンベルク）」 ってそもそも何？ https://ja.wordpress.org/gutenberg/ 7

8. 2. 「Gutenberg（グーテンベルク）」ってそもそも何？ • WordPress 5.0でリリースされた、新しいエディター（投稿画面）の開発プロジェクトのことで、 「Goutenberg（グーテンベルク）」プロジェクトと呼ばれています • このWordPress 5.0 開発コードネーム"Bebo"

   は2018年12月にリリース。ブロックエディタ （Goutenberg）がリリースされてからもう 2年が経つんですね ※コードネームには毎回著名なジャズのアーティスト名がつけられています • “必要であれば Classic Editorプラグインを使用して以前のエディタに切り替えることができま す。今後の開発は Gutenberg プラグインで続けられます ” ※Classic Editor（クラシックエディター）は 2021年の12月31日でサポートが終了予定 8

9. 3. 開発ってどこでやってるの？ https://github.com/WordPress/gutenberg 9

10. 3. 開発ってどこでやってるの？ Q. Goutenbergってどこで開発されてて、どういう風に開発は進んでいるの？ A. 「GitHub」というソフトウェア開発のプラットフォーム上で公開（オープンソース）されながら開発が 進められている https://github.com/WordPress/gutenberg ・開発プラットフォームとしての Gutenberg

    https://ja.wordpress.org/team/handbook/block-editor/developers/platform/ 10

11. 4. フルサイト編集(FSE/ フルサイトエディティング)について https://ja.wordpress.org/team/handbook/block-editor/developers/the mes/block-based-themes/ 11

12. 4. フルサイト編集(FSE/フルサイトエディティング)について • 完全にブロックで構成されたテンプレートを持つ WordPress テーマの機能のこと。「page」 「post」など異なる投稿タイプのコンテンツに加え、サイトのすべてのエリア、ヘッダー、フッ ター、サイドバー等をブロックエディターで編集できるようになります • 「ブロックベーステーマ」は、「フルサイト編集」

    (Full Site Editing)、または「ブロックコンテントエ リア」(Block Content Area) とも呼ばれ、これらは まだプラグインの実験レベルの機能 です → 2021年3月リリース予定のWordPress 5.7 以降に実装される予定とのこと 12

13. 4. フルサイト編集(FSE/フルサイトエディティング)について • 「フルサイト編集」テーマのいいところは何か？ Webサイト全体のデザインやちょっとした構造変更 が、コードを書けない人でもできるように なっていく点。WordPressを使うすべてのユーザーにとっての使いやすさ、変更しやすさなど の体験が向上する、はず！ • 「フルサイト編集」テーマになることで大変なこと、デメリットは何か？

    既存のテーマ開発とまた異なる開発手法であったり、ファイル構造になったりするので対応し ていくのがけっこう大変になると考えられる。これまでの制作に加えてまた新たなキャッチアッ プが必要に 13

14. 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

15. 5. 実際にハンズオンでFSEに触ってみよう 15

16. 5. 実際にハンズオンでFSEに触ってみよう 1. 【推奨】 最初に、Local(by Flywheel)でPCローカル環境を作成して、そこに WordPressのテスト環境を 作成するやり方をオススメします (別にローカル環境を立てても OK)

    導入参考記事： https://316-jp.com/localbyflywheel-install 2. インストール後「CREATE NEW SITE」→「Setup WordPress」でローカル設定を進める 動作も立ち上げもサクサク軽い！セッティング楽チン！ 16 •フルサイト編集を触ってみるための手順1　※テスト環境を作成してお試しください

17. 5. 実際にハンズオンでFSEに触ってみよう 1. WordPress Beta Testerプラグインをインストールして、最新の「開発ベータ版 (ナイトリービル ド)」に更新してください。少し先の WordPressバージョンが試用できますが、 PCローカルもしく

    は確実な実験環境にのみ試し、 くれぐれも稼働中のサイトなどに用いないでください。 2. Gutenbergプラグインをインストール。新しいフルサイト編集機能をテストするために必要で す。 3. フルサイト編集対応テーマ (開発実験中)をGitHubリポジトリからダウンロードして、フォルダに 入れて、テーマを選択してください。「 twenty twentyone-blocks」という名前のテーマで確実に 試せます。ほか6つ対応テーマあり(2020/11月時点)。 17 •フルサイト編集を触ってみるための手順2　※テスト環境を作成してお試しください

18. 5. 実際にハンズオンでFSEに触ってみよう 18 •フルサイト編集機能(FSE)、こんな感じの画面です　※あくまで開発中

19. 6. ディスカッション・情報交換会、懇親へ 19

20. ご清聴ありがとう ございました。 つづきはMeetupのなかで！！ 20