WordCamp Japan 2021 参加レポート
さて。まもなく今日の昼12時から『WordCamp Japan 2021』がスタートします。2021年6月20日～26日の７日間に渡り、オンラインにて開催されます。
昨年開催された WordCamp Ogijima では、グラフィックレポート班として参加しましたが、今年は登壇することとなりました。
最終日（6月26日）の14時から『カッコいい！ブロック組み合わせのレシピ』というテーマで27分間セッションしますので、お楽しみに。
WordCamp Japan 2021とは
WordCamp Japan 2021 は、事前申し込みをすることで、さまざまなイベントに積極的に参加ができます。
イベント参加に関しては、当日のしおり ページにくわしく記載されています。
イベントのTwitterハッシュタグは『 #wcjpn21 』。wcjpn21のハッシュタグを追いかけると、イベントの様子がよくわかりますね。
📌 セッションデイズ
6月20日（Day1）と6月26日（Day2）の２日間、YouTube上でセッションが配信されます。
どんなセッションが何時開催されるのかは、セッション一覧 ページにまとまっています。また、時間軸で確認できる タイムテーブル ページもあります。
セッションを視聴するだけなら事前申し込みは不要で、WordCamp Japan 2021 のトップページから気軽に視聴ができます。
本日Day１は、Springトラック と Summerトラック の２本に分けてYouTube配信されます。
Springトラック では、開会式や基調講演を始め、座談会など時間が長めのセッションが開催されるようです（おそらく、こちらはライブ配信？）。
Summerトラック では、プレゼンターの知見をギュッと集めたショートセッションが多数開催されます。興味のあるトピックを学ぶよい機会になりそうです。
📌コントリビューターデイズ
6月21日～25日 (Day 2～6)、平日に開催される、コントリビューターデイズは、zoomを用いたユーザー参加型イベントです。現在、Connpass上で参加者を募集しています。
ハンズオンやトークゲーム大会など、聞いて知識を学ぶだけではなく、直接参加して、WordPressの世界に参加できます。
わたしは、6月23日・6月25日の次のイベントに参加予定です。
◎ WordCamp Japan 2021 フルサイト編集のテストをしながら使い方を体験してみよう - connpass
◎WordCamp Japan 2021 100%GPLを図解しよう - connpass
📌 事前申し込みなら、イベントに積極参加できる
チケット（無料）を事前に申し込んでいると、セッション以外の催しにも参加できます。
※これを書いている現在（開催30分前）でも、申し込みはまだ可能なもよう。
イベント参加者に開放されている Slackを用いたテキストコミュニケーションでは、前日から参加者の方が自己紹介されたり、雑談したりとにぎわっています。また、期間中のお知らせは、Slackを通じて迅速におこなわれています。
oVice（オヴィス）を用いたオンライン交流会では、知見のある方に相談したり、ジョブボードでお仕事情報を交換したり、スポンサーさんのブースがあったりするようです。
Shifterさん、Vektorさんなど、スポンサーさんたちが今回のイベントに合わせてお得な企画を準備してくださっているようです。
わたしも、合間を見て oViceにつなごうと思いますので、アイコンを見かけたかたは、気軽にお声がけくださいね。
－－－－－－－－－－－－－－－－－－－－－－－－－－－
セッションデイ（Day1）感想
Day1でリアルタイムに視聴したのは、次のセッションです。セッションの感想は、文章がまとまり次第、このページ追記しつつまとめていきます。
※現状、メモ書きなので、乱文すみません💦文面も、徐々にまとまっていくと思われます。
📌開会式＆基調講演（12:00～13:00）
お昼12時より、しめやかに開会式が始まりました。
自由と規律を重んじる（と私が勝手に感じてる） WordCampらしく『実行委員長のあいさつ』、『行動規範』の話から始まりました。
だたセッションを聞くだけではく、みんなで「集える場」を作るために、スタッフの方々が工夫されたこと、開催されるまでの流れが語られたあいさつは、とてもステキだと思いました。
私も、いろんなイベントに参加したり、登壇したりしますが、オンラインになって一番苦労しているのが「双方向」のやりとりです。
今回のイベントでは、oVice（オヴィス）を用いたオンライン交流会 による、コミュニケーションのための場所が、会期中７日間の間に毎日11時30分から22時まで解放されています。
この間、ずっとスタッフのどなたかが会場を管理されていることを思うと、これは本当にすごいことだなと感じました。
今回、わたしはスピーカー参加のため、事前にでoVice（オヴィス）の交流会をプレ体験しました。
めちゃめちゃ人見知りなので、「自分からアイコンを近づけて、話を始める」ということにハードルを感じてしまって、プレ参加ではあまり交流できませんでしたが、運営の方々の思いを聞いて、あらためて勇気を出して積極的に参加してみようと思いました。
続いての基調講演のオープニングムービーでは、スタッフの方々からのコメントムービーが放映されました。
お久しぶりの方々のお顔を拝見できて楽しく、一気にイベント感が盛り上がる感じを受けました。
みなさんがWordPressに向き合っている姿勢・意見・感想を、フラッシュに切り替わるコメントで最初にお聞きすることで、成熟したユーザーコミュニティであるという、WordPressコミュニティの空気感がぐっと伝わりました。
WordPressは、自由にカスタマイズできる反面、刻々と変化するツールのため、しっかりした情報を手にしないと、構築の方向性を間違ってしまいがちです。
でも、コミュニティにいらっしゃる方々の知見を聞いたり、それを踏まえて自身でツールを研究することで、自分もツールも成長しながら利用しているんだなという安心感を感じました。
イベントへの気持ちが盛り上がり、これから始まる７日間が楽しみになりました。
📌今日からウェブ担当になったあなたへ、ウェブ解析その前に！（13:30～13:57）
https://japan.wordcamp.org/2021/session/summer02/
📌Story of Full Site Editing – Learn about a brand new feature that’s bringing WordPress into the future＜“フルサイト編集”の物語 - WordPressを未来へと導く新機能をご紹介＞（14:00～14:27）https://japan.wordcamp.org/2021/session/summer03/
次世代のWordPressに搭載予定の フルサイト編集（Full Site Editing）についてのお話でした。
英語でのセッションでしたが、日本語字幕があったので、なんとかついていく事ができました。
以下、セッションのポイントのメモ書きです。字幕を見ながら、自分なりに意訳してる部分もあり、受け取り方が間違ってる所もあるかも。
※また後日、きちんと清書したいです💦
自分で用語を調べる中で出てきた、参考ページへのリンクも書き加えています。
－－－－－－－－－－－－－－
◎フルサイト編集（Fll Site Editing）とは
フルサイト編集（Fll Site Editing）を略して FSE 。ユーザーの自由度を高めるために導入される。
フルサイト編集によって、コンテンツの編集だけでなく、ページのあらゆる箇所をブロックエディターを通してカスタマイズが可能になる。オン／オフ（編集機能のロック）も考慮されている。
WordPress 5.8から5.9にかけて、段階的に実装予定。
7月20日にリリース予定の WordPress 5.8 で、FSEが導入されるのは「Extender」にとって有用な機能の範囲にとどまる予定。
まず第一段階は、プラグイン・テーマの制作者（Extender）にFSEを提供し、FSEを用いたテーマに更新されたものを一般ユーザーに利用してもらう。一般ユーザーは、5.8の段階ではFSEの恩恵は直接受けない。
5.8では、一般のユーザーが目にする表向きはほとんど変わらず、裏で動いているツールが大きく変わることで、フルサイト編集の基礎を提供する。
12月にバージョンアップが予定されている WordPress 5.9では、一般ユーザーへが利用する部分にも変化があるかも。
このムービーが撮影された4月から現在までに、WordPress5.8 のリリース予定がだいぶ固まってきている。WordPress5.8 をチェックしています – ねんでぶろぐ の記事で紹介の「新しく追加されたブロック」などで、FSEについて触れられている
フルサイト編集は、さまざまな機能の集合体の総称で、7つのマイルストーンに分かれて開発されている。
Milestone 1 Infrastructure & UI
Milestone 2 Browsing
FSEの基礎となる機能についての実装。FSEによって変更された複数のテンプレートをまとめて保存（保存しない）機能や、FSEを使うためのユーザーインタフェース、編集する箇所を切り替えるブラウジング機能などがここに含まれる。
Milestone 3 Styling
ブロック、テーマデフォルト、グローバルの3つに分かれて、スタイルの編集をおこなう。まず、5.8では、グローバルスタイルのNon-UIについて取り組む予定。これは、テーマ制作者がカスタマイズする部分。
Milestone 4 Theme Blocks
テーマを編集するためのブロックが追加される。20個以上のカテゴリーがある。うまくいけば、5.8で一部が実装予定。
Milestone 5 Query Blocks
テーマ制作者向けのツール。投稿リストのクエリー結果（データベースの照合結果）を表示するためのブロック。
Milestone 6 Navigation Block
メニュー（ナビゲーション）を構造とデザインの両方から編集できるブロック。ブロックエディタ上で、ナビゲーションの位置変更やスタイルの調整ができる。
Milestone 7 Gradual Adoption
“フルサイト編集”の段階的採用。いきなり切り替えるのではなく、FSEを段階的に活用できるように方法を準備。
◎テンプレート編集モードのデモンストレーション
セッションの終わりに、Gutenberg 10.5.2 を用いたバージョンで「テンプレート編集モード（ Template Editing Mode）」のデモンストレーションが行われた。
・投稿編集から、テンプレート編集モードへ移行
・サイトタイトル、記事のタイトルの編集やスタイル変更
・アイキャッチの編集や移動
・ナビゲーションブロックの位置変更や、フォントなどのスタイル変更
・保存時に、複数のテンプレートに対して更新を行ったり、更新するテンプレートを選択
◎テーマへの影響は？（Q&Aより）
長い目で見ればテーマ開発は簡単で簡素になるはず。テーマ制作者はデザインツールを使うことで、コーディングや基本的な作業よりも、デザインと見栄えに専念できるようになる。
テーマを正しく作成することが極めて重要で、構築の道筋に大きくかかわる。5.8から段階的に導入されるFSEをテーマ制作者自身が研究し導入していくことで模索し、5.9への準備を進めてください。
WordPress + Slackの FAQ for FSE Outreach Program に参加して、FSEの今後の展開を知ることも重要
WordPress + Slack
https://make.wordpress.org/chat/
FAQ for FSE Outreach Program – Make WordPress Test
https://make.wordpress.org/test/handbook/full-site-editing-outreach-experiment/faq-for-fse-outreach-experiment/
The FSE Outreach Program is Officially Starting! – Make WordPress Core
https://make.wordpress.org/core/2020/12/11/the-fse-outreach-program-is-officially-starting/
Slack への参加方法 | WordPress.org 日本語
https://ja.wordpress.org/support/article/slack/
◎その他、参考URLなど
Video: Full-Site Editing Overview with Anne McCarthy - Gutenberg Times
https://gutenbergtimes.com/video-full-site-editing-overview-with-anne-mccarthy/
Site Editing Milestones · Issue #24551 · WordPress/gutenberg · GitHub
https://github.com/WordPress/gutenberg/issues/24551
Roadmap | WordPress.org
https://wordpress.org/about/roadmap/
Learn WordPress
https://learn.wordpress.org/
－－－－－－－－－－－－－－
📌変わりゆくブロックエディターにどうすれば対応していけるのか×ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。（15:00～15:45）
https://japan.wordcamp.org/2021/session/spring03/
WordPressのテーマやプラグインの開発をされているプロフェッショナルな方々が語る、“ブロックエディター”対応にまつわるお話でした。
前半は、ブロック対応テーマ SWELL・Arkhe を開発されている了さんから、「変わりゆくブロックエディターにどうすれば対応していけるのか」というお話がありました。
『ブロックエディター対応を始めてしまえば、対応し続けるしかない。まずは、簡単なものからはじめていこう。』ということで、ブロックエディターに対応したテーマを作るための情報収集の方法について紹介されました。
スライドで紹介されていたURLを、次にまとめておこうと思います。
※こちらも、後日清書したいな。。
－－－－－－－－－－－－－－
◎基本の学び方
何はともあれ、公式ハンドブックを確認すること。英語版のほうが最新だけれど、いまは日本語版もだいぶ翻訳も進んでいるので、英語に苦手意識がある人は、まずは日本語版から。
・ブロックエディターハンドブック — WordPress.org
https://ja.wordpress.org/team/handbook/block-editor/
・Block Editor Handbook | WordPress Developer Resources
https://developer.wordpress.org/block-editor/
公式ハンドブック内にあるチュートリアルでは、ブロック開発の手順をいちから順に解説してくれているので、まずはこれをそのまま素直にやってみるといい。
・チュートリアル – WordPress.org
https://ja.wordpress.org/team/handbook/block-editor/handbook/tutorials/
・Tutorials | Block Editor Handbook | WordPress Developer Resources
https://developer.wordpress.org/block-editor/handbook/tutorials/
公式ドキュメントがむずかしい場合は、検索してみて、非公式だけれども、初心者向けにかみ砕いて書かれた解説記事を読むのもよい。
けれど、情報として古い場合もあるので、最終的には公式ドキュメントでしっかり確認すること。
◎開発環境の構築
ブロックエディターの開発では、Nodeを用いたWordPress開発のための環境構築が必要になるが、チュートリアルで躓いた場合は、まず、ビルドなしでカスタムブロックを作ってみることから始めるのも、心理的なハードルが下がってよいかも。
「ブロック開発入門」ワークショップ vol.2
https://www.notion.so/vol-2-c0931ac31bd44a2bb312163e054dba84
ブロックエディターワークショップ vol.2 | Gutenloves
https://youtu.be/9lz1Vhjnu7Q?t=5182
とはいえ、最終的には開発環境が必要になるので、npm（Node Package Manager）やWebpackの基本的な勉強をしてから、チュートリアルに進む方がよい。
◎チュートリアルの次は
ひととおりチュートリアルを終えて、実践段階にはいると、検索してもなかなか欲しい情報が見つからなくなる。それを自力で乗り越えないとならないが、テーマ開発者は、Gutenberg本体ソースコードを直接見て、動きを読み解いたりしている。
例えば、gutenberg/packages/block-library/src/ に、WordPressに実装されているブロックのソースコードがあり、自分が作ろうとしているブロックに近いもの選んで、その処理を研究する。
テーマを作った後も、WordPressのバージョンアップへの対応が必要となるので、つねに最新情報をキャッチアップしておく。
Field Guide – Make WordPress CoreDevelopment Cycle
https://make.wordpress.org/core/5-8/
※次期バージョンの開発サイクル紹介。「Dev Notes」と「Field Guide」を見る
Versions in WordPress
https://developer.wordpress.org/block-editor/contributors/versions-in-wordpress/
※次期バージョンに搭載される、Gutenbergのバージョンリスト
Gutenberg Releases
https://github.com/WordPress/gutenberg/releases
※Gutenbergのリリース情報
後半は、wordpress コアコントリビューターをされてらっしゃるToro_Unitさんから、ブロックエディターとカスタムフィールドのお話がありました。
以下、お話を聞いていてビビッときたところをメモ書きしています。
◎クラッシックエディター時代のコンテンツ
クラッシックエディターの時代は、凝ったレイアウトのコンテンツを書くためにはHTMLを触らなくてはならず、それを解消するためにパーツ毎にカスタムフィールドを準備して、レイアウトをがちがちに固めてコンテンツを生成していた。
この方法では、カスタムフィールド側に本文データがあるため、データーベース上のコンテンツ（the_content）内は空になってしまい、WordPressの内部検索で記事がヒットしなかったり、テーマを違うものに変えるとコンテンツが表示されなかったりしていた。
◎ブロックエディターになってからのカスタムフィールド
ブロックエディターが登場して自由にコンテンツをレイアウトできるようになり、カスタムフィールドを使う機会は減っている。
しかし、「データ構造としてのカスタムフィールドは、今後も残る」。コンテンツのメタデータ（付帯情報）としてのカスタムフィードは必要になる。
現状のカスタムフィールドは、コンテンツの下に配置されていて、ブロックエディターの部分とつながっておらず、あまり使い勝手のよい状態ではない。
◎メタブロックを作る
公式チュートリアルに「カスタムフィールドをブロックに用いる」ためのチュートリアルがある。
Create Meta Block | WordPress Developer Resources
https://developer.wordpress.org/block-editor/how-to-guides/metabox/meta-block-3-add/
メタブロックの作成 – WordPress.org
https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/metabox/meta-block-3-add/
Toro_Unitさんが作られた、「カスタムフィールドをブロックに用いる」サンプルコードも次に公開されている。
GitHub - torounit/post-meta-block-example
https://github.com/torounit/post-meta-block-example
この方法では、ブロックとカスタムフィールドをシームレスに扱えるけれど、まだまだ、実装時に解決するべき課題がある。
ブロックエディターになって、クラッシックエディターよりもコンテンツ表現が自由になったけれど、カスタムフィールドのように、まだまだ課題は残っている。
最新の知識をえるためにも、公式のソースやドキュメンテーションをよく読み込む必要がある。
－－－－－－－－－－－－－－
あっという間に、初日が終了しましたね。私は、今日はセッションのみの参加になりましたが、多くの学びがありました。
今週土曜日（6月26日）まで、 WordCamp Japan 2021 は続きます。いろいろ参加して、楽しみましょう！
🐗