Googleスプレッドシートのデータを活用したWebアプリを作りたいけれど、誰がアクセスしているのかを把握する方法がわからない方は多いのではないでしょうか。Apps Scriptを使えば、Googleアカウントによる認証を簡単に実装でき、ユーザーごとに異なるデータを表示するといったことも可能になります。この記事では、Apps Scriptで認証付きWebアプリを作成し、ユーザーを識別する具体的な手順を解説します。実際に動くサンプルコードを交えながら進めるので、初めての方でも安心してお試しいただけます。
【要点】Apps Scriptで認証付きWebアプリを作成する手順
- doGet関数とHTML Service: Webアプリのエントリポイントを作成し、HTMLを返すように設定します。
- Session.getActiveUser().getEmail(): アクセスしたユーザーのメールアドレスを取得し、個人を識別します。
- 認証設定の切り替え: アプリを公開する際に「自分」「組織内の全員」「全員」から適切なアクセス権を選択します。
ADVERTISEMENT
Apps Scriptで認証付きWebアプリを作るための基礎知識
Apps ScriptにはWebアプリを作成するための機能が標準で用意されています。主な構成要素は、サーバーサイドのコード(.gsファイル)と、クライアントサイドのHTMLファイルです。サーバーサイドではdoGet関数やdoPost関数を定義し、リクエストに応じてHTMLやJSONを返します。認証については、Googleアカウントに紐づいた情報をSession.getActiveUser()で簡単に取得できます。ただし、この関数が正しく動作するためには、Webアプリの公開設定でアクセス権限を適切に設定する必要があります。公開範囲を「全員(匿名を含む)」にするとユーザー情報は取得できません。必ず「組織内の全員」または「全員」でGoogleアカウントが必要な状態にしましょう。
認証付きWebアプリを作成する手順
1. GoogleスプレッドシートからApps Scriptプロジェクトを作成する
- スプレッドシートを開く
Googleドライブから新しいスプレッドシートを作成するか、既存のスプレッドシートを開きます。 - 拡張機能メニューを開く
メニューバーの「拡張機能」をクリックし、「Apps Script」を選択します。新しいタブでスクリプトエディタが開きます。 - プロジェクト名を変更する
デフォルトでは「無題のプロジェクト」となっているので、わかりやすい名前に変更してください。
2. HTMLファイルを追加する
- ファイルメニューからHTMLを追加
左側のファイル一覧で「+」アイコンをクリックし、「HTML」を選択します。ファイル名は「Index」など任意で構いません。 - テンプレートHTMLを記述する
以下のようなHTMLを記述します。<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>認証済みユーザーのページ</h1>
<p id="userInfo"></p>
<script>
google.script.run.withSuccessHandler(function(email) {
document.getElementById('userInfo').innerText = 'あなたのメールアドレス: ' + email;
}).getUserEmail();
</script>
</body>
</html>
3. サーバーサイドのコード(.gsファイル)を記述する
- コード.gsを開く
スクリプトエディタ左側の「コード.gs」を選択します。 - doGet関数とユーザー情報取得関数を記述する
以下のコードをコピー&ペーストします。function doGet() {
return HtmlService.createHtmlOutputFromFile('Index')
.setTitle('認証アプリ')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function getUserEmail() {
return Session.getActiveUser().getEmail();
} - プロジェクトを保存する
Ctrl+Sまたは「ファイル」→「保存」をクリックします。
4. Webアプリとして公開する
- デプロイメニューを開く
右上の「デプロイ」ボタンをクリックし、「新しいデプロイ」を選択します。 - 種類を選択する
「種類の選択」で「Webアプリ」を選びます。 - アクセス権限を設定する
「実行ユーザー」は「自分」、「アクセスできるユーザー」は「全員(Googleアカウントが必要)」または「組織内の全員」を選びます。匿名アクセスではメールアドレスが取得できません。 - デプロイしてURLをコピーする
「デプロイ」をクリックし、表示されたURLをコピーします。初回デプロイ時には承認画面が表示されるので、自身のGoogleアカウントで承認してください。
5. 動作を確認する
- 別のブラウザやシークレットモードで開く
コピーしたURLを別のブラウザやシークレットモードで開きます。Googleアカウントでログインしていない場合はログイン画面が表示されます。 - メールアドレスが表示されるか確認する
ログイン後に「あなたのメールアドレス: ○○@gmail.com」のように表示されれば成功です。
認証付きWebアプリ作成時の注意点とよくある失敗
Session.getActiveUser()が匿名ユーザーを返してしまう
Webアプリの公開設定で「全員(匿名を含む)」を選ぶと、Session.getActiveUser()がnullを返したり、誰のものでもないダミーの値を返すことがあります。必ず「全員(Googleアカウントが必要)」または「組織内の全員」を選択してください。また、テスト時に自分しかアクセスしない場合でも「自分」では動作しますが、他のユーザーがアクセスできません。
デプロイのたびに新しいURLが発行される
新しいデプロイを作成するたびにURLが変わります。既存のアプリを更新する場合は、同じデプロイを編集して「新しいバージョン」としてデプロイすることでURLを維持できます。具体的には、デプロイメニューから「デプロイを管理」を開き、該当のデプロイの「編集」アイコンをクリックしてバージョンを更新してください。
スクリプトの承認が正しく行われない
初回デプロイ時やコードを変更した際に、承認画面が表示されない場合があります。その場合は手動で承認を促す方法として、Apps Scriptエディタの「実行」メニューからdoGet関数を一度実行してみてください。そうするとOAuth同意画面が表示され、承認が進みます。
ADVERTISEMENT
アクセス権限の比較表
| アクセス権限 | ユーザー識別の可否 | 利用シーン |
|---|---|---|
| 自分 | 可能(自分だけ) | テストや個人利用 |
| 組織内の全員 | 可能(組織のGoogleアカウントが必要) | 社内ツール |
| 全員(Googleアカウントが必要) | 可能(Googleアカウントが必要) | 一般公開だがログイン必須 |
| 全員(匿名を含む) | 不可 | 認証不要の公開情報 |
まとめ
この記事では、Apps Scriptを用いて認証付きWebアプリを作成し、ユーザーを識別する手順を解説しました。doGet関数でHTMLを配信し、Session.getActiveUser().getEmail()でメールアドレスを取得することで、個人を特定できるようになります。公開設定で「全員(Googleアカウントが必要)」を選ぶことを忘れないでください。応用として、ユーザーごとに異なるスプレッドシートのデータを表示したり、編集履歴を残すことも可能です。ぜひ実際にコードを動かして、認証機能の仕組みを体験してみてください。
ADVERTISEMENT
超解決 第一編集部
疑問解決ポータル「超解決」の編集チーム。正確な検証と、現場視点での伝わりやすい解説を心がけています。
Googleスプレッドシートの人気記事ランキング
- 【Googleスプレッドシート】GOOGLEFINANCE関数で株価・為替を取得!リアルタイムデータの呼び出し
- 【Googleスプレッドシート】印刷範囲を指定して印刷!特定範囲だけPDFや紙に出す手順
- 【Googleスプレッドシート】新しいスプレッドシートを作成する3つの方法!ドライブ・URL・テンプレート
- 【Googleスプレッドシート】数値の連続データを自動入力!オートフィルの活用
- 【Googleスプレッドシート】ダークモードを有効にする!目に優しい配色への切替
- 【Googleスプレッドシート】株価APIで株式データを自動取得!GOOGLEFINANCE超え活用
- 【Googleスプレッドシート】共有相手が編集できない時のチェック!権限と許可状態の確認
- 【Googleスプレッドシート】ページ設定で用紙サイズと向きを調整!印刷レイアウトの基本
- 【Googleスプレッドシート】Excelファイルxlsxをインポートする手順!ドラッグ&ドロップで取り込み
- 【Googleスプレッドシート】条件付き書式をコピーする!書式のみペーストの活用