Earth Engine User Interface API

Earth Engine は、ui パッケージを介してクライアントサイドのユーザー インターフェース（UI）ウィジェットにアクセスできます。ui パッケージを使用して、Earth Engine スクリプトのグラフィカル インターフェースを構築します。これらのインターフェースには、ボタンやチェックボックスなどのシンプルな入力ウィジェット、グラフや地図などの複雑なウィジェット、UI のレイアウトを制御するパネル、UI ウィジェット間のインタラクションのイベント ハンドラを含めることができます。コードエディタの左側にある [ドキュメント] タブで、ui API のすべての機能を確認します。次の例では、ui パッケージを使用して、ウィジェットの作成、ユーザーがウィジェットをクリックしたとき動作の定義、ウィジェットの表示の基本的な関数を示します。

Hello, world!

この例は、コンソールに表示されるボタンのシンプルな UI を表しています。ボタンをクリックすると、コンソールに「Hello, world!」と出力されます。

コードエディタ（JavaScript）

// Make a button widget.
var button = ui.Button('Click me!');

// Set a callback function to run when the
// button is clicked.
button.onClick(function() {
  print('Hello, world!');
});

// Display the button in the console.
print(button);

まず、ボタンはラベルという単一の引数で作成されます。次に、ボタンの onClick() 関数が呼び出されます。onClick() への引数は、ボタンがクリックされるたびに実行される別の関数です。イベントが発生したときに呼び出される関数（「コールバック」関数）のメカニズムは「イベント ハンドラ」と呼ばれ、UI ライブラリで広く使用されています。この例では、ボタンがクリックされると、関数は「Hello, world!」をコンソールに出力します。

可変性

ee.* Namespace 内のオブジェクトとは異なり、ui.* Namespace 内のオブジェクトは変更可能です。そのため、オブジェクトでインスタンス関数を呼び出すたびに、オブジェクトを変数に再割り当てする必要はありません。関数を呼び出すだけで、ウィジェットが変更されます。次のコードを前の例に追加すると、ボタンのクリック イベントに別のコールバックが登録されます。

コードエディタ（JavaScript）

// Set another callback function on the button.
button.onClick(function() {
  print('Oh, yeah!');
});

このコードを前の例の末尾にコピーし、[実行] をクリックします。これで、ボタンをクリックすると、両方のメッセージがコンソールに出力されます。

Earth Engine スクリプトの UI の作成について詳しくは、UI のページをご覧ください。ウィジェット ページでは、ui パッケージのウィジェットの基本機能について、視覚的なツアーと説明を提供しています。[パネルとレイアウト] ページでは、ウィジェットの整理と配置に使用できる最上位のコンテナとレイアウトについて説明します。[イベント ページ] には、UI 内のウィジェットの動作と操作の構成に関する詳細情報が記載されています。