reearth.ui

更新日2026年7月30日

reearth.ui 名前空間は、プラグイン拡張（ウィジェットまたはブロック）のユーザーインターフェース要素を管理するための幅広い機能を提供します。

メソッド

show

このメソッドは、カスタム HTML コンテンツをプラグイン拡張（プラグイン設定に基づくウィジェットまたはブロック）として reearth に表示します。iframe の表示状態やサイズを動的に制御でき、iframe を視覚的に表示しないモードにも対応しています。パラメータは 2 つです。表示する HTML コンテンツと、省略可能なオプションオブジェクトです。

構文

reearth.ui.show: (
  html: string,
  options?: Options
) => void;

パラメータ

`html`

型: string

レンダリングする HTML コンテンツの文字列です。

`options`

省略可能

型:

type Options = {
  visible?: boolean;
  width?: number | string;
  height?: number | string;
  extended?: boolean;
};

visible?: boolean: true の場合、iframe を表示します。false の場合、iframe を非表示にし、プラグインはヘッドレスモードで動作します。デフォルト値は true です。
width?: number | string;: ウィジェットの iframe の初期幅です。指定しない場合、iframe はコンテンツに合わせて自動リサイズされます。数値を指定した場合はピクセル単位として扱われます。このオプションは水平方向に拡張されていないウィジェットにのみ有効です。
height?: number | string;: ウィジェットの iframe の初期高さです。指定しない場合、iframe はコンテンツに合わせて自動リサイズされます。数値を指定した場合はピクセル単位として扱われます。このオプションは垂直方向に拡張されていないウィジェットにのみ有効です。
extended?: boolean;: iframe がより広い領域を占有するかどうかを示します。true の場合、iframe はコンテナ内の利用可能なスペースを埋めるように拡張されます。このオプションは、ウィジェットアラインシステムの拡張可能エリアに配置されたウィジェットにのみ有効です。

戻り値

なし（void）。このメソッドは値を返しません。

使用例

const html = `
  <h1 style="color:red;background:white">
    Hello world
  </h1>
`;

// HTML UI のみ表示する
reearth.ui.show(html);

// HTML UI を非表示状態で表示する
reearth.ui.show(html, { visible: false });

// 幅と高さを指定して HTML UI を表示する
reearth.ui.show(html, { width: 400, height: 200 });

// 拡張可能エリアで iframe を拡張する
reearth.ui.show(`<div>Extended widget content</div>`, { extended: true });

postMessage

このメソッドは、プラグインの UI コンポーネント（iframe）にメッセージを送信します。

構文

reearth.ui.postMessage: (message: any) => void;

パラメータ

`message`

型: any

message には、構造化クローン可能な任意の型を指定できます。

戻り値

なし（void）。このメソッドは値を返しません。

使用例

//使用例 1: UI iframe にメッセージを送信する
reearth.ui.postMessage("Hello, Re:Earth!");

//使用例 2: オブジェクト形式のメッセージを送信する
reearth.ui.postMessage({ type: "greeting", text: "Hello, World!" });

resize

プラグインが使用する iframe のサイズを調整します。width または height が undefined の場合は自動リサイズされます。数値を指定した場合はピクセル単位として扱われます。パラメータは 3 つです。width、height、および省略可能な extended です。

UI iframe はコンテンツサイズに基づいて自動的にリサイズされます。このメソッドは、iframe のサイズを手動で設定したい場合に便利です。

構文

reearth.ui.resize(
  width: string | number | undefined,
  height: string | number | undefined,
  extended?: boolean | undefined
) => void;

パラメータ

`width`

型: string | number | undefined

ウィジェットの iframe の幅です。このフィールドは水平方向に拡張されていないウィジェットにのみ有効です。

`height`

型: string | number | undefined

ウィジェットの iframe の高さです。このフィールドは垂直方向に拡張されていないウィジェットにのみ有効です。

`extended?`

省略可能

型: boolean | undefined

省略可能なパラメータです。iframe を拡張するかどうかを示すブール値です。このオプションは、ウィジェットアラインシステムの拡張可能エリアに配置されたウィジェットにのみ有効です。

true: UI 要素を拡張します。
false: UI 要素を拡張しません。
undefined: 拡張状態を変更しません。

使用例

// 使用例 1: UI を 400px × 300px にリサイズする
reearth.ui.resize(400, 300);

// 使用例 2: サイズを変更せずに UI 要素を拡張する
reearth.ui.resize(undefined, undefined, true);

// 使用例 3: 高さのみ 500px に変更し、他のプロパティは変更しない
reearth.ui.resize(undefined, 500);

close

このメソッドは、現在の UI ウィジェットを閉じるために使用します。クローズ操作をプログラムからトリガーする手段を提供します。パラメータはありません。

構文

reearth.ui.close: () => void

パラメータ

なし

戻り値

なし（void）。このメソッドは値を返しません。

使用例

// 現在の UI ウィジェットを閉じる
reearth.ui.close();

イベント

update

update イベントは、UI の状態またはコンテンツが変化するたびにトリガーされます。UI の状態の変化を追跡したり、最新のデータに基づいてコンテンツを更新したりする際に便利です。

構文

reearth.ui.on("update", () => void): void;

使用例

reearth.ui.on("update", () => {
  console.log("UI updated!");
});

close

close イベントは、UI が閉じられたときにトリガーされます。このイベントは、クリーンアップ処理の実行、データの保存、または UI が非アクティブになったことを他のコンポーネントに通知する際に使用できます。

構文

reearth.ui.on("close", () => void): void;

使用例

reearth.ui.on("close", () => {
  console.log("The UI was closed.");
});