remote.html vs index.html
playground.wordpress.net は、remote.html と index.html という 2 つの異なる HTML ファイルを通じて、2 つの異なる API を公開しています。それぞれの機能と違いの概要は次のとおりです。
index.htmlは、WordPress Playground API クライアントを使用して、remote.htmlという「エンドポイント」を制御します。- クエリ API は、WordPress Playground JavaScript API とは独立して、
index.htmlによってのみ提供されます。 - JavaScript API は、
remote.htmlによってのみ提供されます。PlaygroundClientクラスの「エンドポイント」として使用できるのは、このファイルのみです。
これらの各ファイルについても う少し詳しく説明します。
Remote.html
remote.html は WordPress を実行・レンダリングするだけでなく、開発者が WordPress を制御するための API も公開しています。重要なのは、remote.html はブラウザ UI やバージョンスイッチャーなどの UI 要素をレンダリングしないことです。これは WordPress そのもののことです。remote.html の主な機能は次のとおりです。
- PHP の WebAssembly ビルドである php.wasm の適切なバージョンをロードします。
- ユーザーインタラクション用に正しいバージョンの WordPress をロードします。
- WebWorker で PHP を初期化し、HTTP リクエスト用の ServiceWorker を登録します。
- 親ウィンドウからの
messageイベントをリッスンし、適切なコードコマンドを実行します。
最後の部分はパブリック API の仕組みです。親ウィンドウ（index.html）はコマンドと引数を含むメッセージをiframe（remote.html）に送信し、iframeはそのコマンドを実行し、結果を別のメッセージで返します。
メッセージを送信するのは面倒なので、PlaygroundClient クラスはメッセージを内部で処理するオブジェクト指向 API を提供します。
迅速なテストとデバッグのために、remote.html は JavaScript API クライアントを window.playground として公開しています。これは、開発ツールから次のように使用できます。
> await playground.listFiles("/")
(6) ['tmp', 'home', 'dev', 'proc', 'internal', 'wordpress']
playground はこのコンテキストではクラスインスタンスであり、ブラウザの自動補完の恩恵を受けることができます。
Index.html
index.html は、WordPress Playground API クライアントを使用して remote.html を中心に構築された独立したアプリです。
ブラウザ UI、バージョンセレクター、そしてiframe経由でremote.htmlを埋め込むことで WordPress をレンダリングします。アドレスバーやバージョンセレクターなどの UI 機能は、PlaygroundClientを使用してremote.htmlと通信することで実装されます。
index.html は受信したクエリパラメータを監視し、適切な PlaygroundClient メソッドを呼び出します。例えば、?plugin=coblocks は installPluginsFromDirectory( client, ['coblocks'] ) を呼び出します。このメカニズムがクエリ API の基盤となっています。
迅速なテストとデバッグのために、index.html は JavaScript API クライアントを window.playground として公開しています。これは、開発ツールから次のように使用できます。
> await playground.listFiles("/")
(6) ['tmp', 'home', 'dev', 'proc', 'internal', 'wordpress']
このコンテキストでは、playground は Proxy オブジェクトであり、ブラウザから自動補完は行われないことに注意してください。