×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。


Googleを追いかけろ!

.
価格.com ブロードバンド

WWW を検索 Googleを追いかけろ! を検索



スクリプトを利用して以下のような広範囲のユーザー インターフェイスを限定されずに利用できます。


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

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

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

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

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

Google Apps Scriptでは多くのユーザーインターフェース要素を作成できます。
利用可能なすべての要素を見るには以下のようにします。

1.スプレッドシートを開く
2.スクリプトエディタを開く
3.コピー&ペーストではなく下記のコードをタイプします。

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

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

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

ユーザーインターフェースの表示スクリプトを書く前に、以下を確認してください。

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

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

ボタンやダイアログボックスなどのユーザーインターフェイス要素を作成する前に、ユーザーインターフェイス要素を含んでいるUiAppのアプリケーションオブジェクトが必要です。 UiAppのアプリケーションオブジェクトを作成したら、UiAppのアプリケーションオブジェクトへのボタン、ダイアログボックス、パネル、および他の要素を追加することができます。 これらの操作のための一般的な構文は次のとおりです。

・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();
これでユーザーインターフェース(以下UI)要素が作れます。ここでは "Press Me" と表示されたボタンを作成します。
var mybutton = myapp.createButton('Press Me');
ボタンに表示させたいテキストが引数として渡されます。 ボタンを装備したパネル(vertical panel)もできます。
var mypanel = myapp.createVerticalPanel();
pop-up panels, stack panels, focus panels, form panelsなども作れます。 ボタン付きパネルの表示方法は下のようになります。
mypanel.add(mybutton);
さらにパネルをアプリケーションに加えます。
myapp.add(mypanel);
最後にGoogle Apps ScriptにこのUI要素を教えてあげます。
show(myapp);
UI要素はどのような順序でも配置できます。オブジェクトに追加する順番が表示される順序となります。 例えばVerticalPaneオブジェクトを作成した後に、要素a,b,cをパネルに追加したらパネルの上部から下部へと この順番に表示されます。ただし要素の作成そのものの順序は問いません。これは、要素を作成してアプリケーションに 追加することとは別の命令を必要とする異なるステップだからです。

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

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); 
}

実行後の画面(縮小)
* パネルを一部省略した実行後の画面
オブジェクトに値を設定するsetter methodは繋げることができます。
上記のスクリプトにあるvar myapp= UiApp.createApplication().setTitle('Here is the title bar'); はUiAppオブジェクトを作成してそのタイトル値を設定するものですが、次のようにすればオブジェクトのサイズの設定も可能です。

var myapp = UiApp.createApplication().setTitle('Here is the title bar').setHeight(50).setWidth(100);
setHeight(50).setWidth(100)の実行後
* setHeight(50).setWidth(100)の実行後
つぎに単なるパネルの表示だけの例をもうひとつ紹介します。
これは、Gridオブジェクトや、複雑なレイアウトを実現するテキストボックス、ラベル等の作成に利用するsetWidgetメソッドの使用例を示しています。 テキストボックスに入力はできますが、ボタンを押しても何らかの動作をするわけではありません。

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);
}
実行後の画面(パネルを縮小)
* 実行後の画面(パネルを縮小)

ユーザーインターフェースからスプレッドシートを更新する

このセクションで取り挙げた2つのスクリプト(ユーザーインターフェースを作成する - Creating User Interface Elements )では 各種のコントロールつきパネルを表示しますが、それだけのものです。ユーザーインターフェースを有効なものにするためには、 インターフェース内のユーザー情報をスプレッドシートに反映させる必要があります。

スプレッドシートの更新によってインターフェース内で生じたアクションに反応するスクリプトが次のものです。 これはボタンをクリックするたびに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;
}
Faunction foo()実行後の画面
* Faunction foo()実行後の画面

このスクリプトをスクリプトエディターにコピーして実行してみると分かりますが、 ボタン付きパネルを表示するためには、ボタンクリック後に毎回スクリプトの再実行をしなければなりません。 これはスクリプトが常時パネルをアクティブにして表示し続けるループ構造になっていないからです。
ですから”app.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;
}
Faunction foo() のヴァージョン(1)実行後の画面
* Faunction foo() のヴァージョン(1)実行後の画面

同じような例ですが、ユーザーが終了する前に複数回利用できるようにした関数を付け加えたものが次のスクリプトです。 インラインコメントには新しい説明があります。
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;
}
Faunction foo() のヴァージョン(2)実行後の画面
* Faunction foo() のヴァージョン(2)実行後の画面

スクリプト実行をスプレッドシートからかサービスとしてかを決定する

ユーザーインターフェースの利用はスプレッドシート内やサイト内はもちろん、独立したサービスとして実行させることもできます。 ここではこれらの違いやサービスとしての決定方法についての説明します。

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

  • スタンドアローンとして提供するスクリプトは”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;
}
下はユーザーインターフェイスを表示する2つの方法についていくつかの側面を比較した表です。
表示 スクリプトの実行者 提供方法 スクリプトの実行可能対象 スクリプトのアクセス範囲
スプレッドシート内から表示 一般ユーザー スプレッドシート ユーザーの範囲 一般ユーザーのアクセス範囲
スタンドアローン・サーブレットで表示 スクリプトの管理権限者 URL 管理権限者の範囲 管理権限者のアクセス範囲

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

  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. タイトルを入れたり修正したい場合は2つめのチェックボックスを利用し、必要に応じて新しいタイトルを提供します。
  8. ガジェットのデフォルトの大きさを修正します。
  9. ダイアログボックスで保存(Save)します。
  10. ”Sites page”の保存をクリックしてガジェットの表示とスクリプトを確認します。

Google Apps Script と the Google Web Toolkit

実際のところユーザーインターフェース要素の作成と表示のために”Google Apps Script”は”Google Web Toolkit (GWT)”を利用しています。
”Google Apps Script”のこの側面を利用するためにと”GWT”に習熟する必要はありません。 なぜならば、もし”GWT”に通じているのならば、”Google Apps Script”の中のオブジェクトの利用可能なタイプや実装したものがどのように動作するか分かっているはずだからです。

たとえば”GWT”の”Grid クラス(Google Apps Scriptでも同様)”では”setWidget メソッド”を次のように呼び出します。

setWidget(row, column, widget);
”GWT”と”Google Apps Script”には多少構文の違いがあります。たとえば”GWT”はJava構文を伴いますが、一般的に”Google Apps Script”ではJavaScriptを使います。 下の例は”GWT”の場合です。
Grid g = new Grid(rows, cols);
g.setVisible(false);
g.setHeight("100px");
”Google Apps Script”ならば下のようになります。
var g = app.createGrid(rows, cols);
g.setVisible(false);
g.setHeight("100px");
”GWT”において”newXYZ”の形を利用した”GWTオブジェクト”の場合はすべてについて、Google Appsのスクリプトは同等のメソッド”createXYZ”を持っています。



    * ユーザーガイド/目次
    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