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

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