GUI ビルダーによるユーザーインターフェイス作成 (3/6)
作成:2011-06-27 08:06
更新:2011-11-04 15:53
更新:2011-11-04 15:53
■GUIのオープンとクローズ
では、作成したGUIを実際に使ってみることにしましょう。ここでは、GUIを表示する関数を用意し、この中で現在開いているシートにGUIを表示させることにしましょう。
下のリスト欄に、簡単なサンプルコードを挙げておきます。記述したら、myFunction関数を実行してみてください。スプレッドシートのシート状に、先ほど作成したGUIウインドウが現れます。ボタンをクリックすると、ウインドウは消えます。意外と簡単にGUIが使えることがわかりますね。
GUI画面は、このGUIアプリケーションのオブジェクトを作成し、そこにGUIのデータを組み込んでから、スプレッドシートなどに表示させる、という手順になります。まず、UiAppからUiInstanceを作成しましょう。これは以下のように行います。
下のリスト欄に、簡単なサンプルコードを挙げておきます。記述したら、myFunction関数を実行してみてください。スプレッドシートのシート状に、先ほど作成したGUIウインドウが現れます。ボタンをクリックすると、ウインドウは消えます。意外と簡単に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");GUIコンポーネントは、UiInstanceのloadComponentを使って取得します。引数には、ロードするGUIデータの名前を指定します(Gui ビルダーで保存した名前です)。そして、取得したオブジェクトを、UiInstanceオブジェクトのaddを使ってUiInstanceに組み込みます。――これで、GUIを利用するための準備は整いました。
app.add(gui);
sheet.show(app);後は、用意できたUiInstanceを表示するだけです。これは、あらかじめ用意しておいたSpreadsheetオブジェクトのshowメソッドを使います。引数にUiInstanceオブジェクトを渡せば、このアプリケーションが指定のスプレッドシート上に表示されます。
●GUIのクローズ
続いて、ボタンをクリックすると呼び出されるonClickButton関数です。ここでは、表示されたGUIを閉じています。――この「表示されているGUI」というのは、実はUiInstanceでしたね。ということは、このUiInstanceを取得して閉じればよいわけです。var app = UiApp.getActiveApplication();現在、使用しているUiInstanceは、UiApp.getActiveApplicationで得ることができます。これでオブジェクトを取得したら、これをクローズします。
app.close();クローズは、UiInstanceのcloseメソッドを呼び出すだけです。これでUiInstanceが閉じられます。――が、これで終わりではありません。最後に、この「閉じたUiInstance」をreturnしないといけません。これを忘れるとGUIは閉じられないので注意してください。
return app;
(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; }
※関連コンテンツ
「初心者のためのGoogle Apps Scriptプログラミング入門」に戻る