非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

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

   

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

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

広告

まずはサイドバーのデザインを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の内容が現れます。

 

ガジェット系ブログもよろしく

すまたすログ

ガジェット系ブログです。主にChromebookの情報やMyマシンのASUS Flip C434TAのレビューなどを書いています。その他IT機器のアプリのレビュー、たまに100円ショップなど。


スポンサーリンク

 - Google Apps Script, Google Dirve