スクリプトによるGUIの生成 (1/5)

※ここで説明する「UiApp」オブジェクトは、現在、非推奨となっており、近い将来、廃止される予定です。Webアプリケーションの作成には、HtmlServiceを利用下さい。
（http://libro.tuyano.com/index3?id=926001）

GUI ビルダーは、GUIを簡単に作成できるツールですが、欠点もあります。まだ荒削りであるため、例えばいくつもの部品をパネルに組み込んだりすると、勝手に順番が変わったりすることがありますし、なにより動作が重く使い勝手も今ひとつです。

また、例えばフォームを送信すると自動的にフォーム部分が消えるようになっているため、送信後の表示などを作り込むことができませんし、実は「GUI ビルダーでは使えないGUIコンポーネント」というものもたくさんあったりするのです。

こうしたことを考えるなら、GUIを「スクリプトで作る」ということも頭に入れておく必要があるでしょう。GUI ビルダーで作成するGUIは、すべてスクリプトで作ることができます。というより、こっちが王道かも知れません。「スクリプトで全部書くのは面倒という人のために、ツールも用意してみました」というのがGUI ビルダーなのですから。

GUI ビルダーで使われるUIコンポーネント類は、すべてオブジェクトとして用意されています。これらのオブジェクトを作成して組み込んでいき、UiAppから生成したUiInstanceに組み込んで表示させれば、どんなGUIもスクリプトで作って利用することができるのです。

実際にやってみましょう。下のリスト欄に、ごく簡単なGUI画面作成のサンプル関数myFunctionを用意してみました。これを実行すれば、スプレッドシートで開いているシート上にテキストを表示したウインドウが現れます（閉じる機能はないので、リロードするなどしてください）。

ここでは、前回使ったVerticalPanelを使って、複数のLabelを縦に並べた画面を表示しています。まず、UiAppからUiInstanceを取得します。

var app = UiApp.createApplication();

続いて、VerticalPanelオブジェクトを作成し、appに追加します。

var panel = app.createVerticalPanel();
app.add(panel);

コンポーネントの作成は、UiInstanceに「create○○」といった名前のメソッドとして用意されています。Vertical Panelなら「createVerticalPanel」となるわけです。こうして作成したものを、addで組み込むだけです。

続けて、２つのLabelを作成し、VerticalPanelに組み込みます。１つ目は、フォントサイズ、背景色、マージンといった属性を変更しておきます。

var l1 = app.createLabel("This is Sample Page.");
l1.setStyleAttribute("font-size", "18pt");
l1.setStyleAttribute("background-color", "#CCCCFF");
l1.setStyleAttribute("margin", "10px");
panel.add(l1);
var l2 = app.createLabel("これは、スクリプトで作成したページです。");
panel.add(l2);

Labelの作成は、「createLabel」メソッドで行います。引数にテキストを渡すと、そのテキストを表示するLabelを作成します。作成後、プロパティの設定を行います。これは「setStyleAttribute」というメソッドを使います。

《コンポーネント》.setStyleAttribute( 属性名 , 値 );

このようにしてコンポーネントの属性を変更できます。これはGUI ビルダーでプロパティ設定したのをそのままスクリプトで行っているだけ、ですね。――最後にアクティブなスプレッドシートを取得し、UiInstanceを表示します。

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

コンポーネントの作成と組み込みさえわかれば、それほど難しいわけではありません。ここではスプレッドシートに表示しましたが、サービスとして公開する場合も基本的な流れは同じです。

下のリスト欄に、サービスを利用して、今のサンプルをWeb上に表示するよう修正した例もあげておきました。doGetで同じようにコンポーネントを作成していくだけです。サービスの場合、スプレッドシートにshowするような処理はなく、最後にreturn app;するだけです。こちらのほうが、より簡単ですね。（※実は、もっとシンプルなやり方もあります。これは、フォーム送信の後で、改めて）

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※スプレッドシートにGUIを表示する
function myFunction() {
    var app = UiApp.createApplication();
    var panel = app.createVerticalPanel();
    app.add(panel);
    var l1 = app.createLabel("This is Sample Page.");
    l1.setStyleAttribute("font-size", "18pt");
    l1.setStyleAttribute("background-color", "#CCCCFF");
    l1.setStyleAttribute("margin", "10px");
    panel.add(l1);
    var l2 = app.createLabel("これは、スクリプトで作成したページです。");
    panel.add(l2);
    var sheets = SpreadsheetApp.getActiveSpreadsheet();
    sheets.show(app);
}

※サービスでGUIを表示する
function doGet(e){
    var app = UiApp.createApplication();
    var panel = app.createVerticalPanel();
    app.add(panel);
    var l1 = app.createLabel("This is Sample Page.");
    l1.setStyleAttribute("font-size", "18pt");
    l1.setStyleAttribute("background-color", "#CCCCFF");
    l1.setStyleAttribute("margin", "10px");
    panel.add(l1);
    var l2 = app.createLabel("これは、スクリプトで作成したページです。");
    panel.add(l2);
    return app;
}