Skip to content

Commit 8c8f1f9

Browse files
shimotmkshimotmk
authored
Add Japanese translations to Using Blueprints (#2330)
## Motivation for the change, related issues Part of #2202 Add Japanese translations to Using Blueprints
1 parent 4f4e0c4 commit 8c8f1f9

File tree

1 file changed

+293
-0
lines changed

1 file changed

+293
-0
lines changed

‎packages/docs/site/i18n/ja/docusaurus-plugin-content-docs/current/blueprints/02-using-blueprints.md‎

Lines changed: 293 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,293 @@
1+
---
2+
title: ブループリントの使用
3+
slug: /blueprints/using-blueprints
4+
---
5+
6+
# ブループリントの使用
7+
8+
<!--
9+
# Using Blueprints
10+
-->
11+
12+
ブループリントは次のいずれかの方法で使用できます。
13+
14+
<!--
15+
You can use Blueprints in one of the following ways:
16+
-->
17+
18+
- URL フラグメントとして Playground に渡す。
19+
- `blueprint-url` パラメータを使用して URL から読み込む。
20+
- Blueprint バンドル（ZIP ファイルまたはディレクトリ）を使用する。
21+
- JavaScript API を使用する。
22+
23+
<!--
24+
- By passing them as a URL fragment to the Playground.
25+
- By loading them from a URL using the `blueprint-url` parameter.
26+
- By using Blueprint bundles (ZIP files or directories).
27+
- By using the JavaScript API.
28+
-->
29+
30+
## URL フラグメント
31+
32+
<!--
33+
## URL Fragment
34+
-->
35+
36+
ブループリントを使い始める最も簡単な方法は、WordPress Playground の Web サイトの URL「フラグメント」にブループリントを貼り付けることです (例: `https://playground.wordpress.net/#{"preferredVersions...`)。
37+
38+
<!--
39+
The easiest way to start using Blueprints is to paste one into the URL "fragment" on WordPress Playground website, e.g. `https://playground.wordpress.net/#{"preferredVersions...`.
40+
-->
41+
42+
たとえば、特定のバージョンの WordPress と PHP でプレイグラウンドを作成するには、次のブループリントを使用します。
43+
44+
<!--
45+
For example, to create a Playground with specific versions of WordPress and PHP you would use the following Blueprint:
46+
-->
47+
48+
```json
49+
{
50+
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
51+
"preferredVersions": {
52+
"php": "7.4",
53+
"wp": "6.5"
54+
}
55+
}
56+
```
57+
58+
次に、`https://playground.wordpress.net/#{"preferredVersions":{"php":"7.4","wp":"6.5"}}` にアクセスします。
59+
60+
<!--
61+
And then you would go to
62+
`https://playground.wordpress.net/#{"preferredVersions":{"php":"7.4","wp":"6.5"}}`.
63+
-->
64+
65+
:::tip
66+
JavaScript では、[`JSON.stringify`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) と [`JSON.parse`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) を使用して、ブループリントの JSON をコンパクトに圧縮できます。
67+
例:
68+
69+
```js
70+
const blueprintJson = `{
71+
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
72+
"preferredVersions": {
73+
"php": "7.4",
74+
"wp": "6.5"
75+
}
76+
}`;
77+
const minifiedBlueprintJson = JSON.stringify(JSON.parse(blueprintJson)); // {"preferredVersions":{"php":"7.4","wp":"6.5"}}
78+
```
79+
80+
:::
81+
82+
<!--
83+
:::tip
84+
In Javascript, you can get a compact version of any blueprint JSON with [`JSON.stringify`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) and [`JSON.parse`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)
85+
Example:
86+
87+
```js
88+
const blueprintJson = `{
89+
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
90+
"preferredVersions": {
91+
"php": "7.4",
92+
"wp": "6.5"
93+
}
94+
}`;
95+
const minifiedBlueprintJson = JSON.stringify(JSON.parse(blueprintJson)); // {"preferredVersions":{"php":"7.4","wp":"6.5"}}
96+
```
97+
98+
:::
99+
-->
100+
101+
リンクを貼り付ける必要はありません。「試してみる」ボタンをクリックすると、自動的にコード例が実行されます。
102+
103+
<!--
104+
You won't have to paste links to follow along. We'll use code examples with a "Try it out" button that will automatically run the examples for you:
105+
-->
106+
107+
import BlueprintExample from '@site/src/components/Blueprints/BlueprintExample.mdx';
108+
109+
<BlueprintExample justButton={true} blueprint={{
110+
"preferredVersions": {
111+
"php": "7.4",
112+
"wp": "6.5"
113+
}
114+
}} />
115+
116+
### Base64 エンコードされたブループリント
117+
118+
<!--
119+
### Base64 encoded Blueprints
120+
-->
121+
122+
GitHub などの一部のツールでは、ブループリントを URL に貼り付けると正しくフォーマットされない場合があります。そのような場合は、ブループリントを Base64 でエンコードし、URL に追加してください。例えば、上記のブループリントを Base64 形式で保存すると以下のようになります。`eyIkc2NoZW1hIjogImh0dHBzOi8vcGxheWdyb3VuZC53b3JkcHJlc3MubmV0L2JsdWVwcmludC1zY2hlbWEuanNvbiIsInByZWZlcnJlZFZlcnNpb25zIjogeyJwaHAiOiAiNy40Iiwid3AiOiAiNi41In19`.
123+
124+
<!--
125+
Some tools, including GitHub, might not format the Blueprint correctly when pasted into the URL. In such cases, encode your Blueprint in Base64 and append it to the URL. For example, that's the above Blueprint in Base64 format: `eyIkc2NoZW1hIjogImh0dHBzOi8vcGxheWdyb3VuZC53b3JkcHJlc3MubmV0L2JsdWVwcmludC1zY2hlbWEuanNvbiIsInByZWZlcnJlZFZlcnNpb25zIjogeyJwaHAiOiAiNy40Iiwid3AiOiAiNi41In19`.
126+
-->
127+
128+
実行するには、https://playground.wordpress.net/#eyIkc2NoZW1hIjogImh0dHBzOi8vcGxheWdyb3VuZC53b3JkcHJlc3MubmV0L2JsdWVwcmludC1zY2hlbWEuanNvbiIsInByZWZlcnJlZFZlcnNpb25zIjogeyJwaHAiOiAiNy40Iiwid3AiOiAiNi41In19 にアクセスしてください。
129+
130+
<!--
131+
To run it, go to https://playground.wordpress.net/#eyIkc2NoZW1hIjogImh0dHBzOi8vcGxheWdyb3VuZC53b3JkcHJlc3MubmV0L2JsdWVwcmludC1zY2hlbWEuanNvbiIsInByZWZlcnJlZFZlcnNpb25zIjogeyJwaHAiOiAiNy40Iiwid3AiOiAiNi41In19
132+
-->
133+
134+
:::tip
135+
JavaScript では、グローバル関数 `btoa()` を使用して、任意のブループリント JSON を [Base64 形式](https://developer.mozilla.org/ja/docs/Glossary/Base64#javascript_%E3%81%AE%E5%AF%BE%E5%BF%9C) で取得できます。
136+
137+
例:
138+
139+
```js
140+
const blueprintJson = `{
141+
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
142+
"preferredVersions": {
143+
"php": "7.4",
144+
"wp": "6.5"
145+
}
146+
}`;
147+
const minifiedBlueprintJson = btoa(blueprintJson); // eyIkc2NoZW1hIjogImh0dHBzOi8vcGxheWdyb3VuZC53b3JkcHJlc3MubmV0L2JsdWVwcmludC1zY2hlbWEuanNvbiIsInByZWZlcnJlZFZlcnNpb25zIjogeyJwaHAiOiAiNy40Iiwid3AiOiAiNi41In19
148+
```
149+
150+
:::
151+
152+
<!--
153+
:::tip
154+
In JavaScript, You can get any blueprint JSON in [Base64 format](https://developer.mozilla.org/en-US/docs/Glossary/Base64#javascript_support) with global function `btoa()`.
155+
156+
Example:
157+
158+
```js
159+
const blueprintJson = `{
160+
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
161+
"preferredVersions": {
162+
"php": "7.4",
163+
"wp": "6.5"
164+
}
165+
}`;
166+
const minifiedBlueprintJson = btoa(blueprintJson); // eyIkc2NoZW1hIjogImh0dHBzOi8vcGxheWdyb3VuZC53b3JkcHJlc3MubmV0L2JsdWVwcmludC1zY2hlbWEuanNvbiIsInByZWZlcnJlZFZlcnNpb25zIjogeyJwaHAiOiAiNy40Iiwid3AiOiAiNi41In19
167+
```
168+
169+
:::
170+
-->
171+
172+
### URL からブループリントを読み込む
173+
174+
<!--
175+
### Load Blueprint from a URL
176+
-->
177+
178+
ブループリントが扱いにくくなった場合は、次のように URL の `?blueprint-url` クエリ パラメータを使用して読み込むことができます。
179+
180+
<!--
181+
When your Blueprint gets too wieldy, you can load it via the `?blueprint-url` query parameter in the URL, like this:
182+
-->
183+
184+
[https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/adamziel/blueprints/trunk/blueprints/latest-gutenberg/blueprint.json](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/adamziel/blueprints/trunk/blueprints/latest-gutenberg/blueprint.json)
185+
186+
ブループリントは公開アクセス可能であり、[正しい `Access-Control-Allow-Origin` ヘッダー](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin) とともに提供される必要があることに注意してください。
187+
188+
<!--
189+
Note that the Blueprint must be publicly accessible and served with [the correct `Access-Control-Allow-Origin` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin):
190+
-->
191+
192+
```
193+
Access-Control-Allow-Origin: *
194+
```
195+
196+
#### ブループリントバンドル
197+
198+
<!--
199+
#### Blueprint Bundles
200+
-->
201+
202+
`?blueprint-url` パラメータが、ZIP 形式のブループリントバンドルもサポートするようになりました。ブループリントバンドルは、ルートレベルに `blueprint.json` ファイルと、ブループリントが参照する追加リソースを含む ZIP ファイルです。
203+
204+
<!--
205+
The `?blueprint-url` parameter now also supports Blueprint bundles in ZIP format. A Blueprint bundle is a ZIP file that contains a `blueprint.json` file at the root level, along with any additional resources referenced by the Blueprint.
206+
-->
207+
208+
たとえば、次のようにしてブループリント バンドルをロードできます。
209+
210+
<!--
211+
For example, you can load a Blueprint bundle like this:
212+
-->
213+
214+
[https://playground.wordpress.net/?blueprint-url=https://example.com/my-blueprint-bundle.zip](https://playground.wordpress.net/?blueprint-url=https://example.com/my-blueprint-bundle.zip)
215+
216+
Blueprint バンドルを使用する場合、`bundled` リソース タイプを使用してバンドルされたリソースを参照できます。
217+
218+
<!--
219+
When using a Blueprint bundle, you can reference bundled resources using the `bundled` resource type:
220+
-->
221+
222+
```json
223+
{
224+
"landingPage": "/my-file.txt",
225+
"steps": [
226+
{
227+
"step": "writeFile",
228+
"path": "/wordpress/my-file.txt",
229+
"data": {
230+
"resource": "bundled",
231+
"path": "/bundled-text-file.txt"
232+
}
233+
}
234+
]
235+
}
236+
```
237+
238+
ブループリント バンドルの詳細については、[ブループリント バンドル](/blueprints/bundles) ドキュメントを参照してください。
239+
240+
<!--
241+
For more information on Blueprint bundles, see the [Blueprint Bundles](/blueprints/bundles) documentation.
242+
-->
243+
244+
## JavaScript API
245+
246+
<!--
247+
## JavaScript API
248+
-->
249+
250+
`@wp-playground/client` パッケージの `startPlaygroundWeb()` 関数を使えば、JavaScript API で Blueprints を使うこともできます。JSFiddle または CodePen で実行できる、自己完結型の小さなサンプルを以下に示します。
251+
252+
<!--
253+
You can also use Blueprints with the JavaScript API using the `startPlaygroundWeb()` function from the `@wp-playground/client` package. Here's a small, self-contained example you can run on JSFiddle or CodePen:
254+
-->
255+
256+
```html
257+
<iframe id="wp-playground" style="width: 1200px; height: 800px"></iframe>
258+
<script type="module">
259+
import { startPlaygroundWeb } from 'https://playground.wordpress.net/client/index.js';
260+
261+
const client = await startPlaygroundWeb({
262+
iframe: document.getElementById('wp-playground'),
263+
remoteUrl: `https://playground.wordpress.net/remote.html`,
264+
blueprint: {
265+
landingPage: '/wp-admin/',
266+
preferredVersions: {
267+
php: '8.0',
268+
wp: 'latest',
269+
},
270+
steps: [
271+
{
272+
step: 'login',
273+
username: 'admin',
274+
password: 'password',
275+
},
276+
{
277+
step: 'installPlugin',
278+
pluginData: {
279+
resource: 'wordpress.org/plugins',
280+
slug: 'friends',
281+
},
282+
},
283+
],
284+
},
285+
});
286+
287+
const response = await client.run({
288+
// wp-load.php is only required if you want to interact with WordPress.
289+
code: '<?php require_once "/wordpress/wp-load.php"; $posts = get_posts(); echo "Post Title: " . $posts[0]->post_title;',
290+
});
291+
console.log(response.text);
292+
</script>
293+
```

0 commit comments

Comments
 (0)