WordPress Playground の概要 (ユースケースと開発責任者からのコメントを含む)

公開: 2023-07-19

WordPress Playground は多くの問題の解決策となる可能性があります。 長い間、複雑なホスティングやデモのセットアップをせずに、テーマやプラグインなどの WordPress 製品を紹介する確実な方法はありませんでした。 また、エラーの再現はサポート チームにとって地雷原になることがよくあります。 WordPress Playground は、これらすべての問題を解決できるプラットフォームのブラウザ内バージョンです。

👉 この投稿では、WordPress Playground プロジェクトを取り上げ、その歴史について話し、その使用方法を示し、このエキサイティングなツールが次にどこへ向かうのかについて説明します。

WordPress プレイグラウンドとは

WordPress は起動するだけでも多くの可動部分を必要とします。 サーバーは明らかに必要ですが、その PHP アーキテクチャにはデータベースも必要です。 ただし、新しい WordPress インストールを起動するために、これらの一般的な実装が必要ない場合はどうなるでしょうか? ここでWordPress Playgroundが登場します。

WordPress Playground のメイン画面。

これは、サーバー、PHP、データベースを必要としない、完全にブラウザー内で動作するプラットフォームです。 代わりに、他のいくつかの一般的なテクノロジーを使用して、標準の必要なコンポーネントをシミュレートまたは置き換えます。

  • このツールは、WebAssembly バイナリを使用して PHP インタープリターを構築します。
  • MySQL の代わりに、SQLite を実行する WordPress プラグインがあります。
  • Web サーバーは、Service Worker として JavaScript の賢明な実装を使用します。

そのため、通常の依存関係なしで (少なくとも予想される方法で) ブラウザーで実行できる新しいバージョンの WordPress を使用できます。

WordPress Playground の簡単なツアー

WordPress Playground Web サイトにアクセスすると、サービスによって WordPress のバージョンが準備されます。これには数秒しかかかりません。 技術的にはこれで終わりですが、さらに多くの可能性が待っています (後で説明します)。

メイン画面には、ログインしているかのように WordPress Web サイトのフロントエンドが表示されます。これは、バックエンドにアクセスできる典型的なツールバーがあることを意味します。 ただし、その前に、シミュレートされたブラウザーのツールバーにあるいくつかの追加機能を見つけてください。

  • 特定の PHP または WordPress バージョンを選択するためのメニュー。
  • 将来使用するために Playground インスタンスをインポートおよびエクスポートするオプション。

PHP と WordPress のバージョンを選択するときに、一時ストレージまたは永続ストレージを選択することもできます。 後者は Cookie を使用して WordPress インスタンスを保持します。

WordPress Playground のカスタマイズ オプション。

私が提案したように、WordPress Playground インスタンスをカスタマイズする他の方法もあります。これについては後ほど説明します。 それまでの間、インストールの残りの部分は通常の WordPress とまったく同じように見えます。 WordPress Playground がインストールする唯一のプラグインは、コンテンツをインポートするプラグインです。

WordPress Playground 内のプラグイン画面。

そういえば、完璧なソリューションは存在しません。それは WordPress Playground にも当てはまります。 これについては次に詳しく説明しましょう。

WordPress Playground の制限事項

WordPress Playground の主な制限は、WordPress テーマ ディレクトリまたは WordPress プラグイン ディレクトリにアクセスできないことです。 ただし、URL の属性を使用してテーマやプラグインをインストールすることはできます。 これについては、後でその方法を説明します。

変更を保存したい場合は、Playground インスタンスをエクスポートすることもお勧めします。 現在は永続ストレージ モードがありますが、プロジェクトが初期段階にある間はこれに依存したくないでしょう。

開発に関する懸念となると、iFrame、Xdebug、および特定の PHP 機能に関する問題が見つかる場合があります。 これらの問題が今後どのように進行するかを確認できるように、ドキュメントの専用セクションを手元に置いておくことをお勧めします。 🔮

WordPress Playground が存在する理由

WordPress Playground は非常に新しくてピカピカです。 実際、このプロジェクトの最初のプレゼンテーションは、2022 年 11 月の演説会で行われました。

このプロジェクトのめまぐるしいペース、つまり構想から実現までは、Automattic 開発者である Adam Zielinski の仕事の成果です。 彼の詳細なブログ投稿にあるように、彼は長いワークフローやセットアップ時間を必要とせずに WordPress をインストールする方法を見つけたいと考えていました。

さらに、Squarespace や Wix などの Web サイトビルダーと競争するという WordPress の長期的な目標にも役立つと思います。 結局のところ、これらのプラットフォームではサーバー、コード、データベースのことは関係ありません。 これは WordPress プロジェクト全体を前進させるのに役立つ素晴らしい二次的なメリットであり、後のセクションで詳しく説明します。

2023 年 6 月までに、WordPress Playground は、6 月の WordCamp Europe 2023 の基調講演中に、Josefa Haden Chomphosy 氏によって再度放送されました。

現時点では、WordPress Playground は成熟したアプリとなり、日常の開発に取り入れ始めることができます。 任意の数のワークフロー、プロジェクト、状況に組み込むことができます。 これらのいくつかについては後ほど説明します。

WordPress Playground がプラットフォームのエコシステムに適合する場所

数年前、WP Sandbox チームは Poopy.life を構築しました。これは、必要なときにいつでも無料で新規インストールを開始できる WordPress サンドボックスです。 このプロジェクトは長くは続きませんでしたが、そのコンセプトが WordPress Playground でどのように継続されているかがわかります。

前任者とは異なり、WordPress Playground はコミュニティのほぼすべての側面にプラットフォームを統合するためのより良い方法を提供できます。

たとえば、ビジネス Web サイトで WordPress テーマまたはプラグインのデモをライブで表示し、バックエンドとフロントエンドに完全にアクセスできるシナリオを想像してください。 基本的には、実際のサイトで完全に機能するデモをユーザーに提供します。 アダム・ジエリンスキーの考えは次のとおりです。

…プラグイン作成者とマーケットプレイスは、Playground ベースのインタラクティブ プレビューの提供を開始する可能性があります。 オンライン コード エディターは WordPress サポートを追加する場合があります。 ホスティング会社は、実際の WordPress サイトをカスタマイズすることから始める、インタラクティブなオンボーディング エクスペリエンスを提供する場合があります。

他の分野では、カスタマー サポート チームがシミュレートされたプレイグラウンドを使用して、ユーザーの正確な仕様に基づいて WordPress セットアップを作成することができます。 これは、ユーザーが WordPress、プラグイン、テーマ、またはその他の製品に問題を抱えている場合、システムにリモート接続する必要がない可能性があることを意味します。 代わりに、ユーザーはサイトを安全に保ちながら、サポート チームに自分が何をしているかを正確に示すことができます。

Adam は、WordPress Playground を「…よりインタラクティブな WordPress エクスペリエンス…」、そして「… WordPress について学ぶためのよりアクセスしやすい方法」と考えています。 このようなタイプのユースケースは、まさに彼の言いたいことです。 実際、WordPress.org のホームページには Playground を使用してWordPress を試すリンクが含まれているため、これが実際に動作しているのをすでに確認できます。

「WordPress を試す」リンクを表示する WordPress.org ホームページ。

開発作業にとって、WordPress Playground は天の恵みとなるかもしれません。 たとえば、 「…開発者が WordPress を開始し、一時的なサイトで実験し、ステージング サイトをセットアップし、プル リクエストをプレビューするために使用する標準ツール」である可能性があります。

特に開発目的では、WordPress Playground が WordPress を起動するための事実上の方法になる可能性があります。 次のように、WordPress を起動して特定の Gutenberg プラグインのプル リクエスト (PR) をロードする方法がすでに存在します。

Gutenberg プル リクエスト ツール。

WordPress Playground がプラットフォームの一般的なエコシステムにどのように適合するかについて、最後の言葉を残しておきます。

…最終的な目標は、WordPress がウェブのオペレーティング システムになることを支援することです…

ただし、Playground の可能性を活用するには、その使用方法を知る必要があります。 次にこれをお見せします。

WordPress Playground の使い方 (4 つのヒント)

本質的に、WordPress Playground は使い方も操作も非常に簡単です。 ただし、希望どおりのインストールを作成するための高度なトリック、ヒント、テクニックがたくさんあります。

次のいくつかのセクションでは、WordPress Playground の使用方法をいくつか紹介します。 まず始めるのに最適な場所は、アプリ内で基本的なインストールを実行する方法です。

  1. Query API 属性を活用して WordPress タスクを実行し、プラットフォームをカスタマイズします
  2. JSON ブループリントを構築してカスタム WordPress インストールを作成する
  3. JavaScript API を使用して WordPress Playground を制御する
  4. Node.js 内で WordPress Playground を使用する

1. クエリ API 属性を利用して WordPress タスクを実行し、プラットフォームをカスタマイズします

WordPress Playground を実装する最も基本的な方法は Query API を使用するもので、使い方は簡単です。 インストールは iFrame で表示されるため、コード行を使用してほぼすべてのサイトに埋め込むことができます。

 <iframe src="https://playground.wordpress.net/"></iframe>

ここから、URL 内の専用の構成オプションを使用してインストールをカスタマイズできます。 基本的なタスクのほとんどをカバーするために現在利用できるオプションがいくつかあります。 たとえば、PHP バージョン、ページ モード、ストレージ オプションなどを選択できます。

最も重要な点は、どのプラグインとテーマをインストールするかです。これが WordPress Playground でインストールできる唯一の方法であるためです。

 <iframe src="https://playground.wordpress.net/?plugin=otter-blocks&theme=neve&url=/wp-admin/post-new.php&mode=seamless"> </iframe>

このスニペットは、Otter Blocks と Neve をインストールし、WordPress を全画面で表示し、編集後のページで開きます。 画面上のシミュレートされたアドレス バーにこれらを入力します。

属性オプションを使用した URL を含む、WordPress Playground のシミュレートされたアドレス バー。

💡 これは必要なものをインストールする柔軟な方法であり、PHP の知識がある場合は使い慣れているはずです。

2. JSON ブループリントを構築してカスタム WordPress インストールを作成する

WordPress Playground をカスタマイズするもう 1 つのよく知られた方法は、JSON ブループリント API を使用することです。 ここでは、JSON 形式を使用してサイト プロファイルを構築します。 ローカルの WordPress 開発に Varying Vagrant Vagrants (VVV) を使用すると、そのプロセスが理解できるでしょう。

 { "$schema": "https://playground.wordpress.net/blueprint-schema.json", "landingPage": "/wp-admin/", "preferredVersions": { "php": "8.0", "wp": "latest" }, "steps": [ { "step": "login", "username": "admin", "password": "password" } ] }

コードが必要ない (JSON だけ) ため、Query API を使用するよりも柔軟性が高いと思います。 さらに、Blueprints API はユーザーに代わって HTTP リクエストを取得します。 これらを Node.js でも使用することもできます (これについては後ほど説明します)。ただし、ブループリントをシミュレートされたアドレス バーに貼り付ける方が簡単です。

ブループリント API の使用方法をここで完全に説明することはできませんが、素晴らしいドキュメントをチェックすることをお勧めします。 特定のロールを持つユーザーのログインなど、プロセスのさまざまな側面を自動化できることがわかります。

3. JavaScript API を使用して WordPress Playground を制御する

WordPress Playground は、他のメソッドと同様の方法でインスタンスを実行し、制御できる独自の JavaScript API を提供します。 これを行うには、npm を使用して@wp-playground/clientパッケージを取得します。 WordPress のインストール結果を表示するには iFrame も必要です。

以下は、JavaScript API を使用する最短の方法を示す WordPress Playground ドキュメントの一連のコードです。

 <iframe ></iframe> <script type="module"> // Use unpkg for convenience import { startPlaygroundWeb } from 'https://unpkg.com/@wp-playground/client/index.js'; const client = await startPlaygroundWeb({ iframe: document.getElementById('wp'), remoteUrl: `https://playground.wordpress.net/remote.html`, }); // Let's wait until Playground is fully loaded await client.isReady(); </script>

このclientオブジェクトを使用すると、JSON ブループリントと関数、Playground API クライアントを使用して Web サイトをさらに制御できます。 後者では、特定の PHP コードの実行、HTTP リクエストの作成、PHP.ini ファイルのカスタマイズ、ファイルとディレクトリの管理、およびその他の達成することが期待されるほぼすべてのことを行うことができます。

4. Node.js 内で WordPress Playground を使用する

WebAssembly は WordPress Playground のコアテクノロジーであり、Node.js 内で使用できます。 これにより、拡張機能を使用して VSCode ベースのエディター内で WordPress 用の開発を支援するツールが開きます。

WordPress Playground 拡張機能を表示する VSCode エディター。

この拡張機能を使用すると、Apache、MySQL などの依存関係を必要としないゼロセットアップのローカル開発環境をインストールできます。 サイドバーからワンクリックで WordPress サーバーを起動できます。

WordPress ローカル環境をインストールする方法を示す VSCode サイドバー。

これは、コードと開発環境を一緒に保つための優れた方法となる可能性があります。 私の意見では、これはプロジェクトを効率的かつ組織的に維持する方法になります。

WordPress プレイグラウンドの未来

WordPress Playground が新しいことを考えると、エキサイティングであることは言うまでもありません。 – プロジェクトの開発は急速に進んでいます。 これは、多くの興味深い開発やアップデートが常に行われていることを意味します。

最大のものの 1 つは Blocknotes です。 この iOS アプリは現在ベータ段階にあり、デバイス上でメモを作成し、それを WordPress に同期して投稿やページの作成に役立てることができます。 コミュニティが求めていた、より良い WordPress モバイル エクスペリエンスの中心となることが期待されています。 アダムは次のように説明しています。

Blocknotes は、WordPress をモバイル アプリとして使用するプロセスの文書化と自動化への道を導きます – WordPress サイトをカスタマイズするか、WordPress プラグインを作成して、ボタンをクリックするだけでモバイル アプリに変えることができる世界をぜひ見てみたいですアプリ。

ただし、WordPress Playground ではさらに多くの機能を提供できます。 たとえば、Playground のアーキテクチャのおかげでブラウザで PHP を実行できるようにするInteractive Code Blockプラグインがあります。

インタラクティブ コード ブロック プラグイン。

WP CLI を Playground で動作させる取り組みもあります。

…私はしばらく時間を費やしました…Playground を使用してブラウザーで WP CLI を実行しました。 将来のことを考えると、WP CLI サイトには、WP CLI コマンドを学習および探索できる対話型ターミナルが表示される可能性があります。

全体として、将来は WordPress Playground に重点が置かれるようになります。

…プラグインの作成者とマーケットプレイスは、Playground ベースのインタラクティブなプレビューの提供を開始する可能性があります…

Playground の範囲全体を考えると、これは控えめなアプリケーションのように思えます。 これは、ブロック エディターや同様のイノベーションと同じように、プラットフォームとしての WordPress にとってマイルストーンとなる可能性があります。

トップへ戻る

結論🧐

WordPress エコシステムは、複雑なセットアップ プロセスやその他のホスティングを必要とせずに、プラグイン、テーマ、サイトなどを紹介するツールを求めてきました。 WordPress Playground プロジェクトはまさにこれを提供します。 これにより、サーバー、データベース、PHP、その他多くの依存関係を必要とせずに、ブラウザーで WordPress の完全バージョンを実行できます。

一言で言えば、このツールは素晴らしく、プラットフォームの将来の一部になりそうです。 さらに良いことに、開発チームは永続的にソリューションに取り組んでいます。 プル リクエスト オプションなど、多くのエキサイティングな追加があり、今後 WordPress の開発とサポートがさらに簡単になると思います。

WordPress Playground はプロジェクトの改善にどのように役立ちますか? 以下のコメント欄であなたのご意見をお聞かせください。