記事の概要
スプシを使って柔らかくAPIからログ記録
作成日：2025-07-27
最終更新日：2025-07-27
記事の文字数：1882
本記事のトピック
- 概要
- 手順
- セキュリティ面は注意
スプシを使って柔らかくAPIからログ記録
概要
Googleスプレッドシート（＝スプシ）を使って、クライアント側の情報などを以下のように簡単にログに記録する方法を載せています。
今回のユースケースは、Webページ上からJavaScriptを介してスプシに記録する流れですが、本質は「簡単にログ取得のWebAPIを公開できるよ」というところなので、いろいろなケースに汎用的に使えると思います。
メリット
- 簡単に実装可能（スプシ側の準備は10分ぐらい）
- Googleアカウントのみで可能（自分でサーバーを用意する必要はない）
手順
スプシ側の設定
スプシ側にGAS（GoogleAppsScript）の設定をしていきます。
以下の画面の流れで「①コード作成」→「②デプロイ」すれば多分いけると思います。（デプロイ時に出てくるURLがAPIのエンドポイントになるのでコピーしておきましょう）
画像クリックで等倍
画像クリックで等倍
画像クリックで等倍
画像クリックで等倍
書いているコードは以下です。
function doPost(e) {
const headers = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Content-Type'
};
try {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
const json = JSON.parse(e.postData.contents);
const type = json.type || '（空）';
const content = json.content || '（空）';
const contentSplit = content.split("|");
const timestamp = new Date();
sheet.appendRow([timestamp, type, ...contentSplit]);
return ContentService
.createTextOutput(JSON.stringify({ status: 'success' }))
.setMimeType(ContentService.MimeType.JSON)
.setHeaders(headers);
} catch (err) {
return ContentService
.createTextOutput(JSON.stringify({ status: 'error', message: err.message }))
.setMimeType(ContentService.MimeType.JSON)
.setHeaders(headers);
}
}
A列に時間が、B列にクライアントから渡された区分が、C列以降にクライアントから渡された本文が「|」で分けられて、C・D・E...列に入っていきます。
クライアント（例：JavaScript）側の設定
クライアント側……今回のケースでは、Webサイト訪問者側からJavaScriptで以下のようにスプシ側で作成したWebAPIを叩けば、自動的にスプシに保存されていきます。
const url = '{スプシでデプロイしたときに出てくるURL}';
const type = '{自分で入れたいログの区分（B列に記録）}';
const content = '{自分で入れたいログの区分（「|」で分けられて、C列以降に記録）}';
saveToSpreadSheet(url, type, content);
saveToSpreadSheet(url, type, content){
fetch(url, {
method: "POST",
mode: 'no-cors',
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
type: type,
content: content,
}),
});
}
セキュリティ面は注意
API自体はURLが分かれば誰でも使えるので、あくまで超お手軽に使える程度の認識でいましょう。
コメントログ
コメント投稿
管理人ツイート
