×

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



>> ユーザーガイド >> Uiの構築 >> Htmlサービス | Uiサービス | Guiビルダー |


Uiサービス

Google.Apps.Scriptが提供するUiサービスはウィジェットと呼ばれるユーザーインターフェイス要素を使用して情報を表示または、キャプチャできるようにします。


WWW GoogleStyle


概要

スクリプトで広範囲のユーザーインターフェイス要素を作成できますが、以下の項目に限定されません。

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

Google.Apps.Scriptを利用して多くのユーザーインターフェイス要素を作成することができます。

利用可能な要素を確かめてみます。


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

利用・作成可能なすべての要素とともに、各要素に必要な引数のリストメニューが表示されます。 メニューリストが表示されない場合は、コードをコピー&ペーストしている可能性があります。エディタの組み込みコードの自動補完機能を使うには、末尾にピリオドを入力すれば次が補完されます。

また、UiInstanceクラスのドキュメントには、ユーザーインターフェイス要素を作成するためのすべての利用可能なメソッドを見ることができます。



ユーザーインターフェイスのデザイン

ユーザーインターフェイスを表示するスクリプトを書き始める前に、次の作業を行います。

  1. スクリプトの内容を検討します。どのようなタスクを達成すべきですか?
  2. 表示したり、ユーザーから収集したい特定の情報を書き留めます。
  3. ユーザーインターフェイスを描画し、スクリプトで作成しなければならないすべてのインターフェイス要素についてのメモを作ります。
  4. スクリプトおよびインターフェイスが、任意のユーザー入力に応答して何をすべきかを決定します。
  5. スクリプトを終了するための条件を決定します。


ユーザーインターフェイス要素の作成

ボタンやダイアログボックスなどのユーザーインターフェイス要素の作成前に、、ユーザーインターフェイス要素を含むようにUiInstanceオブジェクトが必要です。 UiInstanceオブジェクトを作成したら、オブジェクトにボタン、ダイアログボックス、パネル、および他の要素を追加します。

これらの操作を行うための一般的な構文は次のとおりです。

次の文はUiAppクラスcreateApplicationメソッドを呼び出すことによって、MyAppというUiInstanceオブジェクトを作成します。


var
myapp =
UiApp.
createApplication();

これで、ユーザーインターフェイスの要素を作成することができます。ここではPress Meのテキストを持つボタンを作ります。


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

ボタンに表示したいテキストは、引数として渡されます。

ボタンを置くためのパネルが欲しいところですね。以下で垂直パネルを作成してみます。


var
mypanel = myapp.createVerticalPanel();

パネルにはスタックパネル、フォーカスパネル、書式パネルなどたくさんの種類があります。

パネル上にボタンを表示するためのコードは次のとおりです。


mypanel.add(mybutton);

次はパネルをアプリケーションに追加します。


myapp.add(mypanel);

最後に、インタフェース要素を表示するためにGoogle.Apps.Scriptに指示する必要があります。


return
myapp;

ユーザーインターフェイス要素は任意の順序で作成することができます。オブジェクトに要素を追加する順序で表示順序を決定します。 たとえば、VerticalPanelオブジェクトを作成し、パネルに要素をa、b、cの順で追加した場合、その要素は上から下の位置の順番に表示されます。
ただし、任意の順序で、a、b、cを作成することもできます。
要素を作成してアプリケーションにそれらを追加することは、別々の命令を必要とする別個のステップだからです。

次はボタン(ここでは押しても何もしません)が置かれたパネルが表示される短いスクリプトです。コメントを見てそれぞれの行が何をするか理解できるでしょう。


function
doGet() {
// A script with a user interface that is published as a web app
// must contain a doGet(e) function.
// Create the UiInstance 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);
// return myapp to display the UiInstance object and all elements associated with it.
return
myapp; }

オブジェクトに値を設定するメソッドであるsetter.methodsは一緒につなげることができます。上記のスクリプトの例で説明します。
var myapp = UiApp.createApplication().setTitle('Here is the title bar');という文はUiInstanceオブジェクトを作成すると同時に、そのタイトルも設定します。また、オブジェクトのサイズも続けて設定することが可能です。


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

パネルを表示する(何も動作はしません)短いスクリプトをもうひとつ紹介します。Gridオブジェクトの使い方と、もっと複雑なレイアウトを作成するためのsetWidgetメソッドの使い方です。 さらに、テキストボックスを作成して、それらにラベルを付ける方法についても説明します。テキストボックスには入力できますが、ボタンを押しても何もしません。

3×2のグリッドサイズはvar mygrid = myapp.createGrid(3, 2);で定義されます。各setWidgetメソッドはグリッド内のそれぞれの位置に表示されるようにその要素を定義されています。 ポジションの定義はゼロベースのインデックスを使用すること、行は1、2、3ではなく0、1、2という数値で識別されていることに注意してください。


function
demoUI() { 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);
return
myapp; }


サーバ・ハンドラーの利用

ユーザーインターフェイス要素の作成セクションの2つのスクリプトは、さまざまなコントロールを持つパネルを表示しますが、何もしません。 ユーザからの入力を受け入れ、ユーザーインターフェイスを更新できれば、ユーザーインターフェイスの利用も現実のものとなります。

ここでのサンプルは、ラベルが見えるようにしてクリックされているボタンに応答する例です。


function
doGet(e) {
var
app = UiApp.createApplication();
var
button = app.createButton(
'Click Me'
); app.add(button);
var
label = app.createLabel(
'The button was clicked.'
) .setId('statusLabel') .setVisible(
false
); app.add(label);
var
handler = app.createServerHandler(
'myClickHandler'
); button.addClickHandler(handler);
return
app; }
function
myClickHandler(e) { var app =
UiApp.
getActiveApplication();
var
label = app.getElementById(
'statusLabel'
); label.setVisible(
true
); app.close();
return
app; }

doGetメソッドは、ユーザーがスクリプトが設置されたURLにアクセスした時に実行されているものです。この単純な例ではこのような使用され方ではありませんが、doGetがパラメーターeを持つことを覚えてください。 このパラメーターeは、URLのクエリ文字列で渡されたすべての情報を含んでいます。詳細は下のdoGetパラメーターを参考にしてください。


  
var
handler = app.createServerHandler(
'myClickHandler'
); button.addClickHandler(handler);

var handler = app.createServerHandler('myClickHandler');という命令は、appというUiInstanceアプリケーションの一部として、ハンドラーと呼ばれるサーバー側のクリックハンドラーオブジェクトを作成します。 クリックハンドラーは、マウスクリックに応答してアクションを実行します。Server-sideとは、アクションがサーバ(この場合はGoogle.Apps.Scriptサーバ)によって実行されることです。 また、引数('myClickHandler')はハンドラーのアクションが関数myClickHandler()を実行することを意味しています。

ボタンには複数のクリックハンドラーを追加することができます。クリックハンドラーへの呼び出しは非同期です。つまり、ブラウザはサーバーにclickハンドラ関数を実行することを要求した後、応答を待たないですぐにコードの次の行に移っているということです。 ブラウザのJavaScriptがシングルスレッドであることは重要です。もし、コードがサーバーの応答を待っていたら、応答が返ってくるまでユーザーがアプリのボタンをクリックしたり他のどのようなことを試みても何の反応も示さないからです。 また、これはサーバ側の関数呼び出しが、期待した順序で実行されないことをも意味します。

button.addClickHandler(handler);命令は、既に定義されたボタンと名づけられたボタンオブジェクトにclickハンドラーを関連付けています。

後で見るように、ラベルウィジェット上のSETIDを('statusLabel')を呼び出すことによって、myClickHandlerでそのIDを指定してアクセスすることができます。

スクリプトの2つ目の関数myClickHandler()は、アクティブなアプリケーションへの参照と、doGetメソッド内でstatusLabelに設定したIDを持つラベルへのアクセスを取得します。 関数はそのラベルへのアクセス権を持つと、それを表示するためにsetVisible(true)を呼び出すことができます。 そして最後に関数は、アプリケーションのアプリを閉じてスクリプトを出発点に返します。

ここに長く複雑なスクリプトがあります。このスクリプトは、パネル上のテキストフィールドからいくつかの情報を収集して、スプレッドシートにその情報を書き込みます。 詳細はインラインコメントを参照してください。


function
doGet(e) {
var
doc =
SpreadsheetApp.
openById(SPREADSHEET_ID_GOES_HERE);
var
app =
UiApp.
createApplication().setTitle(
'New app'
);
// 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
// The setName method will make those widgets available by
// the given name to the server handlers later
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.createServerHandler(
'b'
); handler.addCallbackElement(grid); button.addClickHandler(handler);
// Add the button to the panel and the panel to the application, then display the application app
panel.add(button); app.add(panel);
return
app; }
// Function that records the values in a Spreadsheet
function
b(e) {
var
doc = SpreadsheetApp.openById(SPREADSHEET_ID_GOES_HERE);
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
// You can access e.parameter.userName because you used setName('userName') above and
// also added the grid containing those widgets as a callback element to the server
// handler.
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 UiInstance 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
doGet(e) {
var
doc =
SpreadsheetApp.
openById(SPREADSHEET_ID_GOES_HERE);
var
app =
UiApp.
createApplication().setTitle(
'New app'
);
// 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);
return
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.
openById(SPREADSHEET_ID_GOES_HERE);
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 パラメーター ] --

doGetメソッドは、WebアプリのURLにクエリ文字列パラメータを渡したい場合に便利な2つのパラメータを持ちます。最初のパラメータはクエリ文字列で、その値はURLに付加されたクエリ文字列の値を含む文字列になります。 例えば、その値は a = 1 & b = 2 & c = 3ように見えるでしょう。 第二パラメータは、パラメータと呼ばれ、各パラメータと値のペアを含むオブジェクトです。その値は下のように見えます。


{
"a"
:
"1"
,
"b"
:
"2"
,
"c"
:
3
}



クライアント・ハンドラーの利用

前セクションで取り上げたクリック・ハンドラーはサーバー側のハンドラーです。このクリック・ハンドラーはユーザーのブラウザからサーバーへ行き、そしてまたブラウザーへ戻ってくる往復運動を必要とするので、 いくつかの状況の下では十分な反応が得られません。一方のクライアント・ハンドラーはサーバー接続なしに、スクリプトにブラウザ内でイベントへの反応をさせることができます。 イベントに対して何を応答させられるかは、前もって定義された共通のアクションの組み合わせによって限定されます。しかし、アプリケーションの応答はもっと柔軟性に富んだものにできるのです。
前例では、ユーザーがsubmitボタンを何回かクリックすれば、それに応じてsubmit機能が何回も呼び出されることになります。これではネットワーク接続が低速である場合は深刻な問題となり、ボタンクリックのための 即時フィードバックの取得を得られません。

この問題を解決するために、サーバーを呼び出すことなくブラウザ上で実行されるハンドラを作成することができます。クライアント・ハンドラを利用すれば、アプリケーションはGoogle.Apps.Scriptサーバーとの往復を実行することなく、ブラウザ上のイベントに応答できます。 これらクライアント側のハンドラーは、セキュリティ上の理由から小さなセットのアクションに限定されますが、上で取り上げたような一般的な多くの問題を解決します。

同様の例ですが、アプリ内でユーザーに即座にフィードバックを提供したい場合があります。ユーザーが数値の予想されるテキストを入力したところを想像してみてください。 理想としては、フォーム送信がされるまで待つ代わりに、値を入力することをユーザーに警告したいところです。単純かつ一般的な各キーストロークが、サーバーのイベントハンドラーを持つなどということは明らかに行き過ぎです。 現在これらのケース用に、Google.Apps.Scriptの新しいクライアントハンドラーとバリデーターがサポートしています!

次は、ユーザーが“Hello world”メッセージを表示するボタンクリックを可能にさせるものです。


function
doGet() {
var
app =
UiApp.
createApplication();
var
button = app.createButton(
"Say Hello"
);
// Create a label with the "Hello World!" text and hide it for now
var
label = app.createLabel(
"Hello World!"
).setVisible(
false
);
// Create a new handler that does not require the server.
// We give the handler two actions to perform on different targets.
// The first action disables the widget that invokes the handler
// and the second displays the label.
var
handler = app.createClientHandler().forEventSource().setEnabled(
false
).forTargets( label).setVisible(
true
);
// Add our new handler to be invoked when the button is clicked
button.addClickHandler(handler); app.add(button); app.add(label);
return
app; }

上の例のクライアント・ハンドラーは2段階のステップで構成されています。

  1. サーバ・ハンドラーを作成する場合と同じようにクライアント・ハンドラーを作成します。
  2. このハンドラーのターゲット・ウィジェットを定義します。ターゲット・ウィジェットはハンドラーがアクションを取っているウィジェットです。次の2つの方法のいずれかでハンドラーのターゲットを設定します。
    (a);ターゲット・ウィジェットを定義するためにforTargetsメソッドを用います。
    (b);ウィジェットに自身をクライアント・ハンドラーに接続するようにさせるforEventSourceメソッドを使用します。

上記の例では、イベントソースであるハンドラーのターゲットを設定し、それがクリックされたボタンに適用されることになります。最後に、ハンドラーが実行するアクションを定義します(この場合はsetEnabled(false)を使用してボタンクリックを無効にします)。 setEnabledは別として、setStyleAttributeを利用すればスタイル変更ができ、setTextを利用すればテキスト変更が可能です。
1個のクライアント・ハンドラーで複数のアクション(それらを結びつけるだけで)を実行することができます。また、あるアクションをワンセットのウィジェットに適応させたり、他のウィジェットセットにターゲット変更することも可能です。 ここの例ではボタンを無効にするとともに、setVisible使用してラベルを表示するように(ハンドラ呼び出されたときに)設定しています。



バリデータの利用

バリデータは呼び出される前に、クライアントとサーバーの両方のハンドラーの単純な条件チェックをすることができます。たとえば、ユーザによって与えられた2つの数値を加算する、単純な次のようなアプリケーションは、 テキストボックスの両方に数字が含まれている場合のみ呼び出されていることを確認するバリデータが使用されています。


function
doGet() {
var
app =
UiApp.
createApplication();
// Create input boxes and button
var
textBoxA = app.createTextBox().setId(
'textBoxA'
).setName(
'textBoxA'
);
var
textBoxB = app.createTextBox().setId('textBoxB').setName(
'textBoxB'
);
var
addButton = app.createButton(
"Add"
);
// Create a handler to call the adding function
// Two validations are added to this handler so that it will
// only invoke 'add' if both textBoxA and textBoxB contain
// numbers
var
handler = app.createServerClickHandler(
'add'
).validateNumber(textBoxA).validateNumber( textBoxB).addCallbackElement(textBoxA).addCallbackElement(textBoxB); addButton.addClickHandler(handler); app.add(textBoxA); app.add(textBoxB); app.add(addButton);
return
app; }
function
add(e) {
var
app =
UiApp.
getActiveApplication();
var
result = parseFloat(e.parameter.textBoxA) + parseFloat(e.parameter.textBoxB);
var
newResultLabel = app.createLabel(
"Result is: "
+ result); app.add(newResultLabel);
return
app; }

異なるタスクの選択と実行のためのバリデータは様々です。定義内の特定の長さの数値、整数型、メールアドレスなどの入力を確認できます。また、一般的な正規表現を使用することができ、それぞれのバリデータは最終的には入力を拒否できるようになっています。 バリデータは、クライアントとサーバーのハンドラーの両方で動作することに注意してください。

バリデータおよびクライアント・ハンドラーは一緒に動作すればベストの状態になります。たとえば上の例で、”追加(Add)”ボタンの入力値が数値で無いときには無効にする必要があります。 エラーメッセージを表示することで、ボタンがなぜ無効になっているかをユーザーに知らせるようにしたいと思います。このためには、以下の方法でサーバー・ハンドラーとクライアント・ハンドラー、さらにバリデータを組み合わせます。


function
doGet() {
var
app =
UiApp.
createApplication(); // Create input boxes and button.
var
textBoxA = app.createTextBox().setId(
'textBoxA'
).setName(
'textBoxA'
);
var
textBoxB = app.createTextBox().setId(
'textBoxB'
).setName(
'textBoxB'
);
var
addButton = app.createButton(
"Add"
).setEnabled(
false
);
var
label = app.createLabel(
"Please input two numbers"
);
// Create a handler to call the adding function.
// Two validations are added to this handler so that it will
// only invoke 'add' if both textBoxA and textBoxB contain
// numbers.
var
handler = app.createServerClickHandler(
'add'
).validateNumber(textBoxA).validateNumber( textBoxB).addCallbackElement(textBoxA).addCallbackElement(textBoxB);
// Create a handler to enable the button if all input is legal
var
onValidInput = app.createClientHandler().validateNumber(textBoxA).validateNumber(textBoxB).forTargets( addButton).setEnabled(
true
).forTargets(label).setVisible(
false
);
// Create a handler to mark invalid input in textBoxA and disable the button
var
onInvalidInput1 = app.createClientHandler().validateNotNumber(textBoxA).forTargets(addButton).setEnabled( false).forTargets(textBoxA).setStyleAttribute(
"color", "red"
).forTargets( label).setVisible(
true
);
// Create a handler to mark the input in textBoxA as valid
var
onValidInput1 = app.createClientHandler().validateNumber(textBoxA).forTargets(textBoxA).setStyleAttribute(
"color", "black"
);
// Create a handler to mark invalid input in textBoxB and disable the button
var
onInvalidInput2 = app.createClientHandler().validateNotNumber(textBoxB).forTargets(addButton).setEnabled(
false
).forTargets(textBoxB).setStyleAttribute(
"color", "red"
).forTargets( label).setVisible(
true
);
// Create a handler to mark the input in textBoxB as valid
var
onValidInput2 = app.createClientHandler().validateNumber(textBoxB).forTargets(textBoxB).setStyleAttribute(
"color", "black"
);
// Add all the handlers to be called when the user types in the text boxes
textBoxA.addKeyUpHandler(onInvalidInput1); textBoxB.addKeyUpHandler(onInvalidInput2); textBoxA.addKeyUpHandler(onValidInput1); textBoxB.addKeyUpHandler(onValidInput2); textBoxA.addKeyUpHandler(onValidInput); textBoxB.addKeyUpHandler(onValidInput); addButton.addClickHandler(handler); app.add(textBoxA); app.add(textBoxB); app.add(addButton); app.add(label);
return
app; }
function
add(e) {
var
app = UiApp.getActiveApplication();
var
result = parseFloat(e.parameter.textBoxA) + parseFloat(e.parameter.textBoxB);
var
newResultLabel = app.createLabel(
"Result is: "
+ result); app.add(newResultLabel);
return
app; }


フォームの利用

サーバー・ハンドラーを使用しないで、FormPanelを代替作成することによってフォームを利用したくなるケースがあります。FormPanelは、サーバーにフォームの値をsubmitするSubmitButtonと一緒に使用することができます。 setName関数を所持している(あるいは、名前を与えられた)パネルのすべての子(直接または、サブパネルの子供でも)は、フォームがsubmitされたときにサーバーへ送信すべき値を持っています。例に示したように、submitは特別なdoPostメソッドの中で処理することができます。 このパネルには、少なくとも1つの直接の子ウィジェットが含まれていることに注意してください。もっと多くの子を追加するには、複数の子を含むことのできる異なるパネル子をこのパネルに作ります。
このウィジェットを使用する方法の例は次のとおりです。


function
doGet() {
var
app =
UiApp.
createApplication();
var
form = app.createFormPanel();
var
flow = app.createFlowPanel(); flow.add(app.createTextBox().setName(
"textBox"
)); flow.add(app.createListBox().setName(
"listBox"
).addItem(
"option 1"
).addItem(
"option 2"
)); flow.add(app.createSubmitButton(
"Submit"
)); form.add(flow); app.add(form);
return
app; }
function
doPost(eventInfo) {
var
app =
UiApp.
getActiveApplication(); app.add(app.createLabel(
"Form submitted. The text box's value was '"
+ eventInfo.parameter.textBox +
"' and the list box's value was '"
+ eventInfo.parameter.listBox +
"'"
));
return
app; }


Webアプリとしてユーザーインターフェイスを設置

UIサービスを使用して構築されたユーザーインターフェイスを持つスクリプトは、Webアプリとして設置することができます。Webアプリとしてスクリプトを設置するためのプロセスは、Web Appsドキュメントに説明されています。 要するに、スクリプトの実行者をあなた(スクリプトの所有者)とするか、またはWebアプリにアクセスするアクティブユーザーとするのか、そして誰にアクセスを許可するのかを考慮して、設置したいと思うスクリプトのバージョンを選択することです。 スクリプトは特別な名前のdoGet関数を持つWebアプリとして設置可能です。doGet関数は、ユーザーがWebアプリのURLにアクセスしたときに実行される関数です。 doGetメソッド関数は常にUiInstanceオブジェクトを返します。



スプレッドシートからユーザー・インターフェイスを表示

スタンドアロンのWebアプリとしてユーザー・インターファイスを配置する代わりに、スプレッドシートからcontainer-boundスクリプトを作成してそこに表示させることができます。 これは、doGet関数を見つけて単純に呼び出しを置き換えるだけで可能です。


return
app;

この後に続けてください。


var
spreadsheet =
SpreadsheetApp.
getActiveSpreadsheet(); spreadsheet.show(app);

appとは返されたUiInstanceオブジェクトの変数名です。さらに、スプレッドシートからユーザーインターフェイスを表示したいときに、関数にdoGet名を付与する必要はありません。 代わりに、displayMyUiような名前で呼び出した後、表示したい時にはその関数を直接呼び出すことができます。 ユーザーインターフェイスがスプレッドシートから表示されている場合、スクリプトはスプレッドシートにアクセスしているユーザーとして実行されます。



2012-10-27

pageTOP