メインコンテンツへスキップ

ブループリントの使用

ブループリントは次のいずれかの方法で使用できます。

  • 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.

実行するには、https://playground.wordpress.net/#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 クエリ パラメータを使用して読み込むことができます。

https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/adamziel/blueprints/trunk/blueprints/latest-gutenberg/blueprint.json

ブループリントは公開アクセス可能であり、正しい 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>