Electronでパスワード生成アプリを作ってみる 2 （文字数を指定する）

前回はとりあえずパスワードの生成はできるようになったので、
今回はパスワードの文字数を指定できるようにしていきます。

まずは、文字数を指定できるようにhtml側にinputを追加します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Electron-Password</title>
</head>
<body style="background-color: #fff">
  <p>パスワード生成プログラム</p>
  <div>
    文字数
    <input type="text" id="passLength" size="2" maxlength="2">
  </div>
  <button onclick="generatePassword()">パスワードを生成する</button>
  <script src="genPassword.js"></script>
</body>
</html>

次にパスワード生成処理側で、文字数を取得してパスワードの文字数にします。

function generatePassword() {
    var length = document.getElementById("passLength").value; // テキストボックスの値を取得
    var pw = "";

    for (var i=0; i < length; i++) {
        pw += randomChar();
    }
    alert(pw);
    return pw;
}

function randomChar() {

    var randChar = "";
    var randNum;

    randNum = Math.round( Math.random() * 93 ) + 33; // 33 ~ 126
    randChar = String.fromCharCode(randNum);
    return randChar;
}

これで、任意の文字数（1〜99）でパスワードを生成することが可能になりました。

f:id:blauthree:20180617002740p:plain f:id:blauthree:20180617002759p:plain

ただし、この方法ではテキストボックスに1〜99の数字以外を入れることも可能であるため、入力された文字をチェックする必要があります。

チェック処理を入れるのも面倒だなと思ったので、
パスワード管理アプリなどでよく見るスライダーで文字数を指定する方法に変更します。

html側

<head>
  <meta charset="UTF-8">
  <title>Electron-Password</title>
</head>
<body style="background-color: #fff">
  <p>パスワード生成プログラム</p>
  <div>
    文字数
    <!-- スライダーに変更 -->
    <input type="range" id="passLength" value="1" min="1" max="99" step="1" oninput="getPasswordLength();">
    <output id="length">1</output>
  </div>
  <button onclick="generatePassword()">パスワードを生成する</button>
  <script src="genPassword.js"></script>
</body>
</html>

js側

function generatePassword() {
    var length = document.getElementById("passLength").value; // テキストボックスの値を取得
    var pw = "";

    for (var i=0; i < length; i++) {
        pw += randomChar();
    }
    alert(pw);
    return pw;
}

function randomChar() {

    var randChar = "";
    var randNum;

    randNum = Math.round( Math.random() * 93 ) + 33; // 33 ~ 126
    randChar = String.fromCharCode(randNum);
    return randChar;
}

// 追加
function getPasswordLength() {
    var length = document.getElementById("passLength").value;
    document.getElementById("length").value = length;
}

これで、以下のようにスライダーを動かして文字数を決めることができるようになりました！

f:id:blauthree:20180617002835p:plain

ただし、サイトによっては使用できない記号があったりするので、
次は、使える記号を選択できるようにしたいと思います。

すくすくすくらっぷ

とりあえずすくらっぷ

Electronでパスワード生成アプリを作ってみる 2 （文字数を指定する）