ユーザーインターフェイスの構築Google Apps スクリプトは、情報を入手したり、表示するためのユーザーインターフェイスを構築できる。 スクリプトによって次に示す広範囲のユーザーインターフェイス要素を作り出す事ができる。
ユーザーインターフェイスI要素をまとめ上げた結果、ユーザーインターフェイスとしてそれは働くことになる。ユーザーインターフェイスを表示するには3つの方法がある:
インターフェースをどう表示させるか決めるための情報は,こちら Deciding Whether to Run a Script from a Spreadsheet or as a Service Google Apps スクリプトで莫大な数のユーザーインターフェイス要素を作り出す事ができる。 全ての利用可能なユーザーインターフェイスをみるには:
function myFunction() { ![]() こうすることによって利用可能なユーザーインターフェイスの要素が、必要な引数と一緒にリストに表示されるのが見えると思う。もしこれが見れないなら、多分コピーアンドペーストしたからだろう。オートコンプリートが働くためには app に続くピリオドをタイプする必要がある。ユーザーインターフェイスを表示するスクリプトを書く前に、次のことをすること:
ボタンとかダイアログボックスなどのユーザーインターフェイス要素を作る前に、それらを格納するため、UiApp アプリケーションオブジェクトが必要となる。そうしてから、ボタンや、パネル、ダイアログボックスなどをそこに追加することができる。 一般的な構文は次のようになる:
UiApp クラスのcreateApplication メソッドを呼び出して、myapp というアプリケーションオブジェクトを作る。var myapp = UiApp.createApplication(); ここでユーザーインターフェイスが作れるようになる。Press Meと表示されるボタンをここでは作る。 var mybutton = myapp.createButton('Press Me'); ボタンに表示させたい文字は、引数として、渡される。 パネルにボタンを表示させたいなら、垂直パネルを次で作ってみる。 var mypanel = myapp.createVerticalPanel(); 他にも、ポップアップパネル、スタックパネル、フォーカスパネルなどの様々なパネルがある。 パネルにボタンを表示するコードはこのようになる。 mypanel.add(mybutton); 次に、アプリケーションにパネルを加える。 myapp.add(mypanel); 最後に、Google Apps スクリプトにインターフェイスを表示するように命令する必要がある。 show(myapp); ユーザーインターフェイス要素は、好きな順序で作ることができる。その順番が、表示される順番になる。例えば、VerticalPaneオブジェクトをつくって、a,b,cの順で要素を加えてったとすると、その順番で、上から下に表示される。要素を作ることと、加えることは別々のステップで、別々の命令文が必要になる。 下のは、パネルにポタンを表示するだけの、短いスクリプトであり。それぞれのラインのコメントに詳細を記する。. function myAppFunction() { // 関数に名前をつける オブジェクトに値をセットするセッターメソッドは一緒につなげることができる。上のスクリプトの例では、 var myapp = UiApp.createApplication().setTitle('Here is the title bar').setHeight(50).setWidth(100); 次にパネルを表示するだけの短いスクリプトを書いてみる。GridオブジェクトとsetWidgetメソッドを使って、更に複雑なレイアウトを作ることができる。更にここではテキストボックスをつくりそこにラベルの表示の仕方も示す。ここでのテキストボックスにはテキストを入力できるが、ボタンを押しても何も起こらない。 var mygrid = myapp.createGrid(3, 2); グリッドサイズ3 x 2という意味である。そして ポジションは、ゼロを起点としているので、行は1,2,3ではなく0,1,2になることに注意する。 function demoUI() { ユーザーインターフェイス要素の作成でパネルに様々なコントロールの表示の仕方を学んだが、そのままのスクリプトでは何もしない。ユーザーインターフェイスをもっと役立つものにするには、ユーザーがインターフェイスを通じて入力した情報を元に、スプレッドシートが更新されるようにしたいところだ。 インターフェイスのアクションに反応して、スプレッドシートを更新する短いスクリプトを次に示す。セルA1の値を、ボタンをクリックする度に1つずつ増やしていく。 function foo() { スクリプトエディタにこれをコピーして実行してみると、ボタンをクリックする度に、パネルを再表示するために関数を再実行しなければならないことに気が付くことだろう。これはパネルをアクティブ状態で表示し続けるためのループ構造がスクリプトにないためである。この例では、パネルは 関数 var handler = app.createServerClickHandler('b'); var handler = app.createServerClickHandler('b');の部分で、 ボタンには、複数のクリックハンドラーを付け加える事ができる。それらは、並行して働くことになる。 button.addClickHandler(handler);の意味は、すでに定義されたbuttonオブジェクトにクリックハンドラーをくっつけるという意味。 二番目の関数 次に示すのは、もっと長くて複雑なスクリプトだ。パネルのテキストフィールドから情報を集め、スプレッドシートに書き込む。行間のコメントにこのスクリプトの解説が書いてある。 function foo() { 上のスクリプトを、exitを選ぶまで、何回でも使えるフォームに改良したものを次に示す。行間コメントに新たな命令文の詳細を記す。 function foo() { クライアントハンドラの使用前述のクリックハンドラーは、サーバーサイドハンドラーである。ユーザーのブラウザーからサーバーへ、またそこからブラウザーへ戻ってくる。そのため、状況によっては反応が遅すぎることになる。クライアントハンドラーはサーバーに接続することなく、ブラウザ内でスクリプトをイベントに反応させることができる。イベントに対して何ができるかは、前もって定義された共通アクションに制限されるがそれでも、appを機敏に反応するように作るような柔軟性は充分ある。前述の例では、submitボタンを押しただけ、submit関数を呼ぶことになる。これはネットワークが遅くて、ユーザーが即座にフィードバックを手に入れられない時に更に深刻な問題になることだろう。 この問題を解決するには、サーバーを介する事なくブラウザ上で実行されるハンドラーを作成することである。クライアントハンドラーを使うことによって、Google Appsスクリプトサーバーへいちいち飛ぶことなく、ブラウザのイベントを処理する事ができる。これらのクライアントサイドのハンドラーは、安全上の理由から複雑なアクションには対応していないが、多くの上記のような一般的な問題を解決することができる。 同様の例で、あなたのAppのユーザーに素早いレスポンスを与えたいケースを考える。例えば数字を入力する所で文字をユーザーが入力したとすると、送信した後じゃなくて、タイプしてる途中でユーザーに注意を促したいような時があると思う。サーバイベントハンドラはこのような単純で良く使われるような処理には重すぎる。Apps スクリプトの新クライアントハンドラーとバリデーターはこのような場合をサポートしてるよ! 次のシンプルなアプリケーションはユーザーがボタンをクリックすることで 、"Hello world”と表示します。 function doGet() { 上のクライアントハンドラー例は二つのステップを踏みます
上の例では、ハンドラーターゲットがイベントソース(ここではボタン)になるように設定した。そうすることによって、クリックされたボタンに適用される。最終的に、ハンドラーがとる処理を定義する。この場合は、 setEnabled(false) を使って、ボタンを無効化している。setEnabled とは別に、setStyleAttribute を使ってスタイルを変えることができるし、setText をつかってテキストを変えることもできる。一つのクライアントハンドラーは複数の処理を行うことができる。ただ繋げて書いていけばいい。更に、widgetごとに処理を変える為に、ターゲットを変えることさえできる。我々の例では、ボタンを無効化することに加えて、setVisible を使って、ラベルを表示するようにしてある。バリデーターはクライアントハンドラーとサーバーハンドラー両方において、それらが呼び出されれる前に単純なチェックを行う事ができるものです。例えば、次のアプリケーションはユーザーが入力した二つの数字を足すだけのものだが、バリデーターによって、両方のテキストボックスが数字であることが確認された時のみサーバーが呼び出されるようにしている。 function doGet() { 様々なバリデーターがそれぞれ違う仕事をするために存在する。入力が数字、整数、メールアドレスでそれらが特定の長さ又は、指定された範囲の値であるように確認することができる。更に正規表現も使うことができる。またNOT演算もできる。 追記)バリデーターはクライント、サーバーハンドラーいずれでも動く。 バリデーターとクライアントハンドラーはとても相性がいい。例えば上の追加した例では、Addボタンは入力が数字でない場合は無効化しておくべきだ。そしてユーザーにボタンが無効化されている理由を表示したほうがいい。そうするためには、サーバーハンドラー、クライアントハンドラー、バリデーター3つの力をあわせて以下のようにする。 function doGet() { スクリプトユーザーインターフェイスは、スプレッドシート又はサイト内から実行するか、サービスとして独立して実行させるか選択することができる。このセクションでは、それぞれの違いを説明し、どうやってサービスとしてユーザーインターフェイスを作るか教える。 ユーザーインターフェイスを表示するコードを書くときの心得
スクリプトを書いた後は、それをサービスとして発行します。発行する過程で、誰がそのスクリプトにアクセスできるのか設定します。
Updating a Spreadsheet from the User Interface,にある例では、ユーザーインターフェイスはスクリプトが置かれているスプレッドシートから表示されている。 次のコードは、ユーザーインターフェイスをどうやって表示するかを決めるものだ。 function showGui() { 独立サービスのユーザーインターフェイスを表示するための骨組みは以下のようになる。 function doGet(e) { 下のはユーザーインターフェイスを表示する二つの方法の比較表
サービスとしてスクリプトを発行するスクリプトをサービスとして発行し、スプレッドシートから閲覧するには
次の説明は、すでにサイト上でスクリプトを作製したという前提である。 Apps スクリプトガジェットをグーグルサイトに挿入して、サービスとして発行する
Google Apps スクリプトは。内部ではGoogle Web Toolkit(GWT)を使って、ユーザーインターフェイスの要素群を生成して、表示している。内側の仕組みまで詳しく知る必要はないが、もしGWTに馴染みがあるなら、Google Appsスクリプトにおいてどんなタイプのオブジェクトが利用可能で、どうsetterが働くかすでに知っていることと思う。例えば、GWT Grid クラスとGoogle Apps スクリプトにおいて、setWidgetメソッドを次のように呼ぶことができる。 setWidget(row, column, widget); GWTとGoogle Appsスクリプトにおいて幾つかの構文上の違いがある。GWTはJavaの構文を受け継ぎ、Google AppsスクリプトはJavaScriptを受け継いでる。例えば、次にGWTのコードを示してみる。 Grid g = new Grid(rows, cols); 次に同じ事をGoogle Apps スクリプトでやると var g = app.createGrid(rows, cols); GWTオブジェクトは |