はじめに
javascriptとhtml、cssを使って簡単なログイン機能を書いてみました。
ファイル構成
login |--html
| |
| |--login.html
| |--profile.html
| |--create-account.html
|
|--app.js
|
|--styles.css
HTML
login.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ログイン</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>ログイン</h2>
<form id="loginForm">
<input type="email" id="email" placeholder="メールアドレス" required>
<input type="password" id="password" placeholder="パスワード" required>
<button type="submit">ログイン</button>
</form>
<p>アカウントをお持ちでない方は <a href="create-account.html">新規アカウント作成</a></p> <!-- ここを修正 -->
</div>
<script src="app.js"></script>
</body>
</html>
profile.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ユーザープロフィール</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>ようこそ、<span id="displayName"></span>さん</h2>
<img id="displayIcon" alt="ユーザーアイコン" style="width:100px;height:100px;">
</div>
<script src="app.js"></script>
</body>
</html>
create-account.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新規アカウント作成</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>新規アカウント作成</h2>
<form id="accountForm">
<input type="email" id="newEmail" placeholder="メールアドレス" required>
<input type="password" id="newPassword" placeholder="パスワード" required>
<input type="text" id="username" placeholder="ユーザー名" required>
<input type="file" id="userIcon" accept="image/jpeg" required>
<button type="submit">アカウント作成</button>
</form>
</div>
<script src="app.js"></script>
</body>
</html>
CSS
styles.css
/* 基本設定 */
body {
font-family: 'Poppins', sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* コンテナのスタイル */
.container {
width: 100%;
max-width: 350px;
padding: 30px;
background-color: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
text-align: center;
}
/* 見出しスタイル */
h2 {
margin-bottom: 20px;
font-size: 1.5rem;
color: #333;
font-weight: 600;
}
/* 入力フィールドのスタイル */
input[type="email"],
input[type="password"],
input[type="text"],
input[type="file"] {
width: 80%;
max-width: 280px;
padding: 12px 15px;
margin: 10px 0;
border: 2px solid #ddd;
border-radius: 8px;
background-color: #f9f9f9;
font-size: 1rem;
transition: border 0.3s, background-color 0.3s;
}
/* フォーカス時のスタイル */
input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus {
border-color: #b654c5;
background-color: white;
outline: none;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
/* ボタンのスタイル */
button {
width: 80%;
max-width: 280px;
padding: 12px;
background-color: #b654c5;
color: white;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s, box-shadow 0.3s;
}
/* ボタンホバー時のエフェクト */
button:hover {
background-color: #b654c5;
box-shadow: 0 4px 12px rgba(0, 91, 179, 0.2);
}
/* リンクのスタイル */
p a {
color: #b654c5;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
p a:hover {
color: #b654c5;
}
/* ユーザーアイコンのスタイル */
#displayIcon {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
margin-top: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* レスポンシブ設定 */
@media (max-width: 768px) {
.container {
width: 90%;
}
}
JavaScript
app.js
// ログインフォームの処理
if (document.getElementById('loginForm')) { //HTMLの'loginForm'を確認
document.getElementById('loginForm').addEventListener('submit', function(e) { //'loginForm'があった場合のイベントを追加
e.preventDefault(); //デフォルトの動作をキャンセルする
const email = document.getElementById('email').value; //ユーザーが入力したemailを取得
const password = document.getElementById('password').value; //ユーザーが入力したpasswordを取得
const storedEmail = getCookie('email'); //クッキーに保存されたemailを取得
const storedPassword = getCookie('password'); //クッキーに保存されたpasswordを取得
if (email === storedEmail && password === storedPassword) { //ユーザーが入力したemailとpasswordがクッキーに保存されている情報と一致しているか確認
window.location.href = 'profile.html'; //一致している場合profile.htmファイルに移動
} else {
alert('Incorrect email or password'); //一致していない場合アラートが表示
}
});
}
// アカウント作成フォームの処理
if (document.getElementById('accountForm')) { //HTMLの'accountForm'を確認
document.getElementById('accountForm').addEventListener('submit', function(e) { //'accountFormがあった場合のイベントを追加
e.preventDefault(); //デフォルトの動作をキャンセルする
const email = document.getElementById('newEmail').value; //ユーザーが入力したemailを取得
const password = document.getElementById('newPassword').value; //ユーザーが入力したpasswordを取得
const username = document.getElementById('username').value; //ユーザーが入力したユーザー名を取得
const userIcon = document.getElementById('userIcon').files[0]; //ユーザーが入力したアイコンを取得
if (userIcon && userIcon.type === 'image/jpeg') { //ユーザーがアップロードしたアイコンがjpegか確認
const reader = new FileReader(); //画像を読み込む
reader.onload = function(e) { //読み込みが終えたら実行する処理（クッキーに保存）
setCookie('email', email, 7); //ユーザーが入力したemailをクッキーに保存
setCookie('password', password, 7); //ユーザーが入力したpasswordをクッキーに保存
setCookie('username', username, 7); //ユーザーが入力したをユーザー名クッキーに保存
setCookie('userIcon', e.target.result, 7); //ユーザーが入力したアイコンをクッキーに保存
alert('Account created successfully'); //アカウントが作成されたことを表示
window.location.href = 'login.html'; //アカウント作成後login.htmlページにに移動
};
reader.readAsDataURL(userIcon); //ユーザーがアップロードした画像データを使えるようにする
} else {
alert('Please upload a JPEG image'); //ユーザーがアップロードしたアイコンがjpegではなかったに場合エラー表示する
}
});
}
// プロファイルページでユーザー情報を表示
if (window.location.pathname.includes('profile.html')) {
const username = getCookie('username'); //クッキーに保存されたユーザー名を取得
const userIcon = getCookie('userIcon'); //クッキーに保存されたアイコンを取得
if (username && userIcon) { //ユーザー名とアイコンが存在するか確認
document.getElementById('displayName').textContent = username; //クッキーから取得したユーザー名を表示
document.getElementById('displayIcon').src = userIcon; //クッキーから取得したアイコンを表示
} else {
window.location.href = 'login.html'; //クッキーに情報がない場合'login.html'ページに移動
}
}
// Cookieを設定する関数
function setCookie(name, value, days) { //クッキーを設定するための関数(ユーザー名, 値, 保存期間)
const date = new Date(); //Dateオブジェクトを作成
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); //クッキーの有効期限を設定
const expires = "expires=" + date.toUTCString(); //クッキーの有効期限をexpiresに変換 //日時を文字列に変換
document.cookie = name + "=" + value + ";" + expires + ";path=/"; //クッキーを作成(名前、値、有効期限、サイト全体で有効であることを指定)
}
// Cookieを取得する関数
function getCookie(name) { //クッキーの名前を引数として受け取る
const nameEQ = name + "="; //クッキーの名前を作る
const ca = document.cookie.split(';'); //クッキー全体を分割
for (let i = 0; i < ca.length; i++) { //各クッキーをループで確認
let c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length); //クッキー名が一致するか確認
} //ループが終えてもクッキーが届かなかった場合nullを返す
return null;
}