すくすくすくらっぷ

とりあえずすくらっぷ

Raspberry Pi 3.5 インチモニタがコンソール起動時のみ固まる

先日、AmazonでKumanというメーカーから出ている3. 5インチディスプレイを買ったのですが、少しハマったのでメモします。

Raspberry Piで使うにはドライバを入れる必要があります。
最初は、説明書にある通り以下のドライバからインストールしました。

github.com

デスクトップモードで起動するようにするとうまく動くのですが、コンソールのみで起動したときに画面が固まったままとなってしまいました。
何度か再インストールしたものの変わらず。(sshが繋がるのは助かりました・・・)

調べてみると、似たようなドライバがあるようでそちらからインストールするとうまくいきました。

github.com 更新日付も2019/5/22時点では後者のほうが新しいようです。

Raspbianのバージョンとかも関係しそうですが、なにか不具合があったらwaveshareのものをインストールするとうまくいくかもしれないですね。

Electronでパスワード生成アプリを作ってみる 4 (パスワードの強度をチェックする)

前回の続きです。
blauthree.hatenablog.com

見た目はともかくとして、パスワード生成アプリっぽくなってきました。 今回は、生成したパスワードの強度をチェックしたいと思います。

「パスワード 強度 チェック javascript」で検索してみると、
「zxcvbn」というライブラリを発見。
どうやらDropbox社が公開したMITライセンスのライブラリみたいですね。
これを使ってみたいと思います。

https://github.com/dropbox/zxcvbn

導入としては、githubにあるManual Installationに従います。
index.htmlと同じ階層にzxcvbn.jsを置いて、head部に以下のコードを追加。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- ここに追加 -->
  <script type="text/javascript" src="zxcvbn.js"></script>
  <title>Electron-Password</title>
</head>

次にjs部分で判定の結果を表示させます。
zxcvbn(password)でパスワードの情報を格納したobjectを返すようです。
scoreで強度に応じた結果(0~4)を返すのでそれに対応した文字列を返します。

generatePassword()では、パスワードとその強度判定結果をalertに表示させています。

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

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

    // アラートでパスワードと強度の判定結果を出力
    var message = pw + "\r\n";
    message += "強度: " + checkPassword(pw);
    alert(message);
    return pw;
}

/**
 * zxcvbnでパスワード強度を判定する
 * @param {} password 
 */
function checkPassword(password) {
    var result = ["弱い", "そこそこ弱い", "中", "そこそこ強い", "強い"];
    // zxcvbnで判定し、resultにある文言を返す
    var score = zxcvbn(password).score;
    return result[score];
}

以下は実行結果です。

3文字Ver f:id:blauthree:20180628231813p:plain

9文字Ver f:id:blauthree:20180628231842p:plain

13文字Ver f:id:blauthree:20180628231933p:plain

それぞれ結果が変わっていることがわかります。

ここまで実装したコードをgithubにアップしてみました。 github.com

今度はデザインとかもそれっぽいアプリを何か作ることを目標にしたいと思います。

Electronでパスワード生成アプリを作ってみる 3 (パスワードに使用する記号を指定する)

前回の続きです。
blauthree.hatenablog.com

使用できる記号を選べるようにします。

とりあえず使用する記号を選択する方法としては2つ考えました。

  1. 使用可能な記号のみを選択する
  2. 使用禁止する記号を選択する

しかし、サイトによって使用できる記号がバラバラであることを考えると、
使用禁止する記号を指定するのは現実的ではない気がするので、
使用可能な(使用したい)記号のみを選択できるようにします。

ここで一つ、巷にあるパスワード生成サービスを見てみることにしました。
見た感じだと記号を使用する・使用しないを選択できるようになっていますが、
個別に使用したい文字を選ぶことはできなさそうでした。

ここではせっかくなので、個別にチェックボックスで選べるようにしたいと思います。
パスワードに使うであろう記号は、キーボードに印字されているものになると考えられます。

!"#$%&'()-=^~\|`@[]{};+:*,<>./?_

数えると32文字でした。
32個もチェックボックスを置くのかと思ってしまいましたが、
愚直にやってみました。

html側

<!DOCTYPE html>
<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>

  <!-- 
    ここにチェックボックスをべた書きしてしまう 
    HTML特殊文字は一応エスケープしておく
    また、正規表現を使用するため特殊文字となる記号はあらかじめエスケープする(value)
  -->
  使用する記号
  <div>
    <div>
        <input type="checkbox" name="sign" value="!">!
        <input type="checkbox" name="sign" value="&quot;">"
        <input type="checkbox" name="sign" value="#">#
        <input type="checkbox" name="sign" value="\$">$
        <input type="checkbox" name="sign" value="%">%
        <input type="checkbox" name="sign" value="&amp;">&amp;
        <input type="checkbox" name="sign" value="&#039;">&#039;
        <input type="checkbox" name="sign" value="\(\)">()
        <input type="checkbox" name="sign" value="\-">-
        <input type="checkbox" name="sign" value="=">=
    </div>
    <div>
        <input type="checkbox" name="sign" value="\/">/
        <input type="checkbox" name="sign" value="\\">\
        <input type="checkbox" name="sign" value="\^">^
        <input type="checkbox" name="sign" value="~">~
        <input type="checkbox" name="sign" value="\|">|
        <input type="checkbox" name="sign" value="@">@
        <input type="checkbox" name="sign" value="`">`
        <input type="checkbox" name="sign" value="\[\]">[]
        <input type="checkbox" name="sign" value="\{\}">{}
        <input type="checkbox" name="sign" value=";">;
    </div>
    <div>
        <input type="checkbox" name="sign" value="\+">+
        <input type="checkbox" name="sign" value=":">:
        <input type="checkbox" name="sign" value="\*">*
        <input type="checkbox" name="sign" value="&lt;&gt;">&lt;&gt;
        <input type="checkbox" name="sign" value=",">,
        <input type="checkbox" name="sign" value="\.">.
        <input type="checkbox" name="sign" value="\?">?
        <input type="checkbox" name="sign" value="_">_
    </div>
  </div>

  <button onclick="generatePassword()">パスワードを生成する</button>
  <script src="genPassword.js"></script>
</body>
</html>

f:id:blauthree:20180624005558p:plain

括弧系はまとめているため、結果的にチェックボックスは28個になりました。
見た目的にはアレですが、これで進めます。

次にjavascript側に以下の処理を追加します。

  1. 選択されている記号を取得する
  2. 使用する記号を含んだパスワードを生成する

2では正規表現を使って使用する記号を含むかを判定しています。

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;
    var sign = getSelectedSign(); // 使用する記号

    // 半角英数字 + 使用する記号を含めた正規表現オブジェクト
    var regexp = new RegExp("[A-Za-z0-9" + sign + "]+"); 

    while (true) {
        randNum = Math.round( Math.random() * 93 ) + 33; // 33 ~ 126
        randChar = String.fromCharCode(randNum);

        // 半角英数字または使用する記号の場合はループから抜ける(2の処理)
        if (randChar.match(regexp)) {
            break;
        }
    }

    return randChar;
}

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

/**
 * 選択されている記号を取得する(1の処理)
 */
function getSelectedSign() {
    var elements = document.getElementsByName("sign");
    var selectedSign = ""; // 使用する記号

    // nameがsignとなっているチェックボックスの状態を確認
    for (var i = 0; i < elements.length; i++) {

        // チェックされていれば使用する記号とする
        if (elements[i].checked) {
            selectedSign += elements[i].value;
        }
    }
    return selectedSign;
}

記号なしVer f:id:blauthree:20180624005629p:plain

記号ありVer f:id:blauthree:20180624005726p:plain

実装はこれでいいのか怪しいところもありますが、
ひとまず動いているっぽいので、今のところはこれでよしとします。

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

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