Google認証 × Google Sheets API でつくる「業務アプリの土台」

  • 投稿日
  • 著者 宮崎翼
  • カテゴリー コラム

― 中小企業と自治体で最も採用される仕組みとは？

（メタディスクリプション：Google認証とGoogle Sheets API を組み合わせた
「スプレッドシート連携型アプリ」は、中小企業・自治体で最も導入される方式です。
本記事では、認証設定、API連携、よくあるエラー対処まで“実務で使えるレベル”で解説します。）

はじめに：なぜ今「Google連携型アプリ」が求められるのか

中小企業や自治体の方から、次のような相談をよくいただきます。

「自社専用アプリを作りたい。でもデータはGoogleスプレッドシートのまま使いたい。」
「エンジニアがいなくても、業務データをリアルタイム同期したい。」

日本企業の多くは Google Workspace を業務基盤にしており、
既存のスプレッドシートを“そのまま活かせる”アプリ構築が求められています。

そこで最適なのが、
Google認証（OAuth 2.0）＋ Google Sheets API

という組み合わせです。

本記事の対象読者

  • 中小企業や自治体で業務アプリを導入したい方

  • ノーコード / ローコードでアプリ開発したい方

  • Google Sheets をそのままデータベースにしたい方

  • エンジニアの方で Google API を実務利用したい方

目次

  1. Google認証×Sheets APIが選ばれる理由

  2. 実装全体の流れ（図解）

  3. OAuthクライアントIDの設定方法

  4. 認証の実装（Google Identity Services）

  5. よくあるエラーと最速の解決方法

  6. AppTalentHubが実案件で得た知見

  7. まとめ

1. Google認証 × Sheets API が選ばれる理由

1-1. データ移行コストが“ゼロ”

ほとんどの現場ではスプレッドシート運用。
新しいシステムを導入しても「Excelに戻る」文化があります。

→ Sheetsをそのまま使えば導入抵抗がゼロ。

1-2. 権限管理が簡単（Googleアカウントだけ）

  • 社内アカウントでログイン

  • シート共有権限をそのまま利用

ITが苦手な企業でも扱いやすい方式です。

1-3. 開発コストが最小化できる（ノーコード向き）

  • バックエンド不要

  • トークンだけで書き込み可能

  • 少人数でも運用できる

AppTalentHubの理念である「誰でも業務アプリを作れる未来」に直結します。

（※画像推奨：Googleアカウント→トークン→Sheets の流れ図）

2. 実装全体の流れ（図解）

以下が認証から書き込みまでの大まかな流れです。

ユーザーがGoogleでログイン
↓
Google Identity Services がアクセストークンを発行
↓
Webアプリがトークンを受け取る
↓
Google Sheets API に書き込み
↓
スプレッドシートに反映

これを実現するために必要なのは、

  • OAuthクライアントID

  • Google Sheets API の有効化

この2つだけです。

3. OAuth 2.0 クライアントIDの設定方法

3-1. Google Cloud Console でプロジェクト作成

3-2. Google Sheets API を有効化

3-3. OAuth クライアントIDを作成

特に重要なのは以下の2点：

  • 承認済みのJavaScript生成元

  • 承認済みのリダイレクトURI

ここが1文字でもズレると
「redirect_uri_mismatch」が必ず発生します。

4. Google Identity Services を使った認証実装

4-1. 認証クラス（JavaScript）

class GoogleSheetsService {
constructor() {
this.accessToken = null;
this.clientId = null;
this.isAuthenticated = false;
}

async signIn() {
return new Promise((resolve, reject) => {
try {
const clientId = this.clientId ||
localStorage.getItem("google_client_id") ||
"YOUR_CLIENT_ID";

if (!clientId) {
reject(new Error("Google Client ID が設定されていません。"));
return;
}

const client = google.accounts.oauth2.initTokenClient({
client_id: clientId,
scope: "https://www.googleapis.com/auth/spreadsheets",
callback: (response) => {
if (response.error) {
reject(new Error(response.error));
return;
}
this.accessToken = response.access_token;
this.isAuthenticated = true;
resolve(true);
}
});

client.requestAccessToken();
} catch (err) {
reject(err);
}
});
}
}

4-2. HTML側

<script src="https://accounts.google.com/gsi/client" async defer></script>

<button onclick="signIn()">Googleでログイン</button>

<script>
async function signIn() {
try {
await googleSheetsService.signIn();
alert("認証成功");
} catch (e) {
alert(e.message);
}
}
</script>

5. よくあるエラーと最速の解決方法

■ エラー1：Google Sheets API has not been used…

原因：API未有効化
解決：エラー内のURL → 「有効化」

■ エラー2：redirect_uri_mismatch

チェック：

  • URL末尾のスラッシュ / まで完全一致？

  • /index.html 登録済み？

■ エラー3：Unable to parse range

原因：シート名や範囲指定の不一致
対策：

  • シート名に空白や記号を使わない

  • 困ったらシート名を「Sheet1」に統一

■ エラー4：認証成功なのに書き込めない

原因：

  • シート権限が「閲覧のみ」

  • API未有効化

  • スコープが readonly

→ 使用すべきスコープは
「https://www.googleapis.com/auth/spreadsheets」

（※画像推奨：エラーメッセージ例）

6. AppTalentHubが実案件で得た知見

6-1. エラーは“自力で解決できる仕組み”が重要

  • プロジェクト番号やURLを自動抽出

  • モーダルで案内

  • ワンクリックで有効化URLへ誘導

これだけでサポート負荷が激減します。

6-2. 非エンジニア向けUIが導入成功の鍵

  • 接続テスト

  • 自動入力

  • チェックリスト

これらを用意すると導入率が大幅アップ。

6-3. スプレッドシートは万能ではない

10万行を超えると重くなるため、
規模が大きい場合は Firestore や Supabase との併用が現実的。

7. まとめ：Google × Sheets × 認証は「未来の業務アプリの基盤」

この方式は

  • 中小企業

  • 自治体

  • 非エンジニア

  • 個人開発者

既存のスプレッドシートを活かしながら、
自社専用アプリを最速で構築したい企業に最適です。

API連携 AppTalentHub Google Identity Services Google OAuth Google Sheets API Google認証 OAuthエラー対策 Webアプリ開発 スプレッドシートデータベース スプレッドシート連携 ノーコード ローコード 中小企業DX 業務アプリ開発 自治体DX

この記事を書いた人

宮崎翼

愛媛県出身・東京都在住。
国立工業高専（新居浜工業高等専門学校）卒業後、外資系ソフトウェア企業などで法人営業・IT導入支援に従事し、BtoB領域で多様な新規開拓やエンタープライズのDX推進を経験。

現在は「AppTalentHub」の理念、ノーコード／ローコードを活用したアプリ開発の標準化と、エンジニアのスキルの可視化による適正評価を実現するためのプロジェクトやコミュニティ運営に取り組んでいます。
https://tsubasa.tech/about

記事一覧