プラグインと Re:Earth の間で通信する

このガイドを終えると、プラグインの UI（iframe）とロジック（拡張コード）の間でメッセージを双方向に送受信できるようになります。このガイドは、reearth.yml と拡張ファイルの基本的な構造を把握していることを前提としています。

Re:Earth Visualizer のプラグインは、ロジックを担う拡張コードと UI を担う iframe の 2 つの部分で構成されています。これらは postMessage / on("message") のパターンを使って通信します。

サンプルコード

この例では、ボタンがひとつある UI パネルを作ります。ボタンをクリックするとロジック側にメッセージが送られ、ロジック側はカメラを東京に向け、確認メッセージを UI に返します。

reearth.yml

id: communicate-plugin
name: Communicate Plugin
version: 1.0.0
extensions:
  - id: communicate-demo
    type: widget
    name: Communicate Demo

communicate-demo.js

reearth.ui.show(`
  <style>
    html, body { margin: 0; font-family: sans-serif; }
    #panel { padding: 16px; background: #fff; color: #000; width: 200px; }
    button { padding: 6px 14px; cursor: pointer; }
    #status { margin-top: 8px; font-size: 0.9em; color: #555; }
  </style>
  <div id="panel">
    <button id="btn">東京へ移動</button>
    <p id="status">待機中…</p>
  </div>
  <script>
    document.getElementById("btn").addEventListener("click", function () {
      parent.postMessage({ action: "flyToTokyo" }, "*");
    });

    window.addEventListener("message", function (e) {
      if (e.data?.action === "done") {
        document.getElementById("status").textContent = e.data.message;
      }
    });
  </script>
`);

reearth.extension.on("message", (message) => {
  if (message?.action === "flyToTokyo") {
    reearth.camera.flyTo(
      { lat: 35.6762, lng: 139.6503, height: 150000 },
      { duration: 2 }
    );
    reearth.ui.postMessage({
      action: "done",
      message: "東京へ移動しました！",
    });
  }
});

結果

地図上にパネルが表示されます。ボタンをクリックするとカメラが東京に向かい、ステータスメッセージが「東京へ移動しました！」に変わります。

地図データ提供：OpenStreetMap

仕組み

プラグインには 2 つのメッセージの流れがあります。

UI → ロジック

UI（iframe）は parent.postMessage を使って拡張コードにメッセージを送ります。

parent.postMessage({ action: "flyToTokyo" }, "*");

拡張コード側では reearth.extension.on("message", handler) で受け取ります。

reearth.extension.on("message", (message) => {
  if (message?.action === "flyToTokyo") {
    // 処理
  }
});

ロジック → UI

拡張コードは reearth.ui.postMessage を使って UI にメッセージを送ります。

reearth.ui.postMessage({ action: "done", message: "東京へ移動しました！" });

UI 側では window.addEventListener("message", handler) で受け取ります。

window.addEventListener("message", function (e) {
  if (e.data?.action === "done") {
    document.getElementById("status").textContent = e.data.message;
  }
});

メッセージのペイロードには任意のシリアライズ可能な値を使えます。action フィールドはあくまでも規約です。何を送るかは自由に決められます。

次のステップ

• reearth.ui API リファレンス: show、postMessage などの完全な一覧
• reearth.extension API リファレンス: メッセージイベントとプロパティアクセス
• プラグインシステムの仕組み: 2 つの部分がどのように分離されているかの詳細