DXセミナー2026 講習会資料

目次

  1. 全体の説明
  2. ESP32ボード・プログラム修正
  3. Googleスプレッドシート・作成
  4. Googleスプレッドシート・GAS登録
  5. Googleスプレッドシート・indexを作る
  6. Googleスプレッドシート・地図の最初の場所
  7. Googleスプレッドシート・初期設定
  8. Googleスプレッドシート・ESP32の位置登録
  9. Googleマップから経度緯度を調べる
  10. ウェブアプリとして公開する（デプロイ）
  11. 動作の確認

1. 全体の説明

目標

ハウスなどで測定した温度を地図に表示します。
URLを知っていれば、ブラウザで表示できます。
DXセミナー2026の1回目で作ったESP32と2回目で作ったプログラムを利用します。

地図のページのできあがり

利用するツール

上記の括弧内の表示を略称として利用します。

構成

ESP32(温度センサー付き)　→　スプレッド　→　ブラウザ（地図表示）

講習会で利用するファイル

2種類のプログラムコードがあります。

  1. ESP32
    • esp32.ino
    • secrets.example.h
  2. GAS
    • コード.gas
    • index.html

2. ESP32ボード・プログラム修正

DXセミナー2026の1,2回目で作ったプログラムを改修します。

改修部分の説明

ダウンロードしたファイル(esp32.ino)をそのまま利用すれば良いのですが、改修部分の説明を行います。

  1. 5～10行目

他の人に秘密にしたい情報を、別のファイルに分けました。

修正前

//Wi-Fi
const char* ssid = "luke-ssid"; // 自分の WiFi の ssid を書く
const char* password = "luke-password";  // 自分の WiFi の パスワードを書く

//ウェブアプリのURL(GAS)
const String url = "https://script.google.com/------------------/exec";

修正後

// Wi-Fi の ssid・パスワード、ウェブアプリの URL(GAS)、合言葉
// secrets.example.h を secrets.h にコピーして値を書く（secrets.h は Git で管理しない）
#include "secrets.h"

// 送信の間隔（ミリ秒）。5 分
#define SEND_INTERVAL_MS 300000
  1. 67～68行目

複数のESP32を利用できるようにデバイスID(deviceId)を付けました。
合言葉が合わないと、スプレッドシートに登録しないようにしました。

修正前

	//Google Spreadsheet
  	String urlFinal = url + "&temperature=" + String(temperature) + "&humidity=" + String(humidity);

修正後

    // Google スプレッドシート（GAS）に送る。合言葉がないと GAS は記録しない
    String urlFinal = url + "?device=" + String(deviceId) + "&temperature=" + String(temperature) + "&humidity=" + String(humidity) + "&key=" + String(writeKey);

追加したファイル(secrets.example.h)

このファイルはサンプルなので、コピーして名前を(secrets.h)としてください。
他の人に秘密にしたい情報を登録します。

// 秘密情報の見本（Git で管理する）
// このファイルを secrets.h という名前でコピーし、本物の値を書く。

//Wi-Fi
const char* ssid = "your-ssid"; // 自分の WiFi の ssid を書く
const char* password = "your-password";  // 自分の WiFi の パスワードを書く

// 端末ID（ほかの端末と重ならないこと。半角の英数字・-・_ だけで 32 文字まで）
const char* deviceId = "your-deviceid";

//ウェブアプリのURL(GAS)
const String url = "https://script.google.com/macros/s/xxxxxxxx/exec"; // GAS のデプロイで発行された /exec の URL を書く

//合言葉
const char* writeKey = "your-write-key"; // 半角の英数字だけで 20 文字以上。GAS のスクリプト プロパティ WRITE_KEY と同じ値を書く

※ url はスプレッドシートでApps Scriptをデプロイするまで不明です。
「10. ウェブアプリとして公開する（デプロイ）」まで進んでから書き換えてください。

3. Googleスプレッドシート・作成

新しく作る方法と、DXセミナー2026の2回目で作ったスプレッドを利用する方法があります。
今回は、新しく作る方法で説明します。

ドライブでスプレッドを作る

ドライブで「＋新規」をクリック、「Googleスプレッドシート」を選択します。

Google ドライブの新規のメニュー

「空のスプレッドシート」をクリックする。

ドライブでスプレッドを作る

「無題のスプレッドシート」ができます。
無題のスプレッドシート

スプレッドに名前を付ける

左上の「無題のスプレッドシート」をクリックして、付けたい名前を入力します。

名前を付ける

4. Googleスプレッドシート・GAS登録

GAS機能呼び出し

「拡張機能」をクリックして、「Apps Script」をクリックする。

拡張機能

Apps Script ができます。

AppsScript

AppsScriptに名前を付ける

左上の「無題のプロジェクト」をクリックして、付けたい名前を入力します。

AppsScriptに名前を付ける

名前を付けました。

AppsScriptに名前を付けた

プログラムコードを全て消す

マウスで全て選択、または、Ctrl+a で全てを選択します。

コード選択

Delキーを押すと消えます。

コード削除

ダウンロードしておいた gas\コード.gs を貼る

受け取ったファイルの gas\コード.gs を、メモ帳で開きます。
ファイルを右クリック →「プログラムから開く」→「メモ帳」を押します。メモ帳が出ないときは「別のプログラムを選択」から選びます。

コード.gs をメモ帳で開くところ

メモ帳で、Ctrl キーを押しながら A キーを押し（すべて選ぶ）、Ctrl キーを押しながら C キーを押します（コピー）。

コード.gs をメモ帳でコピー

Apps Script に貼り付けます。

コード 貼り付け

保存します

コード 保存

合言葉を登録する

合言葉は英字と数字だけで作ります。
例 aikotoba1234567890

Apps Scriptの歯車をクリックします。

合言葉 歯車

下に移動して「スクリプトプロパティを追加」をクリックします。

合言葉 スクリプトプロパティ

以下の値を登録します。

合言葉 登録

合言葉の登録が完了しました。

合言葉 登録完了

5. Googleスプレッドシート・indexを作る

左の「ファイル」の右の「＋」を押し、「HTML」を押します。

ファイルを足すメニュー

名前を入れる欄が出るので、index と入力して Enter キーを押します。

index.html ができたところ

右側のコードを消します。

index.html 初期コードを消す

ダウンロードした gas\index.html をメモ帳で開きます。

index.html をメモ帳でコピー

Apps Script の index.html に貼り付けます。

index 貼り付け

保存します

index 保存

6. Googleスプレッドシート・地図の最初の場所

index.html の369行目にある center が中心位置です。
緯度と経度になります。
これを書き換えると変更できます。

      map: {
        center: [34.662004, 133.932435],

7. Googleスプレッドシート・初期設定

地図用の情報を登録するシートを追加します。

setupSheets を実行

「doGet」をクリックし、「setupSheets」を選択。
doGet

setupSheets が選択されます。
setupSheets

「実行」をクリック
実行

権限の確認

「権限を確認」をクリック
権限を確認

セキュリティの警告が表示されるので「詳細」をクリックします。
詳細

「DXセミナー2026-3 のスクリプト（安全ではないページ）に移動」をクリック。
安全ではないページ

DXセミナー2026･･･Googleアカウントへのアクセスを求めています」と表示されるので、「次へ」をクリックします。
アクセスを求めています1

もう1度、アクセス許可の画面になります。
アクセスを求めています2

下まで進めて「次へ」をクリックします。
アクセスを求めています3

Apps Scriptの画面に戻ります。
アクセスを求めています4

setupSheets を再実行

元の画面に戻るので、再度、「実行」をクリックします。
再実行

実行ログが表示されます。
実行ログ

スプレッドに3つのシートが追加されています。
スプレッドに3つのシートが追加

8. Googleスプレッドシート・ESP32の情報登録

ESP32の端末IDや表示名、緯度、経度を登録します。
ESP32情報登録1

端末IDとは: ESP32のプログラム secrets.h で指定した「デバイス名」です。

// デバイス名（他と重複しないこと）
const char* deviceId = "luke-01";

表示名

何でも良いです。ハウスの名前など。身近に名前が良いです。

経度緯度

Googleマップを使い調べます。(下記9を参照)

ESP32情報のサンプル

ESP32情報登録2

9. Googleマップから経度緯度を調べる

Googleマップで表示したい位置をクリックすると、URLの欄に経度、緯度が表示されます。
経度緯度調べ1

地名では無く自分でポイントした場所をクリックして、緯度経度を調べる。
経度緯度調べ2

調べた緯度経度は、コピー＆ペーストするか、手入力してください。

10. ウェブアプリとして公開する（デプロイ）

Apps Scriptの「デプロイ」→「新しいデプロイ」をクリックします。

デプロイのメニュー

「種類の選択」の歯車をクリックし、「ウェブアプリ」を選択します。

種類の選択でウェブアプリを選ぶところ

設定を登録し、「デプロイ」を押します。

新しいデプロイの設定

項目 入力・選択するもの
説明 初版
次のユーザーとして実行 「自分（あなたのメールアドレス）」
アクセスできるユーザー 「全員」

デプロイ後の情報をコピーして、メモ帳などで控えておきます。
「コピー」をクリックすれば、メモ帳でペーストするだけです。

ウェブアプリの URL が出たところ

URL は secrets.h の url になります。

//ウェブアプリのURL(GAS)
const String url = "https://script.google.com/macros/s/xxxxxxxx/exec"; // GAS のデプロイで発行された /exec の URL を書く

11. 動作の確認

11-(1). ESP32 は手元にないけど、スプレッドシートに書き込みできるか試す

メモ帳を使い、上記10で取得した URL に以下を足します。

?device=luke-01&temperature=20.5&humidity=50&key=aikotoba1234567890

4つの項目をセットします。

書き込み URL

ブラウザのURL欄に貼り付けます。

ブラウザ貼り付け

Enterキーを押すと実行されます。
「success」と表示されたら成功です。

ブラウザ実行

スプレッドシートのシート「測定データ」を見ると、登録されています。

測定データ

スプレッドシートのシート「最新値」に、測定データの温度、湿度がコピーされます。

最新値

11-(2). 地図を表示

上記10のURLだけをブラウザのURL欄に貼ります。

地図

※画面上部に表示される「このアプリケーションは・・・」はGoogleの仕様で非表示にできません。