ブループリントの使用
ブループリントは次のいずれかの方法で使用できます。
- URL フラグメントとして Playground に渡す。
blueprint-urlパラメータを使用して URL から読み込む。- Blueprint バンドル（ZIP ファイルまたはディレクトリ）を使用する。
- JavaScript API を使用する。
URL フラグメント
ブループリントを使い始める最も簡単な方法は、WordPress Playground の Web サイトの URL「フラグメント」にブループリントを貼り付けることです (例: https://playground.wordpress.net/#{"preferredVersions...)。
たとえば、特定のバージョンの WordPress と PHP でプレイグラウンドを作成するには、次のブループリントを使用します。
{
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
"preferredVersions": {
"php": "8.3",
"wp": "6.5"
}
}
次に、https://playground.wordpress.net/#{"preferredVersions":{"php":"7.4","wp":"6.5"}} にアクセスします。
JavaScript では、JSON.stringify と JSON.parse を使用して、ブループリントの JSON をコンパクトに圧縮できます。
例:
const blueprintJson = `{
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
"preferredVersions": {
"php": "8.3",
"wp": "6.5"
}
}`;
const minifiedBlueprintJson = JSON.stringify(JSON.parse(blueprintJson)); // {"preferredVersions":{"php":"7.4","wp":"6.5"}}
リンクを貼り付ける必要はありません。「試してみる」ボタンをクリックすると、自動的にコード例が実行されます。
Base64 エンコードされたブループリント
GitHub などの一部のツールでは、ブループリントを URL に貼り付けると正しくフォーマットされない場合があります。そのような場合は、ブループリントを Base64 でエンコードし、URL に追加してください。例えば、上記のブループリントを Base64 形式で保存すると以下のようになります。eyIkc2NoZW1hIjogImh0dHBzOi8vcGxheWdyb3VuZC53b3JkcHJlc3MubmV0L2JsdWVwcmludC1zY2hlbWEuanNvbiIsInByZWZlcnJlZFZlcnNpb25zIjogeyJwaHAiOiAiNy40Iiwid3AiOiAiNi41In19.
JavaScript では、グローバル関数 btoa() を使用して、任意のブループリント JSON を Base64 形式 で取得できます。
例:
const blueprintJson = `{
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
"preferredVersions": {
"php": "8.3",
"wp": "6.5"
}
}`;
const minifiedBlueprintJson = btoa(blueprintJson); // eyIkc2NoZW1hIjogImh0dHBzOi8vcGxheWdyb3VuZC53b3JkcHJlc3MubmV0L2JsdWVwcmludC1zY2hlbWEuanNvbiIsInByZWZlcnJlZFZlcnNpb25zIjogeyJwaHAiOiAiNy40Iiwid3AiOiAiNi41In19
URL からブループリントを読み込む
ブループリントが扱いにくくなった場合は、次のように URL の ?blueprint-url クエリ パラメータを使用して読み込むことができます。
ブループリントは公開アクセス可能であり、正しい Access-Control-Allow-Origin ヘッダー とともに提供される必要があることに注意してください。
Access-Control-Allow-Origin: *
ブループリントバンドル
?blueprint-url パラメータが、ZIP 形式のブループリントバンドルもサポートするようになりました。ブループリントバンドルは、ルートレベルに blueprint.json ファイルと、ブループリントが参照する追加リソースを含む ZIP ファイルです。
たとえば、次のようにしてブループリント バンドルをロードできます。
https://playground.wordpress.net/?blueprint-url=https://example.com/my-blueprint-bundle.zip
Blueprint バンドルを使用する場合、bundled リソース タイプを使用してバンドルされたリソースを参照できます。
{
"landingPage": "/my-file.txt",
"steps": [
{
"step": "writeFile",
"path": "/wordpress/my-file.txt",
"data": {
"resource": "bundled",
"path": "/bundled-text-file.txt"
}
}
]
}
ブループリント バンドルの詳細については、ブループリント バンドル ドキュメントを参照してください。
JavaScript API
@wp-playground/client パッケージの startPlaygroundWeb() 関数を使えば、JavaScript API で Blueprints を使うこともできます。JSFiddle または CodePen で実行できる、自己完結型の小さなサンプルを以下に示します。
<iframe id="wp-playground" style="width: 1200px; height: 800px"></iframe>
<script type="module">
import { startPlaygroundWeb } from 'https://playground.wordpress.net/client/index.js';
const client = await startPlaygroundWeb({
iframe: document.getElementById('wp-playground'),
remoteUrl: `https://playground.wordpress.net/remote.html`,
blueprint: {
landingPage: '/wp-admin/',
preferredVersions: {
php: '8.0',
wp: 'latest',
},
steps: [
{
step: 'login',
username: 'admin',
password: 'password',
},
{
step: 'installPlugin',
pluginData: {
resource: 'wordpress.org/plugins',
slug: 'friends',
},
},
],
},
});
const response = await client.run({
// wp-load.php is only required if you want to interact with WordPress.
code: '<?php require_once "/wordpress/wp-load.php"; $posts = get_posts(); echo "Post Title: " . $posts[0]->post_title;',
});
console.log(response.text);
</script>