公式ガイドの「Dialogs and Sidebars in Google Apps」を制覇する！（その４）

Google Apps Script AdventCalendarの25日目の記事です。トリを飾るのがこの記事で良いかどうかは別として、
制覇して終わらないとタイトル通りにならないので、投稿しました！

CustomSidebar？

CustomDialogと同じく、HtmlServiceやUiAppを使って、UIを構築するカスタムのサイドバーです。
表示してもサーバ側の処理が止まることはなく、挙動はCustomDialogと同じ感覚で利用すればいいのではないでしょうか。ユーザの操作については、HtmlServiceの場合は、google.scriptのAPIを利用し、UiAppでは、ServerHandlerでやりとりさせます。（CustomDialogの時と全く同じ）

Google Document編

CustomDialogと同じようなコードが利用できます。最後のui.showSidebar()を使うことが大きな違いです。

コード.gs

// 事前にUiオブジェクトを取得しておく
var ui = DocumentApp.getUi();

function onOpen(e) {
  ui.createMenu("テストメニュー")
  .addItem("CustomSidebar表示", 'showCustomSidebar')
  .addToUi();
}

// 最初に承認が必要です。
function showCustomSidebar() {
  var html = HtmlService.createHtmlOutput('Hello, world! <input type="button" value="Close" onclick="google.script.host.close()" />')
  .setSandboxMode(HtmlService.SandboxMode.NATIVE)
  .setTitle("Custom Sidebar")
  .setWidth(400);
  
  ui.showSidebar(html);
}

Google Spreadsheet編

Spreadsheetは、公式サイトによると、現時点ではサポートされておらず、変換候補にもでてこないのですが、実際には、関数の定義はされていて、呼び出すことも可能です。
ということで、呼び出してみましたが、「この操作はサポートされていません。（行 2、ファイル「コード」）」となり、エラーメッセージが表示されて何も起こりません。onOpenなどのトリガーからの呼び出しだと、メッセージも表示されず、何もおこらないのでトリガーが起動していないだけなのかがわかりにくいです。

22:15追記：
Google Driveで新しいシートの設定（https://support.google.com/drive/answer/3541068）をして、
新しいシートを作成すれば、スプレッドシートにサイドバーが表示されます。
何も反応がない場合は、新しいシートに設定してからお試し下さい。

新しいシートの設定方法：

1. Google Driveの右上の歯車ボタン→設定をクリック
2. 左上の”編集”をクリックして、「新しいGoogleスプレッドシートを試してみる」にチェックを入れ、保存ボタンをクリック。
3. これにより、新規作成した時には新しいシートが作成されます。古いものはそのまま古いシートが開きます。

コード.gs

// 事前にUiオブジェクトを取得しておく
var ui = SpreadsheetApp.getUi();
//var ui = FormApp.getUi();

function onOpen(e) {
  ui.createMenu("テストメニュー")
  .addItem("CustomSidebar表示", 'showCustomSidebar')
  .addToUi();
}

// 最初に承認が必要です。
function showCustomSidebar() {
  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("CustomSidebar")
  .setWidth(400)
  .setHeight(300);         // setHeight()はSidebarでは無意味（縦いっぱいに表示される）

  ui.showSidebar(app);
}

// ダイアログのcloseボタンが押された時のコールバック
function onClick(e) {
  var app = UiApp.getActiveApplication();
  app.close();
  
  return app;
}

Google Form編

Formで使う時もCustomDialogの時と同じように使えます。

コード.gs

// 事前にUiオブジェクトを取得しておく
var ui = FormApp.getUi();

function onOpen(e) {
  ui.createMenu("テストメニュー")
  .addItem("CustomSidebar表示", 'showCustomSidebar')
  .addToUi();
}

// 最初に承認が必要です。
function showCustomSidebar() {
  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("CustomSidebar")
  .setWidth(400)
  .setHeight(300);
    
  ui.showSidebar(app);
}

// ダイアログのcloseボタンが押された時のコールバック
function onClick(e) {
  var app = UiApp.getActiveApplication();
  app.close();
  
  return app;
}