初心者でもできる！GASとHTMLでスプレッドシートを活用したWebページ作成ガイド

こんにちは！今日は、パソコンやスマホの操作に自信がない方でもできる、Google Apps Script（GAS）とHTMLを使って、スプレッドシートのデータをWebページに表示する方法をご紹介します。難しい専門用語は使わず、わかりやすく解説しますので、ぜひ最後までご覧ください。

GASとHTMLでWebページを作るとは？
必要なものはこれだけ！
ステップ1スプレッドシートの準備
ステップ2Google Apps Scriptでプログラムを書く
ステップ3HTMLテンプレートの作成
ステップ4Webページを公開する
よくある質問や疑問
今すぐ解決したい！どうしたらいい？
まとめ

GASとHTMLでWebページを作るとは？

Googleスプレッドシートのイメージ

まず、GASとHTMLを使ってWebページを作るとは、スプレッドシートに保存したデータをインターネット上で見られるページに表示することです。例えば、家計簿のデータや商品リストを、誰でも見られるページとして公開することができます。

必要なものはこれだけ！

ここがポイント！

Googleアカウント（GmailなどのGoogleサービスを使っている方はOK）
Googleスプレッドシート（データを保存するための表）
Google Apps Script（スプレッドシートとWebページをつなぐプログラム）
HTMLの基本的な知識（ページの見た目を整えるための言語）

ステップ1スプレッドシートの準備

まずは、スプレッドシートに表示したいデータを入力します。例えば、以下のような商品リストを作成します。

商品名	価格	在庫数
水	100円	50
お茶	150円	30
コーラ	120円	20

このようなデータを「商品」という名前のシートに入力してください。

ステップ2Google Apps Scriptでプログラムを書く

次に、スプレッドシートとWebページをつなぐプログラムを作成します。以下の手順で進めていきます。

スプレッドシートを開くGoogleスプレッドシートを開きます。
Apps Scriptを開くメニューの「拡張機能」から「Apps Script」を選択します。
新しいプロジェクトを作成新しいプロジェクトを作成し、以下のコードを貼り付けます。

function doGet() {

  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('商品');

  const data = sheet.getDataRange().getValues();

  const template = HtmlService.createTemplateFromFile('index');

  template.data = data;

  return template.evaluate();

}

このコードは、スプレッドシートの「商品」シートからデータを取得し、それをHTMLテンプレートに渡してWebページを生成するものです。

ステップ3HTMLテンプレートの作成

次に、Webページの見た目を作成します。以下の手順で進めていきます。

HTMLファイルを作成Apps Scriptのエディタで「index.html」という名前のHTMLファイルを作成します。
HTMLコードを記述以下のコードを貼り付けます。

<!DOCTYPE html>

<html>

  <head>

    <title>商品リスト</title>

  </head>

  <body>

    <h1>商品リスト</h1>

    <table border="1">

      <tr>

        <th>商品名</th>

        <th>価格</th>

        <th>在庫数</th>

      </tr>

      <?php

        foreach ($data as $row) {

          echo '<tr>';

          foreach ($row as $cell) {

            echo '<td>' . $cell . '</td>';

          }

          echo '</tr>';

        }

      ?>

    </table>

  </body>

</html>