Google Apps Scriptでスプレッドシート上にサイドバーを出す方法

Google Apps Script（GAS）を使って、スプレッドシート上にサイドバーを出す方法です。

サイドバーはスプレッドシートの右側に現れるダイアログで、グラフの書式設定とかでよく使われるものです。GASでこのサイドバーを出す方法について書き留めます。今回は下図のサイドバーが現れるところまでです。

[ad#top-1]

まずはサイドバーのデザインをHTMLで作る

スプレッドシートからスクリプトエディタを立ち上げた上でHTMLファイルを作成します。「ファイル」−「新規作成」−「HTMLファイル」を選択します。

HTMLファイル名を聞いてくるので任意のファイル名（拡張子抜き）を入力します。今回はindexとしました。

index.htmlというファイルが生成されます（下図左側）。今回はサイドバーを出すだけが目的なので、中身はとりあえずh1タグで「Hello World!」という文字を表示するのみとしました。

Google Apps Script側のソースコード

以下がGAS側のソースコードです。

function showSideBar() {
  var ui = SpreadsheetApp.getUi();
  var htmlOutput = HtmlService.createHtmlOutputFromFile('index');
  ui.showSidebar(htmlOutput);
}
 

 

index.htmlをcreateHtmlOutputFromFile()関数で読み込んで、showSidebar()関数でサイドバーとして出現させています。

実行してみる

上記showSideBar()スクリプトをスプレッドシート上で実行すると、以下の通りサイドバーが現れ、index.htmlの内容が現れます。

 

 - Google Apps Script, Google Dirve