Blockly のコアをハッキングするときやプラグインを開発するときに、プレイグラウンドは大いに役立つツールです。これには、テスト、デバッグ、プロトタイピングに使用できる Blockly の事前構成済みインスタンスがあります。Google では 開発のほとんどが プレイグラウンドを使っていますプレビューとして、デモサーバー上のシンプルなプレイグラウンドを以下に示します。
Blockly コアには、シンプル、高度、マルチの 3 つのタイプのプレイグラウンドがあります。Blockly-samples では、通常、高度なプレイグラウンドのみが使用されます。
前提条件
Blockly で Closure モジュール システムが使用されるようになりました。コンパイルされていない Closure モジュールは、読み込み方法の関係で、http: または https: URL から取得する必要があり、file: URL から直接取得することはできません。したがって、プレイグラウンドを非コンパイル モードで読み込むには、ローカル ウェブサーバーから読み込む必要があります。
ローカル サーバーを起動し、Blockly モジュールの読み込みに必要なすべてのコードを読み込むスクリプトを作成しました。すべての依存関係をインストールするには、マシンに npm をインストールし、Blockly のルートから npm install を実行する必要があります。
Internet Explorer を使用する
Blockly はコードベースで高度な機能を使用するようになりました。これらの機能は Internet Explorer と互換性がない場合があります。これらの機能は、圧縮（コンパイル済み）コードでは IE で動作するようにトランスパイルされますが、非圧縮コードの読み込みでは動作しない場合があります。IE でプレイグラウンドを読み込むと、ローカルの HTTP サーバー経由であっても、プレイグラウンドでは互換性を確保するために、圧縮された Blockly コードが自動的に読み込まれます。圧縮モードでのプレイグラウンドでの変更のテストについて詳しくは、「プレイグラウンドへの直接アクセス」セクションをご覧ください。
シンプルな遊び場
シンプルなプレイグラウンドが、他の 2 つのプレイグラウンドのベースになっています。ツールボックスとワークスペースが表示され、一部の設定を調整できます。
プレイグラウンドを開くには、次のコマンドを実行します。
npm run start
ルートから見ていきましょう。ポート 8080 でリッスンしているものが他にないことを確認します。このコマンドは、Blockly モジュールをホストするサーバーを起動し、ブラウザを自動的にプレイグラウンド ページで開きます。プレイグラウンドをシャットダウンする準備ができたら、プロセスを終了します（Mac および Linux 環境では Ctrl+C）。
プレイグラウンド機能:
- 迅速な開発のために、コードはすべて非圧縮になっています。
- すべてのデフォルトのブロック（非推奨のブロックを除く）。
- すべての言語生成ツール（JavaScript、Python、PHP、Lua、Dart）。
- ワークスペースの状態のシリアル化とシリアル化解除（JSON または XML）を行います。
- LTR レイアウトと RTL レイアウトを切り替えます。
- ツールボックスのレイアウトを切り替えます。
- レンダラのストレステスト。
- コンソールですべてのイベントをログに記録します。
高度なプレイグラウンド
高度なプレイグラウンドには、Blockly のデバッグをさらに簡単にするための追加機能が含まれています。これは、すべてのプラグインの blockly-samples で使用されるデフォルトのプレイグラウンドでもあります。
このプレイグラウンドには、シンプルなプレイグラウンド機能がすべて備わっています。さらに、
- グリッドサイズ、ズームおよび移動のコントロール、レンダラ、テーマなど、その他の設定も構成できます。
- 使用した設定とブロックはキャッシュに保存され、次にプレイグラウンドが読み込まれたときに自動的に使用されます。
- 各ジェネレータの出力を同じウィンドウで表示します。
blockly-samples 内のプラグインに対して Advanced Playground を起動するには、プラグインのルート ディレクトリから npm run
start を実行します。現時点では、一度に実行できるプラグインは 1 つのみで、ポート 3000 を使用します。プラグインを起動できない場合は、まず、そのポートでリッスンしているものがないことを確認します。
Core で Advanced Playground を起動するには、Blockly のルートから npm run start を実行し、タイトルの下にある [Advanced] リンクをクリックします。
また、Blockly の dev-tools パッケージを使用して、高度なプレイグラウンドを含む独自のテストページを作成することもできます。
マルチ プレイグラウンド
マルチ プレイグラウンドには、LTR モードとツールボックスの配置ごとに異なる構成の複数のプレイグラウンドがあります。これは主に、リリース前に Blockly が LTR に関連するものに問題がないことを素早く確認するために使用されます。このプレイグラウンドを開くには、シンプルなプレイグラウンドの手順に沿って操作してから、URL を /tests/multi_playground.html に変更します。
変更のテスト
ローカル サーバーからプレイグラウンドを実行している場合、ほとんどの場合、ページを更新するだけで Blockly で変更が表示されます。新しいファイルを追加する場合、またはファイルに新しい依存関係を追加した場合は、最初に npm run
build を実行して test/deps.js ファイルを更新して依存関係が正しく読み込まれるようにしてから、ページを更新する必要があります。
プラグインの高度なプレイグラウンドを実行している場合は、ページを更新する必要さえありません。変更は自動的にホットロードされます。
プレイグラウンドへの直接アクセス
以前は、シンプルなプレイグラウンドは、ブラウザで test/playground.html ファイルに直接アクセスすることでローカルにアクセスしていました。この方法は、シンプルなプレイグラウンドとマルチ プレイグラウンドでも引き続き可能ですが、現在は推奨されていません。これを行うと、プレイグラウンドがローカル サーバーを実行していないことを検出し、圧縮された Blockly ファイルを自動的に使用します（詳しくは、構成要素に関するページをご覧ください）。また、Blockly コアで何かを変更した場合は、コアを再ビルドして変更をステージングする必要があります。デモサイトでホストされている例のように、リモート サーバーでホストされている場合は、これらのページにもアクセスできます。圧縮モードのときは、背景が明るい青色になります。
file: アクセスの場合、Advanced Playground は使用できません。