GAS技術解説 / サイドバー・ダイアログ

GASでスプレッドシートに
サイドバー・ダイアログを表示する方法

GAS の HtmlService（HTMLでUIを作るGASのサービス）を使うと、スプレッドシートに独自の入力パネルを付けられます。サイドバー・ダイアログの作り方と、入力値をシートに保存する流れを動くコードで解説します。

公開日: 2026-07-26|対象: GAS HtmlService / showSidebar / showModalDialog

Table of Contents

サイドバーとダイアログの違い

どちらも HtmlService で作った HTML をスプレッドシート上に表示する仕組みです。見た目と使いどころが違います。まずは違いを押さえておくと迷いません。

サイドバー（showSidebar）

シートの右側に固定表示される縦長パネル。作業しながらずっと開いておける。幅は約300pxで固定。常駐させる操作パネルに向く。

ダイアログ（showModalDialog ほか）

画面中央に浮かぶ小窓。幅・高さを指定できる。単発の入力・確認に向く。モーダルとモードレスの2種類がある。

Webアプリ（doGet）との違い

doGetで公開する Webアプリは独立したURLを持つ別画面です。一方サイドバー・ダイアログは「今開いているスプレッドシートの上」に出す点が違います。シートと一緒に使う操作パネルなら、サイドバー・ダイアログの方が手軽です。

サイドバーを表示する（showSidebar）

まずスクリプトエディタで、GASコード（.gs）と HTMLファイル（Sidebar.html）を用意します。 GAS側は、メニューを追加してサイドバーを開く関数を書きます。

function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('ツール')
    .addItem('サイドバーを開く', 'showSidebar')
    .addItem('登録ダイアログを開く', 'showDialog')
    .addToUi();
}

function showSidebar() {
  // 'Sidebar' は下で作るHTMLファイル名（拡張子は不要）
  const html = HtmlService.createHtmlOutputFromFile('Sidebar')
    .setTitle('作業パネル'); // サイドバーは幅を指定できないためタイトルだけ
  SpreadsheetApp.getUi().showSidebar(html);
}

次に、表示する中身を Sidebar.htmlとして作ります。<base target="_top">はリンクを正しく開くためのおまじないとして入れておきます。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      body { font-family: sans-serif; padding: 12px; font-size: 13px; }
      label { display: block; margin-top: 10px; color: #5f6368; }
      input, button { width: 100%; box-sizing: border-box; margin-top: 4px; padding: 8px; }
      button { background: #0a0a0a; color: #fff; border: none; cursor: pointer; }
      #msg { margin-top: 12px; color: #188038; min-height: 1em; }
    </style>
  </head>
  <body>
    <label>お客様名</label>
    <input type="text" id="name">
    <label>金額</label>
    <input type="number" id="amount">
    <button id="save">登録する</button>
    <div id="msg"></div>

    <script>
      document.getElementById('save').addEventListener('click', function() {
        var name = document.getElementById('name').value;
        var amount = Number(document.getElementById('amount').value);
        document.getElementById('msg').textContent = '登録中...';

        google.script.run
          .withSuccessHandler(function() {
            document.getElementById('msg').textContent = '登録しました';
            document.getElementById('name').value = '';
            document.getElementById('amount').value = '';
          })
          .withFailureHandler(function(err) {
            document.getElementById('msg').textContent = 'エラー: ' + err.message;
          })
          .addRecord(name, amount); // ← GAS側の関数を呼ぶ
      });
    </script>
  </body>
</html>

動かし方

保存後、スプレッドシートを開き直すと上部に「ツール」メニューが出ます。「サイドバーを開く」を押すと右側にパネルが表示されます。初回はスクリプトの承認画面が出るので許可してください。

画面からGAS関数を呼びシートに保存する

サイドバーの HTML からgoogle.script.run（画面側からGASの関数を呼ぶ仕組み）でサーバー関数を呼びます。上の HTML ではaddRecordを呼んでいるので、GAS側にその関数を用意します。

function addRecord(name, amount) {
  // 入力チェックはサーバー側でも必ず行う
  if (!name) {
    throw new Error('お客様名を入力してください');
  }

  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName('登録') || ss.insertSheet('登録');

  // 1行追記するだけ。new Date() で登録日時も残す
  sheet.appendRow([new Date(), name, amount]);

  return true; // withSuccessHandler に渡る
}

ポイント

入力チェックは画面側だけでなくサーバー側でも行います。throw new Error()で投げたエラーメッセージは、画面側のwithFailureHandlerに渡り、そのまま利用者に表示できます。成功時の戻り値はwithSuccessHandlerで受け取れます。

ダイアログを表示する（モーダル・モードレス）

中央に浮かぶ小窓を出すならshowModalDialogを使います。中身の HTML（Dialog.html）はサイドバーと同じ書き方でOKです。サイドバーと違い、幅・高さを指定できます。

function showDialog() {
  const html = HtmlService.createHtmlOutputFromFile('Dialog')
    .setWidth(400)   // ダイアログはサイズを指定できる
    .setHeight(300);
  // モーダル：閉じるまでシート本体を操作できない
  SpreadsheetApp.getUi().showModalDialog(html, '新規登録');
}

function showModeless() {
  const html = HtmlService.createHtmlOutputFromFile('Dialog')
    .setWidth(400)
    .setHeight(300);
  // モードレス：ダイアログを開いたままシートも操作できる
  SpreadsheetApp.getUi().showModelessDialog(html, 'バックグラウンド作業');
}

モーダル（showModalDialog）

閉じるまでシート本体を操作できない。「必ず入力してから進んでほしい」画面に向く。

モードレス（showModelessDialog）

開いたままシートも触れる。参照しながら入力したい画面や、進捗表示に向く。

処理後にダイアログを閉じる

ダイアログは、保存が終わったら自動で閉じたい場面が多いです。画面側でgoogle.script.host.close()を呼ぶと閉じられます。サーバー関数が成功した後に閉じるのがコツです。

<script>
  google.script.run
    .withSuccessHandler(function() {
      google.script.host.close(); // 保存できたらダイアログを閉じる
    })
    .withFailureHandler(function(err) {
      document.getElementById('msg').textContent = 'エラー: ' + err.message;
    })
    .addRecord(name, amount);
</script>

失敗時は閉じずにエラーを表示し、成功時だけ閉じます。こうすると「保存できたのか分からないまま閉じた」という事故を防げます。

テンプレートでサーバーの値を渡す

「開いた人のメールアドレス」や「初期値」など、サーバー側の値を最初から画面に埋め込みたいことがあります。その場合はcreateHtmlOutputFromFileではなくcreateTemplateFromFileを使います。

function showSidebar() {
  // createTemplateFromFile ならサーバーの値をHTMLに埋め込める
  const template = HtmlService.createTemplateFromFile('Sidebar');
  template.userName = Session.getActiveUser().getEmail(); // 変数を渡す
  const html = template.evaluate().setTitle('作業パネル');
  SpreadsheetApp.getUi().showSidebar(html);
}

HTML 側では<?= 変数名 ?>というスクリプトレット記法で受け取ります。

<!-- Sidebar.html の中でスクリプトレットとして受け取る -->
<p>ログイン中: <?= userName ?></p>

使い分け

固定のHTMLをそのまま出すだけならcreateHtmlOutputFromFileで十分です。表示前にサーバーの値を差し込みたいときだけcreateTemplateFromFile+evaluate()を使います。

実務での注意点

1. サイドバーの幅は変えられない

サイドバーの幅は約300pxで固定です。setWidth()を書いても効きません。広い画面が必要ならダイアログを使うか、レイアウトを縦積みで設計します。

2. google.script.run は非同期で戻り値を直接受け取れない

var x = google.script.run.addRecord(...)のようには書けません。結果は必ずwithSuccessHandlerのコールバックで受け取ります。渡せる引数・戻り値も、関数・Dateなど一部はそのまま渡せない点に注意します。

3. 承認とonOpenトリガー

初回はメニュー項目の実行時に承認が必要です。開いた瞬間に自動でサイドバーを出したい場合はonOpenから呼べますが、承認前の簡易トリガーは権限が限られます。確実に出すならインストール型のonOpenトリガーを使います。

まとめ

サイドバー・ダイアログを使うと、スプレッドシートに「使いやすい入力画面」を足せます。セルに直接入力させるより、必須チェックや保存先の制御がしやすくなります。

サイドバー

常駐パネル。幅は約300px固定。showSidebar

ダイアログ

中央の小窓。サイズ指定可。モーダル/モードレス

保存の流れ

google.script.run → サーバー関数 → appendRow

応用できる業務用途

受注・実績の入力パネル

検索・絞り込みツール

一括処理の実行ボタン

設定値の編集画面

FAQ

よくある質問

サイドバーはシートの右側に固定表示される縦長のパネルで、作業しながらずっと開いておきたい操作パネルに向いています。ダイアログは画面中央に浮かぶ小窓で、1回きりの入力や確認に向いています。常駐させたい操作はサイドバー、単発の入力・確認はダイアログ、と考えると選びやすいです。

できません。サイドバーの幅は約300pxに固定されており、setWidth()を指定しても無視されます。幅を自分で決めたい場合はダイアログ（showModalDialog / showModelessDialog）を使ってください。ダイアログはsetWidthとsetHeightでサイズを指定できます。

はい。画面側のJavaScriptからgoogle.script.run.withSuccessHandler(...).関数名(引数) と書くと、GASのサーバー側関数が呼ばれます。そのサーバー関数の中でSpreadsheetAppを使えば、シートへの追記や更新ができます。処理結果はwithSuccessHandlerのコールバックで受け取れます。

モーダル（showModalDialog）はダイアログを閉じるまでシート本体を操作できません。確実に入力させたい場面向きです。モードレス（showModelessDialog）はダイアログを開いたままシートも操作できます。どちらもgoogle.script.runでサーバー関数を呼べる点は同じです。

onOpenトリガーからshowSidebarを呼べば自動表示は可能ですが、初回はスクリプトの承認が必要なため、まずメニュー項目から手動で開いて承認を済ませる運用が安全です。承認前の簡易onOpenは権限が限られるため、確実に出したいならインストール型のonOpenトリガーを使います。

GASでスプレッドシートにサイドバー・ダイアログを表示する方法