libro
www.tuyano.com
初心者のためのGoogle Apps Scriptプログラミング入門

主なGUIコンポーネントの利用 (1/6)

作成:2011-07-06 07:53
更新:2015-09-06 09:52

■CheckBoxとRadioButton

※ここで説明する「UiApp」オブジェクトを利用した機能は、現在、非推奨となっており、近い将来、廃止される予定です。Webアプリケーションの作成には、HtmlServiceを利用下さい。
（http://libro.tuyano.com/index3?id=926001）

Google Apps ScriptのGUIについてあらましわかってきましたから、今回は用意されているGUIコンポーネントについて主なものをひと通り説明していくことにしましょう。

まずは「チェックボックス」と「ラジオボタン」についてです。これらは、それぞれ「CheckBox」「RadioButton」というオブジェクトとして用意されています。いずれも、UiInstanceに用意される以下のメソッドを呼び出して生成します。

○CheckBox生成
変数 =《UiInstance》.createCheckBox();
変数 =《UiInstance》.createCheckBox( テキスト );
変数 =《UiInstance》.createCheckBox( テキスト, 真偽値 );
引数のテキストはLabelに表示するテキストを指定します。また第２引数の真偽値は、第１引数のテキストがHTMLかどうかを示すものです。これをtrueにするとテキストをHTMLのコードと解釈します。falseにするとテキストと解釈します（中にHTMLのタグがあっても、タグがそのままテキストとして表示されます）。

○RadioButton生成
変数 =《UiInstance》.createCheckBox( グループ名 );
変数 =《UiInstance》.createCheckBox( グループ名, テキスト );
変数 =《UiInstance》.createCheckBox( グループ名, テキスト, 真偽値 );
ラジオボタンは、複数のものが一つのグループとして機能しなければいけません。このため、第１引数にグループ名をテキストとして指定します。これで、同じグループ名を指定しておくと、それらのラジオボタンが１つのグループとして機能するようになります。第２引数のテキスト、第３引数の真偽値はcreateCheckBoxと同様で、表示するテキストとHTMLかどうかを示す真偽値となります。

また、これらのコンポーネントの選択状態は「setValue」で設定することができます。引数には真偽値が渡されます。
《CheckBox/RadioButton》.setValue( 真偽値 );
trueを指定すればそのコンポーネントが選択された状態になります。チェック状態を調べる場合、値を取得するためのメソッドはありません。例によって、On Changeイベントを使ったり、フォーム送信を利用することになるでしょう。

下に、コンポーネントの組み込み例をあげておきます。チェックボックス１つ、ラジオボタン２つを表示する例です。

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

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

●プログラム・リスト●

function doGet(e){
    Logger.log(e);
    var app = UiApp.createApplication().setTitle("Sample Page");
    var panel = app.createVerticalPanel();
    panel.setId("mainpanel");
    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);
    
    // checkbox
    var check = app.createCheckBox("checkbox");
    check.setValue(true);
    panel.add(check);
    
    // radiobutton
    var radio1 = app.createRadioButton("group1","radio 1");
    var radio2 = app.createRadioButton("group1","radio 2");
    radio1.setValue(true);
    panel.add(radio1);
    panel.add(radio2);
        
    return app;
}
※関連コンテンツ

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