Webアプリ「Reading Tracker」リリースしました
ご利用はこちらから！
前記事にて紹介した手順を踏んで制作したのが当Webアプリ「Reading Tracker」になります。公開初期(前記事時点)と比べて、仕様も見た目もずいぶん変わりました。
はじめに
「読書時間を自動で記録できたら便利だな」
そんな思いから、Googleスプレッドシートにデータを書き込むWebアプリを作りました。
開発に使った技術は Google Apps Script（GAS）、PHP、HTML/CSS、JavaScript。
GASをWebアプリとしてデプロイし、PHPを中継サーバーに使うことで、
認証を通さずスプレッドシートに安全に書き込める仕組みを構築しています。
完成版はこちら♪(リリースが嬉しくて何度も提示)
開発のきっかけ
もともと読書習慣をつけたいと思っていましたが、Kindleのような電子書籍サービスはAPIが公開されておらず、読書時間を自動で取る仕組みが作れませんでした。
そこで、「自分で作ってみよう」と思い立ち、ChatGPTを相棒にプロトタイプから構築していきました。
全体の構成
Reading Tracker の構成はシンプルです。
HTML + CSS + JavaScript
↓ fetch()
relay.php
↓
Google Apps Script（GAS）
↓
Google スプレッドシート
- フロントエンド：UI構築（HTML/CSS）＋動作制御（JavaScript）
- PHP：WAF回避とCORS対策を担う中継レイヤー
- GAS：スプレッドシートへの書き込み・読み出し
- スプレッドシート：ログの保存先（データベース代わり）
使えるようになるまでの流れ
- スプレッドシートを用意（空白でOK）
- GASをWebアプリとしてデプロイ（アクセス権：全員）
- PHPサーバーに relay.php を配置（CORS対応）
- index.html, style.css, app.js を同階層に配置
- .js 内でシートURLと relay.php のURLを指定
これで、ブラウザから読書開始・終了を押すだけで、スプレッドシートにデータが記録されます。
実装のポイント
Google Apps Script 側 (doPost(e))
function doPost(e) {
const mode = e.parameter.mode;
const ss = SpreadsheetApp.openByUrl(e.parameter.sheetUrl);
const sheet = findOrCreateTargetSheet(ss);
...
}- モード別処理（append_start, append_end, verify, delete_row）
- ヘッダー構造が一致するシートを自動検出
- 一致しない場合は新しいシートを生成
- 日本時間（JST）で時刻変換
PHP 側 (relay.php)
<?php
$url = 'https://script.google.com/macros/s/xxxxxxxx/exec';
$data = $_POST;
$options = [
'http' => [
'method' => 'POST',
'content' => http_build_query($data),
'header' => "Content-Type: application/x-www-form-urlencoded\r\n"
]
];
$context = stream_context_create($options);
$result = file_get_contents($url, false, $context);
echo $result;
?>PHPは「GASに直接POSTできない」環境でのCORS回避・WAF対策用。
この1ファイルで通信が安定します。
JavaScript 側 (app.js)
- fetch()で relay.php にPOST → GAS経由でスプレッドシートへ
- ローカルに履歴・進行中IDを保持（localStorage）
- 「照合」ボタンでGASから進行中データを取得・表示
- 「続ける」「終了」「削除」「×閉じる」などのUI操作をすべてJavaScriptで制御
スプレッドシートの構造
| 列 | 項目名 | 内容 |
| A | ID | 一意の識別子 |
| B | タイトル | 書籍名 |
| C | 開始日時 | JST |
| D | 終了日時 | JST |
| E | 経過時間(分) | 自動計算 |
| F | 状態 | 「進行中」or「完了」 |
- 構造が一致するシートに追記
- 空白シートは自動で初期化して使用
- 構造が違う場合も新シート生成で安全運用
デザイン面での工夫
- クラフト紙風の背景と文具感のある配色
- ボタンはすべて同じ色相系で統一
- こげ茶文字で柔らかいコントラスト
- 音（完了／警告）とミュートボタンを搭載
- 一覧（照合結果）を自動・手動どちらでも閉じられる設計
「使っていて心地よい」UIを目指しました。
今回学べたこと
- GASを「Webアプリ」として外部通信に活用する方法
- PHPを介したCORS・WAF回避構成
- スプレッドシートを“簡易DB”として使う設計思想
- UIの状態管理（ローカルストレージ・DOM制御）
- 小規模アプリでも「例外時の挙動」を丁寧に扱う重要性
関連リンク
まとめ
Reading Tracker は「GAS × Web × スプレッドシート」で構築した、軽量かつ実用的な読書記録アプリです。
クラウド上で動くため、インストール不要。コードもすべて公開しているので、学習素材としてもおすすめです。
GASを通じてWebとスプレッドシートをつなぐ体験は、“プログラミングが日常に入り込む”感覚が味わえます。
コメント