Electronでパスワード生成アプリを作ってみる 2 (文字数を指定する)
前回の続きです。 blauthree.hatenablog.com
前回はとりあえずパスワードの生成はできるようになったので、
今回はパスワードの文字数を指定できるようにしていきます。
まずは、文字数を指定できるように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)でパスワードを生成することが可能になりました。
ただし、この方法ではテキストボックスに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; }
これで、以下のようにスライダーを動かして文字数を決めることができるようになりました!
ただし、サイトによっては使用できない記号があったりするので、
次は、使える記号を選択できるようにしたいと思います。