GASによる自作のサイドバーにCSSパッケージを適用する方法

Google Apps Script

photo credit: www.routexl.com Drone Delivery via photopin (license)

2018.11.162020.07.13

photo credit: www.routexl.com Drone Delivery via photopin (license)

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

シリーズでGoogle Apps Scriptでサイドバーを作る方法をお伝えしています。

前回の記事はコチラ。

GASでサイドバーを作るときに使用するいくつかのフォーム部品の作り方

Google Apps Scriptでサイドバーを作る方法をシリーズでお伝えしています。今回はラベル、ボタン、テキストエリアといったGASでサイドバーを作るときに使用するいくつかのフォーム部品の作り方をお伝えします。

サイドバーに使用するいくつかのフォーム部品の作り方をお伝えしました。

さて、今回は「スタイル」について考えていきます。

だって、だって…今、ちょっとダサいじゃないですか。

さすがにもう少しなんとかしたい…！

ということで、今回はGASによる自作のサイドバーにCSSパッケージを適用する方法です。

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

前回までのおさらい
サイドバーのスタイルを設定するには
CSSパッケージ for エディタアドオン
1. linkタグ：リンクする外部ソースの指定
2. CSSパッケージをリンクするだけではダメ
まとめ
連載目次：GASで初めてのサイドバーを作ろう！

前回までのおさらい

では、まず前回までのおさらいから。

サイドバーを表示するためのGASのスクリプト「コード.gs」はコチラ。

function showSidebar() {
  var htmlOutput = HtmlService.createHtmlOutputFromFile('index');
  DocumentApp.getUi().showSidebar(htmlOutput);
}

実行すると、バインドしているドキュメントにサイドバーを表示します。

そして、その表示内容を記述しているのがコチラのindex.html。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <label><b>Translation</b></label>
    <textarea></textarea>
    <button>Translate</button>
    <button>Insert</button>
  </body>
</html>

以上の内容でサイドバーとして表示すると、以下のようになります。

…んー、もうちょっとサイドバーっぽく…したい。

サイドバーのスタイルを設定するには

サイドバーの表示について「スタイル」を設定するには、HTMLとは別のCSSという言語を使う必要があります。

「えーーー…HTMLさえままならないのに、CSSも勉強しなきゃいけないのーーー」

ってあなた。

わかります。

だって、ちょっとサイドバーを作りたいだけなのに、２つも新しいこと覚えられないですよね…。

どうしましょ？

CSSパッケージ for エディタアドオン

ですがご安心ください。さすがGoogleさん。

簡単にサイドバーっぽくスタイルを適用できるようにCSSパッケージなるものを用意してくれています。

正確には「CSS package for editor add-ons」という名称ですが、公式ページにはこのように書かれています。

エディタアドオン（サイドバーなどのこと）のルックアンドフィールをいつも使っている感じにするには、以下のCSSパッケージをリンクして、スタイルを適用してね（かなり意訳）

つまり、以下の１行をindex.htmlに追加すれば良いんです。

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">

CSS package for Editor Add-ons | Google Workspace Add-ons | Google for Developers

これだけで、見栄えが改善できるなんて…素晴らしい！

linkタグ：リンクする外部ソースの指定

ここで出てきたlinkタグですが、これはリンクする外部リソースを指定するタグです。

linkタグはheadタグの中に記述する必要があります。

書き方はこうです。

<link rel=“リンクタイプ” href=“外部ファイルのURL”>

リンクタイプは、どのような外部ファイルをリンクするのか（よく「リンクファイルとの関係性」と表現されます）を指定します。

そして、外部ファイルのURLに実際にリンクする外部ファイルのURLですね。

今回は、Googleさんが用意してくれたCSSファイルを、スタイルシートとしてリンクしたいので、リンクタイプは「stylesheet」と指定します。

CSSパッケージをリンクするだけではダメ

具体的には、前述の一行をindex.htmlのheadタグの中に記載します。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  </head>
  <body>
    <label>Translation</label>
    <textarea></textarea>
    <button>Translate</button>
    <button>Insert</button>
  </body>
</html>

では、表示して見ましょう！