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

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

masa_ishii
November 17, 2020

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

masa_ishii

November 17, 2020
Tweet

More Decks by masa_ishii

Other Decks in Technology

Transcript

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

    View Slide

  2. こんにちは!
    三鷹・吉祥寺 WordPress Meetupです!
    ・Tokyo WordPress Meetup内の1カテゴリーです
    ・今回が開催 第2回目です (第1回は2020年5月)
    ・これからもいろいろな独自なテーマを扱うMeetupができたらとアレ
    コレ考えています (第3回も計画中)
    ・いつかオフラインもやりたい
    2

    View Slide

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

    View Slide

  4. 本日のお品書き
    1. WordPressの開発ロードマップを見てみよう
    2. 「Gutenberg(グーテンベルク)」ってそもそも何?
    3. 開発ってどこでやってるの?
    4. 今日の本丸・フルサイト編集(FSE/フルサイトエディティング)
    について
    5. 実際にハンズオンでFSEに触ってみよう
    6. ディスカッション・情報交換会、懇親へ
    4

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  8. 2. 「Gutenberg(グーテンベルク)」ってそもそも何?
    ● WordPress 5.0でリリースされた、新しいエディター(投稿画面)の開発プロジェクトのことで、
    「Goutenberg(グーテンベルク)」プロジェクトと呼ばれています
    ● このWordPress 5.0 開発コードネーム"Bebo" は2018年12月にリリース。ブロックエディタ
    (Goutenberg)がリリースされてからもう 2年が経つんですね
    ※コードネームには毎回著名なジャズのアーティスト名がつけられています
    ● “必要であれば Classic Editorプラグインを使用して以前のエディタに切り替えることができま
    す。今後の開発は Gutenberg プラグインで続けられます ”
    ※Classic Editor(クラシックエディター)は 2021年の12月31日でサポートが終了予定
    8

    View Slide

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

    View Slide

  10. 3. 開発ってどこでやってるの?
    Q. Goutenbergってどこで開発されてて、どういう風に開発は進んでいるの?
    A. 「GitHub」というソフトウェア開発のプラットフォーム上で公開(オープンソース)されながら開発が
    進められている
    https://github.com/WordPress/gutenberg
    ・開発プラットフォームとしての Gutenberg
    https://ja.wordpress.org/team/handbook/block-editor/developers/platform/
    10

    View Slide

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

    View Slide

  12. 4. フルサイト編集(FSE/フルサイトエディティング)について
    ● 完全にブロックで構成されたテンプレートを持つ WordPress テーマの機能のこと。「page」
    「post」など異なる投稿タイプのコンテンツに加え、サイトのすべてのエリア、ヘッダー、フッ
    ター、サイドバー等をブロックエディターで編集できるようになります
    ● 「ブロックベーステーマ」は、「フルサイト編集」 (Full Site Editing)、または「ブロックコンテントエ
    リア」(Block Content Area) とも呼ばれ、これらは まだプラグインの実験レベルの機能 です →
    2021年3月リリース予定のWordPress 5.7 以降に実装される予定とのこと
    12

    View Slide

  13. 4. フルサイト編集(FSE/フルサイトエディティング)について
    ● 「フルサイト編集」テーマのいいところは何か?
    Webサイト全体のデザインやちょっとした構造変更 が、コードを書けない人でもできるように
    なっていく点。WordPressを使うすべてのユーザーにとっての使いやすさ、変更しやすさなど
    の体験が向上する、はず!
    ● 「フルサイト編集」テーマになることで大変なこと、デメリットは何か?
    既存のテーマ開発とまた異なる開発手法であったり、ファイル構造になったりするので対応し
    ていくのがけっこう大変になると考えられる。これまでの制作に加えてまた新たなキャッチアッ
    プが必要に
    13

    View Slide

  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

    View Slide

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

    View Slide

  16. 5. 実際にハンズオンでFSEに触ってみよう
    1. 【推奨】
    最初に、Local(by Flywheel)でPCローカル環境を作成して、そこに WordPressのテスト環境を
    作成するやり方をオススメします (別にローカル環境を立てても OK)
    導入参考記事: https://316-jp.com/localbyflywheel-install
    2. インストール後「CREATE NEW SITE」→「Setup WordPress」でローカル設定を進める
    動作も立ち上げもサクサク軽い!セッティング楽チン!
    16
    ●フルサイト編集を触ってみるための手順1 ※テスト環境を作成してお試しください

    View Slide

  17. 5. 実際にハンズオンでFSEに触ってみよう
    1. WordPress Beta Testerプラグインをインストールして、最新の「開発ベータ版 (ナイトリービル
    ド)」に更新してください。少し先の WordPressバージョンが試用できますが、 PCローカルもしく
    は確実な実験環境にのみ試し、 くれぐれも稼働中のサイトなどに用いないでください。
    2. Gutenbergプラグインをインストール。新しいフルサイト編集機能をテストするために必要で
    す。
    3. フルサイト編集対応テーマ (開発実験中)をGitHubリポジトリからダウンロードして、フォルダに
    入れて、テーマを選択してください。「 twenty twentyone-blocks」という名前のテーマで確実に
    試せます。ほか6つ対応テーマあり(2020/11月時点)。
    17
    ●フルサイト編集を触ってみるための手順2 ※テスト環境を作成してお試しください

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide