注：2013年9月16日で廃止

Google公式User Guideの勝手翻訳 

GUIビルダーの概要

Apps スクリプトエディタのGUIビルダーを使うことによって、ユーザーインターフェイスをコードを書くことなしに、組み上げることが出来る。これは、Ui Servicesを使うことの代わりとなる。widget（ユーザーインターフェイスの組立ブロック）を左側のUIパレットから選んで、キャンバスとここで呼ぶ、中央のパネルにドラッグすることで、ユーザーインターフェイスを組んでいく。それから右側のプロパティパネルに表示されるそれぞれのwidgetのプロパティに、調整と改良を加えていく。GUIビルダーを使って作ったインターフェイスは、それに対応する目的のスクリプトのみによって使用することが出来る。GUIビルダーは三つの部分で構成されている。


  1. 左側のサイドバーはUI パレット
  2. 中央は利用可能なキャンバスでここでUIを組み立てる
  3. 右端側の部分はプロパティ窓

widgetがキャンパス上で選択されると、それに対応するプロパティがプロパティ窓に表示される。ユーザーはこのプロパティ窓を使ってそれぞれのwidgeを設定する。

GUIビルダーを開く

GUIビルダーはスクリプトエディタからアクセスできる。スクリプトエディタをスプレッドシートかサイトから開く。
GUIビルダーはツール＞スクリプトエディタ＞ファイル＞ユーザーインターフェイスを構築から開く。

GUIビルダーを使う

ユーザーインターフェイスを組み立てるには、UIパレットからwidgetをドラッグしてキャンパスまで持ってくる。UIパレットは、使用可能なUI　widgetを表示している。widgetを設定するには、キャンパスにあるwidgetを選択する、そしてプロパティ窓を使ってプロパティを設定していく。

ユーザーインターフェイスの保存

新規に作られたユーザーインターフェイスを保存するには保存をクリックして、ユーザーインターフェイスに名前をつける。その名前は、後にスクリプトでそのユーザーインターフェイスを使うときにインクルードするのに必要となる。

ユーザーインターフェイスをスクリプトにインクルードする

ユーザーインターフェイスをスクリプトに組み込むには loadComponent(GUI_NAME) メソッドを使う。次の例では、ユーザーインターフェイスMyGuiがスクリプトに組み込まれる。ユーザーインターフェイス単独で表示するには、return app;を使い、スクリプトをサービスとして発行する。

function doGet() {
  var app = UiApp.createApplication();
  app.add(app.loadComponent("MyGui"));
  return app;
}
スプレッドシートからのユーザーインターフェイスの表示のしかた
function myFunction() {
  var app = UiApp.createApplication();
  app.add(app.loadComponent("MyGui"));
  SpreadsheetApp.getActiveSpreadsheet().show(app);
}

UIの拡張

UIをGUIビルダーを使って簡単に拡張することができる。app.loadComponent(.....)を使って、ユーザーインターフェイスをロードした後に新たなwidgetとスタイルを加える。
次の例でどうやって新たなwidgetを加えるか示す。

function doGet() {
  var app = UiApp.createApplication();
  app.add(app.loadComponent("MyGui"));
  var panel = app.getElementById("Panel1");
  // getElementByIdによってビルダーのwidgetIDを使う
  panel.add(app.createButton("a new button!"));
  return app;
}