プラグインプレイグラウンドで動かす

プラグインプレイグラウンドで動かす

プラグインプレイグラウンドは、Re:Earth Visualizer プラグインをブラウザ上で作成・検証できるインタラクティブ環境です。コードを書いて実行し、結果をライブマップ上で即座に確認できます。Playground の核心はこの「変更 → 実行 → 観察」の高速ループにあり、すべてが 1 画面で完結するため、パッケージングやインストールなしにアイデアを試してすぐ効果を確認できます。インストール作業やローカル環境構築が不要なため、プラグインに初めて触れる場合でも、アイデアのプロトタイピングでも、最速で試せます。

Playground は次のリンクから開けます：プラグインプレイグラウンド

Playground のレイアウト

Playground は 3 つのカラムに分かれています。

• Viewer（左）— プラグインがリアルタイムに動作するライブマップ。下には現在のシーンの Layers / Settings / Extension Settings パネルがあります。
• Plugins（中央）— 利用可能なプラグインと、選択したプラグインを構成するファイル（reearth.yml や各拡張の JavaScript ファイルなど）を一覧表示します。上部にはプラグイン／ファイル管理のボタン列があります。
• Code（右）— 選択したファイル内容を表示するコードエディタ。ここでプラグインコードを編集します。

Playground を開くと、Custom カテゴリに My Plugin というデフォルトプラグインが既にロードされています。reearth.yml とサンプル拡張ファイルが事前に用意されているので、そのまま実行することも、出発点として改変することもできます。

Plugins パネルのボタン

Plugins パネル上部のボタン列で作業を管理できます。

• Add file — 現在のプラグインに新しいファイルを追加します。
• Import plugin — 既存のプラグインを Playground に読み込みます。
• Export plugin — 現在のプラグインを reearth.yml と JavaScript ファイルを含む .zip としてダウンロードします。これは Re:Earth Visualizer にインストールするのと同じ形式です。
• Share plugin — プラグインの共有リンクをクリップボードにコピーし、他の人に送れるようにします。

プリセット例を動かす

Playground には、User Interface、Data、Viewer & Scene Settings、Manage Layer、Camera、Timeline などのカテゴリに分かれた、すぐに動かせるサンプルプラグイン（プリセット）が用意されています。これらは動作する実例として最適で、実際のコードから学べます。

プリセットを実行する手順：

1. Plugins パネルでカテゴリを選び、プリセットを 1 つ選択します。コードが Code エディタに読み込まれます。
2. Code パネル上部の run ボタンをクリックします。プラグインが実行され、Viewer のマップ上に表示されます。
3. Code エディタでコードを編集し、再度 run をクリックすると変更が反映されます。

この「ロード → 実行 → 編集」のループが Playground 作業の中心で、各変更の効果をすぐに確認できます。

HTML Editor で UI を編集する

拡張の UI は、JavaScript ファイル内のバッククォート（`）文字列として HTML を記述します。数行なら問題ありませんが、長くなると編集しづらくなります。

その場合、Code パネル上部の HTML Editor ボタンをクリックしてください。UI 用の専用エディタが開き、通常のコードエディタと同様に HTML / CSS / JavaScript を書けます（シンタックスハイライトあり）。編集後に Submit をクリックすると、変更がプラグインに反映されます。

プラグインをエクスポートする

プラグインが期待通りに動作したら、Plugins パネルの Export plugin をクリックして .zip としてダウンロードします。

• ダウンロードした .zip は、任意の Re:Earth Visualizer プロジェクトにインストールできます。
• あるいは、「ローカル開発環境をセットアップする」を参照して、ローカル環境で開発を続けることもできます。