はじめに
スプレッドシートのサイドバーという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