Atlas を搭載したヘッドレスでさらに先へ

公開: 2023-04-09

ヘッドレスソリューションに真剣に取り組む時が来ました。実際の企業や代理店は、開発者が任意のフロントエンドスタックを使用できる柔軟性を提供し、コンテンツクリエーターが好みのパブリッシングインターフェイスを使用できるようにするヘッドレス Web エクスペリエンスを作成しています。

このセッションでは、WP Engine のプロダクトディレクター Jason Konen が、WP Engine のヘッドレス WordPress ソリューションである Atlas で実現した進歩を要約し、2023 年に追求する進歩をこっそりと紹介します。

ビデオ: Atlas を搭載したヘッドレスでさらに先へ

セッションのスライド:

Go-beyond-with-Headless-powered-by-Atlasダウンロード

転写:

ジェイソン・コーネン: こんにちは、ジェイソン・コーネンです。私はここ WP Engine で Atlas のプロダクトディレクターを務めています。本日は、Atlas を利用した Headless の先へ進むことについてお話したいと思います。つまり、私たちが今実際に見ているのは、市場の大きな変化です。これはおそらくスマートフォンの登場以来最大の変化であり、現在 64% の企業がヘッドレスアプローチを使用しており、90% が今後 12 か月以内にそれを行う予定です。それは膨大な数です。また、ここ数年でヘッドレスの WordPress コミュニティが成長していることもわかっています。私たちはいくつかのパートナーと緊密に連携し、このニーズを満たすために非常に多くのヘッドレス WordPress サイトを展開しています。

私たちが見ていることの 1 つは、ヘッドレスが開発者に本当に力を与えていることです。そのため、最新の CMS には、本当に素晴らしいことがいくつかあります。しかし、私たちが見つけたのは、それが実際にパブリッシャーの力を奪っているということです. つまり、これらのヘッドレス CMS は最初からヘッドレス専用に構築されており、非常に興味深いものであり、開発者にとっては非常に役立ちますが、パブリッシャーが失うものもあります。テーマやページレイアウト、SEO ツールなどを失います。しかし、WordPress は実際にパブリッシャーに力を与えており、常にそうしています。コアから、エコシステム内のすべてのプラグイン、すべてのテーマとコミュニティまで。

パブリッシャーがメッセージ、テキスト、フォーマット、A/B テスト、SEO ツールを制御し、テーマを変更し、重い開発を必要とせずにすべての作業を実行できるようにします。しかし、ヘッドレスはそれを取り除き、その力を奪うと言いました。しかし、ヘッドレス WordPress は、開発者と彼らがやりたいことだけでなく、パブリッシャーと彼らがやろうとしていることに力を与え、すべての人にそれをもたらすと信じています。したがって、「その仕事に最適なツールは何か」と考えると、開発者は、スケーリング、コードの過剰使用、最新の技術の使用、業界と共に成長できる最新の技術スタックを使用したいと考えるでしょう。一方、パブリッシャーは、多くの変更を行うことなく、20 年間愛用してきた CMS ツールを使用できるようにしたいと考えています。

ここで Atlas の出番です。Atlas プラットフォームは、パブリッシャーと開発者の両方を喜ばせるように設計されています。クラス最高の WordPress ホスティングがこれのベースですが、WordPress の上に最新の Web アプリケーションを構築できるように、自動スケーリングとヒーリングノードホスティングを重ねました。事前構成されたエッジキャッシング、CI/CD ツール、比類のないパフォーマンスとセキュリティはすべて、成長しているコミュニティで成長しているエコシステムの上に構築されています。 WP GraphQL と、その新機能であるスマートキャッシュ、および今後の製品であるアトラス検索。ヘッドレス WordPress サイトを構築するためのヘッドレスフレームワークである Faust.JS、昨年 WP Engine ファミリーに導入した Advanced Custom Fields、そして Atlas Content Modeler 機能を ACF に直接導入するために懸命に取り組んできました。

ブループリントとその先、そしてあなたがすでに知っていて愛している世界クラスのサポートを忘れないでください. ここで、パフォーマンスについて少しお話したいと思います。最近、スーパーボウル中にいくつかの広告を掲載した顧客がいました。そして、このようなイベントで得られるトラフィックの種類をテストすることさえできません. このチャートを見ると、6 番目、8 番目、9 番目に 3 つの小さなスパイクがあります。これらは負荷テストであり、スーパーボウル中に予想されるすべてのトラフィックに対して「このサイトは持ちこたえることができるか」を確認するためのテストでした。そして、チャートの後半にある 2 つの巨大なスパイクが表示されます。これは、スーパーボウルで流れた 2 つの広告に対応しています。予想していたトラフィックの 10 倍。そして、これは信じられないほど成功しました。

わずか数分で 1,000 万件のリクエストが発生し、突然 10 倍のスパイクが発生した場合でも、前、中、後に一貫したパフォーマンスが得られました。 DDoS 攻撃はエッジで緩和され、あらゆる種類のアプリケーションパフォーマンスの問題が防止されました。フロントエンド全体の 99% は、最初のバイトまで 151 ミリ秒、レンダリングに 700 ミリ秒でキャッシュされ、その間、スーパーボウル中に 2,700 万件のリクエストが処理されました。そのため、トラフィックのピーク時にサイトにアクセスした場合、そのような負荷がかかっていることに気付かなかったでしょう。これは、ヘッドレス WordPress サイトがもたらすパフォーマンスの一種です。そして、それを Atlas プラットフォームに組み込みました。

この広告の背後にある顧客および代理店と協力して、サイトのパフォーマンスと最適化が確実に行われるように努めています。そして、それは私たちがお客様と一緒に行っていることであり、サイトのパフォーマンス、速度、安全性を確保するために、すべてのベストプラクティスを使用していることを確認することです. そのため、Atlas チームで行っている重要なことの 1 つは、顧客や代理店パートナーの意見に耳を傾け、提携することです。私たちは耳を傾け、学び、解放します。 2022 年に Atlas 向けにリリースしたさまざまな機能をご紹介します。

私が理解したいのは、この分野にどれだけの投資をしているかということです。ヘッドレス WordPress は、最新のサイトが成功するために必要なパフォーマンスと開発者エクスペリエンスに、世界クラスの CMS の最高のものを本当にもたらすと確信しています。そして、私たちが本当に何を構築する必要があるか、あなたが成功するのを助けるために本当に必要なものについてあなたと協力し続けるにつれて、あなたはここでますます多くの投資を見ることになるでしょう. 2 週間ごとではないにしても、少なくとも 1 か月に 1 回はリリースを続けています。そして、あなたのフィードバックは私たちにとって非常に重要です.

このリストから取り上げて、もう少し詳しく説明したいのは、Faust.js です。これが WordPress のヘッドレスフレームワークです。これを 2021 年に構築し、公開しました。そして、皆さんからたくさんのフィードバックをいただき、とてもうれしかったです。そして、開発者がスケーリングに必要な方法でスケーリングしていなかったため、そのフィードバックを受け取り、再構築しました。 G-qty が提供するクエリ言語を使用したところ、いくつかの魔法のようなことはできましたが、私たちが望んでいた方法でスケーリングすることはできませんでした。そこで、業界標準である Apollo に置き換えました。これにより、フレームワークの柔軟性が大幅に向上しました。

また、完全なテンプレート階層サポートもリリースしました。したがって、あなたが真の WordPress 開発者であり、WordPress 階層を何年も扱ってきた場合、これは非常になじみ深いものになるでしょう。何が起こっているのかを正確に理解するでしょう。また、必要に応じてこれを拡張できるように、プラグインアーキテクチャも追加しました。認証、WordPress からのコンテンツプレビュー、マーケターがサイトを構築する際に期待すること。これは本当に大きなリリースで、コミュニティから寄せられたすべてのフィードバックに本当に刺激を受けました。そして、私たちはそれを続けています。今日使用できる次の大きな機能は、Gutenberg Block のサポートです。

だからこれは新しい。そして本質的に、私たちがやろうとしていることは、パブリッシャーが WordPress で使い慣れているブロックが、大量の余分な作業をせずにフロントエンドやノードアプリケーションにアクセスできることを開発者が保証できるようにすることです。パブリッシャーが期待するエクスペリエンスと、簡単で管理しやすい開発エクスペリエンスを提供できます。これについては、DE{CODE} で後でセッションを行います。皆様にも是非ご参加いただき、学びを深めていただければ幸いです。この重要な機能の反復を継続するため、ここでフィードバックをお待ちしております。

WordPress をヘッドレスに移行したときになくなったもう 1 つのことは、ツールバーです。多くのパブリッシャーは、Web ページにアクセスして [コンテンツの編集] をクリックし、エディターに直接ドロップして、その場でコンテンツを変更できることに慣れています。まあ、それはあなたがヘッドレスになったときに消えました. そのため、ファウストでそれを追加しています。そのため、既存の WordPress ツールバーと同じように、コンテンツの編集、接続のデバッグなどを行うことができます。また、従来の WordPress には存在しない、ツールバーに追加できる非常に興味深い機能もいくつかあると思います。サーバーのパフォーマンス、デプロイのステータスなど、この特定の機能について私たちが持っているアイデアのほんの一部です。

もう 1 つファウストについてお話ししたいのは、ファウストは Apollo と React と Next.js の上に構築されているということです。これはそれを拡張し、最新の JavaScript 開発者にとって WordPress での作業をより簡単にします。使用する必要はありません。 Atlas のフレームワークに依存しません。しかし、それを行う最善の方法についての推奨事項を探している場合は、Faust をお勧めします。ここ DE{CODE} で本日リリースされるもう 1 つの重要な機能は、Atlas Search です。昨年の DE{CODE} の Atlas Search を覚えているかもしれません。そこでは、多くのユーザーが試用できるオープンベータ版がありました。そして、多くの皆さんがそうしてくれました。この 1 年間に寄せられた多くのフィードバックにより、これは今日リリースできる完全な機能になりました。

これは独自の API を持たない GraphQL 初のものであり、完全に拡張可能です。 ACF とカスタム投稿タイプのサポート、ファセットブラウジング、加重およびカスタム結果、ステミング、あいまいさ、除外などの完全な機能セットがあり、何よりも検索アクションや帯域幅に制限がありません。これをシンプルで使いやすいものにしたいと考えています。興味がある場合は、Atlas Search の詳細情報を確認してください。

また、ここ数四半期にリリースされた、ご存じないかもしれないその他の重要なリリース: プレビュー環境。そのため、投票リクエストをプレビューしたい場合は、環境を自動的にセットアップできます。これにより、テストと QA が非常に簡単になります。誰がどのブランチを見ているのか、どこで、どのような環境を見ているのかを把握するすべての作業を行う必要はありません。ポーリングリクエストに基づいて、これらの一時的な環境の 1 つを自動的に作成することができます。

また、再構築された Webhook もあります。したがって、これらを使用して、必要なビジネスロジックに基づいてビルドをトリガーできます。それも今日のライブです。それに伴い、即時ロールバックも可能です。そのため、何かが機能しない場合は、サイトの以前のバージョンに再デプロイできます。また、リアルタイムのビルドログとビルドをキャンセルする機能もあります。したがって、何か問題が発生した場合は、キャンセルしてエラーを確認し、変更を加えてサイトを再構築できます。そして、多くの人が求めているもう 1 つの機能は、従来の WordPress と同様のパスワード保護です。顧客に見て承認してもらいたいプレビュー環境があるかもしれません。それにパスワードを付けて、それをライブにして使用できるようにします。

そして、これからのことをもう少しお話したいと思います。来年の Atlas には、多くの素晴らしいことが予定されています。しかし、現実に近いものについてお話ししたいと思います。 1 つ目は、高度な監視と分析です。より多くの情報、より多くの分析、私のサイトで何が起こっているのか、というお問い合わせをよくいただきます。トラフィックはどのように見えますか? アクセスログはどのように表示されますか? ですから、あなたがそれを求めなくてもわかるように、私たちはそれをあなたに明らかにしたいと思っています.

それを使用して、キャンペーン、コード、サイトを最適化できます。また、GraphQL の監視とアラートを追加する予定です。 GraphQL クエリでリアルタイムに何が起こっているのでしょうか? パフォーマンスを最適化できるようにします。先ほどスーパーボウルの広告について触れましたが、最適なエクスペリエンスを実現するには、さまざまなクエリを大幅に調整する必要がありました。では、ビルドを行っているときに自分で最適化できるように、すべての情報を指先で提供できるとしたらどうでしょうか? それがここでの目標です。

また、CI/CD エクスペリエンスを改善したいと考えています。そのため、現在、自動デプロイなどを行っていますが、存在しないデプロイパイプラインがあります。たとえば、バックエンドと WordPress の両方、および Node のフロントエンドに変更を加える場合、適切なエクスペリエンスを得るために、それらの両方を同時にデプロイするにはどうすればよいでしょうか? そのため、ビルドされたパイプラインをプロジェクト用にビルドおよび管理し、デプロイを WordPress と Node.js で管理できるようにする方法に取り組んでいます。よく耳にするもう 1 つの重要な項目は、ヘッドレスのパーソナライゼーションとローカリゼーションです。これらの Web サイトがますますターゲットを絞るようになっているため、サイトをパーソナライズおよびローカライズするために必要なすべてのツールを確実に入手できるようにしたいと考えています。そのため、私たちはそれがどのように実現するかについてのアイデアに取り組んでいます。

ヘッドレスのパーソナライゼーションまたはローカライゼーションと言うとき、それは多くの異なる人々にとって多くのことを意味する可能性があるため、私たちは本当にあなたの助けを求めています. ですから、この分野であなたが何をしているのかを理解していただくために、あなたからのご連絡をお待ちしております. また、ヘッドレスブロックライブラリも構築しています。これは、先ほどお話しした React Gutenberg Bridge プロジェクトの拡張です。後で DE{CODE} イベントのセッションに参加していただければ幸いです。しかし、WordPress で最も一般的に使用されるブロックのライブラリを提供したいと考えています。これにより、それらのブロックはすべてセットアップされ、すぐに使用できるように配線されているため、その作業を行う必要はありません。

また、これらをパターンとして使用して、必要に応じて独自のカスタムブロックを配線することもできます。これに対して私が抱く長期的な希望は、開発者が再利用可能なコンポーネントのライブラリを構築し始め、おそらくそれらをコミュニティと共有できるようになることです。これにより、私たち全員がプロジェクトを有利に開始できるようになります。そしてファウストといえば、私たちがここに持っている継続的な投資を呼びかけたいと思います. 前述したように、Faust は Apollo、React、および Next.js を使用しています。そして、これらのコンポーネントをサポートする機能をプラットフォームに追加して、コンポーネントをより高速かつ安全に実行し、Atlas での開発を非常に簡単にする予定です。

では、とても興味深いトピックについてお話したいと思います。この質問は、数週間前に行われた円卓会議で尋ねられました。質問は、まさに、なぜ誰もがヘッドレスをそんなに推進しているのかということだったと思います。それで、私が話したいのは、ヘッドレスはすべてのプロジェクトにとって正しいことですか? 高いレベルではそうではないと思います。作業に適したツールを選択する必要があります。また、最新の Web スタック上で非常に高速でパフォーマンスの高いものを構築し、非常に安全にしたい場合、ヘッドレスは非常に優れています。複雑なプロジェクトがある場合に優れています。パフォーマンスが最も重要な場合に優れています。

ヘッドレスで小さなパンフレットサイトを構築することをお勧めしますか? トラフィックの多いサイトで過去にパフォーマンスが低下しており、パフォーマンスを改善する必要がある場合や、実験を検討している場合を除き、必ずしもそうとは限りません。それらは一般に小さいため、実験するのに最適なサイトです。しかし、大規模なメディアサイトや e コマースサイトを運営している場合は、ヘッドレスをお勧めします。これらのサイトを非常に構成可能な方法で構築し、他のシステムからデータを取り込み、オムニチャネルエクスペリエンスを構築し、高速で高性能であること。

パブリッシャーが WordPress を気に入っていることを知っているので、ヘッドレス WordPress をお勧めします。コンテンツの管理と開発に最適な CMS です。では、非常に柔軟で信じられないほどパフォーマンスの高いサイトを作成しながら、パブリッシャーと開発者を満足させるような方法でそれを行いたいと思わないでしょうか。

WordPress を優れたヘッドレス CMS にするという私たちの使命を継続するため、本日はお時間をいただき、継続的なフィードバックとパートナーシップに感謝したいと思います。今日の DE{CODE} イベントでは、他にも多くのヘッドレスセッションがあります。これらを見て、質問することをお勧めします。私たちはいつもあなたと仕事をしたり、あなたのサイトを開発する上で重要だと思うことを聞いたりすることに本当に興奮しています. ありがとう。