Posted at

スプレッドシートにサイドバーで目次を表示する


はじめに

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