オンラインランダムパスワードジェネレータ

WordPressとしてオンラインランダムパスワードジェネレータを作成してみました。デフォルトでは、15桁のパスワードが生成され、パスワードの長さを指定でき、大文字、小文字、数字、特殊文字を使用するかどうかを選択するオプションが追加されました。

オンラインランダムパスワードジェネレータ

毎回パスワードを作成するのは面倒で、個人的に使用するためにランダムパスワードジェネレータを作成しました。

パスワードジェネレータページにアクセスすると、デフォルトで15桁のパスワードが生成されます。パスワードの長さは2桁から50桁まで選択できます。

大文字、小文字、数字、特殊記号がすべてデフォルトで含まれ、必要に応じてチェックをオフにして含めないようにすることができます。

やり直し ボタンを押すと再生成され、ページを再読み込みしたり、スライダを左右に動かしてパスワードの長さを調整したりしても新しく作成されます。

ちなみに、オンラインで無料で利用できるパスワードジェネレータを利用する場合、セキュリティに問題がある可能性があるという文を見たことがあります。私が作ったのは、生成されたパスワードを保存する機能がないので安心してお使いいただけます。 😄

多くのユーザーがサイトごとにパスワードを同じにすることが考えられていますが、ご存知のように、セキュリティ上危険です。私はAceTextというプログラムを約20年前から利用してきました。😊

• IDとパスワードを簡単に管理する方法
• パスフレーズを活用して、安全で覚えやすいパスワードを作る
• 使用してはならない最悪のパスワード

このようなランダムパスワードジェネレータを作成したい場合は、以下のコードを参考にしてください。

ランダムパスワードジェネレータのソースコード

コードは チャットGPTを使ってほとんど作成しましたが、一部の機能ではChatGPTで提示されたコードが機能しないため、コードを直接修正しました。 JavaScriptは初心者レベルですが、西堂犬の3年で風月を詠むということわざのように触れ続けるので、少し実力が遅いようです。 😁

JavaScript：

function generatePassword() {
    const length = parseInt(document.getElementById('passwordLength').value, 10);
    const includeUppercase = document.getElementById('includeUppercase').checked;
    const includeLowercase = document.getElementById('includeLowercase').checked;
    const includeNumbers = document.getElementById('includeNumbers').checked;
    const includeSymbols = document.getElementById('includeSymbols').checked;

    // 적어도 하나의 옵션이 선택되었는지 확인
    if (!includeUppercase && !includeLowercase && !includeNumbers && !includeSymbols) {
        alert("최소한 하나의 옵션을 선택해야 합니다.");
        return;
    }

    let charset = "";
    if (includeUppercase) charset += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    if (includeLowercase) charset += "abcdefghijklmnopqrstuvwxyz";
    if (includeNumbers) charset += "0123456789";
    if (includeSymbols) charset += "!@#$%^&*()_+";

    let password = "";
    for (let i = 0; i < length; i++) {
        const randomIndex = Math.floor(Math.random() * charset.length);
        password += charset[randomIndex];
    }
    document.getElementById('passwordOutput').value = password;
}

function copyToClipboard() {
    const copyText = document.getElementById("passwordOutput");
    navigator.clipboard.writeText(copyText.value).then(function() {
        alert("비밀번호가 클립보드에 복사되었습니다!");
    }).catch(function() {
        alert("복사에 실패했습니다. 수동으로 복사해 주세요.");
    });
}

function updateSliderValue() {
    const slider = document.getElementById('passwordLength');
    const value = slider.value;
    document.getElementById('sliderValue').textContent = value;
    document.getElementById('passwordLengthInput').value = value; // 슬라이더와 입력 필드 동기화
    const percentage = (value - slider.min) / (slider.max - slider.min) * 100;
    slider.style.background = `linear-gradient(to right, red 0%, red ${percentage}%, grey ${percentage}%, grey 100%)`;
    generatePassword();
}

function updatePasswordLengthFromInput() {
    const inputField = document.getElementById('passwordLengthInput');
    const value = parseInt(inputField.value, 10);
    if (value >= 2 && value <= 50) { // 유효한 범위 내에서만 동작
        document.getElementById('passwordLength').value = value; // 입력 필드와 슬라이더 동기화
        document.getElementById('sliderValue').textContent = value;
        const slider = document.getElementById('passwordLength');
        const percentage = (value - slider.min) / (slider.max - slider.min) * 100;
        slider.style.background = `linear-gradient(to right, red 0%, red ${percentage}%, grey ${percentage}%, grey 100%)`;
        generatePassword(); // 비밀번호 생성
    } else {
        inputField.style.borderColor = "red"; // 유효하지 않은 경우 시각적 피드백 제공
    }
}

// 페이지 로드 시 초기 비밀번호 생성
generatePassword();

HTMLコード：

               <input type="text" id="passwordOutput" class="password-input" readonly>
                <button onclick="copyToClipboard()" class="copy-button">복사</button>
                <button onclick="generatePassword()" class="copy-button">Redo</button>
                <div style="clear:both;"></div>
                <div class="slider-container">
                    <input type="number" min="2" max="50" value="15" id="passwordLengthInput" oninput="updatePasswordLengthFromInput()" class="password-input" style="width: 80px; margin-right: 10px;">
                    <input type="range" min="2" max="50" value="15" class="slider" id="passwordLength" oninput="updateSliderValue()">
                    <span id="sliderValue" class="slider-value">15</span>
                </div>
                <div class="checkbox-option"><input type="checkbox" id="includeUppercase" checked onclick="generatePassword()"> <label>대문자</label></div>
                <div class="checkbox-option"><input type="checkbox" id="includeLowercase" checked onclick="generatePassword()"> <label>소문자</label></div>
                <div class="checkbox-option"><input type="checkbox" id="includeNumbers" checked onclick="generatePassword()"> <label>숫자</label></div>
                <div class="checkbox-option"><input type="checkbox" id="includeSymbols" checked onclick="generatePassword()"> <label>특수기호</label></div>

CSSコード：

.password-input {
    width: calc(100% - 230px); /* 버튼 위치 변경으로 너비 수정 */
    height: 50px;
    padding: 10px 20px;
    font-size: 18px;
    border: 2px solid #ccc;
    border-radius: 30px;
    margin-right: 10px;
    float: left;
}

#passwordOutput {
    border-radius: 30px;
}

.copy-button {
    width: 100px;
    height: 50px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    float: left;
    margin-right: 10px;
}

.copy-button:hover {
    background-color: #0056b3;
}

.slider-container {
    position: relative;
    margin: 45px 0;
    display: flex; /* 숫자 필드와 슬라이더를 같은 라인에 표시 */
    align-items: center;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(to right, red 0%, red 30%, grey 30%, grey 100%);
    outline: none;
    margin-left: 10px; /* 숫자 입력 필드와 간격 */
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

.slider-value {
    position: absolute;
    bottom: -25px; /* 더 아래로 내리기 */
    left: 50%;
    transform: translateX(calc(-50% + 40px));
    color: #ffffff;
    font-size: 14px;
    pointer-events: none;
    background: #343a40; /* 다크 그레이 배경으로 modern한 느낌 */
    padding: 5px 10px; /* 적당한 패딩 추가 */
    border-radius: 12px; /* 부드러운 모서리 */
    border: 1px solid #495057; /* 약간 더 밝은 그레이로 테두리 */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* 가벼운 그림자 */
    font-weight: 500; /* 글자 두께 살짝 굵게 */
}



.checkbox-option {
    margin: 10px 0;
}

.checkbox-option input[type='checkbox'] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-color: #f8f8f8;
    border: 2px solid #d22;
    border-radius: 4px;
    position: relative;
}

.checkbox-option input[type='checkbox']:checked::before {
    content: '✔';
    position: absolute;
    left: 1px;
    top: -7px;
    color: #d22;
    font-size: 20px;
}

状況に応じて適切に適用して適用することができます。機能面を変更するには、JavaScriptコードを修正してください。

私のようにコーディングを厄介に知っているユーザーはChatGPTを便利に活用できるようです。誤解を招く回答はしばしばありますが、うまく活用すると時間と労力を短縮するのに役立ちます。

チャットGPTのOpenAIは、資金問題は3年以内にMSに買収されるという見通しも出ていますね。膨大な資金が投入されるため、チャットGPTで収益を上げるのは容易ではないようです。収益の悪化のため、現在月20ドルがチャットGPT有料プランを今年末までに22ドルに上げ、2029年までに順次44ドルまで上げる予定だそうです。

• オープンAI、「チャットGPT」購読料上げる… 「来年の売上は今年の3倍予想」

個人の場合、10％の付加価値税（VAT）が追加されるため、少し負担になりそうですが、すでにチャットGPTに依存しているユーザーは価格が上がっても仕方なく使い続けるのではないかと思います。

コーディングが目的の場合、Claude AIもパフォーマンスが問題ないようです。チャットGPTとClood AIにはそれぞれ長所と短所がありますが、コーディング性能だけを取ったときにClood AIが微細だが先に進まないと思われます（参照).

両方とも使えばいいのですが、私はチャットGPTを初期から利用してきており、クロードAIは必ず必要な時だけ1ヶ月ずつ購読して使用する方です。

確かにAI検索サービスであるPerplexityがGoogle対抗馬として浮上しています。パープレクシティは特にSKTの投資を受けながらSKTユーザーは1年無料使用が可能です。

• SKTユーザーなら、Perplexity Pro 1年無料購読（29万ウォン相当）を申請してください

参照

• WordPress Avada(Avada）とDiviテーマの比較
• WordPressで簡単にランディングページを作成する（feat。エレメント、 GeneratePress, Divi)
• WordPress GeneratePress テーマとアストラテーマの比較