【Googleスプレッドシート】Apps ScriptのHtmlServiceでサイドバー表示!UI拡張の基本

2026年5月4日

🛡️ 超解決

Googleスプレッドシートで作業を効率化するために、カスタムUIを追加したいとお考えではありませんか。Apps ScriptのHtmlServiceを使えば、スプレッドシートにサイドバーを表示し、独自のフォームやボタンを配置できます。この記事では、HtmlServiceを用いたサイドバー表示の基本手順を解説します。具体的なコード例とともに、初めての方でも簡単に実装できる方法をご紹介します。

【要点】HtmlServiceでサイドバーを表示する基本の流れ

createHtmlOutputFromFileメソッド: プロジェクト内のHTMLファイルを読み込み、サイドバーとして表示します。
showSidebarメソッド: スプレッドシートのUIオブジェクトから呼び出し、サイドバーを実際に表示します。
HTMLファイルとコード.gsの連携: クライアント側のJavaScriptとサーバー側のApps Script関数を相互に呼び出すことで、動的なUIを実現します。

1 HtmlServiceがサイドバーを表示する仕組み
2 サイドバーを表示するための準備
3 サイドバーを表示するためのスクリプトを記述する
4 サイドバーを実際に表示する手順
5 サイドバー利用時の注意点とよくある問題
6 サイドバーと他のUI表示方法の比較
7 まとめ
- 7.1 解決関連記事でさらに詳しく
- 7.2 Googleスプレッドシートの人気記事ランキング

HtmlServiceがサイドバーを表示する仕組み

Apps ScriptのHtmlServiceは、ウェブアプリケーションのようにHTML・CSS・JavaScriptをスプレッドシート上で実行できる機能です。サイドバーはスプレッドシート画面の右側に表示されるパネルで、ユーザーが入力や操作を行うためのインターフェイスを提供します。内部では、サーバー側のApps Script関数(.gsファイル)とクライアント側のHTMLファイルが別々に存在し、google.script.run APIを通じて非同期通信を行います。これにより、ボタンクリックでスプレッドシートのデータを取得・更新するような動的なUIを構築できます。サイドバーはスプレッドシートに複数表示できず、同時に表示できるのは1つだけです。また、サイドバーのタイトルはsetTitleメソッドでカスタマイズできます。

サイドバーを表示するための準備

まず、Apps Scriptエディタを開き、プロジェクトにHTMLファイルを追加します。以下の手順に沿って進めてください。

スクリプトエディタを開く
スプレッドシートのメニューから「拡張機能」→「Apps Script」をクリックします。新しいタブでスクリプトエディタが開きます。
HTMLファイルを作成する
左側のファイル一覧で「+」ボタンをクリックし、「HTML」を選択します。ファイル名は「Sidebar」と入力します(拡張子は不要)。デフォルトのコードが表示されますが、後で書き換えます。
コード.gsにスクリプトを書く
デフォルトで開かれているコード.gsに、サイドバーを表示する関数と、HTMLファイルを返す関数を記述します。具体的なコードは次のセクションで説明します。
プロジェクトを保存する
スクリプトエディタの左上にある保存アイコンをクリックするか、Ctrl+Sで保存します。プロジェクト名は任意で構いません。

サイドバーを表示するためのスクリプトを記述する

以下のスクリプトをコード.gsに記述します。このスクリプトは、サイドバーを表示する関数と、HTMLファイルを読み込む関数で構成されます。

サイドバー表示関数を作成する
関数名をshowSidebarとし、次のコードを記述します。
function showSidebar() { var html = HtmlService.createHtmlOutputFromFile('Sidebar').setTitle('カスタムサイドバー'); SpreadsheetApp.getUi().showSidebar(html); }
サーバー側関数を追加する(オプション)
サイドバーから呼び出すサーバー側関数を同じコード.gsに記述します。例えば、セルの値を取得する関数は次のように書きます。
function getCellValue(cellAddress) { var sheet = SpreadsheetApp.getActiveSheet(); return sheet.getRange(cellAddress).getValue(); }
HTMLファイルにコンテンツを書く
先ほど作成したSidebar.htmlファイルに、以下のような内容を記述します。
<!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> <h1>サイドバーへようこそ</h1> <input type="text" id="cellAddress" placeholder="例: A1"> <button onclick="getValue()">値を取得</button> <p id="result"></p> <script> function getValue() { var address = document.getElementById('cellAddress').value; google.script.run.withSuccessHandler(function(value) { document.getElementById('result').innerText = '値: ' + value; }).getCellValue(address); } </script> </body> </html>

サイドバーを実際に表示する手順

スクリプトを保存したら、スプレッドシート画面でサイドバーを実行します。以下の手順で行います。

カスタムメニューを作成する(推奨)
コード.gsにonOpen関数を追加し、カスタムメニューを作成します。
function onOpen() { var ui = SpreadsheetApp.getUi(); ui.createMenu('カスタムメニュー') .addItem('サイドバーを表示', 'showSidebar') .addToUi(); } これにより、スプレッドシートを開くたびにメニューが追加されます。
初回の許可を行う
スクリプトを初めて実行する際、権限の確認ダイアログが表示されます。内容を確認し、「許可」をクリックしてください。これでスクリプトがスプレッドシートにアクセスできるようになります。
メニューからサイドバーを表示する
スプレッドシートのメニューバーに「カスタムメニュー」が追加されています。それをクリックし、「サイドバーを表示」を選択します。すると、右側にサイドバーが表示されます。
サイドバーを操作する
サイドバー内のテキストボックスにセル番地(例: A1)を入力し、「値を取得」ボタンをクリックします。そのセルの値がサイドバーに表示されれば成功です。

サイドバー利用時の注意点とよくある問題

HTMLファイルのパスが正しく認識されない

createHtmlOutputFromFileに指定するファイル名は、拡張子を除いた名前でなければなりません。また、ファイル名が大文字小文字が区別されるため、実際のファイル名と完全に一致させてください。間違えるとエラーが発生します。

google.script.runが正しく動作しない

クライアント側のJavaScriptでgoogle.script.runを使用する際、関数名に誤りがないか確認します。サーバー側の関数はコード.gsに記述し、withSuccessHandlerやwithFailureHandlerで結果をハンドリングします。また、google.script.runは非同期のため、処理の順序に注意してください。

サイドバーを再度表示する際に古い状態が残る

サイドバーを閉じて再度表示すると、以前の入力状態は保持されません。必要であれば、サーバー側から初期データを読み込むなどしてUIを初期化してください。

スクリプトの実行制限に注意する

Apps Scriptには1日あたりの実行時間やトリガー回数に制限があります。頻繁にサイドバーを表示する場合は、制限内に収まるように設計してください。

サイドバーと他のUI表示方法の比較

UI表示方法	特徴	適した用途
サイドバー	スプレッドシートの右側に常駐し、複数の操作を行える	フォーム入力やデータ表示、複数ステップの操作
ダイアログボックス	ポップアップで表示され、ユーザーの確認や簡単な入力に適す	警告メッセージ、単一の入力など
モーダルダイアログ	ダイアログと似ているが、サイズを自由に指定でき、HTMLの自由度が高い	詳細な設定画面や複雑なUI

まとめ

この記事では、Apps ScriptのHtmlServiceを使ってサイドバーを表示する基本手順を解説しました。スプレッドシートにカスタムUIを追加することで、繰り返し作業の効率化やデータ入力の簡略化が実現できます。まずは簡単なフォームから始め、慣れてきたらgoogle.script.runを用いた双方向通信を活用しましょう。応用として、サイドバーからスプレッドシートのデータを直接変更する機能や、外部APIとの連携も可能です。ぜひ、自分のワークフローに合わせたカスタムUIを作成してみてください。

この記事の監修者

✍️

超解決第一編集部

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