Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

0740fdb36684d030eefadb676a3fd633?s=47 masa_ishii
November 17, 2020

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

0740fdb36684d030eefadb676a3fd633?s=128

masa_ishii

November 17, 2020
Tweet

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