WordPress Playground と WebAssembly でブラウザ内の WordPress エクスペリエンスを構築

WebAssembly を使用するブラウザでのみ、PHP を活用した完全な WordPress を実行できます。

Adam Zieliński
Thomas Nattestad
Thomas Nattestad
X

WordPress Playground は、 通常のサイトのようなものです何でもできる あります。これは WordPress の技術スタック全体です ブラウザで直接実行できます。

今回は、Adam Zieliñski（WordPress Playground のリーダー）と Thomas Nattestad が （V8 のプロダクト マネージャー）は以下について検討します。

  • WordPress デベロッパーにとって WordPress Playground が役立つ理由。
  • 仕組み
  • 今後の WordPress への影響

WordPress をインストールせずに使用でき、アプリに埋め込むことも、JavaScript で制御することもできます

次の URL から埋め込みの WordPress を使用、カスタマイズできます。 playground.wordpress.net（無料）また、 クラウド・インフラもサポートも不要です 他の人がアクセスすることはできません。また、これは一時的なものです。できるだけ早く ページを更新すると消えますこれらのサイトの数は制限なく、 必要な作業に集中できます。

また、Terraform を使用してさまざまな環境でコードをテストすることもできます。 組み込みの PHP と WordPress のバージョン切り替え:

参照してください。

WordPress Playground は、WordPress を使用するまったく新しい方法です。その能力は、 ただし、その機能をアプリに含める場合にのみ、ロックが解除されます。簡単に埋め込み可能で、 <iframe> で WordPress Playground を作成し、 クエリ パラメータ API。 それが公式ショーケースです あります。たとえば ペンダント テーマと コブロック プラグイン（埋め込み iframe） すべて更新されて https://playground.wordpress.net/?theme=pendant&amp;plugin=coblocks.

WordPress Playground のショーケース。

iframe を使用すると簡単に使い始めることができますが、 構成オプションを使用できます。さらに必要な場合は、 強力な API です

WordPress Playground JavaScript クライアントを使用すると、埋め込みサイトを完全に制御可能

WordPress サイト全体（ファイル システム、PHP、 完全な API を使用します @wp-playground/client npm パッケージ化されています。以下の例は、これを使用する方法を示しています。 インタラクティブなチュートリアル その他の例:

import {
  connectPlayground,
  login,
  connectPlayground,
} from '@wp-playground/client';

const client = await connectPlayground(
  document.getElementById('wp'), // An iframe
  { loadRemote: 'https://playground.wordpress.net/remote.html' },
);
await client.isReady();

// Login the user as admin and go to the post editor:
await login(client, 'admin', 'password');
await client.goTo('/wp-admin/post-new.php');

// Run arbitrary PHP code:
await client.run({ code: '<?php echo "Hi!"; ?>' });

// Install a plugin:
const plugin = await fetchZipFile();
await installPlugin(client, plugin);

WordPress がなくても WebAssembly PHP を使用

WordPress Playground はモノリスではありません。WebAssembly PHP をリリース WordPress とは別に使用できますウェブの場合 @php-wasm/web npm を使用します。 パッケージが最適化されています。Node.js では、 @php-wasm/node にある 追加の PHP 拡張機能を使用できますAdam は前者を使用してインタラクティブな PHP スニペットを追加 こちらの WP_HTML_Tag_Processor チュートリアルをご覧ください。 使い方の例をいくつか紹介します。

import { PHP } from '@php-wasm/web';
const php = await PHP.load('8.0', {
  requestHandler: {
    documentRoot: '/www',
  },
});

// Create and run a script directly
php.mkdirTree('/www');
php.writeFile('/www/index.php', `<?php echo "Hello " . $_POST['name']; ?>`);
php.run({ scriptPath: '/www/index.php' });

// Or use the familiar HTTP concepts:
const response = php.request({
  method: 'POST',
  relativeUrl: '/index.php',
  data: { name: 'John' },
});
console.log(response.text); // Hello John

この時点で、どういう仕組みなのでしょうか。お問い合わせいただきありがとうございます。 その仕組みを詳しく見ていきましょう。準備はいいですか？

内部には WebAssembly PHP、SQL トランスレータ、ブラウザ内サーバーがある

PHP は WebAssembly バイナリとして動作

PHP は、設定不要でブラウザで動作するだけの機能ではありません。WordPress プレイグラウンド 開発した 専用のパイプライン PHP インタープリタを WebAssembly にビルドする Emscripten を使用します。 標準の PHP の構築はそれほど複雑ではなく、 関数シグネチャの調整をご覧ください 構成変数を強制適用する および適用 いくつかの小さなパッチです。 自分で作成する方法は次のとおりです。

git clone https://github.com/WordPress/wordpress-playground
cd wordpress-playground && npm install
# Below, you can replace "8.2" with any other valid PHP version number.
npm run recompile:php:web:8.2

ただし、標準の PHP ビルドはブラウザであまり役に立ちません。サーバーの場合 PHP にはリクエスト本文を渡すための JavaScript API がないため、 php://stdin ストリームに入力する必要があります。WordPress Playground では 一から作成します。WebAssembly バイナリには、 専用の PHP API モジュール で書かれた、 JavaScript PHP クラス writeFile() や run() などのメソッドを公開します。

すべての PHP バージョンは静的な .wasm ファイルであるため、PHP バージョンは 切り替えは面倒な作業です。ブラウザにダウンロードを指示するだけです。 たとえば、php_8_2.wasm ではなく php_7_3.wasm とします。

データベースは SQL 変換レイヤでサポートされています

WordPress には MySQL が必要です。ただし、MySQL の WebAssembly バージョンはありません。 ブラウザで実行できますそのため、WordPress Playground には、PHP の ネイティブ SQLite ドライバと SQLite を利用します。

では、WordPress を別のデータベースで実行するにはどうすればよいでしょうか。

その舞台裏では、 SQLite データベースの統合 プラグインがすべての MySQL クエリをインターセプトし、SQLite 言語で書き換えます。2.0 宇宙船をリリース WordPress Playground を利用した新しい翻訳レイヤ これにより、SQLite で WordPress が WordPress 単体テストスイートの 99% に合格することが可能になりました。

ウェブサーバーはブラウザ内にあり、

通常の WordPress では、「ブログ」などのリンクをクリックすると HTTP が開始します。 リクエストをリモート バックエンドに送信して、blog ページを取得します。WordPress は プレイグラウンドにリモート バックエンドがありません。機能 Service Worker すべての送信リクエストをインターセプトしてブラウザ内の PHP に渡す 別のコンテナ内で実行される ウェブワーカー。

リソース wp-admin を指す iframe から始まるフロー図。その呼び出しは Service Worker によってインターセプトされ、ワーカー スレッドでレンダリングされ、最終的にブラウザ内サーバーによって WordPress のレスポンスに変換されます。

ネットワーキングは WebSocket を介してサポートされる

ネットワーキングに関して、WebAssembly プログラムは呼び出しにしか JavaScript API。これは安全機能ですが、課題もあります。方法 PHP で使用される低レベルの同期ネットワーキング コードを、 どうすればよいでしょうか。

WordPress Playground では、WebSocket から TCP ソケットへのプロキシ、 Asyncify、ディープ パッチの適用 php_select などの PHP の内部。複雑だけど、やりがいがある。「 Node.js をターゲットとする PHP ビルドでは、ウェブ API のリクエスト、Composer パッケージのインストール、 MySQL サーバーに接続することもできます

WordPress はブラウザ以外にもさまざまな場所で利用できる

WordPress は WebAssembly で実行できるようになったため、Node.js 同じ V8 エンジンです。もちろん StackBlitz では Node.js をブラウザで直接実行できるため、WordPress と PHP を実行できる WebAssembly にコンパイルされ、Node.js で実行され、さらに WebAssembly が実行されている 表示できます。 WebAssembly は、サーバーレスの分野でも、 そのインフラ上でも 実行できるようになります

将来的には、セットアップ不要でインタラクティブなコラボレーション指向の WordPress アプリが利用可能になる可能性がある

すぐにコードエディタに飛び込んで 設定がすべて完了し すぐに構築を開始できますさらに、 シンプルなリンクをクリックし、Google ドキュメントなどのマルチプレーヤーによる編集セッションを開始します。そして 後はワンクリックで簡単にアプリケーションを シームレスにデプロイできます さまざまなホスティング サービスに簡単に接続できます。 できます。

これはほんの一例です。インタラクティブなチュートリアル、ライブプラグインのデモ、 エッジサーバー上の分散型 WordPress や 使用できます。

これからもエキサイティングな未来を。ぜひ参加してください。あなたのアイデアや投稿 WordPress プレイグラウンドの酸素ですアクセス GitHub リポジトリにある #meta-playground でこんにちは WordPress.org の Slack チャンネル。 Adam（adam@adamziel.com）にお問い合わせください。