すくすくすくらっぷ

とりあえずすくらっぷ

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)でパスワードを生成することが可能になりました。

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でパスワード生成アプリを作ってみる

どこかのサイトに登録する際に必ず指定するパスワードですが、
考えるのも面倒なので、ランダムな文字列を出力するシェルスクリプトを使っていました。

しかし、何回か使っているといくつか不満な点が・・・。

  1. パスワードに使用できない記号を含んでしまう
  2. 過去に似たようなパスワードになっている?($RANDOMを使っているから?)

そこで、勉強ついでにパスワード生成アプリを作ることにしました。
MacでもWindowsでも使いたいため、クロスプラットフォームで実装できるElectronを使用することに。(Electronを使う意味がない気がしますが、勉強ということで)

ひとまず、パスワード生成アプリに実装したい機能は3つ。

  1. 文字数が指定可能である
  2. 使用できない記号または使用できる記号が指定可能である
  3. パスワードの強度を判定する

Electronの使い方は、こちらのページを参考にHello Worldが表示されるところまでは実行できました。
qiita.com

実装

Hello Worldが表示される状態をベースに、パスワードを生成してalertで表示する処理を実装します。
パスワードを生成するjavascriptは、genPassword.jsとしてhtmlと同じ階層に作成しています。

html側

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

javascript

function generatePassword() {
    var length = 10; // 文字数は10文字固定
    var pw = "";

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

function randomChar() {

    var randChar = "";
    var randNum;

    // 33 ~ 126までの乱数を取得
    randNum = Math.round( Math.random() * 93 ) + 33; 
    randChar = String.fromCharCode(randNum); 
    return randChar;
}

やっていること

  1. ボタンを押すと33〜126までの乱数を生成
  2. 乱数(asciiコード)から文字に変換
  3. 変換された文字をつなげる

Electron-Passwordという名前で作成したので、 以下コマンドで実行します。
このとき、Electron-Passwordの一つ上の階層で実行します。

> electron Electron-Password

実行の様子

デザインもへったくれもないので殺風景ですが、
実行すると、alertにて半角英数字+記号で構成された文字列が表示されます。

f:id:blauthree:20180602025507p:plain

f:id:blauthree:20180602030700p:plain

今のところ、3つの機能のうちの1つも実装できていないので、
次は文字数を指定できるようにしていきたいと思います。

Arduinoっぽいやつが届いた!

Amazonサイバーマンデーセールで見つけたArduino互換品つきのスターターキットを買ってみた。
2300円くらいだったかな。

7セグディスプレイとか、超音波センサ?とかいろいろ入っていていい感じですね。
ある程度のことは色々できそう。 f:id:blauthree:20171213220919j:plain

CD-ROMには、WindowsMacArduino IDE(1.8.3)やサンプルコードも入っていたためすぐに始められそうです。(英語ですが・・・)
IDEは現時点では、若干古い程度ですが新しい方がよいという人は公式サイトからダウンロードしたほうがよさそうです。

まずはLチカからぼちぼち始めるとします。 付属の青いUSBコードでPCとUnoを接続。 f:id:blauthree:20171213223634j:plain

電源付いた。

付属のLEDの短い足をGNDに、長い方を13とかいてある穴に刺す。 すると、点滅が始まる。
たぶん最初からLチカのプログラムが入っているっぽい?

ググって出てきたコードを参考にしてIDEに入力。

const int LED = 13;
void setup() {
  // put your setup code here, to run once:
  pinMode(LED, OUTPUT); // 13番ポートを使用する
}

void loop() {
  // put your main code here, to run repeatedly:
  digitalWrite(LED, HIGH);  // LED点灯 
  delay(500);               // 500 ms待機
  digitalWrite(LED, LOW);   // LED消灯
  delay(500);               // 500 ms待機
}

左上のチェックマーク(検証)をクリックすると、コンパイルしてくれる。(コメントうそついてますね・・・) f:id:blauthree:20171213224227p:plain

次に右矢印のマーク(マイコンに書き込む)でUnoに書き込めるっぽいのだが、エラー。 f:id:blauthree:20171213224633p:plain

CD-ROMにあるPDFを見ると、ドライバーを入れる必要があるようだ。 www.ftdichip.com.

Drivers → VCP Driversと順にクリックすると下のような表が現れるため、使用OSを選択する。
使用OSがMac OS Sierraなため、Mac OS X 10.9 and above x64(64bit)を選択。 f:id:blauthree:20171213225231p:plain

あとはインストーラに従ってインストール。

IDEからツール → シリアルポート → (Arduino / Genuino Uno)と書いてあるやつを選択。たぶんWindows版も同じなはず。 f:id:blauthree:20171213230157p:plain

もう一度、右矢印のマークをクリックするとUnoに書き込みが成功したというメッセージが出る。 f:id:blauthree:20171213230745p:plain

LEDのチカチカする頻度が変わったら成功。

ただLEDがチカチカするだけですが、プログラムによって制御できてる感じがしてワクワクしました。
センサとかで温度取得とかもやってみたいですね。

Raspberry pi でDjangoを動かす

まずはdjangoのインストール

sudo pip install django

適当な場所でプロジェクト作成

django-admin.py startproject プロジェクト名

サーバー起動

python プロジェクト名/manage.py runserver

...

Django version 1.11.7, using settings 'report_maker.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

しかし、Raspberry pisshで操作しているため、 手元のPCからアクセスしてもつながるわけがない

ググってみると、ポートフォワーディング接続というやつでいけるらしい。 一度sshから抜け、以下のオプションを付けてssh接続

ssh -L適当なポート番号:ポートフォワードしたいアドレス username@リモートマシンのIP

今回の場合だと、以下の感じでログイン後、djangoサーバーを起動する。

ssh -L8888:127.0.0.1:8000 username@raspberrypiのIP

ホストPCのブラウザから http://127.0.0.1:8888/ にアクセスして こんな感じの画面になれば成功。

f:id:blauthree:20171102212940p:plain

今までssh使ってきたけどこんな事ができるなんて知らなかった