スクリプトによるGUIの生成 (4/5)

とりあえず、コンポーネントのイベントを利用したデータのやり取りと、フォーム送信による処理、この２つができるようになれば、GUIの値の利用はなんとかなるでしょう。この基本がわかったところで、もう１つ、別の形での「GUIの値の利用」について紹介しておくことにします。――実は、これが「もっとも重要なGUI利用方法」になるのですが……。

これは、実際にソースコードを見てもらったほうが早いでしょう。下のリスト欄に簡単なサンプルを挙げておきました。先程までと同じように、Label、TextBox、Buttonといったコンポーネントがあり、TextBoxに字を書いてボタンを押すとLabelにメッセージが表示されます。既に何度もやった、なんてことないサンプルです。

が、これは送信してもフォームが消えたりしません。コードを見ると、なるほどFormPanelは使っていませんね。ということはフォーム送信ではないわけです。が、それだけでなく、TextBoxのChangeHandlerもありません。あるのは、ButtonのClickHandlerだけ。ただボタンクリックの処理だけで、TextBoxの値をとり出しLabelに表示する、ということを行っているのです。これは一体……？

その秘密は、ButtonのClickHandlerの作成部分にあります。この部分をよく見てみましょう。このようになっていることがわかりますね。

var clickhander = app.createServerClickHandler("onbtnclick");
clickhander.addCallbackElement(panel);
btn.addClickHandler(clickhander);

この中の「addCallbackElement」というのがポイントです。これは、コールバック関数（つまりServerClickHandlerで設定した、イベントにより呼び出される関数）を呼び出すとき、引数に指定したコンポーネントを追加する働きをします。追加するとどうなるか？　それは、コールバック関数でのパラメータ処理部分を見れば分かります。

var str = e.parameter.tbox1;

onbtnclickでは、このようにパラメータ変数eのparameterから「tbox1」としてTextBoxの値をとり出しています。つまり、addCallbackElementでコンポーネントを追加すると、コールバック関数のparameterにそのコンポーネントの値が追加されるようになるのです。

ここでは、VerticalPanelをaddCallbackElementしています。こうすることで、パネルに組み込まれているコンポーネントをすべて追加することができます。ここではTextBoxただ１個しかありませんが、このやり方がわかれば、多数のコンポーネントをまとめて追加することができます。

このaddCallbackElementを利用する場合、注意点としては「TextBoxに必ずsetNameしておく」ということでしょう。これは、フォームの送信の場合と同じですね。この点さえしっかり押さえておけばaddCallbackElementの利用は割と簡単です。

また、フォームの送信では日本語がうまく送れないという問題がありましたが、このやり方だとそうした問題もありません。またChangeHandlerでプロパティに値を保管するなんて迂遠なやり方もしないで済みます。こうした点を考えるなら、このaddCallbackElementを使ったやり方こそが、Google Apps ScriptにおけるGUIイベント処理の基本、といってよさそうです。

addCallbackElementは、当然ですがGUI ビルダーでは設定できません。スクリプトを使ってコンポーネントを組み込むことで初めて利用できる機能です。つまり、「GUI ビルダーは、あくまで"おまけ"であって、本来はスクリプトでGUIを組むのが正しい作法なのだ」と考えるべきなのでしょう。

(by. SYODA-Tuyano.)

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

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

function doGet(e){
	var app = UiApp.createApplication().setTitle("Sample Page");
	var panel = app.createVerticalPanel();
	app.add(panel);
	var l1 = app.createLabel("This is Sample Page.");
	l1.setStyleAttribute("font-size", "18pt");
	l1.setStyleAttribute("background-color", "#CCCCFF");
	l1.setStyleAttribute("margin", "10px");
	panel.add(l1);
	var l2 = app.createLabel("label1");
	l2.setId("label1");
	l2.setText("簡単なテキスト操作を行います。");
	panel.add(l2);
	var tbox = app.createTextBox();
	tbox.setName("tbox1").setId("tbox1");
	panel.add(tbox);
	var btn = app.createButton("click");
	var clickhander = app.createServerClickHandler("onbtnclick");
	clickhander.addCallbackElement(panel);
	btn.addClickHandler(clickhander);
	panel.add(btn);
	return app;
}

function onbtnclick(e){
	Logger.log(e);
	var str = e.parameter.tbox1;
	var app = UiApp.getActiveApplication();
	var l1 = app.getElementById("label1");
	l1.setText("you typed: " + str);
	return app;
}