Google SpreadSheetのデータ入力支援サイドバーをつくってみる　その１：とりあえずサイドバー

自社でオレオレ見積・請求書フォーマットをGoogle Sheet上で作って活用しています。
そこそこ手間が減らせているのですが、今のところ書類番号は手入力です。
今回はこれを社内ルールにしたがって宜しくやってくれるやつを考えてみます。

実際のところ

ターゲットのspreadsheetから新規のGoogle Scriptをおこし、
同一ディレクトリに"code.gs"と"page.html"を用意します。

code.gs

処理を担当するのはこちら。
メニューで必要に応じて起動する方式でやってみます。

function onOpen() {
  //サイドメニュー表示
  SpreadsheetApp.getUi() 
      .createMenu('Custom Menu')
      .addItem('Show sidebar', 'showSidebar')
      .addToUi();
}

function showSidebar() {
  //サイドバー
  var html = HtmlService.createHtmlOutputFromFile('Page')
      .setTitle('My custom sidebar')
      .setWidth(300); //幅300px
  SpreadsheetApp.getUi() 
      .showSidebar(html);
}

page.html

なんの変哲もないHello, Worldな画面。
閉じる場合は"google.script.host.close()"を呼び出すみたいですね。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <p>Hello, world!</p>
    <hr/>
    <input type="button" value="Close" onclick="google.script.host.close()" />
  </body>

</html>