1. ttyokoyama

    Posted

    ttyokoyama
Changes in title
+公式ガイドの「Dialogs and Sidebars in Google Apps」を制覇する!(その3)
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,108 @@
+## Custom Dialog?
+Custom DialogはHtmlServiceかUIAppを使って、Dialogの中身を構築して表示するものです。これは、Google Document、Spreadsheet、Formどれでも利用可能です。
+
+Custom DialogはPromptや、Alertと違って、サーバ側のスクリプトの処理を中断しないので、クライアントでの操作のHandlerを実装する必要があります。(何も実装しないと表示したまま動かないということ)
+
+HtmlServiceを使ってUIを表示する場合は、google.script.host.close()をJavaScriptで呼び出すことで、ダイアログを閉じることができます。UiAppを利用した場合は、UiInstance.close()を呼び出して、ダイアログを閉じます。(詳しくはSpreadsheetとFormAppのサンプルをごらんください。)
+
+また、表示する方法は、Ui.showDialog()を使うか、Spreadsheet.show()を呼び出すことでダイアログが表示されます。(Spreadsheetでは、Uiを取得する方法がありません)
+
+## Google Document編
+HtmlServiveを使ってUIを構築しています。これまでのサンプルと同じような感じで利用できます。
+
+```js:コード.gs
+// 事前にUiオブジェクトを取得しておく
+var ui = DocumentApp.getUi();
+
+function onOpen(e) {
+ ui.createMenu("テストメニュー")
+ .addItem("CustomDialog表示", 'showCustomDialog')
+ .addToUi();
+}
+
+// 最初に承認が必要です。
+function showCustomDialog() {
+ var html = HtmlService.createHtmlOutput('Hello, world! <input type="button" value="Close" onclick="google.script.host.close()" />')
+ .setSandboxMode(HtmlService.SandboxMode.NATIVE)
+ .setTitle("Custom Dialog")
+ .setWidth(400)
+ .setHeight(300);
+
+ ui.showDialog(html);
+}
+```
+
+## Google Spreadsheet編
+敢えて、UiAppを使ってカスタムダイアログにしています。HtmlServiceを使ってUIを構築する事ができますが、UiAppを使っても実現可能です。
+ただし、FormAppの例もUiAppを使っていますが、Spreadsheetの場合はUiを事前に取得することができない(SpreadsheetAppにはなぜかgetUi()が存在しない)のでSpreadsheet.show(obj)を使って、UIを表示させるようにします。
+
+```js:コード.gs
+function onOpen(e) {
+ var subMenus = [{name: "CustomDialog表示", functionName: "showCustomDialog"}];
+
+ SpreadsheetApp.getActiveSpreadsheet().addMenu("テストメニュー", subMenus);
+}
+
+// 最初に承認が必要です。
+function showCustomDialog() {
+ var app = UiApp.createApplication();
+ var panel = app.createHorizontalPanel();
+ var label = app.createLabel("Hello World!");
+ var button = app.createButton("Close", app.createServerHandler('onClick'));
+ panel.add(label);
+ panel.add(button);
+ app.add(panel);
+ app.setTitle("CustomDialog")
+ .setWidth(400)
+ .setHeight(300);
+
+ SpreadsheetApp.getActiveSpreadsheet().show(app);
+}
+
+// ダイアログのcloseボタンが押された時のコールバック
+function onClick(e) {
+ var app = UiApp.getActiveApplication();
+ app.close();
+
+ return app;
+}
+```
+
+## Google Form編
+Spreadsheetと同じくUiAppを使ってUIを構築しています。どちらがいいのかは好みが別れるところかもしれませんが、UiAppも以前よりも落ち着いてきたんだろうか。
+
+```js:コード.gs
+// 事前にUiオブジェクトを取得しておく
+var ui = FormApp.getUi();
+
+function onOpen(e) {
+ ui.createMenu("テストメニュー")
+ .addItem("CustomDialog表示", 'showCustomDialog')
+ .addToUi();
+}
+
+// 最初に承認が必要です。
+function showCustomDialog() {
+ var app = UiApp.createApplication();
+ var panel = app.createHorizontalPanel();
+ var label = app.createLabel("Hello World!");
+ var button = app.createButton("Close", app.createServerHandler('onClick'));
+ panel.add(label);
+ panel.add(button);
+ app.add(panel);
+ app.setTitle("CustomDialog")
+ .setWidth(400)
+ .setHeight(300);
+
+ ui.showDialog(app);
+}
+
+// ダイアログのcloseボタンが押された時のコールバック
+function onClick(e) {
+ var app = UiApp.getActiveApplication();
+ app.close();
+
+ return app;
+}
+```
+