GUI ビルダーによるユーザーインターフェイス作成 (3/6)

では、作成したGUIを実際に使ってみることにしましょう。ここでは、GUIを表示する関数を用意し、この中で現在開いているシートにGUIを表示させることにしましょう。

下のリスト欄に、簡単なサンプルコードを挙げておきます。記述したら、myFunction関数を実行してみてください。スプレッドシートのシート状に、先ほど作成したGUIウインドウが現れます。ボタンをクリックすると、ウインドウは消えます。意外と簡単にGUIが使えることがわかりますね。


では、実行しているスクリプトを見ていきましょう。まずは、GUIを表示しているmyFunctionからです。GUIを利用する場合、まず最初に「UiInstance」というオブジェクトを用意します。これは、GUIのアプリケーションとなるUiAppから生成されるオブジェクトです。

GUI画面は、このGUIアプリケーションのオブジェクトを作成し、そこにGUIのデータを組み込んでから、スプレッドシートなどに表示させる、という手順になります。まず、UiAppからUiInstanceを作成しましょう。これは以下のように行います。

var app = UiApp.createApplication();

UiAppオブジェクトのcreateApplicationを呼び出してオブジェクトを作成します。続いて、このUiInstanceに組み込むGUIコンポーネントのオブジェクト（これが、先ほどGui ビルダーで作成したものになります）をロードし、UiInstanceに組み込みます。

var gui = app.loadComponent("MyGui");
app.add(gui);

GUIコンポーネントは、UiInstanceのloadComponentを使って取得します。引数には、ロードするGUIデータの名前を指定します（Gui ビルダーで保存した名前です）。そして、取得したオブジェクトを、UiInstanceオブジェクトのaddを使ってUiInstanceに組み込みます。――これで、GUIを利用するための準備は整いました。

sheet.show(app);

後は、用意できたUiInstanceを表示するだけです。これは、あらかじめ用意しておいたSpreadsheetオブジェクトのshowメソッドを使います。引数にUiInstanceオブジェクトを渡せば、このアプリケーションが指定のスプレッドシート上に表示されます。


続いて、ボタンをクリックすると呼び出されるonClickButton関数です。ここでは、表示されたGUIを閉じています。――この「表示されているGUI」というのは、実はUiInstanceでしたね。ということは、このUiInstanceを取得して閉じればよいわけです。

var app = UiApp.getActiveApplication();

現在、使用しているUiInstanceは、UiApp.getActiveApplicationで得ることができます。これでオブジェクトを取得したら、これをクローズします。

app.close();
return app;

クローズは、UiInstanceのcloseメソッドを呼び出すだけです。これでUiInstanceが閉じられます。――が、これで終わりではありません。最後に、この「閉じたUiInstance」をreturnしないといけません。これを忘れるとGUIは閉じられないので注意してください。

(by. SYODA-Tuyano.)

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

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

function myFunction() {
	var sheet = SpreadsheetApp.getActiveSpreadsheet(); 
	var app = UiApp.createApplication();
	var gui = app.loadComponent("MyGui");
	app.add(gui);
	sheet.show(app);
}


function onClickButton(e){
	var app = UiApp.getActiveApplication();
	app.close();
	return app;
}