Google Apps Scriptでパスワード不要の新感覚Webアプリ開発（ネタ）

<iframe width="560" height="315" src="https://www.youtube.com/embed/yHh-rnHIsPM?si=iDPXl1sXmdmsR7Uj" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

# まずはhtmlの中身を表示してみよう

まず、doGet関数を作って下記のように1行追加するだけで、GAS内のHTMLファイルを呼び出して表示することができます。

```js: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が発行されます。

![スクリーンショット 2024-12-26 21.48.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/2ddd2cd7-4857-bc48-8293-5d43b4850e07.png)

## ログインしている人だけ表示させたい

GASのファイルを次のように変更し、login.htmlを新しく作成してください。

```js: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を変えずにデプロイし続けることができます。

![スクリーンショット 2024-12-26 21.52.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/724650b7-200d-13c6-66b1-d4f38de5f327.png)

最後に、スプレッドシートに「user」というシートを作り、下記のようなデータを作成してください。

![スクリーンショット 2024-12-26 21.42.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216701/84011bc5-b3a8-b08a-4845-38feb64b696b.png)

3行目に、実際にログインしているユーザーが書かれていればログインできるし、書かれていなければログインできずにログインのページに移動されると思います。

# おまけ

メールアドレスとパスワードを直接入力してログインできるようにしたい場合、下記のプログラムをGASファイルに追加してみてください。

```js: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

スプレッドシートのデータを表示させたい場合は、下記のようにしてみてください。

```js: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日追加）

現在、クラウドファンディング実施中！

https://www.kickstarter.com/projects/teabreak/sustain-japans-600-year-tea-legacy-with-shizuokas-teabreak?ref=z6jlur