reearth.modal

更新日2026年7月30日

reearth.modal 名前空間は、reearth 内のモーダルダイアログコンポーネントの構造と機能を定義します。

メソッド

show

このメソッドは、reearth 内でカスタマイズ可能な HTML コンテンツを持つモーダルウィンドウを表示します。開発者はモーダルのサイズ・背景・モーダル外クリック時の動作を定義できます。

構文

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

パラメータ

`html`

型: string

モーダル内に表示する HTML コンテンツの文字列です。

`options`

省略可能

モーダルの外観と動作をカスタマイズするオブジェクトです。

型:

type Options = {
  width?: number | string;
  height?: number | string;
  background?: string;
  clickBgToClose?: boolean;
};

width?: number | string;: モーダルの幅を指定します。指定しない場合はデフォルトの幅が使用されます。
height?: number | string;: モーダルの高さを指定します。省略するとデフォルトの高さが適用されます。
background?: string;: モーダルの背景色または CSS 値を指定します（例: "#fff"、"rgba(0, 0, 0, 0.5)"）。
clickBgToClose?: boolean;: モーダルの背景をクリックしたときにモーダルを閉じるかどうかを設定します。true にするとこの機能が有効になります。デフォルトは false です。

戻り値:

なし（void）。このメソッドは値を返さずに処理を実行します。

使用例

// 使用例 1: カスタム HTML コンテンツを含むモーダルを表示する
reearth.modal.show("<p>Welcome to Reearth!</p>", {
  width: 400,
  height: 300,
  background: "rgba(0, 0, 0, 0.5)",
  clickBgToClose: true,
});

// 使用例 2: 大きめの固定サイズとソリッドな背景でモーダルを表示する
reearth.modal.show(
  "<h1>Important Information</h1><p>Details about the project...</p>",
  {
    width: 600,
    height: 400,
    background: "#f8f8f8",
    clickBgToClose: false,
  }
);

postMessage

このメソッドは、モーダルウィンドウと reearth の他の部分との間、またはモーダル内のコンポーネント間の通信を可能にします。モーダル内のユーザー操作を reearth に通知したり、他のコンポーネントにデータや処理を要求したりするなど、さまざまな用途に利用できます。

構文

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

パラメータ

`message`

型: any

モーダルに送信するメッセージです。

戻り値:

なし（void）。このメソッドは値を返さずに処理を実行します。

使用例

// 使用例 1: シンプルなテキストメッセージを送信する
reearth.modal.postMessage("Hello, Re:Earth!");

// 使用例 2: Reearth アプリケーションにシンプルな文字列メッセージを送信する
reearth.modal.postMessage("User clicked the button!");

// 使用例 3: オブジェクトメッセージを送信する
reearth.modal.postMessage({ message: "greeting" });

// 使用例 4: ユーザーデータを含むオブジェクトを送信する
reearth.modal.postMessage({
  eventType: "userAction",
  details: {
    action: "submit",
    userId: 12345,
  },
});

update

このメソッドは、reearth 内で現在開いているモーダルの外観と動作を変更します。モーダルのサイズ・背景色・クリックで閉じる動作などのプロパティを動的に調整できます。

構文

reearth.modal.update: (options: Options) => void;

パラメータ

`options`

モーダルの外観と動作を更新するプロパティを含むオブジェクトです。

型:

type Options = {
  width?: number | string;
  height?: number | string;
  background?: string;
  clickBgToClose?: boolean;
};

width?: number | string;: モーダルの新しい幅を設定します。
height?: number | string;: モーダルの新しい高さを設定します。
background?: string;: モーダルの新しい背景を設定します。
clickBgToClose?: boolean;: モーダル外をクリックしたときに閉じるかどうかを設定します。true にするとユーザーが背景をクリックしたときにモーダルが閉じます。false にすると背景クリックでモーダルが閉じなくなります。

戻り値:

なし（void）。このメソッドは値を返さずに処理を実行します。

使用例

// 使用例 1: 幅 300px・高さ 400px・ライトブルーの背景にリサイズする
reearth.modal.update({
  width: 300,
  height: 400,
  background: "#ADD8E6",
  clickBgToClose: true,
});

// 使用例 2: カスタム背景色・大きめのサイズに更新し、クリックで閉じる機能を無効にする
reearth.modal.update({
  width: 600,
  height: 450,
  background: "rgba(0, 128, 128, 0.8)",
  clickBgToClose: false, // 背景クリックによるモーダルのクローズを防止
});

// 使用例 3: 背景クリックでモーダルを閉じられるようにする
reearth.modal.update({
  clickBgToClose: true,
});

// 使用例 4: 他のプロパティを維持したままモーダルの幅のみ 300px に変更する
reearth.modal.update({
  width: 300,
});

close

このメソッドは、開いているモーダルを閉じるために使用します。タスクの完了・論理的な条件・その他のユーザー操作に基づいてモーダルを非表示にできます。パラメータは不要です。

構文

reearth.modal.close: () => void

パラメータ

なし

戻り値:

なし（void）。このメソッドは値を返さずに処理を実行します。

使用例

// 現在開いているモーダルを閉じる
reearth.modal.close();

イベント

close

close イベントは、reearth 内のモーダルが閉じられたときに発火します。このイベントを利用することで、モーダルが閉じられた際にリソースの解放・データの保存・UI の更新といった処理を実行できます。提供するオプションに応じて、リスナーを一度だけ実行するか繰り返し実行するかを設定できます。

構文

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

使用例

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