※GUIビルダーは、現在、非推奨となっており、廃止されることが決定しています。Webアプリケーション等の構築を考えている方は、HtmlServiceを利用下さい。
（http://libro.tuyano.com/index3?id=926001）

Google Apps Scriptで、ウインドウやダイアログなどGUIを利用したプログラムを作成する場合、スプレッドシートに部品を配置して作る、というのはあまりクールなやり方ではありませんね。

こうしたときのために用意されているのが「GUI ビルダー（GUI Builder）」です。これは文字通り、Google Apps Scriptから利用できるGUIをデザインするための専用ツールです。

GUI ビルダーは、スクリプトエディタから起動します。スクリプトエディタの＜ファイル＞メニューから、＜ユーザーインターフェースを構築＞を選んでみましょう。新しいウインドウが開き、GUIを設計するためのGUI ビルダーが現れます。

このGUI ビルダーは、いくつかの領域に分かれており、それぞれに役割があります。ざっとそれぞれの機能について頭に入れておきましょう。

○メニューバー
一番上には「ファイル」「編集」「ウィジェット」といった項目からなるメニューバーがあります。これらは、データの保存やカット＆ペースト、配置した部品の重なり順の調整などの機能が用意されています。

○コンポーネントのリスト（左側）
画面の左側には、たくさんのアイコン類がずらっと一覧表示されています。これらが、GUI ビルダーで使うことのできる部品になります。アイコンの一番上にある「選択」だけは、部品ではなく、選択モードの切替えアイコンです。既に配置されている部品をドラッグして動かしたり、大きさを調整したりするなど、「部品を選択する」のに用います。

部品を配置するには、ここから使いたい項目をドラッグ＆ドロップするか、あるいは項目を選択してマウスでデザインのウインドウ内をドラッグします。とりあえずドラッグ＆ドロップで配置して、それから選択アイコンに切り替えて位置や大きさを調整する、というのが基本でしょう。

○デザイン画面（中央）
画面の中央に四角いエリアがドーンと広がっていますが、これが実際に画面をデザインする場所になります。四角いエリアの上のあたりには「MyGui」と表示されていますが、これはこのGUIの名前です。（これは保存時に変更できます）

ここに、左側のリストから部品をドラッグして配置します。配置したものは、中央をドラッグして移動したり、縁の部分をドラッグして大きさを変更したりできます。

○プロパティ編集（右側）
右側には、さまざまな内容のものが縦に整理されて並びます。これは、中央のデザイン画面で部品を選択すると、その部品に関するさまざまな情報が表示されるようになっています。用意される主な項目を生理りすると以下のようになります。（なお、コンポーネントツリーとBase以外は、デフォルトでは表示されません。なにか部品を配置すると、その部品で利用可能な設定が現れるようになっています）

コンポーネントツリー――上にあるこの部分は、GUIに配置したコンポーネントの組み込み状態をビジュアルに表示するものです。ここで、部品の組み込み状態を確認したり、あるいは中に組み込まれて選択しにくい部品を選択して編集したりするのに利用できます。

Base――コンポーネントの最も基本的なプロパティです。ID、背景色、ツールヒント、タグといった項目が並びます。これらは、すべてのコンポーネントに必ず用意されています。

入力フィールド――ユーザーからの入力に関するプロパティが用意されています。入力をしないものでは表示されません。

テキスト――テキスト表示に関するプロパティです。テキストのみならず、表示されるテキストのフォントや色などの情報もここにまとめられます。

位置と表示――コンポーネントの表示位置に関する設定です。位置や大きさ、表示非表示の設定などが用意されます。

枠線と余白――ボーダー（部品の枠線）とマージン（部品周辺の余白）に関する設定です。

イベント――イベントに関する設定です。選択された部品でサポートされているイベント名が表示され、そのイベントで実行される関数などを指定できます。

全体の仕組みというか、基本的な使い方そのものはそれほど難しくはありません。左側のリストからマウスで部品を中央のデザイン画面に配置し、位置や大きさを調整し、右側のプロパティを書き換えて設定する。これだけです。