【2021.10.19】GASのWebアプリでおしゃれなログイン画面をつくる方法！

かれん

2021年10月20日 03:07

こんにちは！かれんです！

こういうおしゃれで素敵な（強制）画面つくってみたいけど、、

ログイン認証機能って、、なんかムズカシソウ、、

って思ってたけど、コピーペッペッでできる方法を見つけてしまいました☆

ということで今回は、「GASのWebアプリでおしゃれなログイン画面をつくる方法」についてです。

さっそくいきましょう！

1. ログイン画面（login.html）を作る

ファイル→HTML→loginと入力しenter→body内に⬇︎コピペ

<body>
   <div class="form-wrapper">
     <h1>ログイン</h1>
     <form method="post" action="①">
       <div class="form-item">
         <label for="name"></label>
         <input type="name" name="name" required="required" placeholder="名前"></input>
       </div>
       <div class="form-item">
         <label for="password"></label>
         <input type="password" name="password" required="required" placeholder="パスワード"></input>
       </div>
       <div class="button-panel">
         <input type="submit" class="button" title="Login" value="Login"></input>
       </div>
     </form>
   </div>
 </body>

→保存

①には、自分の今作ってるWebアプリのURLを貼る

（まだ一回もデプロイしてないときは、デプロイしてURLを貼る）

（デプロイってなに？って方➡︎デプロイ（公開）の仕方）

2. エラー画面（error.html）を作る

ファイル→HTML→errorと入力しenter→body内に⬇︎コピペ

<body>
   <h2>アクセス権限のないユーザーです</h2>
 </body>

→保存

3. ログイン機能を実装する

コード.gs→doGet()⬇︎コピペ

function doGet() {
    const htmlOutput = HtmlService.createTemplateFromFile("login").evaluate();
    htmlOutput.setTitle("はじめてのWebアプリだよ");

    return htmlOutput;
}

→その下にdoPost()⬇︎コピペ

function doPost(postdata){
 const name = postdata.parameters.name.toString();
 const password = postdata.parameters.password.toString();
 const checkAccount = judgeAccounts(name, password);
 let template;

 if(checkAccount === true) {
   template = HtmlService.createTemplateFromFile('index').evaluate().setTitle("最初の画面");
 } else {
   template = HtmlService.createTemplateFromFile('error').evaluate().setTitle("エラー");
 }

 return template;
}

function judgeAccounts(name, password){
 var accounts = [
   {"name": "山田", "password": "ya"},
   {"name": "佐藤", "password": "satou2222"}
 ] 
 
 const judge = accounts.some(function(account) {
   return account["name"] === name && account["password"] === password;
 });

 return judge;
}

→保存

4. ログイン画面をデザインする

ファイル→HTML→login-cssと入力しenter→⬇︎コピペ

<style type="text/css">
/* Fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400);  //英数字のフォント
//日本語のフォントはsans-serifで統一（もともと用意されてる）

/* Simple Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* body */
body {
 background: #e9e9e9;
 color: #5e5e5e;
 font: 400 87.5%/1.5em sans-serif;
}
/* Form Layout */
.form-wrapper {
 background: #fafafa;
 margin: 3em auto;
 padding: 3em 1em;
 max-width: 370px;
}

h1 {
 text-align: center;
 padding: 1em 0;
}

h2 {
 text-align: center;
 padding: 1em 0;
}

form {
 padding: 0 1.5em;
}

.form-item {
 margin-bottom: 0.75em;
 width: 100%;
}

.form-item input {
 background: #fafafa;
 border: none;
 border-bottom: 2px solid #e9e9e9;
 color: #666;
 font-family: sans-serif;
 font-size: 1em;
 height: 50px;
 transition: border-color 0.3s;
 width: 100%;
}

.form-item input:focus {
 border-bottom: 2px solid #c0c0c0;
 outline: none;
}

.button-panel {
 margin: 2em 0 0;
 width: 100%;
}

.button-panel .button {
 background: #f16272;
 border: none;
 color: #fff;
 cursor: pointer;
 height: 50px;
 font-family: 'Open sans', sans-serif;
 font-size: 1.2em;
 letter-spacing: 0.05em;
 text-align: center;
 text-transform: uppercase;
 transition: background 0.3s ease-in-out;
 width: 100%;
}

.button:hover {
 background: #ee3e52;
}
</style>

→保存

（英数字のフォントはGoogleフォントからとってきました！やり方は一番下に載せます）

5. デザインを反映させる

<head>
   <base target="_top">
   <?!= HtmlService.createHtmlOutputFromFile('login-css').getContent(); ?>
 </head>

→どちらも保存

6. 新バージョンでデプロイ

デプロイ→デプロイを管理→右上の編集ボタン

→バージョンを新バージョンにする→デプロイ

（詳しいやり方はこちら）

7. 同じURLから入ると、、

できた〜〜！！

まとめ

最後まで読んでいただき本当にありがとうございます！

今回は、「GASのWebアプリでおしゃれなログイン画面をつくる方法」についてお伝えしました。

ちなみに私は素敵なデザインがたくさんある⬇︎サイトからコピペしてきました♡（その中の「一枚の紙」というやつです）

そして、Googleフォントの使い方が知りたい方は⬇︎

じゃまたね〜♡

この記事が気に入ったらサポートをしてみませんか？