back
主なGUIコンポーネントの利用 (1/6)
■CheckBoxとRadioButton
※ここで説明する「UiApp」オブジェクトを利用した機能は、現在、非推奨となっており、近い将来、廃止される予定です。Webアプリケーションの作成には、HtmlServiceを利用下さい。
（http://libro.tuyano.com/index3?id=926001）
Google Apps ScriptのGUIについてあらましわかってきましたから、今回は用意されているGUIコンポーネントについて主なものをひと通り説明していくことにしましょう。
まずは「チェックボックス」と「ラジオボタン」についてです。これらは、それぞれ「CheckBox」「RadioButton」というオブジェクトとして用意されています。いずれも、UiInstanceに用意される以下のメソッドを呼び出して生成します。
○CheckBox生成
○RadioButton生成
また、これらのコンポーネントの選択状態は「setValue」で設定することができます。引数には真偽値が渡されます。
下に、コンポーネントの組み込み例をあげておきます。チェックボックス１つ、ラジオボタン２つを表示する例です。
（http://libro.tuyano.com/index3?id=926001）
Google Apps ScriptのGUIについてあらましわかってきましたから、今回は用意されているGUIコンポーネントについて主なものをひと通り説明していくことにしましょう。
まずは「チェックボックス」と「ラジオボタン」についてです。これらは、それぞれ「CheckBox」「RadioButton」というオブジェクトとして用意されています。いずれも、UiInstanceに用意される以下のメソッドを呼び出して生成します。
○CheckBox生成
変数 =《UiInstance》.createCheckBox();引数のテキストはLabelに表示するテキストを指定します。また第２引数の真偽値は、第１引数のテキストがHTMLかどうかを示すものです。これをtrueにするとテキストをHTMLのコードと解釈します。falseにするとテキストと解釈します（中にHTMLのタグがあっても、タグがそのままテキストとして表示されます）。
変数 =《UiInstance》.createCheckBox( テキスト );
変数 =《UiInstance》.createCheckBox( テキスト, 真偽値 );
○RadioButton生成
変数 =《UiInstance》.createCheckBox( グループ名 );ラジオボタンは、複数のものが一つのグループとして機能しなければいけません。このため、第１引数にグループ名をテキストとして指定します。これで、同じグループ名を指定しておくと、それらのラジオボタンが１つのグループとして機能するようになります。第２引数のテキスト、第３引数の真偽値はcreateCheckBoxと同様で、表示するテキストとHTMLかどうかを示す真偽値となります。
変数 =《UiInstance》.createCheckBox( グループ名, テキスト );
変数 =《UiInstance》.createCheckBox( グループ名, テキスト, 真偽値 );
また、これらのコンポーネントの選択状態は「setValue」で設定することができます。引数には真偽値が渡されます。
《CheckBox/RadioButton》.setValue( 真偽値 );trueを指定すればそのコンポーネントが選択された状態になります。チェック状態を調べる場合、値を取得するためのメソッドはありません。例によって、On Changeイベントを使ったり、フォーム送信を利用することになるでしょう。
下に、コンポーネントの組み込み例をあげておきます。チェックボックス１つ、ラジオボタン２つを表示する例です。
(by. SYODA-Tuyano.)
※リストが表示されない場合
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;
}
| 次へ >> |