ADVERTISEMENT

【Googleスプレッドシート】Apps Scriptで.gsとhtml・cssファイルの組み合わせ!UI拡張の構築

Googleスプレッドシート
【Googleスプレッドシート】Apps Scriptで.gsとhtml・cssファイルの組み合わせ!UI拡張の構築
🛡️ 超解決

Googleスプレッドシートにカスタムのダイアログやサイドバーを追加したいとお考えではありませんか。通常の関数では実現できない複雑なユーザーインターフェースを、Apps Scriptで構築する方法があります。この記事では、.gsファイルとHTML・CSSファイルを組み合わせて、スプレッドシート上で動作するカスタムUIを作成する手順を詳しく解説します。これを読めば、ボタンや入力フォームを備えた本格的な拡張機能を自作できるようになります。

【要点】Apps ScriptのHTMLサービスで.gsとHTML/CSSを連携させ、スプレッドシートにカスタムUIを追加する

  • HtmlService.createHtmlOutputFromFile(‘index’): プロジェクト内のHTMLファイルを読み込んでダイアログやサイドバーとして表示します。
  • google.script.run.doSomething(): HTML側からサーバーサイドの関数を呼び出し、スプレッドシートのデータを操作します。
  • テンプレートHTML(.html): CSSやJavaScriptを直接記述でき、バインディング構文で動的な値の埋め込みも可能です。

ADVERTISEMENT

Apps ScriptのHTMLサービスとは?UI拡張の仕組み

Apps Scriptには、スプレッドシートにカスタムのユーザーインターフェースを追加するための「HTMLサービス」が用意されています。このサービスを使うと、標準の関数では実現が難しい、入力フォームやグラフ表示、外部APIとの連携などを備えた高度なインターフェースを構築できます。

HTMLサービスでは、プロジェクト内に作成したHTMLファイルをサーバーサイドでレンダリングし、その結果をダイアログやサイドバーとして表示します。HTMLファイルには通常のHTMLタグに加えて、Apps Script独自のテンプレート構文()や、JavaScriptからサーバーサイドの関数を呼び出すための「google.script.run」APIを使用できます。

サーバーサイドの処理は.gsファイルに記述し、例えばスプレッドシートからのデータ取得や更新を行います。これにより、フロントエンドとバックエンドが分離されたクリーンな設計が可能です。

.gsファイルとHTML/CSSを組み合わせてUIを表示する手順

ここでは、スプレッドシートのメニューからサイドバーを開き、アクティブセルの値を表示する簡単なサンプルを作成します。プロジェクトには以下の3つのファイルを作成します。

  1. コード.gs(サーバーサイド)を作成する
    スクリプトエディタを開き、以下のコードをコード.gsに記述します。このファイルには、メニュー追加用の関数と、サイドバーを表示する関数、HTMLから呼び出されるサーバー関数を定義します。
  2. Index.html(フロントエンド)を作成する
    メニューから「ファイル」→「新規」→「HTMLファイル」を選択し、ファイル名を「Index」とします。ここにHTMLの構造とCSS、JavaScriptを記述します。
  3. スタイルやスクリプトを追加する
    HTMLファイル内の<style>タグにCSSを、<script>タグにJavaScriptを記述します。サーバー関数の呼び出しはgoogle.script.runを使用します。

手順1: コード.gsの記述

  1. メニューを追加する関数を作成する
    スクリプトエディタで、以下の関数を追加します。
    function onOpen() {
      SpreadsheetApp.getUi()
        .createMenu('カスタムメニュー')
        .addItem('サイドバーを開く', 'showSidebar')
        .addToUi();
    }
  2. サイドバーを表示する関数を作成する
    以下の関数を追加します。
    function showSidebar() {
      var html = HtmlService.createHtmlOutputFromFile('Index')
        .setTitle('カスタムUI')
        .setWidth(300);
      SpreadsheetApp.getUi().showSidebar(html);
    }
  3. サーバー側の処理関数を作成する
    例として、アクティブセルの値を取得する関数を追加します。
    function getActiveCellValue() {
      var cell = SpreadsheetApp.getActiveSpreadsheet().getActiveCell();
      return cell.getValue();
    }

手順2: Index.htmlの作成とUIデザイン

  1. HTMLファイルを新規作成する
    スクリプトエディタのメニューから「ファイル」→「新規」→「HTMLファイル」を選び、ファイル名を「Index」にして作成します。
  2. 基本的なHTML構造を記述する
    以下のように、<!DOCTYPE html>から始まる完全なHTMLドキュメントを記述します。
    <!DOCTYPE html>
    <html>
    <head>
    <base target="_top">
    </head>
    <body>
    <h3>アクティブセルの値</h3>
    <p id="value">読み込み中...</p>
    <button onclick="getValue()">値を取得</button>
    </body>
    </html>
  3. CSSでスタイルを追加する
    <head>内に<style>タグを追加し、見た目を整えます。例えば背景色やフォントサイズなどを指定します。
  4. JavaScriptでサーバー関数を呼び出す
    <body>の最後に<script>タグを追加し、以下のコードを記述します。
    function getValue() {
      google.script.run
        .withSuccessHandler(function(value) {
          document.getElementById('value').textContent = value;
        })
        .withFailureHandler(function(error) {
          console.error(error);
        })
        .getActiveCellValue();
    }

手順3: プロジェクトをテストする

  1. スクリプトエディタでプロジェクトを保存する
    Ctrl+Sで保存します。初回はプロジェクト名を指定します。
  2. スプレッドシートを再読み込みする
    スプレッドシートを開き直すと、メニューバーに「カスタムメニュー」が表示されます。
  3. サイドバーを開いて動作確認する
    「カスタムメニュー」→「サイドバーを開く」をクリックすると、右側にサイドバーが表示されます。「値を取得」ボタンを押すと、アクティブセルの値が表示されます。

UI構築時の注意点とよくあるトラブル

google.script.runが非同期であることを忘れない

サーバー関数の結果は非同期で返ってくるため、withSuccessHandlerで結果を受け取る必要があります。結果を待たずに次の処理を書いてしまうと、undefinedが返ることがあります。必ず成功ハンドラ内で後続処理を記述してください。

HtmlService.createHtmlOutputFromFile()のファイル名が正しくない

ファイル名は拡張子なしで指定します。例えば「Index.html」という名前のファイルを読み込む場合は「HtmlService.createHtmlOutputFromFile(‘Index’)」と書きます。ファイル名を間違えるとエラーが発生するので注意しましょう。

テンプレートHTMLの評価順序に注意する

HTMLファイル内でテンプレート構文()を使用すると、サーバーサイドで評価されてからクライアントに送られます。このとき、JavaScriptのコード内にテンプレートを埋め込むと、意図しない文字列になることがあります。特に、引用符や特殊文字を含む値はエスケープ処理が必要です。

権限の承認が必要

初めて実行するときは、スプレッドシートのデータにアクセスするための権限承認ダイアログが表示されます。内容を確認して承認してください。承認しないと関数が正常に動作しません。

ADVERTISEMENT

テンプレートHTMLと直接スクリプト記述の比較

項目 テンプレートHTML() 直接スクリプト記述(google.script.run)
データの渡し方 サーバーサイドでHTMLを生成する際に値を埋め込む クライアントサイドから非同期でサーバー関数を呼び出し結果を受け取る
コードの見通し HTMLとサーバーコードが混ざるため複雑になりやすい フロントエンドとバックエンドが分離され可読性が高い
動的な更新 ページを再読み込みしないと値が更新されない 非同期で部分更新が可能
セキュリティ テンプレート内でユーザー入力を表示する場合はエスケープ注意 サーバー関数が適切に認証・認可を行えば安全

まとめ

この記事では、Apps ScriptのHTMLサービスを使って.gsファイルとHTML/CSSファイルを組み合わせ、スプレッドシートにカスタムUIを追加する方法を解説しました。具体的には、メニューからサイドバーを開き、サーバー関数を呼び出してセル値を表示するサンプルを通じて、基本的な流れを確認しました。次は、フォーム入力データをスプレッドシートに書き込む機能や、チャートを表示するUIなどに挑戦してみてください。google.script.runとテンプレートHTMLを使い分けることで、より柔軟な拡張機能が開発できます。


ADVERTISEMENT

この記事の監修者
✍️

超解決 第一編集部

疑問解決ポータル「超解決」の編集チーム。正確な検証と、現場視点での伝わりやすい解説を心がけています。

解決 関連記事でさらに詳しく

Googleスプレッドシートの人気記事ランキング