* Push buttons
* Radio buttons
* Toggle buttons
* Check boxes
* Text fields
* Labels
* Titles
* List boxes
* Dialog boxes
* Panels of many types
* ここに示した以外の要素の利用については または"API ドキュメント" で説明しています。

これらの要素で作り上げればユーザーインターフェースは、２つの条件で動作させることが可能です。

・SpreadsheetやSiteディレクトリーから
・スタンドアローンのサーブレットから

インターフェース表示方法の決定についてのこれ以上の情報は"スプレッドシート上のスクリプト動作方法の決定"で説明します。

利用可能なユーザーインターフェース要素の概観

１．スプレッドシートを開く
２．スクリプトエディタを開く
３．コピー＆ペーストではなく下記のコードをタイプします。

function myFunction() {
  var app = UiApp.createApplication();
  var button = app.
}

作成のために利用可能なすべての要素と各要素の引数のリストメニューです。
コードをペーストした場合は見ることができない場合があります。
内蔵のエディタでコードの自動補完機能を使用すると、"app"の後に続くピリオドを入力する必要があります。

ユーザーインターフェースをデザインする

１．スクリプトのプラン - どのようなタスクをさせるのか。
２．あなたが表示したり、ユーザーから収集する特定の情報を書き留める。
３．ユーザーインターフェイスを描画し、スクリプトで作成する必要があるすべてのインターフェイス要素についてのメモを作る。
４．スクリプトとインタフェースは、任意のユーザー入力に応答して何をすべきかを決定する
５．スクリプトを終了するための条件を決定する。

ユーザーインターフェースを作成する

・UiAppのアプリケーションオブジェクトを作成には
(構文) var your_application_object_name = UiApp.createApplication();を利用します。
（your_application_object_name に割り当てる名前を入れます）

・ユーザーインターフェース要素を作成し、UiAppのアプリケーションオブジェクトと関連付けるには
(構文) your_ui_element_name= your_application_object_name.createElement_Name();.を利用します。

・別のユーザーインターフェース要素を追加する（例えばパネル上のボタンを表示する）には
(構文) your_ui_element_name1.add(your_ui_element_name2);を利用します。

次の例はUIAPPクラスのcreateApplicationメソッドによって”myapp”というアプリケーションオブジェクトを作成したものです。

var myapp = UiApp.createApplication();

var mybutton = myapp.createButton('Press Me');

var mypanel = myapp.createVerticalPanel();

mypanel.add(mybutton);

myapp.add(mypanel);

show(myapp);

下はボタン付きパネルを表示するだけの短いスクリプトです。コメントを参考に各行の動作を追うことができます。

function myAppFunction() { // Name the function
// Read the current Spreadsheet into mydoc
  var mydoc = SpreadsheetApp.getActiveSpreadsheet(); 

// Create the UiApp object myapp and set the title text
  var myapp = UiApp.createApplication().setTitle('Here is the title bar'); 

// Create a button called mybutton and set the button text
  var mybutton = myapp.createButton('Here is a button'); 

// Create a vertical panel called mypanel and add it to myapp
  var mypanel = myapp.createVerticalPanel(); 

// Add mybutton to mypanel
  mypanel.add(mybutton); 

// Add my panel to myapp
  myapp.add(mypanel); 

 // Use the show() method on the Spreadsheet to display the UiApp object and all elements associated with it. 
  mydoc.show(myapp); 
}

var myapp = UiApp.createApplication().setTitle('Here is the title bar').setHeight(50).setWidth(100);

var mygrid = myapp.createGrid(3, 2);の一行がグリッドサイズ3×2を決定します。
またグリッド内の各位置に表示される要素はsetWidgetメソッドによるものです。位置決定のインデックスはゼロベースなので、行は0,1(2,3・・) というようになります。

function demoUI() {
  var mydoc = SpreadsheetApp.getActiveSpreadsheet();
  var myapp = UiApp.createApplication().setTitle('An improved GUI');
  
  var mygrid = myapp.createGrid(3, 2);
  mygrid.setWidget(0, 0, myapp.createLabel('Name:'));
  mygrid.setWidget(0, 1, myapp.createTextBox());
  mygrid.setWidget(1, 0, myapp.createLabel('Age:'));
  mygrid.setWidget(1, 1, myapp.createTextBox());
  mygrid.setWidget(2, 0, myapp.createLabel('City'));
  mygrid.setWidget(2, 1, myapp.createTextBox());
    
  var mybutton = myapp.createButton('Press me');
  var mypanel = myapp.createVerticalPanel();
  mypanel.add(mygrid);  
  mypanel.add(mybutton);
  myapp.add(mypanel);
  mydoc.show(myapp);
}

スプレッドシートの更新によってインターフェース内で生じたアクションに反応するスクリプトが次のものです。 これはボタンをクリックするたびにA1セル内の値をインクリメントするものです。

function foo() {
  var doc = SpreadsheetApp.getActiveSpreadsheet();
  var app = UiApp.createApplication();
  
  var button = app.createButton('submit');
  app.add(button);
  
  var handler = app.createServerClickHandler('b');
  button.addClickHandler(handler);
  
  doc.show(app);
}


function b() {
  var doc = SpreadsheetApp.getActiveSpreadsheet();
  var cell = doc.getRange('a1');
  cell.setValue(Number(cell.getValue()) + 1);
  
  var app = UiApp.getActiveApplication();
  app.close();

// The following line is REQUIRED for the widget to actually close.
  return app;
}

このガイドの前セクションの”foo()”関数には慣れたでしょうから、新たな説明をしましょう。

var handler = app.createServerClickHandler('b'); の説明はこうです。
これは”app”によって呼び出された”UiApp”アプリケーションの一部であるサーバーサイドのクリック・ハンドラー・オブジェクトを作成しているのです。 クリックハンドラーはマウスクリックに反応してアクションを実現します。サーバーサイドはサーバー側で実現されるアクションの意味です。この場合はもちろん Google Apps Script サーバーです。つまり引数（'b'）の意味するところは b()ファンクションを実行するハンドラーの振る舞いなのです。

ひとつのボタンには複数のクリックハンドラーを追加でき、それらはパネル上で実行されます。

button.addClickHandler(handler);の説明です。クリックハンドラーをbuttonと呼ばれる定義済ボタンオブジェクトに関連付けます。

スクリプト二つめの”b()”ファンクションはA1セル内の値をインクリメントし、アプリケーションappを閉じ、最終的にスクリプトの開始位置へ戻る指示が含まれています。

次はさらに複雑で長いスクリプトです。
このスクリプトはパネル上のテキストフィールドの情報を集め、それらをスプレッドシートへ書き込みます。詳しくはスクリプト中のコメントを参考にして下さい。

function foo2() {
  var doc = SpreadsheetApp.getActiveSpreadsheet();
  var app = UiApp.createApplication().setTitle('New form!');
  // Create a grid with 3 text boxes and corresponding labels
  var grid = app.createGrid(3, 2);
  grid.setWidget(0, 0, app.createLabel('Name:'));
  
  // Text entered in the text box is passed in to userName
  grid.setWidget(0, 1, app.createTextBox().setName('userName')); 
  grid.setWidget(1, 0, app.createLabel('Age:'));
  grid.setWidget(1, 1, app.createTextBox().setName('age')); 
  
  // Text entered in the text box is passed in to age
  grid.setWidget(2, 0, app.createLabel('City'));
  grid.setWidget(2, 1, app.createTextBox().setName('city')); 
  
  // Text entered in the text box is passed in to city.
  
  // Create a vertical panel..
  var panel = app.createVerticalPanel();
  
  // ...and add the grid to the panel
  panel.add(grid);
  
  // Create a button and click handler; pass in the grid object as a callback element and the handler as a click handler
  // Identify the function b as the server click handler

  var button = app.createButton('submit');
  var handler = app.createServerClickHandler('b');
  handler.addCallbackElement(grid);
  button.addClickHandler(handler);
  
  // Add the button to the panel and the panel to the application, then display the application app in the Spreadsheet doc
  panel.add(button);
  app.add(panel);
  doc.show(app);
}

// Function that records the values in the Spreadsheet
function b(e) {
  var doc = SpreadsheetApp.getActiveSpreadsheet();
  var lastRow = doc.getLastRow(); // Determine the last row in the Spreadsheet that contains any values
  var cell = doc.getRange('a1').offset(lastRow, 0); // determine the next free cell in column A
  cell.setValue(e.parameter.userName); // Set the value of the cell to userName
  cell.offset(0, 1).setValue(e.parameter.age); // Set the value of the adjacent cell to age
  cell.offset(0, 2).setValue(e.parameter.city); // set the value of the next cell to city
  
// Clean up - get the UiApp object, close it, and return
  var app = UiApp.getActiveApplication();
  app.close();
  // The following line is REQUIRED for the widget to actually close.
  return app;
}

function foo3() {
  var doc = SpreadsheetApp.getActiveSpreadsheet();
  var app = UiApp.createApplication().setTitle('form!');

// Create the entry form, a 3 x 2 grid with text boxes for name, age, and city that is then added to a vertical panel  
  var grid = app.createGrid(3, 2);
  grid.setWidget(0, 0, app.createLabel('Name:'));
  grid.setWidget(0, 1, app.createTextBox().setName('userName').setId('userName'));
  grid.setWidget(1, 0, app.createLabel('Age:'));
  grid.setWidget(1, 1, app.createTextBox().setName('age').setId('age'));
  grid.setWidget(2, 0, app.createLabel('City'));
  grid.setWidget(2, 1, app.createTextBox().setName('city').setId('city'));
  
// Create a vertical panel and add the grid to the panel
  var panel = app.createVerticalPanel();
  
  panel.add(grid);
  
// Here's where this script diverges from the previous script.
// We create a horizontal panel called buttonPanel to hold two buttons, one for submitting the contents of the form
// to the Spreadsheet, the other to close the form.

  var buttonPanel = app.createHorizontalPanel();

// Two buttons get added to buttonPanel: button (for submits) and closeButton (for closing the form)
// For the submit button we create a server click handler submitHandler and pass submitHandler to the button as a click handler.
// the function submit gets called when the submit button is clicked.
  var button = app.createButton('submit');
  var submitHandler = app.createServerClickHandler('submit');
  submitHandler.addCallbackElement(grid);
  button.addClickHandler(submitHandler);
  buttonPanel.add(button);
  
// For the close button, we create a server click handler closeHandler and pass closeHandler to the close button as a click handler.
// The function close is called when the close button is clicked.
  var closeButton = app.createButton('close');
  var closeHandler = app.createServerClickHandler('close');
  closeButton.addClickHandler(closeHandler);
  buttonPanel.add(closeButton);
 

// Create label called statusLabel and make it invisible; add buttonPanel and statusLabel to the main display panel.
  var statusLabel = app.createLabel().setId('status').setVisible(false);
  panel.add(statusLabel);
  
  panel.add(buttonPanel);
  
  app.add(panel);
  doc.show(app);
}

// Close everything return when the close button is clicked
function close() {
  var app = UiApp.getActiveApplication();
  app.close();
  // The following line is REQUIRED for the widget to actually close.
  return app;
}

// function called when submit button is clicked
function submit(e) {

// Write the data in the text boxes back to the Spreadsheet 
  var doc = SpreadsheetApp.getActiveSpreadsheet();
  var lastRow = doc.getLastRow();
  var cell = doc.getRange('a1').offset(lastRow, 0);
  cell.setValue(e.parameter.userName);
  cell.offset(0, 1).setValue(e.parameter.age);
  cell.offset(0, 2).setValue(e.parameter.city);
 
// Clear the values from the text boxes so that new values can be entered
  var app = UiApp.getActiveApplication();
  app.getElementById('userName').setValue('');
  app.getElementById('age').setValue('');
  app.getElementById('city').setValue('');
// Make the status line visible and tell the user the possible actions
  app.getElementById('status').setVisible(true).setText('User ' + e.parameter.userName + ' entered. 
  To add another, type in the information and click submit. To exit, click close.');
  return app;
}

ユーザーインターフェースを表示するためのコードを書く場合は、以下の点を忘れないでください。

• スタンドアローンとして提供するスクリプトは”doGet(e)関数”またはHTMLフォーム送信のために”doPost(e)関数”を呼び出します。
• スプレッドシートで利用するスクリプトではdoc.show(app)を呼び出します。
• ”doGet(e)関数は引数”e”を伴い、ユーザーインターフェースへ引数を渡します。

スクリプトはサービスとして発行できます。発行に際してはだれにアクセスを与えるか決定できます。

• Google Appsドメインの場合、貴方だけのアクセス権か、またはドメイン内のだれでもがアクセス権を持てるように発行できます。
• コンシューマーアカウントの場合は、貴方だけのアクセス権か、または世界中のだれでもがアクセス権を持てるように発行できます。

(ユーザーインターフェースからスプレッドシートを更新する - Updating a Spreadsheet from the User Interface) のセクションの例のようにユーザーインタフェースはスクリプトの保存されているスプレッドシート表示されます。 次のコードはユーザーインターフェースの表示方法を決定するスクリプトです。

function showGui() {
  var doc = SpreadsheetApp.getActiveSpreadsheet();
// create UiApp object named app
  var app = UiApp.createApplication().setTitle('my title');
//  .... populate app with ui objecs ...
// ..and display the UiApp object from the current spreadsheet
  doc.show(app);
}

function doGet(e) {
  var app = UiApp.createApplication();
// .... populate app with ui objects here ...
  return app;
}

* サービスとしてスクリプトを発行する方法 -スプレッドシートからの実行とその後の閲覧を提供する方法です。

1. 下の画面はスクリプトエディターにおいて”Publish>Publish_as_service”をクリックした時のダイアログボックスです。
2. 誰がアクセスするかを選択します。
   • 自分向けのアクセス制限をしたい場合（自分だけがアクセスできる）；”Allow only myself (your_email_address) to use this.”をチェックします。
   • 同じドメイン内のメンバーにアクセスを許可する場合；”Allow only members of your_domain to invoke this service.”をチェックします。

3. ”Enable Service”をチェックします。
4. 表示されているURLをコピーします。
5. 保存（Save）します。
6. コピーしたURLをブラウザのアドレスに入力し、”Enter”か”Return”します。 自分で作成したユーザーインターフェースが表示されます。

次は”Apps Scriptガジェット”を”Google Site”に挿入してサービスとして発行する方法です。 以下の説明では、前以て自分のサイトでスクリプトを作成していることを前提としています。

1. サイトに移動します。
2. ”Edit Page”を開きます。
3. ”Insert > Apps Script Gadget.”をクリックすると”Site's scripts”のリスアップされたダイアログボックスが表示されます。
4. 利用したいスクリプトを選択して”Select”をクリックします。”Insert Apps Script Gadget パネル”があります。
5. サービスへのアクセス制限をします。
   • 自分向けのアクセス制限をしたい場合（自分だけがアクセスできる）；”Allow only myself (your_email_address) to use this.”をチェックします。
   • 同じドメイン内のメンバーにアクセスを許可する場合；”Allow only members of your_domain to invoke this service.”をチェックします。
6. ガジェットに枠を入れたい場合は、最初のチェックボックスをチェックします。
7. タイトルを入れたり修正したい場合は２つめのチェックボックスを利用し、必要に応じて新しいタイトルを提供します。
8. ガジェットのデフォルトの大きさを修正します。
9. ダイアログボックスで保存（Save）します。
10. ”Sites page”の保存をクリックしてガジェットの表示とスクリプトを確認します。

Google Apps Script と the Google Web Toolkit

setWidget(row, column, widget);

Grid g = new Grid(rows, cols);
g.setVisible(false);
g.setHeight("100px");

var g = app.createGrid(rows, cols);
g.setVisible(false);
g.setHeight("100px");

* ユーザーガイド/目次
1. ユーザーガイド/Google Apps Script の概要
2. Getting Started/Google Apps Scriptをはじめよう
3. Writing Scripts/スクリプトを書く
4. Common Tasks/一般的なタスクのプログラミング
5. Events/イベントへの応答スクリプト
6. User Interfaces/ユーザーインターフェースの組み込み
7. Using GUI Builder/GUI ビルダー の使用
8. Security/セキュリティ
9. Troubleshooting/トラブルシュートとデバッグ
-- ユーザーガイド 6. ユーザーインターフェースの組み込み : end -- 2011/10/30