GUI ビルダーによるユーザーインターフェイス作成 (5/6)

では、実際にユーザーからの入力を行ってみましょう。今回も、「MyGui」という名前のGUIを作成します。先程のものを使いまわしてもいいですし、新たにスプレッドシートを作って作成してもかまいません。

今回のGUIのでは、Label、TextBox、Buttonといったものを利用してみます。それぞれ、以下のように作成をしてください。

Label
ID: Label1
テキストを表示するものです。これはIDだけきちんと指定しておけば、後は自由に設定してかまいません。

TextBox
ID: TextBox1
名前: TextBox1
TextBoxは、テキストを入力するための部品です。これは、IDだけでなく、「名前」プロパティも設定してください。これを忘れると、後でイベントを利用する際、値がうまく取り出せなくなります。

Button
プッシュボタンは、特に設定などは不要です。自由に作成してください。


○イベントハンドラの設定
今回は、TextBoxとButtonにイベント設定をします。関数の内容については後述するとして、ここではどのイベントにどの関数を割り当てるかだけ整理しておきます。

TextBox1――「値の変更」イベントに「onChangeTextBox1」という関数を設定します。
Button――「マウスのクリック」イベントに「onClickButton」という関数を設定します。

ざっとGUIの部分は、このような感じになります。イベントハンドラは、後で関数を定義してから設定すればよいでしょう。――では、このGUIをシート上に表示する処理だけ先に作っておきましょう。

下のリスト欄に、サンプルの関数を用意しておきました。これは既にやったことですから説明の要はないでしょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※GUI表示の処理
function myFunction() {
	var sheet = SpreadsheetApp.getActiveSpreadsheet(); 
	var app = UiApp.createApplication();
	var gui = app.loadComponent("MyGui");
	app.add(gui);
	sheet.show(app);
}