Google Apps Scriptでサイドバーを作る方法のはじめの一歩の概要編

2018.11.122018.11.13

photo credit: Can Pac Swire A couple, a dog, a scooter and a side-car via photopin (license)

みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。

皆さん、スプレッドシートなどで作業されているときに、右側にニュッと表示されるパネルあるりますよね、使ったことありますか？

あれね、サイドバーっていうんです。

例えばスプレッドシートであれば

グラフの作成や設定
ピボットテーブルの作成や設定
交互の表示色の設定
データ探索

など、作業を手助けする色々な提供されているんですね。

それで、そのサイドバー。GASで自作することができるんです。

ということで、今回からシリーズで、Google Apps Scriptでサイドバーを作成する方法についてお伝えしていきます。

まず、初回としてGASでサイドバーを作成する前にまず読んで起きたい概要として、サイドバーって何？その作り方は？といったことをお伝えします。

では、行ってみましょう！

サイドバーとその作り方
翻訳サイドバーを作ろう
まとめ
連載目次：GASで初めてのサイドバーを作ろう！

サイドバーとその作り方

サイドバーはG Suiteのアプリケーションで使用できる画面右側に表示される操作パネルです。

例えば、よく見るのでいうとスプレッドシートの「グラフエディタ」がありますよね

これです。

つまり、ユーザーインターフェースの一種ですね。

それをGASを使ってちょちょっと作ることができるというわけです。

サイドバーを作れるサービス

サイドバーは以下のアプリケーションに関して作成することができます。

スプレッドシート
ドキュメント
スライド
フォーム

作成する場合は、上記サービスのコンテナバインドスクリプトで作る必要があります。

HTMLサービスを使って作る

サイドバーには以下のような部品を配置することができます。

ラベル
テキストボックス
プルダウンリスト
チェックボックス
ラジオボタン
タブ
ボタン
など

これらの部品はどのように実現するかというと、HTMLサービスで作るんですね。

したがって、プロジェクトには通常のGASスクリプトを記述するファイル（.gs）だけでなく、HTML関連のファイル（.html）も作成する必要があります。

具体的には、GASに加えて

HTML: 部品を配置する
CSS: 配置した部品のスタイルを設定する
JavaScript（フロント側）: 部品の操作やイベントに応じて処理を行う

のスキルを組み合わせて作成していくことになります。

まあ、この辺は一気にやると大変なので、少しずつできる範囲から進めていけばOKです。このシリーズが役に立つと思います。

サイドバーはモードレス

サイドバーの大きな特徴の一つとしてモードレスであるという点があります。

モードレスというのは、UIを表示している間もアプリケーションが操作可能であるということです。

ユーザーインターフェースの種類の代表として「ダイアログ」というのがあるのですが、そちらは一般的にモーダルです。

モーダルでは、UI表示している間はアプリケーションの他の操作ができないのです。

※ダイアログも自作でき、モードレスで作成することもできますが、モードレスのダイアログは作成することは推奨されていません。

アドオンとして配布できる

作成したサイドバーは個人で使うだけでなく、同一ドメイン内や全世界に対してアドオン化して公開をすることができます。

チーム内でよく行う操作があれば、それをアドオン化することで、組織全体の業務効率アップを図ることができます。

翻訳サイドバーを作ろう

本シリーズで目指すのは以下のようなドキュメントの翻訳サイドバーです。

「Translation」の枠に日本語を入力して「Translate」ボタンを押すと、テキストボックス内の文字列が英語に翻訳されます。

「Insert」ボタンを押すと、テキストボックス内の文字列が、ドキュメントのカーソル位置に挿入される、というものです。

あと、メニューにオリジナルの「サイドバー」というメニューを追加して、そこから翻訳サイドバーを開けるようにもします。

ご存知の方はお気づきと思いますが、Vue.jsもちょっと使ってみたいと思います。

超簡単なステップを踏みながら、ゆっくり着実に作成していきますよ。

まとめ

以上、サイバーとは何か、またGoogle Apps Scriptでサイドバーの作り方の概要についてお伝えしました。

少しだけステップがありますが、超簡単なところから一つずつ進めていきますので、ぜひトライしてみてください。

次回は、サイドバーを表示する最も簡単なスクリプトを紹介します。

Google Apps Scriptで最も簡単なサイドバーを作成する方法

Google Apps Scriptでサイドバーを作る方法についてシリーズでお伝えしております。今回は、新規のプロジェクトの作成から最も簡単なサイドバーをドキュメントに表示するところまでを紹介します。

どうぞお楽しみに！

連載目次：GASで初めてのサイドバーを作ろう！

Google Apps Scriptではスプレッドシートやドキュメントの業務を手助けするサイドバーを自作することができます。このシリーズではHTMLを学びながらサイドバーの作り方を易しく紹介していきます。