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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide