WordPress 5.4 “アダレイ”

以下は、Matt Mullenweg が書いた WordPress.org 公式ブログの記事「WordPress 5.4 “Adderley”」を訳したものです。

誤字脱字誤訳などありましたらフォーラムまでお知らせください


お待たせしました!ナット・アダレイにちなんで「アダレイ」と名付けられた最新で最高なバージョンの WordPress をダウンロード、または、ダッシュボードから更新いただけます。

Hello, さらなる機能と向上

ページを生き生きと見せる方法が増えました。より簡単な方法で、いまだかつてなく美しく、感じるスピードも向上します。

WordPress 5.4 へようこそ

メジャーリリースのたびにブロックエディターにさらに機能を追加。

最高の画像で、投稿やページをさらに活かす方法。 人気の Web サービスからのリッチな埋め込みメディアにより、さまざまな方法で訪問者を引き寄せ、サイトのファンにします。

ビジョンを実現し、完璧な場所にブロックを配置するより多くの方法 — ある種類のブロックを使うのが初めてでも。さらに効率的なプロセス。

そしてあらゆる場面でより速く。セクションやギャラリーを作成したり、文章をただ入力するだけでも作業レスポンスの向上を体感するでしょう。

2つの新しいブロック。そしてあらゆるブロックの改善。

  • 2つの新ブロック「ソーシャルアイコン」と「(複数追加可能な) ボタン」を使って、早く、簡単に、インタラクティブな機能を追加できます。
  • 色の新しい使い方。ボタンブロックとカバーブロックのグラデーション、リッチテキストブロックで初の色設定へのツールバーアクセス、グループおよびカラムブロックでの色設定。
  • 分かりづらい操作が減りました。バージョン5.4では、マルチメディアの配置や置換のプロセス全体を各ブロックで効率化。ほぼすべてのブロックで同じように動作します。
  • 「メディア」と「テキスト」ブロック内の画像を何か他のもの (例えばパンフレットの画像) にリンクして、そのパンフレットをドキュメントとしてダウンロードできたらいいのに、と思ったことはありませんか ? これができるようになりました。

クリーンな UI、明快なナビゲーション—簡単なタブ移動 !

  • ブロックパンくずリストによる明快なブロックナビゲーション。そして一度いた場所へ簡単に戻れます。
  • キーボード操作が必要な場合のタブ移動とフォーカスを改善。加えて、ほぼすべてのブロックでのタブキーを使ったサイドバーへの移動。
  • エディターの読み込みが14%、入力にかかる時間が51%速くなりました!
  • 「ヒント」はなくなりました。代わりに、必要に応じて「ウェルカムガイド」を表示できます。必要な場合のみに、何度でもです。
  • ブロックの「編集」モードにいるのか「移動」モードにいるのかが一瞬でわかります。視覚的に難しい場合も、スクリーンリーダーがモードを知らせます。

ブロックエディターの最新のツールや機能を使用したければ Gutenberg プラグインをインストールしてください。まだ誰も使っていない新しくエキサイティングな機能を試すことができます。

基本的な権利: プライバシー

5.4 は世界中のさまざまなプライバシー問題の解決を支援します。ユーザーや関係者がコンプライアンス遵守を求めてきたり、チームでのユーザーデータの取り扱いに悩む場合も、より簡単に正しい答えを導きます。

詳細:

  • 個人データのエクスポートに、ユーザーセッション情報と、コミュニティイベントウィジェットからのユーザーの位置データが含まれるようになりました。また、目次も追加しました。
  • プライバシーツールを使用してエクスポートおよび消去のリクエストを処理する際の進捗を確認してください。
  • さらに、プライバシーツール全体に細かな拡張を加えて見た感じをかなりスッキリさせました。

開発者向け情報

メニュー項目へのカスタムフィールド追加をネイティブサポート

新しい2つのアクションにより、メニュー項目にカスタムフィールドを追加できます—プラグインもカスタムウォーカーを書く必要もありません。

メニュー管理画面では、メニューエディターのナビゲーションメニュー項目移動ボタンの直前で wp_nav_menu_item_custom_fields が発火します。

カスタマイザー内では、メニュー項目フォームフィールドテンプレートの最後で wp_nav_menu_item_custom_fields_customize_template が発火します。

コードを確認し、この新しいアクションで置換できるカスタムコードを見つけてください。重複が嫌なら WordPress のバージョンチェックを追加してください。

ブロック: よりシンプルなスタイル、新しい API と埋め込み

  • ブロックのスタイリングが徹底的に簡単になりました。マイナス値のマージンやデフォルトのパディングはなくなりました。必要に応じて、ブロックに自由にスタイルを当てられます。さらにリファクタリングにより、4段階の冗長なラッパー div を取り除きました。
  • プラグインを作成すると、カテゴリーの名前空間ごとにブロックのコレクションを登録できるようになりました。これにより、ブランドの認知度を高めることができます。
  • ブロックバリエーションとグラデーションの2つの新しい API を使用して、ユーザーがさらに多くのことを行えるようにしましょう。
  • 埋め込みでは、ブロックエディターが TikTok をサポートするようになり、CollegeHumor はなくなりました。

開発者が気に入る変更点が WordPress 5.4 にはまだ沢山あります。サイトやテーマ、プラグインなどでこれらの変更をさらに発見する方法を学ぶには、 WordPress 5.4 フィールドガイドを確認してください。

The Squad

(訳注: このセクションの内容は元記事を参照してください)

サポートフォーラムに貢献されているコミュニティボランティアの皆さんに感謝します。彼らは WordPress を初めて使う人であれ、最初のリリースから使っている人であれ、世界中の人々からの質問に答えてくれています。リリースは、その努力のおかげで成功をおさめています。

最後に、WordPress 5.4 に取り組んでくれたコミュニティ翻訳者の皆さんに感謝します。彼らの努力により、リリース時に WordPress は、46言語に完全翻訳され、さらに多くの言語に翻訳されるでしょう。

WordPress のボランティア活動について詳しく知りたい方は、Make WordPressコア開発ブログをチェックしてみてください。

WordPress 5.4 RC5

以下は、David Baumwald が書いた WordPress.org 公式ブログの記事「WordPress 5.4 RC5」を訳したものです。

誤字脱字誤訳などありましたらフォーラムまでお知らせください


WordPress 5.4 の5つ目のリリース候補がご利用いただけるようになりました。

WordPress 5.4 は、2020年3月31日に公開が予定されていますが、そのためには皆様からの助けが必要です。まだ 5.4 を試していないなら今がその時です!

WordPress 5.4 リリース候補は、次の2通りの方法でテストすることができます。

WordPress 5.4 の詳細については、最初のリリース候補の投稿を参照してください。

プラグイン・テーマ開発者の方へ

WordPress 5.4 でプラグインやテーマのテストを行い、readme の Tested up to バージョンを 5.4 に更新してください。テストで優先すべきは互換性です。もしも問題を見つけた場合は、最終リリース前に解決できるよう必ずサポートフォーラムに投稿してください。

WordPress 5.4 フィールドガイドが公開されています!主要変更点の詳細についてはこちらを参照してください。

リリースに協力する

英語以外の言語が話せますか? WordPress の100言語を超す翻訳にご協力ください

バグを見つけた場合は、サポートフォーラムのアルファ・ベータエリアに投稿してください。情報をお待ちしています!再現可能なバグのレポートが書ける方は WordPress Trac に報告してください。こちらでは既知のバグを確認できます。

WordPress 5.4 RC4

以下は、Francesca Marano が書いた WordPress.org 公式ブログの記事「WordPress 5.4 RC4」を訳したものです。

誤字脱字誤訳などありましたらフォーラムまでお知らせください


WordPress 5.4 の4つ目のリリース候補がご利用いただけるようになりました。

WordPress 5.4 は、2020年3月31日に公開が予定されていますが、そのためには皆様からの助けが必要です。まだ 5.4 を試していないなら今がその時です!

WordPress 5.4 リリース候補は、次の2通りの方法でテストすることができます。

WordPress 5.4 の詳細については、最初のリリース候補の投稿を参照してください。

RC4 では、新しい「WordPress について」ページをコミットし、エディターパッケージを更新しています。

プラグイン・テーマ開発者の方へ

WordPress 5.4 でプラグインやテーマのテストを行い、readme の Tested up to バージョンを 5.4 に更新してください。テストで優先すべきは互換性です。もしも問題を見つけた場合は、最終リリース前に解決できるよう必ずサポートフォーラムに投稿してください。

WordPress 5.4 フィールドガイドが公開されています!主要変更点の詳細についてはこちらを参照してください。

リリースに協力する

英語以外の言語が話せますか? WordPress の100言語を超す翻訳にご協力ください

バグを見つけた場合は、サポートフォーラムのアルファ・ベータエリアに投稿してください。情報をお待ちしています!再現可能なバグのレポートが書ける方は WordPress Trac に報告してください。こちらでは既知のバグを確認できます。

WordPress 5.4 RC3

以下は、David Baumwald が書いた WordPress.org 公式ブログの記事「WordPress 5.4 RC3」を訳したものです。

誤字脱字誤訳などありましたらフォーラムまでお知らせください


WordPress 5.4 の3つ目のリリース候補がご利用いただけるようになりました。

WordPress 5.4 は、2020年3月31日に公開が予定されていますが、そのためには皆様からの助けが必要です。まだ 5.4 を試していないなら今がその時です!

WordPress 5.4 リリース候補をテストするには、次の2通りの方法があります。

WordPress 5.4 の詳細については、最初のリリース候補の投稿を参照してください。

RC3 では、新しい「WordPress について」ページの改善と、次のバグとリグレッションについて8つの修正を行いました。

(訳注: 上記はチケット番号とそのタイトルの訳です。実際の修正内容については個々のチケットを参照してください。)

プラグイン・テーマ開発者の方へ

WordPress 5.4 であなたのプラグインやテーマのテストを行い、readme の Tested up to バージョンを 5.4 に更新してください。もしも互換性の問題が見つかった場合は、最終リリース前に問題解決できるよう必ずサポートフォーラムに投稿してください。

主な変更点が詳しく説明されている WordPress 5.4 フィールドガイドが公開されています。

リリースに協力する

英語以外の言語が話せますか? WordPress の100言語を超す翻訳にご協力ください

バグを見つけた場合は、サポートフォーラムのアルファ・ベータエリアに投稿してください。情報をお待ちしています!再現可能なバグのレポートが書ける方は WordPress Trac に報告してください。こちらでは既知のバグを確認できます。

WordPress 5.4 RC2

以下は、Francesca Marano が書いた WordPress.org 公式ブログの記事「WordPress 5.4 RC2」を訳したものです。

誤字脱字誤訳などありましたらフォーラムまでお知らせください


WordPress 5.4 の2つ目のリリース候補がご利用いただけるようになりました。

WordPress 5.4 は、2020年3月31日に公開が予定されていますが、そのためには皆様からの助けが必要です。まだ 5.4 を試していないなら今がその時です!

WordPress 5.4 リリース候補をテストするには、次の2通りの方法があります。

WordPress 5.4 の詳細については、最初のリリース候補の投稿を参照してください。

RC2 では、新しい「WordPress について」ページの改善と、次のバグとリグレッションについて5つの修正を行いました。

  • 49611 – ブロックエディター: WordPress パッケージの更新 WordPress 5.4 RC 2
  • 49318 – 同梱テーマ: Twenty Twenty コンテンツフォントの CSS セレクターの重要度が高すぎる問題
  • 49585 – REST API: disable-custom-gradients のテーマ機能説明の誤字修正
  • 49568 – ブロックエディター: エディターカラーピッカーの視覚的リグレッションの修正
  • 49549 – 同梱テーマ: 同梱テーマにおけるカレンダーウィジェットの CSS 修正

プラグイン・テーマ開発者の方へ

WordPress 5.4 であなたのプラグインやテーマのテストを行い、readme の Tested up to バージョンを 5.4 に更新してください。もしも互換性の問題が見つかった場合は、最終リリース前に問題解決できるよう必ずサポートフォーラムに投稿してください。

主な変更点が詳しく説明されている WordPress 5.4 フィールドガイドが公開されています。

リリースに協力する

英語以外の言語が話せますか? WordPress の100言語を超す翻訳にご協力ください

バグを見つけた場合は、サポートフォーラムのアルファ・ベータエリアに投稿してください。情報をお待ちしています!再現可能なバグのレポートが書ける方は WordPress Trac に報告してください。こちらでは既知のバグを確認できます。

WordPress 5.4 リリース候補

以下は、David Baumwald が書いた WordPress.org 公式ブログの記事「WordPress 5.4 Release Candidate」を訳したものです。

誤字脱字誤訳などありましたらフォーラムまでお知らせください


WordPress 5.4 の最初のリリース候補がご利用いただけるようになりました。

これは WordPress 5.4 公開日へと向かう重要なマイルストーンです。「リリース候補」とは、この新しいバージョンは公開可能なレベルではあるが多くのユーザーや様々なプラグイン・テーマで使うには何らかの見落としがあるかもしれない、といった意味合いのものとなります。WordPress 5.4 は、2020年3月31日に公開が予定されていますが、そのためには皆様からの助けが必要です。まだ 5.4 を試していないなら今がその時です!

WordPress 5.4 リリース候補をテストするには、次の2通りの方法があります。

WordPress 5.4 の詳細

WordPress 5.4 には、開発体験向上のための多くの改良が加えられています。最新情報を知るには Make WordPress Core ブログを購読して、あなたのプロダクトに影響を与える可能性のある変更がないか、デベロッパーノートのタグを注意深く確認してください。

プラグイン・テーマ開発者の方へ

WordPress 5.4 であなたのプラグインやテーマのテストを行い、readme ファイルの Tested up to バージョンを 5.4 に更新してください。もしも互換性の問題が見つかった場合は、最終リリース前に問題解決できるよう必ずサポートフォーラムに投稿してください。

主要変更点のより詳しい情報が載っている WordPress 5.4 フィールドガイドが24時間以内に公開される予定です。

リリースに協力する

英語以外の言語が話せますか? WordPress の100言語を超す翻訳にご協力ください!このリリースは 5.4 リリーススケジュールにおける翻訳語句のハードフリーズ(凍結)ポイントとなります。

バグを見つけた場合は、サポートフォーラムのアルファ・ベータエリアに投稿してください。情報をお待ちしています!再現可能なバグのレポートが書ける方は WordPress Trac に報告してください。こちらでは既知のバグを確認できます。

WordPress 5.4 ベータ 3

以下は、David Baumwald が書いた WordPress.org 公式ブログの記事「WordPress 5.4 Beta 3」を訳したものです。

誤字脱字誤訳などありましたらフォーラムまでお知らせください


WordPress 5.4 ベータ 3 がご利用いただけるようになりました。

このソフトウェアはまだ開発中ですので、実運用中のサイトでの使用はおすすめしません。テストサイトを立ち上げてこの新しいバージョンを試すことを検討してください。

WordPress 5.4 ベータ版をテストする方法は次の二通りです:

  • WordPress Beta Tester プラグインを使う(「最新版ナイトリービルド」または「Beta/RC – Bleeding edge」オプションをプラグインバージョン 2.2.0 以上で選択)。*「Beta/RC – Bleeding edge」オプションを利用するには、サイトを「最新版ナイトリービルド」に更新する必要があります。
  • ベータ版の zip ファイルをダウンロードする。

WordPress 5.4 の正式リリースは、2020年3月31日を予定していますが、そこに至るには皆様の助けが必要です。

先週閉じられた24件のチケットについて、ベータ 2(とベータ 1)をテストしてくださった方々のテストとフィードバックに感謝します。

いくつかのハイライト

開発者向け情報

WordPress 5.4 には、開発体験向上のための多くの改良が加えられています。最新情報を知るには Make WordPress Core ブログを購読して、あなたのプロダクトに影響を与える可能性のある変更がないか、デベロッパーノートのタグを注意深く確認してください。

リリースに協力する

英語以外の言語が話せますか? WordPress の100言語を超す翻訳にご協力ください

バグを見つけた場合は、サポートフォーラムのアルファ・ベータエリアに投稿してください。情報をお待ちしています!再現可能なバグのレポートが書ける方は WordPress Trac に報告してください。こちらでは既知のバグを確認できます。

WordPress 5.4 ベータ 2

以下は、Francesca Marano が書いた WordPress.org 公式ブログの記事「WordPress 5.4 Beta 2」を訳したものです。

誤字脱字誤訳などありましたらフォーラムまでお知らせください


WordPress 5.4 ベータ 2 がご利用いただけるようになりました。

このソフトウェアはまだ開発中ですので、実運用中のサイトでの使用はおすすめしません。テストサイトを立ち上げてこの新しいバージョンを試すことを検討してください。

WordPress 5.4 ベータ 2 をテストする方法は次の二通りです:

WordPress 5.4 の正式リリースは、2020年3月31日を予定していますが、そこに至るには皆様の助けが必要です

ベータ 1 開発版をテストし、フィードバックを提供してくれたすべての貢献者に感謝します。ベータ段階でバグがないかテストを行うことは、リリースの完成度を高める重要な部分であり WordPress に貢献する素晴らしい方法です。

いくつかのハイライト

ベータ 1 以降、27個のバグが修正されました。以下は、ベータ 2 に含まれるいくつかの変更の概要です。

  • ブロックエディター: 幅が割り当てられていないブロックライブラリのカラムは、均等に伸長します。
  • ブロックエディター: カスタムグラデーションピッカーが英語以外の言語でも動作するようになりました。
  • ブロックエディター: 色を選択できない場合、カラーフォーマッターは表示されなくなりました。
  • プライバシー: プライバシーリクエストフォームのフィールドが、モバイルでより一貫性を持つように調整されました。
  • プライバシー: プライバシーポリシーページ編集のヘルプ通知は、管理画面のすべてのページ上部で表示されなくなりました。
  • サイトヘルス: 失敗した REST API テストのエラーコードが正しく表示されるようになりました。

開発者向け情報

WordPress 5.4 には、開発体験向上のための多くの改良が加えられています。最新情報を知るには Make WordPress Core ブログを購読して、あなたのプロダクトに影響を与える可能性のある変更がないか、デベロッパーノートを注意深く確認してください。

リリースに協力する

英語以外の言語が話せますか? WordPress の100言語を超す翻訳にご協力ください

バグを見つけた場合は、サポートフォーラムのアルファ・ベータエリアに投稿してください。情報をお待ちしています!

再現可能なバグのレポートが書ける方は WordPress Trac に報告してください。こちらでは既知のバグを確認できます。

WordPress 5.4 ベータ 1

以下は、Francesca Marano が書いた WordPress.org 公式ブログの記事、「WordPress 5.4 Beta 1」を訳したものです。

誤字脱字誤訳などありましたらフォーラムまでお知らせください


WordPress 5.4 ベータ 1 がご利用いただけるようになりました。

このソフトウェアはまだ開発中ですので、実運用中のサイトでの使用はおすすめしません。テストサイトを立ち上げて新しいバージョンを試すことを検討してください。

WordPress 5.4 ベータ版をテストする方法は次の二通りです:

WordPress 5.4 の正式リリースは、2020年3月31日を予定していますが、そこに至るには皆様の助けが必要です

2020年の主な目標はブロックを使用したフルサイト編集ですが、WordPress の貢献者達はソフトウェアが前進し続けるようプロジェクトの様々な分野に取り組んでいます。

ベータ段階でバグがないかテストを行うことは、リリースの完成度を高める重要な部分であり WordPress に貢献する素晴らしい方法です。テストに際し注意を払うべき大きな変更点と機能を以下に示します。

ブロックエディター: 新機能と改善点

WordPress 5.4 のコアには Gutenberg プラグイン10回分のリリースがマージされます。これは、たくさんのエキサイティングな新機能があることを意味します。次にそのほんの一部を紹介します。

  • 2つの新ブロック: ソーシャルリンクとボタン
  • ボタン、カバー、グループ、カラムのブロックへの色オプション追加
  • ウェルカムガイドモーダル
  • 最新の記事ブロックにアイキャッチ画像を追加するためのツール
  • より簡単なパンくずリストブロックのナビゲーション

いくつかの変更点:

  • モバイルではツールバーが上に留まるため見失うことはありません。
  • ギャラリーブロックでの画像サイズ変更が簡単に。
  • アイキャッチ画像ボックスへの画像のドラッグアンドドロップ
  • いくつかの新しい API
  • REST API リクエストが失敗した際のわかりやすいオフラインエラーメッセージ
  • テーブルブロックのキャプション
  • リッチテキストブロックでテキストの一部だけに色を付けることが可能に。

アクセシビリティの改善点

  • 複数ブロックの選択が簡単に。
  • 画像ブロック内での画像タイトル属性の変更サポート
  • より簡単なタブ移動。これはエディター最大のアクセシビリティの問題でしたが、ブロックのサイドバーでタブ移動ができるようになりました。
  • 編集モードとナビゲーションモードの視覚的切り替え、スクリーンリーダーのアナウンスの有効化

各リリースのすべての機能の詳細についてはリリースの投稿をご覧ください: 6.66.76.86.97.07.17.27.37.4、7.5

パフォーマンス向上への継続的な取り組み

ブロックエディターチームは WordPress 5.3 以降、特にサイズの大きい投稿(〜36,000語、〜1,000ブロック)において、読み込み時間を14%、入力時間を51%短縮することに成功しました。

その他

サイトヘルス

WordPress プロジェクトが世界のウェブサイトの34%を支えている以上、セキュリティにも注視しなくてはなりません。これが貢献者達がサイトヘルスプロジェクトに熱心に取り組んでいる理由となっています。

WordPress 5.4 では、サイトのパフォーマンスやセキュリティに影響を与える可能性のある潜在的な問題について管理者に警告するウィジェットがダッシュ​​ボードに追加されます。行動を促すボタンをクリックすると、サイトヘルス画面に移動して詳細と修正案を確認できます。

アクセシビリティの改善点

WordPress はリリースごとにアクセシビリティの向上に努めていますが、このリリースも例外ではありません。バージョン 5.4 には、次のアクセシビリティ強化が含まれています。

  • メニュー、カスタマイザー、サイトヘルス画面でのフォーカス管理を改善し、キーボードナビゲーションの既知の問題を修正。
  • メディアモーダルのセマンティクス向上のためキーボードナビゲーションを簡易化。
  • 分かりやすいプライバシーポリシーガイド

開発者向け情報

5.4 には、開発者向けの変更も数多く含まれています。

カレンダーウィジェット

HTML 5.1 の仕様では <tfoot> タグは <tbody> タグの後に続く必要があります(カレンダーウィジェットではそのようになっていなかった)。 WordPress 5.4 では valid な HTML を生成するためにナビゲーションリンクを <table> 要素の直後に続く <nav> 要素に移動します。

apply_shortcodes() を do_shortcode() のエイリアスに

do_shortcode() の代わりに apply_shortcodes() を使用してください。 do_shortcode() は非推奨にはなりませんが、新しい関数はより良いセマンティクスを提供します。

favicon の取り扱いを改善

favicon のリクエストをより柔軟に管理できるようになりました。管理者は、カスタマイザーで favicon を選択、または、favicon.ico ファイルをアップロードできます。 フォールバックとして WordPress ロゴが常に読み込まれます。

開発者向けのその他の変更点

  • wp_login_failed でのエラー情報の明確化
  • マルチサイトインストール用の newblog_notify_siteadmin フィルターにサイト ID が追加されました。
  • テーマで要件となる WordPress と PHP バージョンのヘッダーのサポートが追加されました。
  • TikTok の埋め込みサポートが追加されました。

5.4 関連のデベロッパーノートについては、今後数週間の Make WordPress Core ブログをご覧ください。変更点についてより詳細に説明しています。

WordPress 5.4 では、貢献者達の手によってこれまでに255個以上のチケットが修正されました。

リリースに協力する

英語以外の言語が話せますか? WordPress の100言語を超す翻訳にご協力ください

バグを見つけた場合は、サポートフォーラムのアルファ・ベータエリアに投稿してください。情報をお待ちしています!再現可能なバグのレポートが書ける方は WordPress Trac に報告してください。こちらでは既知のバグを確認できます。

State of the Word: Gutenberg ベースのプレゼンスライド

以下は、Ella van Durpe が書いた WordPress.org 公式ブログの記事、「State of the Word: the story of the slides」を @mimitips@nao@nukaga@atachibana で訳したものです。

誤字脱字誤訳などありましたらフォーラムまでお知らせください


WordCamp US 2019 で行われた マット・マレンウェッグ (Matt Mullenweg) 氏による State of the Word (訳注: マット・マレンウェッグが毎年行う基調講演) の中で、プレゼンテーションに使用したスライドが、Slides プラグインを使用した Gutenberg で作られていることが明かされました。WordPress を使ってスライドを作成するのは誰にでも当たり前の選択肢とは言えないので、この記事では、その過程を紹介し、Gutenberg を使ってスライドのレイアウトを作成するためのコツを提供したいと思います。

この記事は エラ (Ella) と タミー (Tammie) の共同執筆によるもので、2人は今年の State of the Word スライドの作成に (MelMarkEnriqueQ 、そしてサポーターとともに) 協力しました。

はじまりの経緯

エラ・ヴァン・ドゥールプ (Ella Van Durpe)JSConf と ReactEurope で登壇者として選出され、プレゼンのスライドを作りたいと考えました。

過去には Reveal.js を使ってスライドを作ったことがあり、HTML/CSS/JavaScript を使って何でも作れる自由さを楽しく感じていました。エラにとってこれらの言語は使いやすく、手慣れていましたし、ネイティブな形式で Web に公開することができるからです。

新たにプレゼンを作るにあたって Reveal.js をまた使おうと思ったものの、HTML を手書きで書きたくはありませんでした。「コードを実際にまったく書くことなく、Web 上にネイティブな形で公開できるコンテンツブロックを視覚的に作る」というのは、まさに Gutenberg が作られた目的でした。

エラは、スライド内にスタイルをハードコードし、追加設定はできないというプロトタイプのプラグインをすばやく作りました。各プレゼンの最後に、Gutenberg ベースのスライドについての簡単なデモを含めると、観客は驚きました。

WordCamp US 2019 が近づいてきたとき、エラはプラグインを State of the Word で使うように勧めました。これまでの登壇で、彼女の観客の反応がとても良かったので、WordPress コミュニティ全体にもこれを共有するのはいい機会だと思ったのです。

Gutenberg スライドの仕組み

技術情報

プラグインはカスタム投稿タイプ “presentation” と新しいブロック “slide” を登録します。slide ブロックは拡張 “Group” ブロックの一種です。投稿のルートにしか配置できませんが、内部にはどのブロックでも置くことができます。結果、投稿のルートにはスライドがあり、スライドにはコンテンツがあります。この構造は HTML セクション要素内にコンテンツを必要とする Reveal.js マークアップと完璧に合致します。

それぞれのスライドには固有のデザインがあるため、テーマのスタイルは無効化され、各スライドからスタイルを設定しています。プラグインで提供されるカスタムプレゼンテーションテンプレートが、フロントエンドにカスタム投稿をレンダリングします。

ここでエラは、スライドをスタイリングするオプションを追加しました。例えば、ドキュメント全体、または個々のスライドレベルで背景やフォントを設定するオプションや、スライドの遷移方法や速度を変更可能な Reveal.js オプションを追加しました。最後にスタイルを上書きするカスタム CSS フィールドを追加しました。

また State of the Word 用にスピーカーノートとスピーカービューも追加しました。

デザインの過程

スライドデザインのインスピレーションは、Blue Note のアルバム・ジャケットから生まれました (2011年の State of the Word スライドのインスピレーションでもありました)。これらのアルバム・ジャケットは、WordPress コアの最近の “About” ページと、新しい Twenty Twenty テーマのスターターコンテンツに影響を与えました。このスタイルは、力強く幾何学的な形状と、明瞭なラインのシンプルなフォームで構成されています。写真と大胆なタイポグラフィは、この意匠の本質です。

プレゼンテーションに最適な組み合わせを選択する前に、さまざまなカラーパレットとフォントの組み合わせが検討されました。

スライドには強力な写真の要素が必要でした。過去の WordCamp は優れた写真のソースなので、適切な写真を見つけるために何年ものフォトギャラリーを掘り下げました。色、フォント、写真を使用し、一連のプレゼンスライドを構築するための基礎を築きました。

Gutenberg スライドを作る上でのコツ

コツその1: カラムと仲良くなろう

正確なレイアウトのスライドが必要な場合は、カラムを活用しましょう。以下の例では、3列レイアウトを使ってスライド内のコンテンツを中央に配置しました。

コツその2: スペーサーブロックの便利さを知る

カラムを最大限に活用するには、スペーサーブロックと組み合わせましょう。以下のスライドでは、スペーサーブロックを使って背景画像の上にコンテンツを配置しました。

コツその3: 大画面でテストする

スライドをプレビューしながら進めていくことが大切です。使用するプロジェクターのサイズとアスペクト比に合わせて設計し、時々プレゼンテーションモード上で視覚的に確認してください。

コツその4: 動画を確認

新機能を紹介するにはよくできたデモ動画が欠かせません。ヨエン・アスムッセンが効果的なデモ動画についての記事を書いています。

学んだこと

アートディレクションを適用した構成をもっと簡単に作れるようにできればいいのに!

メル・チョイス-ドゥワン (Mel Choyce-Dwan)

Gutenberg の進化にともなった大きな改善点のひとつとして、「アートディレクション」が簡単になったということが挙げられます。しかし、今年の間に加えられた改善をもってしても、Gutenberg でいくつかのレイアウトを作成することは予想以上にトリッキーでした。より複雑な構成については、SVG に依存しました。将来、最終的にはこういったハックの必要性は解消され、わくわくする可能性の新しい世界がすべての人に開かれるでしょう。

ブラウザーを通して、例えば (多くの人が使うツールである) Keynote や Powerpoint を使用する場合よりも、このプレゼンテーションにおける最大の学びを得ることができました。多くの場合、フルスクリーンで表示すると、エディターで作成したものとは表示が異なることが分かりました。ブラウザーウィンドウ全体を使う代わりに、固定サイズを使用するようにプラグインをアップデートすることで、これを和らげることができました。

まとめ

もし State of the Word をチェックしたい方がいましたら、ぜひ録画を見て記事を読んでください。

Slides プラグインはプラグインリポジトリから利用できるだけでなく、コードを GitHub から入手できますし、翻訳の手助けをすることもできます。