まずはhtmlの中身を表示してみよう
まず、doGet関数を作って下記のように1行追加するだけで、GAS内のHTMLファイルを呼び出して表示することができます。
web_back_end.gs
function doGet(e) {
return HtmlService.createTemplateFromFile('index').evaluate();
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>こんにちは！</h1>
</body>
</html>
初めてデプロイする場合、右上のデプロイボタンから「新しいデプロイ」をしてください。
ウェブアプリを選択して、アクセスできるユーザーを全員にすれば、誰でもアクセス可能なURLが発行されます。
ログインしている人だけ表示させたい
GASのファイルを次のように変更し、login.htmlを新しく作成してください。
web_back_end.gs
function doGet(e) {
const user = Session.getActiveUser();
const userEmail = user.getEmail();
const spreadsheet = SpreadsheetApp.openById('***スプシのID***');
const sheet = spreadsheet.getSheetByName("user");
const numColumn = sheet.getLastColumn(); // 列
const numRow = sheet.getLastRow()-1; // 行
const dataRange = sheet.getRange(2, 1, numRow, numColumn); // 範囲指定
const userdata = dataRange.getValues(); // データ取得
// ログインできるかどうかチェック
for (i in userdata) {
if(userEmail == userdata[i][0]){
return HtmlService.createTemplateFromFile('index').evaluate();
}
}
// ログインに戻る
return HtmlService.createTemplateFromFile('login').evaluate();
}
login.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="navbar-header">ログイン画面</div>
</nav>
<div class="container">
<form class="register-form" role="form" method="POST" action="***ウェブアプリのURL***">
<div class="form-group">
<label for="email">メールアドレス</label>
<div id="root">
<input id="email" type="email" class="form-control" name="email" v-model="email" required autofocus>
</div>
</div>
<div class="form-group">
<label for="password">パスワード</label>
<input id="password" type="password" class="form-control" name="password" required>
</div>
<br>
<div class="form-group">
<button onClick="doPost()" class="btn btn-success btn-block btn-round">ログイン</button>
</div>
</form>
</div>
</body>
</html>
「ウェブアプリのURL」部分には、デプロイで発行したURLを記載してください。
ここまでできれば、デプロイします。
二回目以降のデプロイの場合は、デプロイから「デプロイを管理」を押して、右上の編集（鉛筆マーク）を押して「新バージョン」としてデプロイします。こうすることで、URLを変えずにデプロイし続けることができます。
最後に、スプレッドシートに「user」というシートを作り、下記のようなデータを作成してください。
3行目に、実際にログインしているユーザーが書かれていればログインできるし、書かれていなければログインできずにログインのページに移動されると思います。
おまけ
メールアドレスとパスワードを直接入力してログインできるようにしたい場合、下記のプログラムをGASファイルに追加してみてください。
web_back_end.gs
function doPost(e) {
const email = e.parameter["email"];
const password = e.parameter["password"];
const spreadsheet = SpreadsheetApp.openById('***スプシのID***');
const sheet = spreadsheet.getSheetByName("user");
const numColumn = sheet.getLastColumn(); // 列
const numRow = sheet.getLastRow()-1; // 行
const dataRange = sheet.getRange(2, 1, numRow, numColumn); // 範囲指定
const userdata = dataRange.getValues(); // データ取得
for(let i = 0; i < userdata.length; i++){
if(password == userdata[i][1] && email == userdata[i][0]){
return HtmlService.createTemplateFromFile('index').evaluate();
}
}
return HtmlService.createTemplateFromFile('login').evaluate();
}
これで、Google Apps Scriptでパスワード不要の新感覚Webアプリが開発できましたね。しかも、ログインしていない人は、メールアドレスやパスワードを入力すればログインも可能ですね。
※セキュリティ面は全く考えてないので、お気をつけて。
おまけ2
スプレッドシートのデータを表示させたい場合は、下記のようにしてみてください。
web_back_end.gs
function goMyPageFunc(email) {
const template = HtmlService.createTemplateFromFile('index');
const spreadsheet = SpreadsheetApp.openById('***スプシのID***');
const sheet = spreadsheet.getSheetByName("***シートの名前***");
const numColumn = sheet.getLastColumn(); // 列
const numRow = sheet.getLastRow()-1; // 行
const dataRange = sheet.getRange(2, 1, numRow, numColumn); // 範囲指定
const values = dataRange.getValues(); // データ取得
template.email = email
template.values = values
return template.evaluate();
}
function doGet(e) {
const user = Session.getActiveUser();
const userEmail = user.getEmail();
const spreadsheet = SpreadsheetApp.openById('***スプシのID***');
const sheet = spreadsheet.getSheetByName("user");
const numColumn = sheet.getLastColumn(); // 列
const numRow = sheet.getLastRow()-1; // 行
const dataRange = sheet.getRange(2, 1, numRow, numColumn); // 範囲指定
const userdata = dataRange.getValues(); // データ取得
// ログインできるかどうかチェック
for (i in userdata) {
if(userEmail == userdata[i][0]){
return goMyPageFunc(userEmail);
}
}
// ログインに戻る
return HtmlService.createTemplateFromFile('login').evaluate();
}
function doPost(e) {
const email = e.parameter["email"];
const password = e.parameter["password"];
const spreadsheet = SpreadsheetApp.openById('***スプシのID***');
const sheet = spreadsheet.getSheetByName("user");
const numColumn = sheet.getLastColumn(); // 列
const numRow = sheet.getLastRow()-1; // 行
const dataRange = sheet.getRange(2, 1, numRow, numColumn); // 範囲指定
const userdata = dataRange.getValues(); // データ取得
for(let i = 0; i < userdata.length; i++){
if(password == userdata[i][1] && email == userdata[i][0]){
return goMyPageFunc(email);
}
}
return HtmlService.createTemplateFromFile('login').evaluate();
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1><?= email ?>さん、こんばんは！</h1>
<? for (let i = 0; i < values.length; i++) { ?>
<p><?= values[i][0] ?></p>
<? } ?>
</body>
</html>
宣伝（2024年12月26日追加）
現在、クラウドファンディング実施中！