UI を表示する

このガイドを終えると、Re:Earth Visualizer 内でプラグインのカスタム UI を描画できるようになります。ここでは、reearth.yml と拡張ファイルからなる基本的なプラグイン構成を理解していることを前提とします。

プラグインは reearth.ui.show に HTML を渡すことで UI を表示します。Re:Earth Visualizer はその HTML を iframe 内にレンダリングします。iframe は通常の Web ページのように振る舞うため、標準の HTML / CSS / JavaScript を使って任意の UI を構築できます。

サンプルコード

この例では、見出しとスタイル付きボックスを持つシンプルなパネルを描画します。

reearth.yml

id: ui-demo-plugin
name: UI Demo Plugin
version: 1.0.0
extensions:
  - id: ui-demo
    type: widget
    name: UI Demo

ui-demo.js

reearth.ui.show(`
  <style>
    html, body { margin: 0; }
    #panel {
      width: 240px;
      padding: 16px;
      font-family: sans-serif;
      background: #ffffff;
      border-radius: 8px;
    }
  </style>
  <div id="panel">
    <h3>Hello from my plugin</h3>
    <p>This UI is rendered inside an iframe.</p>
  </div>
`);

結果

このウィジェットをシーンに追加すると、メインビューにパネルが表示されます。

仕組み

reearth.ui.show は HTML をレンダリングします

UI は HTML 文字列として reearth.ui.show に渡します。UI に必要なマークアップ、スタイル、スクリプトはすべてこの文字列内に含めます。

reearth.ui.show(`<div>...</div>`);

HTML は iframe 内で実行されるため、Visualizer 本体のページから隔離されます。これにより、スタイルが競合しにくく、独立した UI を作れます。

CSS でサイズを設定します

iframe はコンテンツに合わせてサイズが決まります。ルート要素に対して width: 240px のように CSS で寸法を指定してください。html, body に margin: 0 を設定すると、ブラウザ既定の余白が消え、UI が端まで詰まって表示されます。

次に読む

• reearth.ui API リファレンス — show / resize / close など表示関連 API の一覧
• ユーザーが設定できるプロパティを受け取る — インスペクターから UI を設定可能にする