ブラウザだけで完結する、シンプルなパスワード生成・管理ツールを作りました。
自分用の実験ツールだったのですが、せっかくなので Qiita でも紹介しておきます。
・公開版はこちら
https://uni928.github.io/TestYou/index34.html
・HTML コードはこちら（単一 HTML ファイル）
https://github.com/uni928/TestYou/blob/main/index34.html
ブラウザ上で完結し、外部サーバーへの送信はありません。
IndexedDB にリアルタイム保存されるので、ブラウザを閉じても同じ状態から再開できます。
また、HTML ファイルをローカルに保存して開いてもそのまま動作します。
是非、HTML ファイルをローカルに保存し、コードに不審な処理（情報の抜き取りなど）が含まれていないか、ChatGPT などで確認した上でご利用ください。
このツールでやりたかったこと
・ブラウザだけで動くパスワード生成・簡易管理ツールが欲しい
・インストール不要、アカウント登録不要
・見た目はそこそこきれいにして、毎日触ってもストレスが少ない UI
・パスワードはある程度ルールを揃えたい（共通プレフィックス＋ランダム）
・万が一に備えてバックアップも取りたい
一般的なパスワードマネージャーほど高機能ではありませんが、
「ある程度割り切って、自分の用途にぴったり寄せたツールを作る」
というコンセプトで作っています。
サイトの URL と動作環境
・サイト本体
https://uni928.github.io/TestYou/index34.html
・コード（単一 HTML）
https://github.com/uni928/TestYou/blob/main/index34.html
どちらも特別なサーバーサイド処理は使っておらず、純粋な HTML + CSS + JavaScript だけで構成されています。
そのため、GitHub 上の index34.html をローカルに保存して、ブラウザで直接開くだけでも動作します。
例）
- 上記 GitHub リンクを開く
- 「Raw」などから HTML を保存
- 保存した index34.html をダブルクリックしてブラウザで開く
このように「ローカルに落としても動作する」という構成にしているので、
ネットワークにつながらない環境でも、ある程度は自己完結できます。
是非、HTML ファイルをローカルに保存し、コードに不審な処理（情報の抜き取りなど）が含まれていないか、ChatGPT などで確認した上でご利用ください。
どんなパスワードが生成されるか
このサイトでは、パスワードは次のルールで生成されます。
・先頭は必ず
Uni928_
・その後ろに、
小文字英字 / 大文字英字 / 数字
からランダムに 25 文字
・結果的に、
Uni928_XXXXXXXXXXXX...（合計 32 文字）
のような形式になります
ランダム部分の生成には、ブラウザの Crypto API（crypto.getRandomValues）を使っています。
完全に安全を保証するものではありませんが、Math.random だけを使うよりはマシな方向に寄せています。
画面構成と機能
左側：パスワード一覧
左側のカードでは、登録したパスワードの一覧を管理します。
1 エントリにつき、次の項目があります。
・タイトル
サービス名や用途などを自由に入力できます
例）ChatGPT、Google、ネットバンキング など
・URL
ログイン画面などの URL をメモしておけます
・自動生成パスワード
Uni928_ + ランダム 25 文字で生成されたパスワード
横の「コピー」ボタンでクリップボードにコピーできます
・コピー / 削除 / 並べ替えボタン
・コピーボタン：パスワード文字列をコピー
・削除ボタン：その行を削除（確認ダイアログあり）
・▲ ▼ ボタン：エントリの順序を上下に入れ替え
新しくパスワードを生成すると、リストの一番上に追加されるようにしています。
よく使うサービスの順に並べておくと、普段の運用が少し楽になります。
IndexedDB へのリアルタイム保存
このツールでは、入力した内容はすべてブラウザの IndexedDB に保存されます。
具体的には、次のようなタイミングで保存処理が走ります。
・タイトルを編集したとき
・URL を編集したとき
・新しいパスワードを生成したとき
・エントリを削除したとき
・▲ ▼ で並べ替えたとき
短い遅延（数百ミリ秒）を挟んで、連続操作でも無駄に書き込みが増えないように調整しています。
画面下部には、
・保存中…
・すべて保存済み
・保存エラー
などのステータス表示と、小さなインジケータが表示されます。
ブラウザを閉じた後、再度 https://uni928.github.io/TestYou/index34.html を開くと、
IndexedDB から状態を読み込み、前回の続きから再開します。
なお、この挙動はローカルに保存した index34.html を開いた場合も同様です。
同じブラウザ・同じファイルパスで開けば、過去の状態が復元されます。
エクスポート / インポート機能（バックアップ）
このツールの重要な前提として、
「登録の度にエクスポートしてバックアップを取っておく」
ことを強く推奨しています。
エクスポート
右側のカードには、バックアップ用の UI を用意しています。
・エクスポートボタン
押すと、現在の状態を JSON 形式でダウンロードします。
ファイル名は
uni928_backup_YYYYMMDD_HHMMSS.json
のような形式になります。
・JSON をコピーボタン
JSON 全体をテキストとしてクリップボードにコピーします。
テキストエリアにも同じ内容が表示されるので、メモアプリなどに保存しておくこともできます。
エクスポートされた JSON には、実際のパスワード情報に加えて、
「新しいパスワードを登録するたびにエクスポートして、安全な場所にバックアップしておくことをおすすめします。」
といった注意メッセージも含めています。
登録のたびにエクスポートを推奨している理由
あくまでブラウザ内（IndexedDB）に保存しているだけなので、
・ブラウザのキャッシュ・サイトデータを削除した
・シークレットウィンドウで使っていた
・ブラウザを再インストールした
・プロファイルを作り直した
・別の端末や別ブラウザからアクセスした
といったタイミングで、保存されていたデータが消えてしまう可能性があります。
そのため、本ツールでは「登録の度にエクスポート」を前提に設計しています。
新しくパスワードを追加したり、変更したりしたタイミングで、エクスポートして JSON をどこかに保管しておく運用を強くおすすめします。
インポート
バックアップしておいた JSON から、状態を復元することもできます。
・ファイルからインポート
以前ダウンロードした JSON ファイルを選択すると、現在のリストがバックアップ内容で上書きされます。
・テキストエリアからインポート
テキストエリアに JSON を貼り付け、「下のエリアからインポート」ボタンを押すと、同様に復元されます。
インポート時には「現在のリストは上書きされます」といった確認ダイアログを出しているので、
間違えて上書きしないように注意しつつ使ってください。
保存形式の例
会社のサーバー上にテキストファイルとして保存する場合は、下記のような内容が一例として考えられます。
https://uni928.github.io/TestYou/index34.html
{
"version": 1,
"exportedBy": "Uni928_ パスワード生成マネージャー",
"note": "このバックアップは Uni928_ パスワード生成サイトからエクスポートされたデータです。新しいパスワードを登録するたびにエクスポートして、安全な場所にバックアップしておくことを強くおすすめします。",
"exportedAt": "2025-11-28T03:09:14.825Z",
"items": [
{
"id": "id_miia5l5d_i7akq7",
"title": "aaa",
"url": "bbb",
"password": "Uni928_9EMmGrGhvbP97Nk35h59DQegF",
"createdAt": "2025-11-28T03:05:40.178Z"
},
{
"id": "id_mii9mmql_1zv5nv",
"title": "ccc",
"url": "ddd",
"password": "Uni928_6haK7fmRXZs52Ajfu68Fdw3Vt",
"createdAt": "2025-11-28T02:50:55.773Z"
}
]
}
保存形式については、用途に応じて各自工夫していただければ幸いです。
バックアップ JSON は、外部ストレージ・メモ帳アプリ・クラウドメモなど、
「ブラウザキャッシュに依存しない場所」に保管しておくと安心です。
ローカルに保存して使う場合
先ほど触れたとおり、このツールは単一の HTML ファイルで完結しています。
から index34.html を保存し、ローカルで開けば、GitHub Pages 版とほぼ同じように動作します。
・メリット
・ネットワークがオフラインでも使える
・自分の好きなディレクトリ構成で管理できる
・（必要であれば）自分でコードを編集してカスタマイズ可能
・注意点
・保存場所や開き方が変わると、IndexedDB 上は別のサイトとして扱われる場合があります
・つまり、同じファイルでも「別のパスにコピーしたもの」を開くと、空の状態として扱われることがあります
・そのため、ローカルで使う場合も、やはり「登録の度にエクスポートしておく」運用が重要です
技術的な実装メモ（ざっくり）
技術的には、次のような要素を組み合わせています。
・HTML + CSS だけでそれなりに見た目にこだわったカード UI
・JavaScript での状態管理（配列 items）
・IndexedDB を使ったシリアライズ（状態をまとめて 1 レコードに保存）
・保存のデバウンス処理（短時間の連続操作で無駄な書き込みを抑える）
・Crypto API によるランダム文字列生成
・クリップボード API（navigator.clipboard）によるコピー処理
・フォールバックとして document.execCommand("copy") も一応対応
・JSON エクスポート／インポート処理
シンプルな構成なので、パスワード部分を別の形式に変更したり、項目を増やしたりするのも比較的簡単です。
免責・クレームについて
最後に、とても重要な点です。
このツールは、個人が趣味で作成したものです。
できるだけ気をつけて実装していますが、
・本ツールを利用したことによる損害
・データ消失やバックアップの失敗
・第三者によるパスワードの不正利用
などに対して、作者は一切の責任を負いかねます。
特に、ブラウザの IndexedDB 上のデータは、
・ブラウザのキャッシュ削除
・ブラウザや OS の再インストール
・ブラウザプロファイルの変更
・シークレットウィンドウでの利用
などによって、予告なく消える可能性があります。
そのため、
「登録の度にエクスポートして、安全な場所にバックアップを取る」
という運用を徹底していただくことを大前提としています。
申し訳ありませんが、データが飛んでしまった場合のクレームや問い合わせには対応できません。
あくまで「自己責任で使う簡易ツール」という位置づけでご利用ください。
まとめ
・ブラウザだけで動く、Uni928_ プレフィックス付きパスワード生成ツールを作成
・IndexedDB にリアルタイム保存し、再起動後も状態を復元可能
・タイトル、URL、パスワード、コピー、削除、上下移動でシンプル管理
・JSON エクスポート／インポート対応でバックアップが取れる
・HTML ファイルをローカルに保存しても、そのまま動作する構成
・ただし、データ消失の可能性があるので、登録の度にエクスポートする運用を強く推奨
・データが飛んだ場合のクレームや責任は負えない前提のツール
もし気になった方は、ぜひ
を開いて、ブラウザ上で試してみてください。