グリッドパネル？ Grid

縦横格子状に自在に並べるにはグリッドパネルを使う。
createGridでグリッドパネルを作り出し、そこに色々配置してみる。

var app = UiApp.createApplication();
var grid = app.createGrid(4, 2);
grid.setWidget(0, 0, app.createLabel('Name'));
grid.setWidget(0, 1, app.createTextBox());
grid.setWidget(1, 0, app.createLabel('Address'));
grid.setWidget(1, 1, app.createTextBox());
grid.setWidget(2, 0, app.createLabel('Tel'));
grid.setWidget(2, 1, app.createTextBox());
grid.setWidget(3, 1, app.createButton('Submit'));
app.add(grid);

かなりフォームらしくできます。
これはかなりの表現をカバーできそうです。


でも、グリッドパネルとか言ったけど、これパネルじゃないね。

垂直パネル Vertical Panel

コンポーネントを縦に並べるには垂直パネルを使う。

createVerticalPanelで垂直パネルを作り出し、そこにbuttonを３つaddしてみる。

var app = UiApp.createApplication();
var vp = app.createVerticalPanel();
vp.add(app.createButton('Submit'));
vp.add(app.createButton('Submit'));
vp.add(app.createButton('Submit'));
app.add(vp);

UiAppにダイレクトにaddした場合にはbuttonなら横に並んだが、垂直パネルに入れるときちんと縦に並ぶのが確認できる。

水平パネル Horizontal Panel

コンポーネントを横に並べるには水平パネルを使う。
createHorizontalPanelで水平パネルを作り出し、そこにlabelを３つaddしてみる。

var app = UiApp.createApplication();
var hp =  app.createHorizontalPanel();
hp.add(app.createLabel('Label'));
hp.add(app.createLabel('Label'));
hp.add(app.createLabel('Label'));
app.add(hp);

UiAppにダイレクトにaddした場合にはlabelなら縦に並んだが、水平パネルに入れるときちんと横に並ぶのが確認できる。

ダイレクトパネル

ダイレクトパネル・・・
そんな名前のパネルはないんですが、UiAppに直接つっこむと、垂直に雑然と並ぶとのこと。

ボタンを３つほどaddしてみる。
縦に並ぶはずだが・・・

var app = UiApp.createApplication();
app.add(app.createButton('Submit'));
app.add(app.createButton('Submit'));
app.add(app.createButton('Submit'));

横に並ぶじゃねぇか、話が違う。

では、ラベルを３つほどaddしてみる。

var app = UiApp.createApplication();
app.add(app.createLabel('Label'));
app.add(app.createLabel('Label'));
app.add(app.createLabel('Label'));

今度はちゃんと？縦に並んだ。
よくわからないが、どうやらHTMLとよく似た挙動に見える。
つまりはbuttonはインラインだが、labelはブロック。

UIコンポーネントの配置

UiAppキャンパスに色々な部品が配置出来るのはわかった。
だけど配置を制御できなきゃダメだ。

配置について学ぶ。
次のことができるらしい。

・単に縦に並べる→直接UiAppにaddする
・createHorizontalPanelという水平パネルを作って横に並べる→水平パネルにaddして水平パネルはUiAppにaddする
・createGridという格子状パネルを作って縦横自在に並べる→格子状パネルにaddして格子状パネルはUiAppにaddする

まぁ図にするとこんな感じ

以下が代表的なパネル。

・Form Panel
・Horizontal Panel
・Vertical Panel
・Flow Panel

いまはこれぐらいでOK。

UIコンポーネントいろいろ

キャンパスことUiAppインスタンスにつっこむUIコンポーネントいろいろ

var app = UiApp.createApplication();

■ラベル
app.add(app.createLabel('First My Label'));

■ボタン
app.add(app.createButton('クリック'));

■サブミットボタン
app.add(app.createSubmitButton('送信する'));

■テキストボックス
app.add(app.createTextBox());

■テキストエリアボックス
app.add(app.createTextArea());

などなど。

もちろんもっとあってこれらの他にもまだまだある。
要はHTMLでいうところのフォーム一式のパーツが全てあるという感じ？

はっきり言って、こいつらは書けば描画される。ただそれだけのこと。
重要だけど、それだけでは何の価値もない。

そう、こいつらは使われて、イジられてなんぼなのだ。

ということは？いずれは対峙せねばならんイベントハンドラーというわけか。

UI は UiApp でつくる

UIはUiAppでつくるとのこと。
白いキャンパスを用意するようなものか。

var app = UiApp.createApplication();

感覚的には、このappに色々なUI部品をつっこんでいくということか。

var button = app.createButton('Submit');
app.add(button);

こんな風に。
ボタンを生成して、そいつをキャンパスにつっこんだ。

doGet ではじめる

Googleサイトにガジェットとして貼り付けるにせよ、スタンドアローンで実行させるにせよ、
基本は「doGet」ではじめる。

function doGet(e) {
  // UiAppインスタンスの生成
  var app = UiApp.createApplication();
  return app;
}

最後は必ずreturnすることは忘れるな。
何も返さんと何もしてはくれない。

doGetは予約関数
他には
doGet
doPost
onEdit
onInstall
onOpen
などがあるらしい。詳しくは知らない。

Google Apps Script でやりたいこと

やりたいこと。

・GUIを使わずにスクリプトのみでUiAppである程度自由自在に作れるようになること
・そのインターフェイスからある程度自由自在にスプレッドシートから出し入れできるようになること

これらができれば、

・スプレッドシートに並べたデータを自由にGoogleサイトに配置したり
・GoogleサイトからUIを通してデータををつっこんだり

ということが出来るようになるはず。

結果、既存機能では実現できないことが実装可能になるはず。
多分。

そうじゃないと、

Google Apps Script は面白い

正直に言おう。
Google Apps Script は面白い。
それだけで十分である。
取り組むには。

さて、作りたいものがある。
だが、レベル不足でどうやればいいかがさっぱりわからない。
なので、ちょっとずつ勉強しながらピースを埋めてみようと思う。

今のレベルを告白しておく。
・何ができるのかの一部を知っている
・詳細はわからないがうっすら全体像はわかる
・フォームからスプレッドシートに流れてきたら自動でメールを飛ばす程度は作ったことがある
つまりは初心者だ。