Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

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

自社でオレオレ見積・請求書フォーマットを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>

こんな感じに

f:id:shuzo_kino:20180904232552p:plain