パスワード管理アプリを作成しました
はじめに
今回、electron を使って初めてデスクトップアプリを開発してみました。
keypick といいます。
パスワード等秘密情報（key）をすぐに選び取る（pick）ことができます。
この記事や開発したサービスがお役に立ちましたら幸いです。
サービス紹介
いわゆるパスワード管理アプリです。
パスワード等秘密情報をローカル環境で管理します。
ユーザ ID/パスワードといった基本情報はもちろんですが、他のどんな文字列でも管理できます。
従業員番号や会社の住所等、たまに使う情報も管理できますし、ToDo リストや今日の晩御飯のメニューを書き出す場所としても利用できます。
管理方法
キー情報をグループごとに管理します。
-
グループ：{グループ名}
- {ラベル}：{キー値}
- {ラベル}：{キー値}
...
（以下省略）
例えば、以下のようにキー情報を管理できます。
-
グループ 1：google アカウント
- ユーザ名：xxxxx@google.com
- パスワード：xxxyyyzzz
-
グループ 2：PJxxx 開発環境クレデンシャル
- ID：hogehoge
- PW：fugafuga
- ログイン URL：https://dev.example.com/login
-
グループ 3：たまに使う情報（会社関連）
- 従業員番号：25740035
- 本社住所：東京都千代田区丸の内 x-xx-x 〇〇ビル 4F
機能デモ
作ろうと思ったきっかけ
Web ブラウザ標準のパスワード管理と比較して、このアプリを作成した理由は以下の通りです。
URL ベースの管理方法が気になる
Web ブラウザ標準のパスワード管理は、基本的に ログイン先の URL をベースとして、その対となるユーザ ID/パスワード（ログイン情報）を保持しています。
しかし、ログイン先の URL とログイン情報は必ずしも 1:1 とは限らず、実際は n:n です。
同サービスをアカウントを使い分けて利用する場合は 1:n になり、同アカウントでもログイン先の URL が複数ある場合は n:1 になります。
そのため、ログイン画面で多くのログイン情報が候補として表示されたり、知らずにログイン情報を二重に管理したりすることがあります。
気にしない方はいいと思いますが、私はそこが気になってしまいました。
そこで、URL ベースではなく、アカウントベースで管理したいと思い、このアプリで実現しようとしました。
メモ帳との使い分けがしたい
ログイン情報以外にも、メモ帳やその他テキストエディタでメモ書きをすることは何かとあります。
さらにその中で、頻繁にコピペする断片的な箇所があると思います。
私は、そのような箇所を都度選択してコピーするのが少し面倒くさいと思っていました。
そのため、頻繁に使う情報をまとめて管理し、ワンクリックでコピーできるようにすればほんの少し生産性が上がると思いました。
使いたいのは Web サービスに限らない
これが一番の目的かもしれません。
Web サービスだけでなく、デスクトップで動くサービスにもログインを求められることはあります。
先に書いた通り、Web ブラウザでログイン情報を管理すると URL ベースになってしまうため、適当な URL を指定しなければなりません。
これは少し面倒くさいです。
あとはパスワード管理のために Web ブラウザを立ち上げるというのが納得いきません。
デスクトップアプリでの管理が実現すれば、Web もデスクトップも関係ありません。
使用技術
デスクトップで動くアプリを作成したかったので、慣れている JS で書けるかつ windows/mac 両方に対応している electron を選びました。
また、学習の一環として、フロントエンドのメジャーなフレームワーク（React、Vue 等）を使用せずにアプリを作成しました。
CSS は少し楽をして、クラスの命名に時間を割かなくて済む tailwindcss を利用しました。
参考
公式ドキュメントはもちろんですが、開発者の皆様が書いてくださったドキュメントに大変助けられました。
特に sprout2000 さんと saki-engineering の以下ドキュメントには大変お世話になりました。
ありがとうございました。
終わりに
最後まで読んでいただきありがとうございました。
もし使ってみたい場合は、 keypick からインストールしていただけると嬉しいです。
また次回何かしら開発したら共有できればと思います。
Discussion