こんにちは〜ららぽてすらです☺️

今日は、夏休みの自由研究で悩んでる方の為に、簡単に作れる「ランダムパスワード生成ツール」をご紹介します！

このツールは、強力なパスワードを簡単に作ることができるので、セキュリティを高めたいときに便利です。どうやって作るかを見てみましょう！!

<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>ランダムパスワード生成ツール</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 20px;

background-color: #f0f0f0;

}

.container {

max-width: 400px;

margin: 0 auto;

padding: 20px;

background-color: #fff;

border: 1px solid #ccc;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

text-align: center;

}

.password {

font-size: 20px;

font-weight: bold;

margin: 10px 0;

word-break: break-all;

}

button {

padding: 10px 20px;

font-size: 16px;

cursor: pointer;

border: none;

border-radius: 5px;

background-color: #007bff;

color: #fff;

}

button:hover {

background-color: #0056b3;

}

</style>

</head>

<body>

<div class="container">

<h1>ランダムパスワード生成ツール</h1>

<div id="password" class="password">ここにパスワードが表示されます</div>

<button id="generateButton">パスワードを生成</button>

</div>

<script>

function generatePassword() {

const length = 12; // パスワードの長さ

const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+{}|;:,.<>?"; // 使用する文字セット

let password = "";

for (let i = 0; i < length; i++) {

const randomIndex = Math.floor(Math.random() * charset.length);

password += charset[randomIndex];

}

document.getElementById("password").textContent = password;

}

document.getElementById("generateButton").addEventListener("click", generatePassword);

</script>

</body>

</html>

ステップ2: HTMLの詳細

1. <!DOCTYPE html> と <html lang="ja">

これらはHTML文書の宣言と、日本語で書かれていることを示しています。

2. <head> セクション

ここには、メタデータやスタイルシートが含まれています。例えば、文字エンコードを指定する <meta charset="UTF-8"> と、ページタイトルを設定する <title> があります。また、スタイルを定義する <style> タグもここに含まれます。

3. <body> セクション

この部分には、実際に画面に表示される内容が含まれています。

<div class="container">: パスワード生成ツールのメインコンテナです。
<h1>: ツールのタイトルです。
<div class="password" id="password">: 生成されたパスワードを表示するエリアです。
<button onclick="generatePassword()">: ボタンをクリックしたときにパスワードを生成するイベントを設定しています。

ステップ3: JavaScriptの詳細

1. generatePassword 関数

この関数は、ランダムなパスワードを生成して表示するためのものです。

const length = 12;: パスワードの長さを12文字に設定しています。
const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+{}|;:,.<>?";: 使用する文字セットを定義しています。
let password = "";: 生成されるパスワードを格納する変数です。

ループを使って、指定した長さのパスワードをランダムに生成します。最後に、生成されたパスワードを表示エリアに設定します!

まとめ

このコードを使えば、簡単に自分だけのパスワード生成ツールを作ることができます。自分のサイトやアプリに組み込んで、セキュリティを向上させましょう！