”GUI Builder”とは、コードを書かずにユーザーインターフェースの組み立てを可能にする”Apps Script editor”にあるツールのことです。 これは ”UI Services”の代替として利用できます。

ユーザーインターフェースは、UIパレットの中から”widget”を選んで、キャンバスと呼ばれる中央パネルへとドラッグすることでブロックを組み立てます。 さらに各”widget”のプロパティを”Property Panel”上で微調整します。

”GUI Builder”を利用して作られたインターフェースは、この動作用スクリプトによってのみ利用可能です。そして、この”GUI Builder”は次の３つの部分で成り立っています。

1. 左サイドバー（下の図解を参照）は”UI Palette”です。
2. ”UI widgets”が組み立てられるメインとなる部分は”UI Canvas”です。
3. 右端は”property pane”です。

選択された”widget”が”canvas”にドラッグされると、それに関連したプロパティが”property pane”に反映されます。 この”property pane”でそれぞれの”widget”を設定できます。

”GUI Builder”はスクリプト・エディターからアクセスします。現存または新規作成のスプレッドシートかサイトのスクリプト・エディターを開くことから始めます。 スクリプト・エディターからTools > Script Editor > File > Build a user interfaceと辿ります。新規タブに”GUI Builder”が出現します。

ユーザーインターフェースを組み立てるために、先ず”widget”を”UI palette”から”canvas”へドラッグします。 ”UI palette”には利用可能な”UI widget”が表示されています。ここから選択したものの設定をするために、”canvas”へドラッグします。 そして、これを”property pane”を使ってプロパティの調整をします。

GUI Builderを利用しているところ * 実験的サービス(2011/10/16)となっているが、十分満足できるツールになっている

新たに作成されたユーザーインターフェースを保存するために、名前をつけて”Save”をクリックします。この名前は、後に 何らかのスクリプトでこのユーザーインターフェースを利用する時に使います。

スクリプト中にユーザーインターフェースを取り込むには”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);
}

”GUI Builder”で作成されたユーザーインターフェースは簡単に拡張や修正ができます。 ”app.loadComponent(...)”を利用してロードした後に新たな”widget”を付け加えたりスタイルを調整します。 次は新たな”widget”の追加方法を示しています。

function doGet() {
  var app = UiApp.createApplication();
  app.add(app.loadComponent("MyGui"));
  var panel = app.getElementById("Panel1");
  // use the widget's id from the builder with getElementById
  panel.add(app.createButton("a new button!"));
  return app;
}