【Googleスプレッドシート】Apps Scriptでサイドバー表示!HTMLコンテンツの埋込

2026年5月9日

🛡️ 超解決

スプレッドシートの作業中に、外部ツールに切り替えずにカスタムUIを表示したいと思ったことはありませんか。Googleスプレッドシートには標準のメニューやダイアログ以外にも、Apps Scriptを使って自由にHTMLコンテンツを埋め込めるサイドバー機能が用意されています。この記事では、Apps Scriptを使ってサイドバーを作成し、任意のHTMLを表示する手順を詳しく解説します。初心者の方でもコピー&ペーストで使えるサンプルコードを交えながら説明しますので、ぜひ最後までご覧ください。

【要点】Apps Scriptでサイドバーを表示する3ステップ

HtmlService.createHtmlOutputFromFile: スプレッドシートのスクリプトエディタからHTMLファイルを読み込み、サイドバーとして表示できます。
SpreadsheetApp.getUi().showSidebar: メニューやカスタム関数からサイドバーを起動するメソッドで、引数にHTML出力オブジェクトを指定します。
onOpenトリガーでメニュー追加: スプレッドシートを開いたときに自動で実行される関数を作り、そこからサイドバーを呼び出すと便利です。

1 Apps Scriptでサイドバーを使う理由
2 サイドバー表示のための準備
3 サイドバーを表示する手順
4 サイドバー利用時の注意点とよくあるトラブル
5 サイドバーとモーダルダイアログの比較
6 まとめ
- 6.1 解決関連記事でさらに詳しく
- 6.2 Googleスプレッドシートの人気記事ランキング

Apps Scriptでサイドバーを使う理由

スプレッドシートに標準で用意されているダイアログボックスでは、限られた情報しか表示できません。一方、サイドバーは画面右側に常駐するパネルで、HTML、CSS、JavaScriptを自由に使ったリッチなインターフェースを提供できます。たとえば、社内のデータベースから取得した情報を一覧表示したり、入力フォームを設置してスプレッドシートのセルに直接書き込んだりといった高度な操作が可能です。Apps Scriptのサイドバー機能を活用することで、スプレッドシートの操作性を大幅に向上させることができます。

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

サイドバーを作成するには、GoogleスプレッドシートとApps Scriptの基本的な操作が分かっていれば十分です。事前準備として、以下の2点を確認しておいてください。まず、使用するGoogleアカウントでスプレッドシートが開けること。次に、Apps Scriptのエディタを開く方法を知っていること。スクリプトエディタは、スプレッドシートのメニューから「拡張機能」→「Apps Script」と進めば開けます。これだけで準備は完了です。

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

手順1: スクリプトエディタを開き、新しいHTMLファイルを作成する

スプレッドシートを開く
サイドバーを追加したいスプレッドシートを開きます。新規作成でも既存のファイルでも構いません。
スクリプトエディタを起動する
メニューから「拡張機能」→「Apps Script」を選択します。別タブでスクリプトエディタが開きます。
HTMLファイルを追加する
スクリプトエディタの左側メニューで「ファイル」→「新規」→「HTML」をクリックします。ファイル名は「Index」または任意の名前に変更します。ここでは「Sidebar」とします。

手順2: HTMLファイルにコンテンツを記述する

HTMLの基本構造を書く
作成したHTMLファイルに、以下のようなコードを記述します。から始め、headとbodyを含む完全なHTMLファイルにしてください。この例では、見出しとボタン、そしてスプレッドシートのデータを表示する簡単なインターフェースを用意します。
サンプルコードを入力する
コード例を以下に示します。このコードは、スプレッドシートのアクティブセルの値を取得して表示するものです。実際の用途に合わせて書き換えてください。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      body { font-family: Arial, sans-serif; padding: 20px; }
      h1 { font-size: 18px; }
      button { margin-top: 10px; }
    </style>
  </head>
  <body>
    <h1>サイドバーサンプル</h1>
    <p id="output">ここにセルの値を表示します</p>
    <button onclick="getCellValue()">セルの値を取得</button>
    <script>
      function getCellValue() {
        google.script.run
          .withSuccessHandler(function(value) {
            document.getElementById('output').innerText = value;
          })
          .getActiveCellValue();
      }
    </script>
  </body>
</html>

手順3: サーバー側のスクリプト(.gsファイル)を記述する

コード.gsを開く
スクリプトエディタの左側で「コード.gs」をクリックします。デフォルトで「myFunction()」という関数が表示されます。
サイドバー表示用の関数を追加する
以下のコードを記述します。関数名は任意ですが、ここでは「showSidebar」とします。この関数内で、手順2で作成したHTMLファイルを読み込み、サイドバーとして表示します。
セルの値を返す関数も追加する
HTML側から呼び出すサーバー関数を同じファイルに記述します。上のHTMLサンプルでは「getActiveCellValue」という関数を想定していますので、その実装を追加します。

function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('Sidebar');
  html.setTitle('カスタムサイドバー');
  SpreadsheetApp.getUi().showSidebar(html);
}

function getActiveCellValue() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var cell = sheet.getActiveCell();
  return cell.getValue();
}

手順4: メニューからサイドバーを呼び出せるようにする

onOpen関数を作成する
コード.gsに以下の関数を追加します。この関数はスプレッドシートを開くたびに実行され、カスタムメニューを作成します。
トリガーを設定する
スクリプトエディタの左メニューから「トリガー」をクリックし、「トリガーを追加」を選択します。関数に「onOpen」、イベントの種類を「スプレッドシートを開いたとき」に設定して保存します。

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('カスタムメニュー')
    .addItem('サイドバーを表示', 'showSidebar')
    .addToUi();
}

手順5: 動作を確認する

スプレッドシートを再読み込みする
トリガーが正しく設定されていれば、スプレッドシートを開き直したときに「カスタムメニュー」というメニューが追加されています。
サイドバーを表示する
「カスタムメニュー」→「サイドバーを表示」をクリックします。右側にサイドバーが現れ、先ほど作成したHTMLコンテンツが表示されます。「セルの値を取得」ボタンをクリックすると、アクティブセルの値が表示されるはずです。

サイドバー利用時の注意点とよくあるトラブル

HTML内でgoogle.script.runが動作しない

HTMLファイル内で「google.script.run」を使用するには、必ずスクリプトエディタで作成したHTMLファイルを使う必要があります。外部のHTMLファイルを読み込んでも動作しません。また、<base target="_top">をheadタグ内に記述することを忘れないでください。これがないと、リンク先が正しく開かない場合があります。

権限エラーが発生する

初回実行時やメニューからサイドバーを呼び出すときに、権限の承認を求められます。これは正常な動作です。承認画面で「許可」をクリックしてください。承認が完了すると、次回以降は表示されません。組織のポリシーで権限が制限されている場合は、管理者に問い合わせてください。

HTMLが正しく表示されない

HTMLの記述ミスや閉じタグの欠落があると、サイドバーが真っ白になることがあります。ブラウザの開発者ツール(F12)でConsoleタブを確認し、エラーメッセージを手がかりに修正してください。また、CSSの指定が競合していないかも確認しましょう。

サイドバーとモーダルダイアログの比較

項目	サイドバー	モーダルダイアログ
表示位置	画面右側に常時表示	画面中央にポップアップ表示
操作性	シートとサイドバーを同時操作可能	ダイアログを閉じるまでシート操作不可
カスタマイズ性	HTML/CSS/JavaScriptを自由に記述可能	同様にカスタマイズ可能だが、画面サイズの制約がある
利用シーン	常に参照したい情報やツールバー的なUIに適する	一時的な確認や入力、警告表示に適する

まとめ

この記事では、Apps Scriptを使ってGoogleスプレッドシートにサイドバーを表示し、HTMLコンテンツを埋め込む方法を解説しました。手順に沿ってコードを記述すれば、わずか数ステップでカスタムUIを追加できます。サイドバーを活用すれば、社内データの一覧表示や入力フォームなど、スプレッドシートの可能性が大きく広がります。次は、CSSフレームワークを導入して見た目を整えたり、スプレッドシートのデータをグラフ表示する機能を追加してみてはいかがでしょうか。Apps Scriptの組み込み関数であるHtmlServiceとSpreadsheetAppを組み合わせることで、より高度なアプリケーションも作成できます。

この記事の監修者

✍️

超解決第一編集部

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