JavaScriptで「パスワードの生成」ボタンを追加する処理サンプル

2018/01/07

パスワード入力エリアの横にある「パスワード生成」ボタンの機能のサンプルソースとその解説

　
WordPressのユーザ登録画面などにもある、「パスワードを生成する」ボタン。
　

　
この「パスワードを生成する」ボタンをクリックして、パスワードを生成する機能を JavaScriptで実装するサンプルソースを公開します。
　
また、その仕組みについても解説をします。
　
　

「パスワードを生成する」ボタンの機能の JavaScriptのソースコード

　
JavaScriptで作成した「パスワードを生成する」ボタンの機能を含む、HTMLのソースコード全体が以下になります。
　

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">

<script>
    // 生成する文字列の長さをパラメーターとして指定します
    // 上記の文字列には紛らわしい文字として、大文字、小文字の「i（アイ）」「I（アイ）」、小文字の「l（エル）」、
    // 大文字、小文字の「O（オー）」「o（オー）」は含まれていません。
    function random(len) {
      var l  = len;           // 生成する文字列の長さ
      var c  = "abcdefghjkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ012345679"; // 生成する文字列に含める文字セット
      var cl = c.length;
      var r  = "";
      for (var i = 0; i < l; i++) {
        r += c[Math.floor(Math.random() * cl)];
      }

      document.getElementById("password").value = r;
    }
</script>

</head>
<body>

<form action="" method="POST">
パスワード【必須】<input type="text" id="password">
<input type="button" value="パスワードを生成する" onclick="random(10)">
</form>

</body>
</html>

<!doctype html>

<head>

// 生成する文字列の長さをパラメーターとして指定します

// 上記の文字列には紛らわしい文字として、大文字、小文字の「i（アイ）」「I（アイ）」、小文字の「l（エル）」、

// 大文字、小文字の「O（オー）」「o（オー）」は含まれていません。

function random(len) {

var l = len; // 生成する文字列の長さ

var c = "abcdefghjkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ012345679"; // 生成する文字列に含める文字セット

var cl = c.length;

var r = "";

for (var i = 0; i < l; i++) {

r += c[Math.floor(Math.random() * cl)];

}

document.getElementById("password").value = r;

}

</script>

</head>

<body>

パスワード【必須】<input type="text" id="password">

</form>

</body>

</html>

　
　
まずは、カスタマイズや、自分が作成しているサイトに組み込む前に、このソースコードをコピペして、ローカルで動作するかを確認すれば、動かないときのチェックの時間短縮になるでしょう。
　
　

「パスワードを生成する」ボタンの機能の JavaScriptの解説

　
「パスワードを生成する」ボタンの機能の JavaScriptの解説についてですが、解説するほどのことはないと思いますが、
　6行目～21行目が、パスワードを生成する関数の本体
　26行目～29行目が、フォームタグとパスワードの入力エリア
です。
　
　

生成する文字数を指定する方法

　
29行目の「パスワードを生成する」のボタンをクリックすると、「random()」関数が実行され、パスワードの入力エリアに生成されたパスワードが入力されます。
　
「random()」関数に指定するパラメーター（サンプルでは「10」）は、生成するパスワードの文字数です。
サンプルでは 10文字になっていますが、必要に応じて設定を変えてください。
　
　

生成する文字列の文字セットを編集する方法

　
12行目がパスワードを生成する元になる文字列です。
ここに入っている文字の中からランダムで取得して文字列を生成する仕組みです。
　
サンプルソースでは、アルファベットの大文字小文字、数字が編集されています。
ただ、設定している文字列には、紛らわしい文字として、大文字、小文字の「i（アイ）」「I（アイ）」、小文字の「l（エル）」、大文字、小文字の「O（オー）」「o（オー）」は含めていません。
　
また、記号などを含めたい場合はこの文字列に追加をしてください。
　
　

パスワードを生成する仕組み

　
パスワードを生成する仕組みは、16行目で処理をしています。
このパスワードを生成する処理は 16行目だけ、と言っても過言ではありません。
　
「Math.random()」関数で、0～1までの乱数を生成します。
これに、文字列の文字数をかけ、「Math.floor()」関数で文字列の中の位置を取得します。
そして、文字列から 1文字を取得します。
　
この処理を生成する文字列の文字数分繰り返してランダムな文字列を取得します。
　
　

多量のパスワード生成などに乱数の一覧を取得する方法

　
今回の記事は、ユーザ登録画面などを生成する際、「パスワードを生成する」ボタンをクリックすることでパスワードを自動的に生成する仕組みを紹介しまいた。
　
　
ですが、パスワードなどのランダムな文字列を必要とする場面として、「一括して 100件のパスワードが欲しい」、「キャンペーンで使う重複がないシリアルコードを 10,000件欲しい」といった場面もあるかと思います。
　
　
そんな時は、下記のツールが便利です。
　
乱数発生器（パスワード生成）　Ver.2
https://s-giken.info/random/random.php
　
元々は、自分がかかわったキャンペーンで、大量のシリアルコードが必要になった際にベースを作成し、その後、Webサイトで公開できるようにカスタマイズしたものです。
　
　
また、PHPでこれらのパスワード、シリアルコードなどの乱数を生成する仕組みについては下記に記事を書いていますので、あわせて参考にしてください。
PHP　range関数を使って階乗と重複組み合わせを計算
 乱数発生器（パスワード生成サービス）がバージョンアップで高速化！

- JavaScript

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです！

Message コメントをキャンセル

※入力いただいたコメントは管理者の承認後に掲載されます。

: jQuery UI DatePickerの導入の方法。および、カスタマイズ方法の解説

デイトピッカー「jQuery UI DatePicker」を導入する方法を解説。テーマを変える、日本語にする、選択できる日を指定する、入力を制限するなどのオプションを使ったカスタマイズ方法も紹介。

: 初めて JavaScriptを勉強してみた

始めて JavaScriptを勉強してみたが、サーバサイドの言語とは実装の仕方が違うことが改めて理解できた。

: WYSIWYGエディタのCKEditor 5を設置、カスタマイズ、日本語化の方法を解説

WYSIWYGエディタであるCKEditor5（旧：FCKeditor）を導入する方法を解説。ボタンの追加、削除などのカスタマイズ方法も解説。現時点ではDeveloper Previewのため、まだまだ情報は少ない。

: WYSIWYGエディタのCKEditor 4を設置、カスタマイズ、日本語化の方法を解説

WYSIWYGエディタであるCKEditor（旧：FCKeditor）を導入する方法を解説。日本語化やボタンの追加削除、skinの変更、複数エディタの設置など実際の使い方に合わせたカスタマイズ方法も解説。

: jQuery UI DatePickerに時間を入力できる機能を追加する方法解説

jQuery UI DatePickerには時間を入力する機能はないが、いくつかの JSファイルを追加し「datetimepicker」と書くだけで簡単に時間も入力できるようになる。その解説とカスタマイズ方法。