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

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