JavaScriptで作るパスワードジェネレーター。JavaScriptでコピー機能を実装

せっかく「仕事を作るの実現を目指す」という副題のあるブログなので、何かを作ってみた記録を、大小問わず書いていこう！という当初の計画をようやく少しずつ展開していく時がきました！笑

ということで、個人的には久しぶりのJavaScriptネタとなります！
このブログでプログラミングを扱う際は、「何かを具体的に作る」ことを特色としていきたいので、今回はそんなところから、JavaScriptで簡単パスワードジェネレーターを作ってみました。

JavaScriptで簡単パスワードジェネレーターはどんなものか

ここ最近、僕自身JavaScriptを書く機会がそんなに多くなかったということもあり、久しぶりにやってみたら、いやー難しい難しい！笑
ということで、僕自身のカンを取り戻すのにも、プログラミングで何かを作ってみたシリーズのブログはちょうどいいかもしれませんね・・・

CodePenを使用してみました。
桁数と、パスワードに用いる文字の種類を選択し、決定ボタンを押せばランダム生成されたパスワードが発行。

コピーボタンで、クリップボードにコピーをすることもできます。

この作品の肝ですが、JavaScriptでコードをコピーするためのメソッドである「execCommand』という機能。

このメソッドを使うと、選択されているテキストをコピーすることができるようです。
ただ、innerHTMLやjQueryのhtmlメソッド、textメソッドで取得したテキストをコピーすることはできないようです・・・

このexecCommandというメソッド、まだ仲良くなるには時間がかかるかもしれません・・・

もう1つポイントとしては、HTMLのdata-value属性に数字や英語の大文字、小文字を入れてみたところでしょうか。

JavaScriptに書かずにHTMLに書くことで、「JavaScriptは触れないけどHTMLならなんとか触ることが出来る」という方に対しての配慮になります。
HTML5のdata-value属性が個人的には大好きで、この手法は普段よく使っております。

まあ実際にこのアプリケーションが本当に実用されているとして、それを何度も編集するかどうかは微妙ですが、自分なりに色々考えて、製作者にもユーザーにも使い易いものを作れる配慮が持てたらなと思っています。

ということで、今回はJavaScriptを使ったコピー機能の実装、そしてランダムパスワードジェンレーターを実装しました。

パスワード管理ツールとして「1PassWord」というサービスがありますが。いつか今回ご紹介したものを拡張実装して、1Passwordみたいなアプリケーションを作ることができたらと思います。

さあ、錆び付いた腕を磨き直していこう〜〜〜