【GAS×JavaScript】スプレッドシートの値をWebサイトに表示する方法

この記事では、スプレッドシートのB1セルに入れた数値と、B2セルに入れたメッセージをWebサイトに表示するまでを順番に設定します。

仕組みと準備するもの

WebサイトがGASのWebアプリURLへGET通信を送ると、doGet()がシートのB1・B2を読み取ってJSONを返します。ブラウザ側のJavaScriptは、返ってきたJSONから数値とメッセージを取り出してHTMLに表示します。

スプレッドシートを準備する

シートのA1に「現在の数値」、A2に「メッセージ」などの見出しを入れます。B1に表示したい数値、B2に表示したい文字を入力してください。

セル位置は後で使うB1:B2と一致させます。別のセルを使う場合は、シートだけでなくGAS側の範囲も変更してください。

GAS側のコードを保存する

スプレッドシートの「拡張機能」→「Apps Script」を開きます。Code.gsに次のdoGet()を保存してください。

function doGet() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const values = sheet.getRange("B1:B2").getDisplayValues().flat();
  const payload = {
    metricNum: Number(values[0]) || 0,
    message: values[1] || ""
  };
  return ContentService
    .createTextOutput(JSON.stringify(payload))
    .setMimeType(ContentService.MimeType.JSON);
}

getDisplayValues()はセルに表示されている値を文字列として取得します。B1はNumber()で数値に変換し、空欄や数値に変換できない値なら0を返します。B2が空欄のときは空文字を返します。

Webアプリとしてデプロイする

初めて公開する場合は、次の順に設定します。

1. 1画面右上の「デプロイ」→「新しいデプロイ」を開く
2. 2種類の選択から「ウェブアプリ」を選ぶ
3. 3「次のユーザーとして実行」を自分にする
4. 4サイトの閲覧者が読み込めるアクセス範囲を選ぶ
5. 5表示される権限を確認して承認する
6. 6デプロイ後に/execで終わるWebアプリURLをコピーする

公開するデータに注意する

公開サイトの誰でも読み込める設定にした場合、WebアプリURLを知る人はJSONを直接読めます。次のようなデータは返さないでください。

• 氏名、住所、メールアドレスなどの個人情報
• 非公開の売上、在庫、社内情報
• パスワード、APIキー、アクセス用の文字列

公開しても問題のないお知らせ、簡易な集計値、受付状況などに用途を限定すると安全です。

Webサイトに表示用HTMLを置く

数値とメッセージを表示したい位置に、次のHTMLを置きます。読み込み完了までは「読み込み中…」と表示します。

<p>現在の数値: <span class="metric-value">読み込み中...</span></p>
<p>メッセージ: <span class="sheet-message">読み込み中...</span></p>

JavaScriptでGASから値を取得する

★GASのURL★を、デプロイ時にコピーした/exec URLへ置き換えます。

const gasUrl = "★GASのURL★";

async function showSheetData() {
  const metricValue = document.querySelector(".metric-value");
  const sheetMessage = document.querySelector(".sheet-message");
  try {
    const response = await fetch(gasUrl, { cache: "no-store" });
    if (!response.ok) throw new Error("request failed");
    const payload = await response.json();
    metricValue.textContent = payload.metricNum;
    sheetMessage.textContent = payload.message || "未設定";
  } catch (error) {
    metricValue.textContent = "取得エラー";
    sheetMessage.textContent = "データを読み込めませんでした";
  }
}

showSheetData();

cache: "no-store"を指定し、ブラウザが以前の応答を使うのを抑えています。ただし、シートの値を変えた瞬間に表示が自動で書き換わるわけではありません。このコードでは、ページを開いたときに1回取得します。

表示を確認する

1. 1B1に数値、B2にメッセージを入力する
2. 2Webサイトを開き、値が表示されるか確認する
3. 3B1・B2を別の値に変える
4. 4Webサイトを再読み込みし、表示が変わるか確認する

最初に/exec URLをブラウザで直接開くと、GASが返しているJSONを切り分けて確認できます。JSONは正しいのにページへ表示されない場合はWebサイト側、JSON自体が返らない場合はGAS側を中心に確認できます。

反映されないときの確認

まとめ

• GASのdoGet()でB1・B2を読み取り、JSONで返す
• Webサイト側はfetch()で/exec URLへGET通信を送る
• GASのコードを変えたら、新しいバージョンでデプロイを更新する
• 公開設定のWebアプリから、個人情報や非公開情報を返さない
• クリック数の記録と組み合わせると、記録と表示の両方を同じシートで扱える