Blockly のコアをハッキングしたり、プラグインを開発したりする場合、プレイグラウンドは非常に便利なツールです。これには、テスト、デバッグ、プロトタイピングに使用できる Blockly の事前構成されたインスタンスが含まれています。Google では、Blockly の開発はほぼすべて、Playground を使用して行われています。プレビューとして、デモサーバーのシンプルなプレイグラウンドをご紹介します。
コア Blockly のプレイグラウンドには、シンプル、上級者向け、マルチの 3 種類があります。blockly-samples では、通常は高度なプレイグラウンドのみを使用します。
前提条件
Blockly で Closure モジュール システムが使用されるようになりました。コンパイルされていないクロージャ モジュールは読み込み方法の関係で、http: または https: URL から取得する必要があり、file: URL から直接取得することはできません。したがって、未コンパイル モードでプレイグラウンドを読み込むには、ローカル ウェブサーバーから読み込む必要があります。
ローカル サーバーを起動し、Blockly モジュールの読み込みに必要なすべてのコードを読み込むスクリプトを作成しました。すべての依存関係をインストールするには、マシンに npm をインストールし、Blockly のルートから npm install を実行する必要があります。
Internet Explorer を使用
Blockly のコードベースで高度な機能が使用されるようになり、Internet Explorer と互換性がなくなる可能性があります。圧縮された（コンパイルされた）コードでは、これらの機能は IE で動作するようにトランスパイルされますが、圧縮されていないコードの読み込みは動作しない場合があります。ローカルの HTTP サーバー経由であっても、IE で PlayGround を読み込むと、互換性を確保するために、圧縮された Blockly コードが自動的に読み込まれます。圧縮モードでプレイグラウンドの変更をテストする方法について詳しくは、Playground に直接アクセスするをご覧ください。
シンプルなプレイグラウンド
シンプルなプレイグラウンドは、他の 2 つのプレイグラウンドのベースです。ツールボックスとワークスペースが表示され、設定を限定的に調整できます。
プレイグラウンドを開くには、次のコマンドを実行します。
npm run start
を Blockly のルートから実行します。ポート 8080 でリッスンしているものが他にないことを確認します。このコマンドを実行すると、Blockly モジュールをホストするサーバーが起動され、ブラウザが自動的に開いてプレイグラウンド ページが表示されます。プレイグラウンドを終了する準備ができたら、プロセスを終了します（Mac 環境と Linux 環境では Ctrl+C）。
プレイグラウンドには次の機能があります。
- 迅速な開発のために、すべてのコードが圧縮解除されます。
- すべてのデフォルト ブロック（一部の非推奨のブロックを除く）。
- すべての言語生成ツール（JavaScript、Python、PHP、Lua、Dart）。
- ワークスペースの状態（JSON または XML）のシリアル化とシリアル化解除。
- LTR レイアウトと RTL レイアウトを切り替える。
- ツールボックスのレイアウトを切り替える。
- レンダラのストレステスト。
- すべてのイベントをコンソールに記録します。
高度な遊び場
高度なプレイグラウンドには、Blockly のデバッグをさらに簡単にする追加機能が含まれています。これは、すべてのプラグインのブロックリーサンプルで使用されるデフォルトのプレイグラウンドでもあります。
この遊び場には、シンプルな遊び場の機能に加えて、次の機能があります。
- グリッドサイズ、ズーム/移動コントロール、レンダラ、テーマなど、その他の設定を構成できます。
- 使用された設定とブロックはキャッシュに保存され、次回プレイグラウンドが読み込まれたときに自動的に使用されます。
- 各ジェネレータの出力を同じウィンドウに表示します。
blockly-samples 内にあるプラグインの高度なプレイグラウンドを開始するには、プラグインのルート ディレクトリから npm run
start を実行します。現在、一度に実行できるプラグインは 1 つだけです。このプラグインはポート 3000 を使用します。プラグインを起動できない場合は、まず、そのポートでリッスンしているものがないことを確認します。
Core で高度なプレイグラウンドを開始するには、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 のビルドページをご覧ください）。コア Blockly で何かを変更するたびに、コアを再ビルドして変更をステージングする必要があります。これらのページは、デモサイトにホストされているサンプルなど、リモート サーバーにホストされている場合でもアクセスできます。圧縮モードのときは、背景が明るい青色になります。
高度なプレイグラウンドは、file: アクセスでは利用できません。