初めに

皆さんはログイン画面を作ってみたいと思ったことはありませんでしょうか？
今回はhtml,javascipt,cssを使って簡単なログイン画面を作っていきたいと思います。

ファイル構成

今回はloginというフォルダの下に、login.html,script.js,style.cssを作成します。図は以下の通りです。

login---|
        |
        |--main.html
        |
        |--script.js
        |
        |--style.css

完成版

以下が完成版の画像になります。

コードを張り付ける-css

ではまずstyle.cssに以下のプログラムをコピペしてください。

style.css

.textbox {
    width: 350px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgb(145, 145, 145);
}

.button {
    width: calc(20% + 30px);
    height: 30px;
    background-color: rgb(105, 230, 121);
    border: none;
    border-radius: 5px;   
}

.container {
    width: 400px;
    height: 500px;
    background-color: white;
    color: black;
    border-radius: 20px;
    margin: 0 auto;
    border: 1px solid rgb(156, 156, 156);
    left: 1000px;   
}

body {
    background-color: rgb(180, 182, 255);
}

.button:hover {
    
   background: rgb(188, 189, 255);

}

.textbox:hover {
    background-color: rgb(188, 189, 255);
}

.margin {
    margin-top: 20px;
}
.container2 {
    width: 300px;
    height: 300px;
    border-radius: 10px;
    border: 1px solid black;
    background-color: white;
    color: black;
    position: relative; /* 追加 */
    left: 70%; /* 左端を画面中央に移動 */
    transform: translateY(-500px);
}

張り付ける-html

次に、main.htmlに次のプログラムをコピペします。

main.html

<!DOCTYPE html>
<head>
    <title>ログイン-google</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <center>
            <div class="container">
            <h1>ログイン</h1>
            <p>作業を続けるには、ログインしてください。</p>
            <p>ユーザー名</p>
            <input type="text" id="username" class="textbox" placeholder="ユーザー名を入力">
            <p>パスワード</p>
            <input type="password" id="pass" class="textbox" placeholder="パスワードを入力">
            <br><input type="checkbox" id="showpassword" onchange="showOrHide()" class="margin">
            <span>パスワードを表示する</span>
            <br><input type="button" value="ログイン" class="button margin" onclick="login()">
        </div>
        </center>
        <div class="container2">
            <center>
            <h1>アカウント情報</h1>
            </center>
            <p id="user">ユーザー名：</p>
            <p id="age">年齢:</p>
            <p id="email">Eメール:</p>
            <p id="password2">パスワード：</p>
        </div>
    
</body>
<script src="script.js"></script>

張り付け-javascript

最後に、script.jsに以下のプロググラムをコピペしてください。

script.js

function showOrHide() {//パスワードを表示するか隠すかを判断するプログラム
    let showpass = document.getElementById("pass");
    let check = document.getElementById("showpassword");
    if (check.checked) {
      showpass.type = "text";
    } else {
      showpass.type = "password";
    }
  }
  
  let userdata = [//必要に応じてここにログイン情報を追加する。例:{name: "user4",age: 24, email: "user4@exam@;e.com" password: "user-4"}
    { name: "administrator", age: 20, email: "Administrator@example.com", password: "Administrator" },
    { name: "user1", age: 21, email: "user1@example.com", password: "user-1" },
    { name: "user2", age: 22, email: "user2@example.com", password: "user-2" },
    { name: "user3", age: 23, email: "user3@example.com", password: "user-3" }
  ];
  
  function login() {
    let loginuser = ""
    let username = document.getElementById("username").value;
    let password = document.getElementById("pass").value;
  
    let found = false;
    let i = 0;
  
    while (!found && i < userdata.length) {//foundがtrueを返すかuserdataのlengthがiより少なくなるまで以下の処理を実行
      loginuser = userdata[i];
      if (loginuser.hasOwnProperty("name") && loginuser.hasOwnProperty("password")) {//データが破損していないかの確認（参考:chatgpt）
        if (loginuser.name === username && loginuser.password === password) {
          found = true;
        }
      }
      i++;
    }
  
    if (found) {/*foundがtrueの場合にcontainer2の要素(<p>)を上書きする。*/
      alert(`こんにちは。${username}さん。`);
      console.log(`logined is ${username}`);
      document.getElementById("user").textContent = "ユーザー名:"+loginuser.name;
      document.getElementById("age").textContent = "年齢:"+loginuser.age;
      document.getElementById("email").textContent = "Eメール:"+loginuser.email;
      document.getElementById("password2").textContent = "パスワード:"+loginuser.password;
    } else {
        alert("ログインに失敗しました。入力している内容がデータと一致しませんでした。間違いがない場合は、ユーザーデータが破損している可能性があります。入力内容に誤りのない場合は、javascriptファイルのuserdata変数を確認してください。\nEnglish...Login failed. Data in the user data variable may be corrupted or entered incorrectly. If there are no typos in what you entered, please check the userdata variable in javascript.");
        console.log("Login failed. Data in the user data variable may be corrupted or entered incorrectly. If there are no typos in what you entered, please check the userdata variable in javascript.");

    }
  }

javascriptコードの説明

showOrHide

パスワードを表示するか非表示にするかを判定するためのプログラム

処理の流れ(showOrHide())

1,htmlのチェックボックスの内容をdocument.getElementByIdで読み取る
もしcheck.checkdがtrueの場合(checkはその要素の内容を格納した変数)、showpass.typeがpasswordからtextになる。

userdata(変数)

userdataでname,age,email,passwordの4つのデータ×4が入っており、ログインデータを追加したい場合は、上記のuserdataのようなデータをuserdata変数に追加すればよい。

login()

ユーザーが入力した値がloginuserの内容と一致するか確認するためのプログラム

処理の流れ(login())

1,ユーザーが入力したユーザー名とパスワードの内容をdocument.getElementByIdで取得する。
2,foundという変数を作り、内容をfalseにする。iという変数に0を代入する。
3,while文を実行(条件式はfoundがfalseまたはuserdata.lengthがiより少なくなるまで)
4,loginuserにuserdataのi番目のデータを代入
5,loginuserのデータが破損していないかの確認(参考:chatGPT)
6,loginuserの内容(ユーザー名とパスワード)がユーザーが入力しているものと一致していたらfoundをtrueにして処理を終了
7,もし、foundがtrueだったら、成功メッセージを表示し、container2の内容(p要素など)を書き換える
8,もし失敗したら、エラーメッセージを表示する。

最後に

皆さんいかがだったでしょうか？今回はhtmlで簡単なログイン画面を作りました。ちなみにcssのcontainer2は少しchatGPTに助けてもらいながらコードを書きました。（translateYなど）
それではまたお会いしましょう！