PC | mobile ver.20170108.

 libro ~入門ドキュメント・サイト~

初心者のためのGoogle Apps Scriptプログラミング入門:

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

作成:2012-04-17 15:31
更新:2012-08-31 08:30
■GUIビルダー再び!!
さて、ここまで来たところで、再び「GUIビルダー」に戻ってみましょう。

GUIビルダーでは、そのままボタンのイベントなどに関数を設定しても、他のコンポーネントの値をとり出すことができませんでした。そしてその原因は、どうやらサーバー側で動くイベントハンドラが設定されていないためらしい、ということもわかりました。例えばボタンクリックで何かをさせるなら、ServerClickHandlerを使って値を取り出したいコンポーネント(TextBoxなど)をCallbackElementとして組み込んでやれば良いのでした。

だから、GUIビルダーは使えない。……これが結論でした。

まてよ? これはちょっと違うでしょう。だったら、GUIビルダーで作ったGUIのコンポーネントに、これらを組み込んでやればいいんじゃないですか?

ということで、やってみましょう。ここではGUIビルダーを使って、以下のようなコンポーネントを配置した「MyGui」を作成して利用してみます。

Label――IDに「Label1」と設定したものを用意します。
TextBox――IDと名前に「TextBox1」と設定しておきます。(名前の設定を忘れないように!)
Button――IDは「Button1」としておきます。これは、On Mouse Clickのイベントは設定しません。そのままでOKです。

作成したGUIをスプレッドシートから呼び出し、使ってみましょう。下のリスト欄に簡単な利用のための関数を書いておきました。これをスクリプトエディタで書いて実行してみてください。スプレッドシートに、GUIエディターで作ったダイアログが表示されます。そして、テキストを書いてボタンを押せば、ちゃんとそのテキストがラベルに表示されます!

ここでは、GUIをロードしたら、まずTextBox1Button1のDOMオブジェクトを変数に取得しておきます。
var txt = app.getElementById('TextBox1');
var btn = app.getElementById('Button1');
そして、ServerClickHandlerを作成します。
var clickhander = app.createServerClickHandler("onbtnclick");
続いて、ServerClickHandlerCallbackElementとしてTextBox1を組み込みます。
clickhander.addCallbackElement(txt);
そして、Button1のクリックハンドラにServerClickHandlerを設定します。
btn.addClickHandler(clickhander);
後はGUIをUiAppに追加して表示するだけです。ボタンクリックの処理は、onbtnclickに用意しておきます。見ればわかるように、
var str = e.parameter.TextBox1;
このようにしてちゃんとTextBox1の値が取り出せます。これでようやくGUIビルダーが実用になりますね。

まあ、わざわざこんなことしないでGUIビルダーでサーバー側のハンドラも設定できるようにしてくれ、とおもいますが、Googleが対応してくれるまでは、とりあえずこのやり方で乗り切りましょう!



 

※プログラムリストが表示されない場合

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

function showGui(){
  var sheet = SpreadsheetApp.getActiveSpreadsheet();
  var app = UiApp.createApplication();
  // GUIをロードし、ボタンクリックのイベントを設定する
  var gui = app.loadComponent("MyGui");
  var txt = app.getElementById('TextBox1');
  var btn = app.getElementById('Button1');
  var clickhander = app.createServerClickHandler("onbtnclick");
  clickhander.addCallbackElement(txt);
  btn.addClickHandler(clickhander);
  // GUIを追加して表示する
  app.add(gui);
  sheet.show(app);
}

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




 


「初心者のためのGoogle Apps Scriptプログラミング入門」に戻る



※その他のコンテンツ