Google Apps Script Advent Calendar 2012の11日目です。
今日から3日間誰も入ってないので、このまま入らないようならGASのUIの話をしていきたいと思います。
というか3日間で書ききれないので多分もっと書きます。

今日は最も古くからあるUiAppの話からしていきたいと思います。

UiAppの表示の仕方

GASではUIを持ったアプリケーションを開発できます。
作ったアプリケーションは

Spreadsheet上に表示する
Google Sitesに埋め込む
独立したWebアプリケーションとして表示する

という3つの場所で利用できます。
2つ目と3つ目のやり方はほぼ一緒なのですが、1つ目だけ少しやり方が違うので注意が必要です。
それでは簡単にやり方を説明していきます。

Spreadsheet上に表示する

Spreadsheet上に表示する場合はSpreadsheet#show(UiInstance)というメソッドを利用します。
UiInstanceはUiAppというサービスから作成します。
以下に簡単な例を書きます。なおこのスクリプトはSpreadsheet上からGAS Editorを開いて作成してください。

Spreadsheet上に表示する.gs

function showUi(){

  var uiapp = UiApp.createApplication().setTitle("Hello World");

  var label = uiapp.createLabel("Hello World");
  uiapp.add(label);

  SpreadsheetApp.getActive().show(uiapp);  
}

あとはこのメソッドを起動するとSpreadsheet上にUIが表示されます。

Google Sitesに埋め込む & 独立したWebアプリケーションとして表示する

Sitesに埋め込んだり、Webアプリケーションとして表示する場合はどちらもほぼやり方は一緒です。
大まかに書くと

UiInstanceを返却するdoGetメソッドを作成
バージョンを作成
アプリケーションとして公開
Sitesの場合はSitesに埋め込み

です。

UiInstanceを返却するdoGetメソッドを作成

まず、doGet(e)というメソッドを利用してUiInstanceを返却するメソッドを作成します。

doGet.gs

function doGet(e) {

  var uiapp = UiApp.createApplication().setTitle("Hello World");

  var label = uiapp.createLabel("Hello World");
  uiapp.add(label);

  return uiapp;
}

上のSpreadsheet上に表示する場合のメソッドから名前と返却値を変えただけですね。

バージョンを作成

次はバージョンを作成します。以前ライブラリの回で説明したように適当にバージョンを作成してください。

アプリケーションとして公開

次はアプリケーションを公開します。

メニューから「公開」→「Webアプリケーションとして導入」を選択
プロジェクトバージョンは「バージョンを作成」で作成したバージョンを選択します。
アプリケーションとして公開は各種サービス(GmailAppとか)を誰として実行するかを選択します。GmailApp等を利用していて、自分にしてしまうと自分のメールの中身が見られてしますので注意してください。
アプリケーションにアクセスできるユーザー:は誰がアプリケーションにアクセスできるかを選択できます。
上記を設定したら「導入」ボタンをクリックします。
現在のウェブアプリケーションの URL:にアプリケーションのURLが表示されているのでそこにアクセスしてみてくださいアプリケーションが見れます。
Sitesに埋め込む場合は埋め込みたいSitesのページに行き編集モードにして、左上にある挿入メニューから「Appsスクリプトガジェット」を選択して下さい。

なお通常バージョンを作成したように、doGetで表示するUIやコードは「バージョン固定した時のUIやコード」になります。
つまりプログラムを変更し6.のURLで画面を表示してもバージョンを固定した時点のプログラムが表示されます。

ただそれでは開発がしづらいので6.のところで「最新のコード」というリンクがあるのでそれをクリックしてUIを表示すると、
最新のコードでUIを表示できます。
なおこのURLは「公開」→「Webアプリケーションとして導入」を再度表示しても取得できます。

小話

UiAppとGWT

UiAppで各Ui部品を利用する場合createXxxというメソッドを利用します。
公式ドキュメントにも書いてありますが、UiAppは裏側でGWTというJavaをJavascriptに変換するライブラリを利用しています。
※関係無いですが著者はGWT-Bootstrapというライブラリを作ったりしています。

公式ドキュメントにはどのUI部品がどのような見た目かが書いてないのでわかりにくいですが、
GWT側のドキュメントやサンプルには書いてあるので見てみてください。

がGWTをやると軽く死ねるのでおすすめしません( ｰ`дｰ´)ｷﾘｯ
こういう見た目になるんだなぁーぐらいで見ておくと幸せです。

まとめ

今日は初歩の初歩を書きました。
次回はもう少し踏み込んでよく使ってるUiAppの自作フレームワークを書きたいと思います。

GASのUI① UiAppの基礎