はじめに

スプレッドシートのサイドバーというUIに触れる機会があったので、まとめついでにシートの目次機能を作ってみました。
秘伝のタレ的に運用されているものや、1つ1つのシート名が長いものでも目的のシートにサッと移動できます。

機能

メニュー > 便利機能 > 目次表示からサイドバーを開くことができる

サイドバーのボタンタップで対象のシートをアクティブにすることができる

シート名を絞り込み検索できる

先にまとめ

ソースをGitHubに上げています。
▽GitHub
https://github.com/panti310/SpreadsheetSidebarTOC
.clasp.jsonファイルにscirptIDを入れてclaspでpushすれば、そのシートで動かすことができます。

解説

ファイル構成

jQueryなどのライブラリはクライアント側のみで利用でき、gasはサーバー側のみで利用できます。最初は認識がごちゃまぜで???となりました。リクエストを投げる際にgoogle.script.runを使います。

google.script.runについて

サーバー側から配列返す際はJSON.stringifyでJSON文字列に整形し、クライアント側でJSON.parseします。
今回は省きましたが、withFailureHandler(function)で失敗時のハンドリングも可能です。
詳細なエラー内容を返してくれるのでアラートか何かで表示してあげると良いかも。
▽Class google.script.run (Client-side API)
https://developers.google.com/apps-script/guides/html/reference/run

さいごに

使い所が思いつかない

シートの操作をしながら常にサイドバーに表示しておきたいものって何があるんでしょう...進捗表示とか...？
サイドバー同様にhtmlで中身をゴリゴリ書けるDialogも用意されているので、そっちのほうが汎用性高そうです。
▽Dialogs and Sidebars in G Suite Documents
https://developers.google.com/apps-script/guides/dialogs
GitHubからcloneできるのありがたいです。

サイドバーの幅は変更できないっぽい

consoleから要素をいじくれば変更はできるものの、動的に生成する中で変更しようとしてもstyleが上書きされてしまって上手くいきませんでした。
▽stackoverflow - Setting the width of a Google Drive Add-on sidebar doesn't work
https://stackoverflow.com/questions/30145347/setting-the-width-of-a-google-drive-add-on-sidebar-doesnt-work