GASのHTML Service入門｜サイドバーの作り方

GAS（Google Apps Script）で入力画面を作るなら、HTML Serviceで作ったサイドバーをスプレッドシートに表示できます。GAS側で画面を開き、HTML側で入力を受け取り、計算結果を同じ画面へ返す構成です。

ここでは Code.gs と Index.html の2ファイルで、入力金額の2倍を表示する小さな画面を作ります。対象はPCのブラウザで開くGoogleスプレッドシートです。共有シートの値を書き換えず、画面とGASの呼び出し方を確かめます。

GASのサイドバー・ダイアログ・Webアプリの違い

HTML ServiceはHTMLで作った画面をGASから提供する仕組みです。シートの横で使うか、独立したURLで使うかによって、開き方が変わります。

スプレッドシートの横に置くサイドバー

サイドバーはスプレッドシートを開いたまま使う補助画面です。入力フォーム、処理を呼ぶボタン、確認結果などを置けます。シートに紐付くスクリプトから showSidebar() で開きます。

この例で使わない設定

このサイドバーでは、Webアプリとしてのデプロイと doGet() は不要です。「デプロイ」ボタンから公開URLを作る手順は入りません。外部の人へURLを渡す用途は別の設計になるため、まずシート内で動く形に絞ります。

HTMLを作っただけでは、シートを読む権限まで自動で付くわけではありません。後からGASの処理にGoogleサービスを追加する場合は、その処理に必要な権限も確認してください。

Code.gsとIndex.htmlの準備

テスト用スプレッドシートからApps Scriptを開きます。どのシートに紐付くプロジェクトかを先に確かめておくと、メニューが出ない場合の確認がしやすくなります。

① シートに紐付くプロジェクトの作成

1. テスト用のスプレッドシートをPCのブラウザで開く。
2. シートの「拡張機能」から「Apps Script」を開く。
3. エディタの Code.gs に、次のGASコードを保存する。

既存プロジェクトを使う場合は、先にコードを控えてください。すでに onOpen() があるなら、同じ名前の関数を2つ作らず、既存の関数へメニュー追加の処理を組み込みます。

② Index.htmlの追加

エディタのファイル追加から「HTML」を選び、名前を Index にします。ファイル一覧では Index.html になります。Code.gs と同じプロジェクトの中に置き、後述のHTML全体を保存します。

createHtmlOutputFromFile('Index') の指定には拡張子を付けません。大文字のIを含む名前の一致を確認します。これで画面を表示する準備ができます。

画面を開き計算するCode.gs

次のコードを Code.gs に置きます。メニューの作成、サイドバーの表示、入力値の計算を3つの関数に分けています。

function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('計算ツール')
    .addItem('金額の2倍を確認', 'showAmountSidebar')
    .addToUi();
}

function showAmountSidebar() {
  const html = HtmlService.createHtmlOutputFromFile('Index')
    .setTitle('金額の確認');
  SpreadsheetApp.getUi().showSidebar(html);
}

function doubleAmount(rawAmount) {
  if (typeof rawAmount !== 'string' || !/^[0-9]{1,7}$/.test(rawAmount)) {
    throw new Error('0〜9999999の整数を半角数字で入力してください。');
  }
  const amount = Number(rawAmount);
  return { amount: amount, doubled: amount * 2 };
}

メニューとサイドバーの関数

onOpen() はシートを開いたときに「計算ツール」メニューを追加します。そのメニューを選ぶと showAmountSidebar() がHTMLを読み込み、シートの横に表示します。ボタンや項目に指定する関数名は、実際の関数名と揃えます。

初回はエディタから showAmountSidebar を選んで手動実行すると、必要な権限を確認しながら進められます。承認画面ではプロジェクトと実行アカウントを確かめ、コードに必要な範囲を確認してください。

入力値をGAS側でも確認する理由

計算用の doubleAmount() は半角数字だけで書いた0〜9999999の整数を受け付けます。空欄、マイナス、小数、桁区切りのカンマ、全角数字はエラーにします。入力を文字列で受け取ってから数字へ変換するので、空欄を0として扱いません。

HTML側の入力欄だけを制限しても、GASの関数へ渡る値の確認にはなりません。処理を実行するGAS側でも値を確認し、不正な入力は例外で返します。この例は計算方法を学ぶためのもので、消費税や請求金額の端数処理は扱いません。

入力をGASへ送るIndex.html

次の内容を Index.html に保存します。ボタンを押すと google.script.run がGAS側の関数を呼び、成功と失敗で表示を分けます。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta charset="UTF-8">
  </head>
  <body>
    <form id="calcForm">
      <label for="amount">金額（0〜9999999の整数）</label>
      <input id="amount" type="text" inputmode="numeric" maxlength="7">
      <button id="calculate" type="submit">2倍を計算</button>
    </form>
    <p id="result" role="status" aria-live="polite"></p>

    <script>
      const form = document.getElementById('calcForm');
      const input = document.getElementById('amount');
      const button = document.getElementById('calculate');
      const output = document.getElementById('result');

      form.addEventListener('submit', function (event) {
        event.preventDefault();
        if (button.disabled) return;
        button.disabled = true;
        output.textContent = '計算中…';

        google.script.run
          .withSuccessHandler(function (result) {
            output.textContent = '入力: ' + result.amount + '円 / 2倍: '
              + result.doubled + '円';
            button.disabled = false;
          })
          .withFailureHandler(function (error) {
            output.textContent = 'エラー: '
              + (error && error.message ? error.message : '計算に失敗しました。');
            button.disabled = false;
          })
          .doubleAmount(input.value);
      });
    </script>
  </body>
</html>

非同期の結果を受け取るハンドラ

google.script.run は非同期で動きます。呼び出し直後に計算結果が返るとは限らないため、const result = google.script.run.doubleAmount(...) のように、その場の戻り値を結果として使えません。

成功したときに動かす処理を withSuccessHandler()、GAS側で例外が出たときの処理を withFailureHandler() で指定します。最後の doubleAmount(input.value) で、呼び出す関数と渡す値を指定しています。

連打を防ぎ、文字列として結果を表示

処理中はボタンを無効にし、「計算中…」と表示します。成功時と失敗時の両方でボタンを有効に戻すため、入力を直して再び送れます。

表示には textContent を使います。返ってきた文字列をHTMLとして解釈しないので、入力やエラー文に記号が含まれていても、タグとして挿入しません。HTMLの見た目を組み立てる処理と、値を表示する処理を分けておきます。

GAS側から返す値はこの例のような文字列や数値を持つ単純なオブジェクトにします。シートのオブジェクトなどをそのまま画面へ返す構成にはしません。

GASのサイドバー｜表示と入力の確認手順

両方のファイルを保存してから、元のスプレッドシートへ戻ります。ファイルをPCへ保存して直接開く方法では、GASとの通信は動きません。

1. スプレッドシートを再読み込みする。
2. 「計算ツール」から「金額の2倍を確認」を選ぶ。
3. サイドバーの金額欄へ 1000 と入れて「2倍を計算」を押す。
4. 「入力: 1000円 / 2倍: 2000円」と表示されることを確認する。
5. 空欄や abc を送信し、エラー表示後に再入力できることを確認する。

正常値とエラーの確認

最初に見るのは入力した値と結果の対応です。画面が開いたことだけで終えず、0、上限の9999999、文字列などでも、想定した分岐になるかを確かめます。

掲載コードの計算、入力判定、成功・失敗後のボタン状態はローカルで確認しています。Googleアカウント上でのサイドバー表示と承認操作は未確認です。画面の表示は利用アカウントや組織の設定にも依存するため、テスト用シートで確認してください。

シートを更新する処理への拡張

この例はシートの値を読み書きしません。次に保存処理を加えるなら、書き込むシート名・範囲・実行者を先に決めます。画面の入力欄を増やす前に、計算結果を返せる状態を残しておくと、追加した処理の問題を調べやすくなります。

GASのサイドバーが表示されない場合の確認順

どこで止まったかによって、見るファイルが変わります。メニュー、画面、GAS関数、結果表示の順に確認すると、原因を調べる範囲を狭められます。

呼び出す関数の名前と公開範囲

GASでは、名前が _ で終わる関数は google.script.run から呼べません。内部処理を validateAmount_() のような関数へ分けることはできますが、HTML側から呼ぶ doubleAmount() は公開された名前のままにします。

関数を複数ファイルへ分ける場合は、GASコードを分割する方法を参照してください。ファイルを増やしても、同じプロジェクト内で関数名が重複しないようにします。

実行履歴と承認の確認先

GAS側で失敗している場合は、エディタの実行履歴を開き、実行時刻と関数名を確認します。調べ方はGASのエラーログと実行履歴の見方にまとめています。

承認で止まる場合は、GASの権限承認エラーの確認順へ進んでください。画面を表示させるために権限を一律に広げる操作は避け、必要な機能と利用者を確かめます。

GASのHTML Service｜よくある質問と公式資料

サイドバーを作る段階で混同しやすいのは、公開の設定と実行場所です。利用する画面に合わせて、次の点を確認してください。

サイドバーでもデプロイが必要？

この例のシートに紐付くサイドバーには不要です。独立したURLで使うWebアプリは別の方式で、doGet() やデプロイ、アクセス範囲の設定が必要になります。

スマートフォンでも同じ画面を使える？

ここでの手順はPCのブラウザで開くGoogleスプレッドシートが対象です。スマートフォンのSheetsアプリでも同じサイドバーが使えるとは想定しないでください。モバイルから使うことが要件なら、Webアプリなど利用形態から検討します。

ボタンからGASの処理を連続で呼べる？

呼べますが、複数の呼び出しを並べても完了する順序は保証されません。前の結果が必要な処理は成功ハンドラから次を呼ぶか、GAS側で一連の処理をまとめます。まずは1回の入力に1回の結果を返す形で確認してください。

仕様とサンプルの前提はGoogle公式資料で確認できます。資料を確認した時点は26年10月です。

• HTML Serviceの概要と表示方法
• google.script.runとクライアント・サーバー間通信
• ダイアログとサイドバー